add open graph tags

Source: <https://ogp.me/>
FartLabs · Mar 27, 2024 · dce07dd · dce07dd
1 parent 8395bbb
commit dce07dd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/components/doc/doc.tsx b/components/doc/doc.tsx
@@ -9,7 +9,12 @@ export default async function DocumentationPage(request: Request) {
   const content = contentOf(request);
   const playground = await playgroundOf(content.playground);
   return (
-    <DocContent body={content.body} toc={content.toc} playground={playground} />
+    <DocContent
+      title={content.title}
+      body={content.body}
+      toc={content.toc}
+      playground={playground}
+    />
   );
 }
 

diff --git a/components/doc/doc_content.tsx b/components/doc/doc_content.tsx
@@ -8,6 +8,11 @@ import Hljs from "#/components/hljs.tsx";
  * DocContentProps are the properties for the DocContent component.
  */
 export interface DocContentProps {
+  /**
+   * title is the title of the documentation page.
+   */
+  title?: string;
+
   /**
    * body is the html content of the documentation page.
    */
@@ -31,12 +36,16 @@ export interface DocContentProps {
  * DocContent is the content of a jsonx documentation page.
  */
 export default function DocContent(props: DocContentProps) {
+  const title = `jsonx | ${props.title ?? "Documentation"}`;
   return (
     <>
       <Head>
+        <title>{title}</title>
+        <meta property="og:title" content={title} />
+        <link rel="stylesheet" href="/md.css" />
+
         <Hljs id="github" />
         <script src="/copy.js" defer></script>
-        <link rel="stylesheet" href="/md.css" />
       </Head>
 
       <aside class="aside">

diff --git a/lib/docs/fs.ts b/lib/docs/fs.ts
@@ -29,6 +29,11 @@ export interface Content {
    */
   body: string;
 
+  /**
+   * title is the title of the content.
+   */
+  title?: string;
+
   /**
    * toc is the HTML table of contents of the content.
    */
@@ -121,7 +126,7 @@ export async function readFSItems(
     const { body, toc } = renderMd(md);
     contents.set(
       name.join(NAME_SEPARATOR),
-      { md, body, toc, playground },
+      { md, body, title, toc, playground },
     );
 
     // Store the item in the items array.

diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -10,13 +10,13 @@ export default function App({ Component, url }: PageProps) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>jsonx | Documentation</title>
+        <meta property="og:title" content="jsonx | Documentation" />
+        <meta property="og:description" content="Learn how to use jsonx." />
         <link rel="stylesheet" href="/global.css" />
       </head>
       <body>
         <Nav path={toPath(url.pathname)} />
-
         <Component />
-
         <Foot />
       </body>
     </html>