docs: custom head and descriptions

samrith-s · Jan 1, 2025 · dbae0d6 · dbae0d6
1 parent 15616ab
commit dbae0d6
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 41 deletions.
diff --git a/docs/astro.config.ts b/docs/astro.config.ts
@@ -3,12 +3,10 @@ import starlight from "@astrojs/starlight";
 
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
-import vercelStatic from "@astrojs/vercel/static";
+import vercelStatic from "@astrojs/vercel";
 
 import { defineConfig } from "astro/config";
 
-import { meta } from "./meta.config";
-
 const SITE = "https://genshi.samrith.dev";
 
 // https://astro.build/config
@@ -24,7 +22,7 @@ export default defineConfig({
   integrations: [
     starlight({
       title: "Genshi",
-      head: meta(SITE),
+      // head: meta(SITE),
       pagination: true,
       titleDelimiter: "/",
       description:
@@ -55,6 +53,9 @@ export default defineConfig({
         },
       ],
       customCss: ["./src/tailwind.css", "@fontsource-variable/inter"],
+      components: {
+        Head: "./src/overrides/Head.astro",
+      },
     }),
     tailwind({ applyBaseStyles: false }),
     react(),

diff --git a/docs/meta.config.ts b/docs/meta.config.ts
diff --git a/docs/public/robots.txt b/docs/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/docs/src/constants.ts b/docs/src/constants.ts
@@ -0,0 +1 @@
+export const SITE = "https://genshi.samrith.dev";
diff --git a/docs/src/content/docs/guides/typescript.mdx b/docs/src/content/docs/guides/typescript.mdx
@@ -1,6 +1,5 @@
 ---
 title: TypeScript
-description: Making your Genshi store type-safe with TypeScript
 prev: false
 sidebar:
   order: -2

diff --git a/docs/src/content/docs/guides/using-with-other-libraries.mdx b/docs/src/content/docs/guides/using-with-other-libraries.mdx
@@ -1,6 +1,5 @@
 ---
 title: Using with other libraries
-description: Learn how to use Genshi with other libraries
 next: false
 sidebar:
   order: 100

diff --git a/docs/src/content/docs/guides/using-with-react.mdx b/docs/src/content/docs/guides/using-with-react.mdx
@@ -1,6 +1,5 @@
 ---
 title: Using with React
-description: Learn how to use Genshi with React
 sidebar:
   order: -1
 ---

diff --git a/docs/src/content/docs/project/core-concepts.mdx b/docs/src/content/docs/project/core-concepts.mdx
@@ -1,6 +1,5 @@
 ---
 title: Core concepts
-description: The core concepts of Genshi which make it unique.
 sidebar:
   order: 0
 ---

diff --git a/docs/src/content/docs/project/introduction.mdx b/docs/src/content/docs/project/introduction.mdx
@@ -1,6 +1,5 @@
 ---
 title: Introduction
-description: Manage your application state effectively with Genshi
 sidebar:
   order: -1
 ---

diff --git a/docs/src/content/docs/project/usage.mdx b/docs/src/content/docs/project/usage.mdx
@@ -1,6 +1,5 @@
 ---
 title: Getting Started
-description: Start using Genshi in your JavaScript project.
 next: false
 sidebar:
   order: 0

diff --git a/docs/src/content/docs/reference/package-core.mdx b/docs/src/content/docs/reference/package-core.mdx
@@ -1,6 +1,5 @@
 ---
 title: Core
-description: API reference for the core package
 prev: false
 next: false
 sidebar:

diff --git a/docs/src/content/docs/reference/package-react.mdx b/docs/src/content/docs/reference/package-react.mdx
@@ -1,6 +1,5 @@
 ---
 title: React
-description: API reference for the React package
 prev: false
 next: false
 sidebar:

diff --git a/docs/src/overrides/head.astro b/docs/src/overrides/head.astro
@@ -0,0 +1,44 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+
+import { SITE } from "../constants";
+
+const {
+  entry: { id, data },
+} = Astro.props;
+
+const BASE_TITLE = "Genshi";
+const DESCRIPTION =
+  "Simple, composable and effective state management for JavaScript";
+const META_IMAGE = `${SITE}/banner.png`;
+
+let title = data.title;
+
+if (!id) {
+  title = `${BASE_TITLE} - ${DESCRIPTION}`;
+} else {
+  title = `${title} / ${BASE_TITLE}`;
+}
+---
+
+<!-- HTML Meta Tags -->
+<title>{title}</title>
+<link rel="sitemap" href="/sitemap-index.xml" />
+<meta name="description" content={DESCRIPTION} />
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content={SITE} />
+<meta property="og:type" content="website" />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={DESCRIPTION} />
+<meta property="og:image" content={META_IMAGE} />
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta property="twitter:domain" content="genshi.samrith.dev" />
+<meta property="twitter:url" content={SITE} />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={DESCRIPTION} />
+<meta name="twitter:image" content={META_IMAGE} />
+
+<slot />
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -6,8 +6,7 @@ import { Card, CardGrid } from "@astrojs/starlight/components";
 
 <StarlightPage
   frontmatter={{
-    title: "Welcome",
-    description: "Simple, composable and effective state management",
+    title: "Genshi - Simple, composable and effective state management",
     template: "splash",
     hero: {
       title: "Robust state management for your app that scales with you.",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const SITE = "https://genshi.samrith.dev";