get title in page

mixpanel · Oct 9, 2024 · 8a0f89f · 8a0f89f
1 parent a1f6dfe
commit 8a0f89f
Showing 1 changed file with 43 additions and 32 deletions.
diff --git a/theme.config.tsx b/theme.config.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode } from "react";
-import { DocsThemeConfig } from "nextra-theme-docs";
+import { useRouter } from 'next/router'
+import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 import Search from "./components/Search/Search";
 import MixpanelLogoWordmark from "./components/svg/MixpanelLogoWordmark";
 import MainContent from "./components/MainContent/MainContent";
@@ -17,34 +18,47 @@ const config: DocsThemeConfig = {
     defaultTheme: `system`,
   },
   docsRepositoryBase: "https://github.com/mixpanel/docs/tree/main",
-  head: (
-    <>
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href={`https://cdn.mxpnl.com/marketing-site/static/favicons/apple-touch-icon.png`}
-      />
-      <link
-        rel="icon"
-        sizes="16x16"
-        href="https://cdn.mxpnl.com/marketing-site/static/favicons/favicon-16x16.png"
-        type="image/png"
-      />
-      <link
-        rel="icon"
-        sizes="32x32"
-        href="https://cdn.mxpnl.com/marketing-site/static/favicons/favicon-32x32.png"
-        type="image/png"
-      />
-      <link
-        rel="mask-icon"
-        href={`https://cdn.mxpnl.com/marketing-site/static/favicons/safari-pinned-tab.svg`}
-        color="#7856ff"
-      />
-      <meta name="msapplication-TileColor" content="#ffffff" />
-      <meta name="theme-color" content="#ffffff" />
-    </>
-  ),
+  head() {
+    const { asPath } = useRouter();
+    const { title } = useConfig();
+    const url = `https://docs.mixpanel.com${asPath}`;
+
+    return (
+      <>
+        <title>{title} - Mixpanel Docs</title>
+        <meta property="og:url" content={url} />
+        <meta property="og:title" content={`${title} - Mixpanel Docs`} />
+        <meta
+          property="og:description"
+          content={`Read more about Mixpanel documentation`}
+        />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href={`https://cdn.mxpnl.com/marketing-site/static/favicons/apple-touch-icon.png`}
+        />
+        <link
+          rel="icon"
+          sizes="16x16"
+          href="https://cdn.mxpnl.com/marketing-site/static/favicons/favicon-16x16.png"
+          type="image/png"
+        />
+        <link
+          rel="icon"
+          sizes="32x32"
+          href="https://cdn.mxpnl.com/marketing-site/static/favicons/favicon-32x32.png"
+          type="image/png"
+        />
+        <link
+          rel="mask-icon"
+          href={`https://cdn.mxpnl.com/marketing-site/static/favicons/safari-pinned-tab.svg`}
+          color="#7856ff"
+        />
+        <meta name="msapplication-TileColor" content="#ffffff" />
+        <meta name="theme-color" content="#ffffff" />
+      </>
+    );
+  },
   feedback: {
     content: "Question? Contact our Support Team",
     useLink: () => "https://mixpanel.com/get-support",
@@ -55,9 +69,6 @@ const config: DocsThemeConfig = {
   logo: <MixpanelLogoWordmark width={125} />,
   logoLink: "https://mixpanel.com/home/",
   main: MainContent,
-  // useNextSeoProps: () => ({
-  //   titleTemplate: "%s - Mixpanel Docs",
-  // }),
   search: {
     component: Search,
   },