feat: add og tags

.github/workflows/deploy_docs.yml

@@ -36,18 +36,23 @@ jobs:
         uses: pnpm/action-setup@v4 # Uncomment this if you're using pnpm
         with:
           version: 8
+
       # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: pnpm # or pnpm / yarn
+
       - name: Setup Pages
         uses: actions/configure-pages@v4
+
       - name: Install dependencies
         run: pnpm i # or pnpm install / yarn install / bun install
+
       - name: Build with VitePress
         run: pnpm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

docs/.vitepress/config.mts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vitepress";
+import { defineConfig, HeadConfig } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -31,17 +31,34 @@ export default defineConfig({
       {
         text: "Task",
         collapsed: false,
-        items: [
-          { text: "Roadmap", link: "/roadmap" },
-        ],
+        items: [{ text: "Roadmap", link: "/roadmap" }],
       },
     ],
 
-    socialLinks: [
-      { icon: "github", link: "https://github.com/mukezhz/geng" },
-    ],
+    socialLinks: [{ icon: "github", link: "https://github.com/mukezhz/geng" }],
     search: {
       provider: "local",
     },
   },
+  transformHead: ({ pageData }) => {
+    const head: HeadConfig[] = [];
+    const title = pageData.frontmatter.title || "GenG";
+    const description =
+      pageData.frontmatter.description ||
+      "GENG - A tool to generate golang web project.";
+    const ogImage =
+      pageData.frontmatter.ogImage ||
+      "https://github.com/mukezhz/geng/assets/43813670/da07d8cc-8896-4a13-9b31-099958e65cb4";
+
+    head.push(["meta", { property: "og:title", content: title }]);
+    head.push(["meta", { property: "og:description", content: description }]);
+    head.push(["meta", { property: "og:image", content: ogImage }]);
+
+    head.push(["meta", { name: "twitter:card", content: "geng" }]);
+    head.push(["meta", { name: "twitter:image", content: ogImage }]);
+    head.push(["meta", { name: "twitter:title", content: title }]);
+    head.push(["meta", { name: "twitter:description", content: description }]);
+
+    return head;
+  },
 });

docs/getting-started.md

@@ -1,5 +1,7 @@
 ---
 outline: deep
+title: getting started of geng
+description: learn how to install geng in detail.
 ---
 
 # Getting Started