hello world, again

docs/.vitepress/hooks/Template.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{ title: string; description?: string }>()
+</script>
+
+<template>
+  <span
+    tw="w-full h-full bg-black flex flex-col"
+    style="
+      background-image: linear-gradient(
+        43deg,
+        #b794f4 2%,
+        #b18df2 7.5%,
+        #ab87ef 13%,
+        #9f7aea 24%,
+        #8c6ee2 32%,
+        #7864d8 40%,
+        #4c51bf 56%,
+        #4949ae 60.5%,
+        #46419b 65%,
+        #3c366b 74%,
+        #2f315d 80.5%,
+        #272d47 87%,
+        #1a202c 100%
+      );
+    "
+  >
+    <span
+      tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between"
+    >
+      <span tw="w-full flex justify-between items-center text-5xl font-medium">
+        <span tw="flex items-center">
+          <span tw="text-zinc-100 ml-2 mt-1 font-semibold">
+            freemediaheckyeah
+          </span>
+        </span>
+      </span>
+      <span tw="w-full pr-56 flex flex-col items-start justify-end">
+        <span style="color: #f3f4f6" tw="text-6xl font-bold" v-html="title" />
+        <span style="color: #c0caf5" tw="mt-2 text-4xl" v-html="description" />
+      </span>
+    </span>
+  </span>
+</template>

docs/.vitepress/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Barrel generated using @taskylizard/tasker.
+ */
+
+export * from './meta'
+export * from './opengraph'
+export * from './rss'
+export * from './satoriConfig'

docs/.vitepress/hooks/meta.ts

@@ -0,0 +1,100 @@
+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 }],
+    ['meta', { property: 'og:url', content: url }],
+    ['meta', { name: 'twitter:url', content: url }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { property: 'og:title', content: pageData.frontmatter.title }],
+    ['meta', { name: 'twitter:title', content: pageData.frontmatter.title }]
+  )
+  if (pageData.frontmatter.description) {
+    head.push(
+      [
+        'meta',
+        {
+          property: 'og:description',
+          content: pageData.frontmatter.description
+        }
+      ],
+      [
+        '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`
+      .replaceAll('//', '/')
+      .replace(/^\//, '')
+
+    head.push(
+      ['meta', { property: 'og:image', content: `${hostname}/${imageUrl}` }],
+      ['meta', { property: 'og:image:width', content: '1200' }],
+      ['meta', { property: 'og:image:height', content: '628' }],
+      ['meta', { property: 'og:image:type', content: 'image/png' }],
+      [
+        'meta',
+        { property: 'og:image:alt', content: pageData.frontmatter.title }
+      ],
+      ['meta', { name: 'twitter:image', content: `${hostname}/${imageUrl}` }],
+      ['meta', { name: 'twitter:image:width', content: '1200' }],
+      ['meta', { name: 'twitter:image:height', content: '628' }],
+      [
+        '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
+}

docs/.vitepress/hooks/opengraph.ts

@@ -0,0 +1,96 @@
+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'
+import consola from 'consola'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const __fonts = resolve(__dirname, '../fonts')
+
+export async function generateImages(config: SiteConfig): Promise<void> {
+  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
+    })
+  }
+  return consola.info('Generated opengraph images.')
+}
+
+interface GenerateImagesOptions {
+  page: ContentData
+  template: string
+  outDir: string
+  fonts: SatoriOptions['fonts']
+}
+
+async function generateImage({
+  page,
+  template,
+  outDir,
+  fonts
+}: GenerateImagesOptions): Promise<void> {
+  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.slice(1), '__og_image__')
+  const outputFile = resolve(outputFolder, 'og.png')
+
+  await mkdir(outputFolder, { recursive: true })
+
+  await writeFile(outputFile, render.asPng())
+}

docs/.vitepress/hooks/rss.ts

@@ -0,0 +1,49 @@
+import path from 'node:path'
+import { writeFileSync } from 'node:fs'
+import { Feed } from 'feed'
+import {
+  createContentLoader,
+  type ContentData,
+  type SiteConfig
+} from 'vitepress'
+import consola from 'consola'
+import { meta } from '../constants'
+
+export async function generateFeed(config: SiteConfig): Promise<void> {
+  const feed: Feed = new Feed({
+    id: meta.hostname,
+    link: meta.hostname,
+    title: 'FMHY blog',
+    description: meta.description,
+    language: 'en-US',
+    image: 'https://github.com/fmhy.png',
+    favicon: `${meta.hostname}/favicon.ico`,
+    copyright: 'Copyright (c) 2023-present FMHY'
+  })
+
+  const posts: ContentData[] = await createContentLoader('posts/*.md', {
+    excerpt: true,
+    render: true,
+    transform: (rawData) => {
+      return rawData.sort((a, b) => {
+        return (
+          Number(new Date(b.frontmatter.date)) -
+          Number(new Date(a.frontmatter.date))
+        )
+      })
+    }
+  }).load()
+
+  for (const { url, frontmatter, html } of posts) {
+    feed.addItem({
+      title: frontmatter.title as string,
+      id: `${meta.hostname}${url.replace(/\/\d+\./, '/')}`,
+      link: `${meta.hostname}${url.replace(/\/\d+\./, '/')}`,
+      date: frontmatter.date,
+      content: html?.replaceAll('&ZeroWidthSpace;', '')
+    })
+  }
+
+  writeFileSync(path.join(config.outDir, 'feed.rss'), feed.rss2())
+  return consola.info('Generated rss feed.')
+}

docs/.vitepress/hooks/satoriConfig.ts

@@ -0,0 +1,47 @@
+import { readFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { SatoriOptions } from 'x-satori/vue'
+import { 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'
+  }
+})