docs: custom head and descriptions

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(),

docs/package.json

@@ -1,7 +1,9 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.0",
+  "license": "UNLICENSED",
+  "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -36,5 +38,6 @@
     "eslint-plugin-astro": "~1.3.1",
     "prettier-plugin-astro": "~0.14.1",
     "typescript": "~5.7.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }

docs/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

docs/src/constants.ts

@@ -0,0 +1 @@
+export const SITE = "https://genshi.samrith.dev";

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

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

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
 ---

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
 ---

docs/src/content/docs/project/introduction.mdx

@@ -1,6 +1,5 @@
 ---
 title: Introduction
-description: Manage your application state effectively with Genshi
 sidebar:
   order: -1
 ---

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

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:

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:

docs/src/overrides/head.astro

@@ -0,0 +1,45 @@
+---
+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="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+<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 />

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.",

package.json

@@ -5,6 +5,7 @@
   "author": "Samrith Shankar <[email protected]>",
   "license": "MIT",
   "homepage": "https://github.com/samrith-s/genshi#readme",
+  "private": true,
   "type": "module",
   "source": "src/index.ts",
   "module": "lib/index.js",
@@ -59,5 +60,5 @@
     "vite-plugin-dts": "~3.9.1",
     "vitest": "~1.6.0"
   },
-  "packageManager": "yarn@4.5.3"
+  "packageManager": "yarn@4.6.0"
 }