feat: SEO optimization

sidebars.ts

@@ -16,18 +16,6 @@ const sidebars: SidebarsConfig = {
     // By default, Docusaurus generates a sidebar from the docs folder structure
     tutorialSidebar: [{ type: "autogenerated", dirName: "." }]
 
-    // But you can create a sidebar manually
-    /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
 }
 
 export default sidebars

src/components/SEO.tsx

@@ -8,9 +8,10 @@ interface SEOProps {
     url?: string
     type?: "website" | "article"
     keywords?: string[]
+    structuredData?: Record<string, any>
 }
 
-export const SEO = ({ title, description, image, url, type = "website", keywords = [] }: SEOProps) => {
+export const SEO = ({ title, description, image, url, type = "website", keywords = [], structuredData }: SEOProps) => {
     const { siteConfig } = useDocusaurusContext()
 
     const pageTitle = title ? `${title} | ${siteConfig.title}` : siteConfig.title
@@ -41,6 +42,11 @@ export const SEO = ({ title, description, image, url, type = "website", keywords
             {/* Additional meta tags */}
             <meta name="robots" content="index, follow" />
             <link rel="canonical" href={pageUrl} />
+
+            {/* JSON-LD Structured Data */}
+            {structuredData && (
+                <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
+            )}
         </Head>
     )
 }

src/pages/about/index.tsx

@@ -7,6 +7,7 @@ import { SEO } from "@site/src/components/SEO"
 import { FeatureValueCard } from "@site/src/components/cards/FeatureValueCard"
 import { SEO_DATA } from "@site/src/constants"
 import { useImagePreload, getPageImages } from "@site/src/utils/imagePreloader"
+import { getPageStructuredData } from "@site/src/utils/structured-data"
 
 export default function AboutPage() {
     useImagePreload(getPageImages("about"))
@@ -16,6 +17,8 @@ export default function AboutPage() {
                 title={SEO_DATA.ABOUT_PAGE.TITLE}
                 description={SEO_DATA.ABOUT_PAGE.DESCRIPTION}
                 keywords={SEO_DATA.ABOUT_PAGE.KEYWORDS}
+                url="https://zkkit.org/about"
+                structuredData={getPageStructuredData("about")}
             />
             <AppPageLayoutWrapper className="flex flex-col gap-10 lg:gap-16">
                 <section className="flex flex-col gap-9">

src/pages/contribute/index.tsx

@@ -13,6 +13,7 @@ import { CardBase } from "@site/src/components/cards/CardBase"
 import { BulletPoint } from "@site/src/components/ui/BulletPoint"
 import { GITHUB_DATA, LINKS, SEO_DATA } from "@site/src/constants"
 import { useImagePreload, getPageImages } from "@site/src/utils/imagePreloader"
+import { getPageStructuredData } from "@site/src/utils/structured-data"
 
 const IssueData = () => {
     return (
@@ -36,6 +37,8 @@ export default function ContributePage() {
                 title={SEO_DATA.CONTRIBUTE_PAGE.TITLE}
                 description={SEO_DATA.CONTRIBUTE_PAGE.DESCRIPTION}
                 keywords={SEO_DATA.CONTRIBUTE_PAGE.KEYWORDS}
+                url="https://zkkit.org/contribute"
+                structuredData={getPageStructuredData("contribute")}
             />
 
             <AppPageLayoutWrapper>

src/pages/index.tsx

@@ -16,6 +16,7 @@ import { useProjects } from "../hooks/useProjects"
 import { ProjectCard } from "../components/cards/ProjectCard"
 import { useMediaQuery } from "react-responsive"
 import { useImagePreload, getPageImages } from "../utils/imagePreloader"
+import { getPageStructuredData } from "../utils/structured-data"
 
 const LanguageVectorMapping = {
     0: (
@@ -70,6 +71,8 @@ export default function HomePage(): ReactNode {
                 title={SEO_DATA.INDEX_PAGE.TITLE}
                 description={SEO_DATA.INDEX_PAGE.DESCRIPTION}
                 keywords={SEO_DATA.INDEX_PAGE.KEYWORDS}
+                url="https://zkkit.org/"
+                structuredData={getPageStructuredData("home")}
             />
             <AppPageLayoutWrapper>
                 <div className="flex flex-col gap-10 lg:gap-[140px]">

src/pages/projects/index.tsx

@@ -11,6 +11,7 @@ import { useProjects } from "@site/src/hooks/useProjects"
 import { Tag } from "@site/src/components/ui/Tag"
 import { useImagePreload, getPageImages } from "@site/src/utils/imagePreloader"
 import { useMediaQuery } from "react-responsive"
+import { getPageStructuredData } from "@site/src/utils/structured-data"
 
 export default function ProjectsPage() {
     useImagePreload(getPageImages("projects"))
@@ -34,6 +35,8 @@ export default function ProjectsPage() {
                 title={SEO_DATA.PROJECTS_PAGE.TITLE}
                 description={SEO_DATA.PROJECTS_PAGE.DESCRIPTION}
                 keywords={SEO_DATA.PROJECTS_PAGE.KEYWORDS}
+                url="https://zkkit.org/projects"
+                structuredData={getPageStructuredData("projects")}
             />
             <AppPageLayoutWrapper>
                 <div className="flex flex-col">

src/plugins/redirects.ts

@@ -0,0 +1,24 @@
+import type {LoadContext, Plugin} from '@docusaurus/types';
+
+export default function redirectPlugin(context: LoadContext): Plugin {
+  return {
+    name: 'docusaurus-plugin-client-redirects',
+    async contentLoaded({actions}) {
+      const {addRoute} = actions;
+
+      // Redirect old intro route to new introduction
+      addRoute({
+        path: '/docs/intro',
+        exact: true,
+        component: '@theme/DocPage',
+        routes: [{
+          path: '/docs/intro',
+          component: '@theme/DocRedirect',
+          exact: true,
+          redirect: '/docs/introduction/what-is-zk-kit',
+        }],
+      });
+    },
+  };
+}
+