feat: redesign website

privateersclub · Oct 30, 2024 · 6fdd4d2 · 6fdd4d2
1 parent e695c12
commit 6fdd4d2
Show file tree

Hide file tree

Showing 11 changed files with 442 additions and 574 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 node_modules
 logos
 package-lock.json
+docs/.vitepress/.temp
diff --git a/docs/.vitepress/hooks/meta.ts b/docs/.vitepress/hooks/meta.ts
@@ -3,95 +3,121 @@ import type { HeadConfig, TransformContext } from 'vitepress'
 export function generateMeta(context: TransformContext, hostname: string) {
   const head: HeadConfig[] = []
   const { pageData } = context
+  if (pageData.isNotFound || pageData.frontmatter.exclude) return head
+  const { relativePath, frontmatter, filePath, lastUpdated } = pageData
 
-  const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2')}`
+  // Guard clause for relativePath
+  if (!relativePath) {
+    console.error('relativePath is undefined for file:', filePath)
+    return head
+  }
+
+  const url = `${hostname}/${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 }]
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }]
   )
-  if (pageData.frontmatter.description) {
-    head.push(
-      [
-        'meta',
-        {
-          property: 'og:description',
-          content: pageData.frontmatter.description
-        }
-      ],
-      [
-        'meta',
-        {
-          name: 'twitter:description',
-          content: pageData.frontmatter.description
-        }
-      ]
-    )
+
+  if (frontmatter.theme) {
+    head.push(['meta', { name: 'theme-color', content: frontmatter.theme }])
+  }
+
+  if (frontmatter.type) {
+    head.push(['meta', { property: 'og:type', content: frontmatter.type }])
   }
-  if (pageData.frontmatter.image) {
+
+  head.push(
+    [
+      'meta',
+      {
+        property: 'og:description',
+        content:
+          frontmatter.customDescription ??
+          frontmatter.description ??
+          frontmatter.hero.tagline
+      }
+    ],
+    [
+      'meta',
+      {
+        name: 'twitter:description',
+        content:
+          frontmatter.customDescription ??
+          frontmatter.description ??
+          frontmatter.hero.tagline
+      }
+    ],
+    ['meta', { property: 'og:title', content: frontmatter.title }],
+    ['meta', { name: 'twitter:title', content: frontmatter.title }]
+  )
+
+  if (frontmatter.image) {
     head.push([
       'meta',
       {
         property: 'og:image',
-        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, '')}`
+        content: `${hostname}/${frontmatter.image.replace(/^\//, '')}`
       }
     ])
     head.push([
       'meta',
       {
         name: 'twitter:image',
-        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, '')}`
+        content: `${hostname}/${frontmatter.image.replace(/^\//, '')}`
       }
     ])
   } else {
-    const url = pageData.filePath.replace('index.md', '').replace('.md', '')
-    const imageUrl = `${url}/__og_image__/og.png`
-      .replaceAll('//', '/')
+    const basePath = relativePath.replace(/index\.md$/, '').replace(/\.md$/, '')
+    const imageUrl = `${basePath}__og_image__/og.png`
+      .replace(/\/\//g, '/')
       .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 }
+      { property: 'og:image', content: `${hostname}/${imageUrl}` }
+    ])
+    head.push(['meta', { property: 'og:image:width', content: '1098' }])
+    head.push(['meta', { property: 'og:image:height', content: '530' }])
+    head.push(['meta', { property: 'og:image:type', content: 'image/png' }])
+    head.push([
+      'meta',
+      { property: 'og:image:alt', content: frontmatter.title }
+    ])
+    head.push([
+      'meta',
+      { name: 'twitter:image', content: `${hostname}/${imageUrl}` }
+    ])
+    head.push(['meta', { name: 'twitter:image:width', content: '1098' }])
+    head.push(['meta', { name: 'twitter:image:height', content: '530' }])
+    head.push([
+      'meta',
+      { name: 'twitter:image:alt', content: frontmatter.title }
     ])
   }
-  if (pageData.frontmatter.date) {
+
+  if (frontmatter.tag) {
+    head.push(['meta', { property: 'article:tag', content: frontmatter.tag }])
+  }
+
+  if (frontmatter.date) {
     head.push([
       'meta',
       {
         property: 'article:published_time',
-        content: pageData.frontmatter.date
+        content: frontmatter.date
       }
     ])
   }
-  if (pageData.lastUpdated && pageData.frontmatter.lastUpdated !== false) {
+
+  if (lastUpdated && pageData.frontmatter.lastUpdated !== false) {
     head.push([
       'meta',
       {
         property: 'article:modified_time',
-        content: new Date(pageData.lastUpdated).toISOString()
+        content: new Date(lastUpdated).toISOString()
       }
     ])
   }

diff --git a/docs/.vitepress/shared.ts b/docs/.vitepress/shared.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vitepress'
 import UnoCSS from 'unocss/vite'
-import { presetUno, presetIcons } from 'unocss'
+import { presetUno, presetIcons, transformerDirectives } from 'unocss'
 import { generateMeta } from './hooks/meta'
 import { generateImages } from './hooks/opengraph'
 import {
@@ -11,6 +11,25 @@ import {
   GitChangelog,
   GitChangelogMarkdownSection
 } from '@nolebase/vitepress-plugin-git-changelog/vite'
+import coloradix, { gray, mint, blue, yellow, red } from '@coloradix/unocss'
+
+const radix = coloradix({
+  gray,
+  mint,
+  blue,
+  yellow,
+  red
+})
+  .alias({
+    neutral: 'gray',
+    primary: 'mint',
+    warning: 'yellow',
+    danger: 'red',
+    info: 'blue'
+  })
+  .build({
+    selector: 'class'
+  })
 
 export const sharedConfig = defineConfig({
   title: 'privateersclub/wiki',
@@ -77,7 +96,12 @@ export const sharedConfig = defineConfig({
               'vertical-align': 'middle'
             }
           })
-        ]
+        ],
+        transformers: [transformerDirectives()],
+        theme: {
+          colors: radix.colors
+        },
+        preflights: [radix.preflight]
       })
     ]
   },