🎉 New website!

.vitepress/hooks/Template.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ title: string; description?: string }>();
+</script>
+
+<template>
+  <div
+    tw="w-full h-full bg-black flex flex-col"
+    style="background-image: url(https://files.catbox.moe/1f84dy.png)">
+    <div tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between">
+      <div tw="w-full flex justify-between items-center text-5xl font-medium">
+        <div tw="flex items-center">
+          <div tw="text-zinc-100 ml-2 mt-1 font-semibold">freemediaheckyeah</div>
+        </div>
+      </div>
+      <div tw="w-full pr-56 flex flex-col items-start justify-end">
+        <div style="color: #f3f4f6" tw="text-6xl font-bold" v-html="title" />
+        <div style="color: #c0caf5" tw="mt-2 text-4xl" v-html="description" />
+      </div>
+    </div>
+    <div tw="shrink-0 h-2 w-full flex" style="background-color: #c4b5fd" />
+  </div>
+</template>

.vitepress/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Barrel generated using @taskylizard/tasker.
+ */
+
+export * from "./meta";
+export * from "./opengraph";

.vitepress/hooks/meta.ts

@@ -0,0 +1,84 @@
+import type { HeadConfig, TransformContext } from "vitepress";
+
+export function generateMeta(context: TransformContext, hostname: string) {
+  const head: HeadConfig[] = [];
+  const { pageData } = context;
+
+  const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2")}`;
+
+  head.push(["link", { rel: "canonical", href: url }]);
+  head.push(["meta", { property: "og:url", content: url }]);
+  head.push(["meta", { name: "twitter:url", content: url }]);
+  head.push(["meta", { name: "twitter:card", content: "summary_large_image" }]);
+
+  head.push(["meta", { property: "og:title", content: pageData.frontmatter.title }]);
+  head.push(["meta", { name: "twitter:title", content: pageData.frontmatter.title }]);
+
+  head.push([
+    "meta",
+    {
+      property: "og:description",
+      content: pageData.frontmatter.description,
+    },
+  ]);
+  head.push([
+    "meta",
+    {
+      name: "twitter:description",
+      content: pageData.frontmatter.description,
+    },
+  ]);
+
+  if (pageData.frontmatter.image) {
+    head.push([
+      "meta",
+      {
+        property: "og:image",
+        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
+      },
+    ]);
+    head.push([
+      "meta",
+      {
+        name: "twitter:image",
+        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
+      },
+    ]);
+  } else {
+    const url = pageData.filePath.replace("index.md", "").replace(".md", "");
+    const imageUrl = `${url}/__og_image__/og.png`.replace(/\/\//g, "/").replace(/^\//, "");
+
+    head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]);
+    head.push(["meta", { property: "og:image:width", content: "1200" }]);
+    head.push(["meta", { property: "og:image:height", content: "628" }]);
+    head.push(["meta", { property: "og:image:type", content: "image/png" }]);
+    head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }]);
+    head.push(["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }]);
+    head.push(["meta", { name: "twitter:image:width", content: "1200" }]);
+    head.push(["meta", { name: "twitter:image:height", content: "628" }]);
+    head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }]);
+  }
+  if (pageData.frontmatter.tag) {
+    head.push(["meta", { property: "article:tag", content: pageData.frontmatter.tag }]);
+  }
+  if (pageData.frontmatter.date) {
+    head.push([
+      "meta",
+      {
+        property: "article:published_time",
+        content: pageData.frontmatter.date,
+      },
+    ]);
+  }
+  if (pageData.lastUpdated && pageData.frontmatter.lastUpdated !== false) {
+    head.push([
+      "meta",
+      {
+        property: "article:modified_time",
+        content: new Date(pageData.lastUpdated).toISOString(),
+      },
+    ]);
+  }
+
+  return head;
+}

.vitepress/hooks/opengraph.ts

@@ -0,0 +1,89 @@
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createContentLoader } from "vitepress";
+import type { ContentData, SiteConfig } from "vitepress";
+import { type SatoriOptions, satoriVue } from "x-satori/vue";
+import { renderAsync } from "@resvg/resvg-js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const __fonts = resolve(__dirname, "../fonts");
+
+export async function generateImages(config: SiteConfig) {
+  const pages = await createContentLoader("**/*.md", { excerpt: true }).load();
+  const template = await readFile(resolve(__dirname, "./Template.vue"), "utf-8");
+
+  const fonts: SatoriOptions["fonts"] = [
+    {
+      name: "Inter",
+      data: await readFile(resolve(__fonts, "Inter-Regular.otf")),
+      weight: 400,
+      style: "normal",
+    },
+    {
+      name: "Inter",
+      data: await readFile(resolve(__fonts, "Inter-Medium.otf")),
+      weight: 500,
+      style: "normal",
+    },
+    {
+      name: "Inter",
+      data: await readFile(resolve(__fonts, "Inter-SemiBold.otf")),
+      weight: 600,
+      style: "normal",
+    },
+    {
+      name: "Inter",
+      data: await readFile(resolve(__fonts, "Inter-Bold.otf")),
+      weight: 700,
+      style: "normal",
+    },
+  ];
+
+  for (const page of pages) {
+    await generateImage({
+      page,
+      template,
+      outDir: config.outDir,
+      fonts,
+    });
+  }
+}
+
+interface GenerateImagesOptions {
+  page: ContentData;
+  template: string;
+  outDir: string;
+  fonts: SatoriOptions["fonts"];
+}
+
+async function generateImage({ page, template, outDir, fonts }: GenerateImagesOptions) {
+  const { frontmatter, url } = page;
+
+  const options: SatoriOptions = {
+    width: 1200,
+    height: 628,
+    fonts,
+    props: {
+      title:
+        frontmatter.layout === "home"
+          ? frontmatter.hero.name ?? frontmatter.title
+          : frontmatter.title,
+      description:
+        frontmatter.layout === "home"
+          ? frontmatter.hero.tagline ?? frontmatter.description
+          : frontmatter.description,
+    },
+  };
+
+  const svg = await satoriVue(options, template);
+
+  const render = await renderAsync(svg);
+
+  const outputFolder = resolve(outDir, url.substring(1), "__og_image__");
+  const outputFile = resolve(outputFolder, "og.png");
+
+  await mkdir(outputFolder, { recursive: true });
+
+  return await writeFile(outputFile, render.asPng());
+}

.vitepress/hooks/satoriConfig.ts

@@ -0,0 +1,45 @@
+import { readFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { SatoriOptions, defineSatoriConfig } from "x-satori/vue";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const __fonts = resolve(__dirname, "../fonts");
+
+const fonts: SatoriOptions["fonts"] = [
+  {
+    name: "Inter",
+    data: await readFile(resolve(__fonts, "Inter-Regular.otf")),
+    weight: 400,
+    style: "normal",
+  },
+  {
+    name: "Inter",
+    data: await readFile(resolve(__fonts, "Inter-Medium.otf")),
+    weight: 500,
+    style: "normal",
+  },
+  {
+    name: "Inter",
+    data: await readFile(resolve(__fonts, "Inter-SemiBold.otf")),
+    weight: 600,
+    style: "normal",
+  },
+  {
+    name: "Inter",
+    data: await readFile(resolve(__fonts, "Inter-Bold.otf")),
+    weight: 700,
+    style: "normal",
+  },
+];
+
+export default defineSatoriConfig({
+  width: 1200,
+  height: 628,
+  fonts,
+  props: {
+    title: "Title",
+    description:
+      "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.",
+    dir: "/j",
+  },
+});