Add titles from toc. (#204)

deco-sites · Nov 2, 2023 · 5aecc84 · 5aecc84
1 parent 0a6925b
commit 5aecc84
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/components/ui/Types.tsx b/components/ui/Types.tsx
@@ -5,6 +5,7 @@ export interface MDFileContent {
    * @format textarea
    */
   content: string;
+  title?: string;
 }
 
 export interface Template {

diff --git a/loaders/denoLoader.ts b/loaders/denoLoader.ts
@@ -1,6 +1,7 @@
 import { MDFileContent } from "deco-sites/starting/components/ui/Types.tsx";
 import type { LoaderContext } from "deco/types.ts";
 import { redirect } from "deco/mod.ts";
+import { getTitleForPost } from "deco-sites/starting/docs/toc.ts";
 
 /** @title {{{path}}} */
 export interface Doc {
@@ -9,6 +10,7 @@ export interface Doc {
    * @format textarea
    */
   content: string;
+  title?: string;
 }
 
 const loader = async (
@@ -38,11 +40,11 @@ const loader = async (
   const doc = props.docs?.find((doc) => doc.path === slug);
 
   if (doc) {
-    return { content: doc.content };
+    return { content: doc.content, title: doc.title };
   }
 
   const fileContent = await Deno.readTextFile(url);
-  return { content: fileContent };
+  return { content: fileContent, title: getTitleForPost(language, documentSlug) };
 };
 
 export default loader;
diff --git a/sections/CustomizableContent.tsx b/sections/CustomizableContent.tsx
@@ -89,7 +89,7 @@ export default function CustomizableMarkdownContent(
       </Head>
       {matchCustom?.content
         ? matchCustom.content.map((c) => <c.Component {...c.props} />)
-        : <MarkdownContent data={{ content: props.data.content }} />}
+        : <MarkdownContent data={{ ...props.data }} />}
     </>
   );
 }
diff --git a/sections/MarkdownContent.tsx b/sections/MarkdownContent.tsx
@@ -29,10 +29,14 @@ export default function DocsPage(
   if (attrs?.description) {
     description = String(attrs.description);
   }
-
   return (
     <>
       <Head>
+        <title>
+          {props.data.title
+            ? `${props.data.title} | deco.cx docs`
+            : "deco.cx docs"}
+        </title>
         <link rel="stylesheet" href={`/gfm.css`} />
         {description && <meta name="description" content={description} />}
         <style
@@ -80,8 +84,13 @@ export default function DocsPage(
         </style>
       </Head>
       <div class="flex flex-col min-h-screen">
-        <div class="flex-1">
-          <div class="mx-auto max-w-screen-lg px-4 flex gap-6">
+        <div class="flex-1 px-4">
+          {props.data.title && (
+            <h1 class="text-neutral-900 text-[40px] font-semibold leading-[48px]">
+              {props.data.title}
+            </h1>
+          )}
+          <div class="mx-auto max-w-screen-lg flex gap-6">
             <Content content={frontMatterContent} />
           </div>
         </div>
@@ -99,7 +108,7 @@ function Content(props: MDContent) {
   );
 
   return (
-    <main class="py-6 overflow-hidden">
+    <main class="py-2 overflow-hidden">
       {attrs.since && (
         <span class="bg-gray-100 text-gray-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300">
           Version: {attrs.since}