separate out examples and landingpage generators, make new layout for… (

#1207)

_includes/doc.tsx

@@ -185,18 +185,22 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
           </div>
         </main>
 
-        <aside class="hidden xl:block pb-8 pr-8 col-span-2">
-          <div
-            class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
-            id="toc"
-          >
-            <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
-              {(props.toc as TableOfContentsItem_[]).map((item) => (
-                <TableOfContentsItem item={item} />
-              ))}
-            </ul>
-          </div>
-        </aside>
+        {(props.toc as TableOfContentsItem_[]).length > 0 &&
+          (
+            <aside class="hidden xl:block pb-8 pr-8 col-span-2">
+              <div
+                class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
+                id="toc"
+              >
+                <ul class="border-l border-foreground-tertiary dark:border-background-tertiary py-2 pl-2 relative">
+                  {(props.toc as TableOfContentsItem_[]).map((item) => (
+                    <TableOfContentsItem item={item} />
+                  ))}
+                </ul>
+              </div>
+            </aside>
+          )}
+
         <div class="xl:col-span-full">
           <props.comp.Footer />
         </div>

_includes/raw_with_sidebar.tsx

@@ -0,0 +1,118 @@
+import Logo from "../_components/Logo.tsx";
+import { Sidebar as Sidebar_, SidebarItem } from "../types.ts";
+import { NavigationButton } from "../_components/NavigationButton.tsx";
+import renderCommand from "./renderCommand.tsx";
+
+export const layout = "layout.tsx";
+
+export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
+  const sidebar = props.sidebar as Sidebar_;
+  const file = props.page.sourcePath;
+  if (sidebar === undefined) {
+    throw new Error("Missing sidebar for " + props.url);
+  }
+
+  function walk(
+    sidebarItems: SidebarItem[],
+  ): [SidebarItem[], number] | undefined {
+    for (let i = 0; i < sidebarItems.length; i++) {
+      const sidebarItem = sidebarItems[i];
+      if (typeof sidebarItem === "string") {
+        const data = props.search.data(sidebarItem)!;
+        if (!data) {
+          throw new Error(`No data found for ${sidebarItem}`);
+        }
+
+        if (data.url == props.url) {
+          return [sidebarItems, i];
+        }
+      } else if ("id" in sidebarItem && sidebarItem.id === props.url) {
+        return [sidebarItems, i];
+      } else if ("items" in sidebarItem) {
+        const results = walk(sidebarItem.items);
+        if (results) {
+          return results;
+        }
+      }
+    }
+  }
+
+  let parentNavigation: SidebarItem[] | undefined = undefined;
+  let index: number | undefined = undefined;
+  for (const sidebarElement of sidebar) {
+    const items = walk(sidebarElement.items);
+
+    if (items) {
+      [parentNavigation, index] = items;
+      break;
+    }
+  }
+
+  let renderedCommand = null;
+
+  if (props.command) {
+    const { rendered, toc } = renderCommand(props.command, helpers);
+    renderedCommand = rendered;
+    props.toc = toc.concat(...props.toc);
+  }
+
+  let isLearnHub = props.url.includes("learn");
+
+  return (
+    <>
+      <aside
+        class="flex flex-col absolute top-0 xl:top-16 bottom-0 -translate-x-74 xl:left-0 sidebar-open:translate-x-0 w-74 border-r border-foreground-tertiary bg-background-primary z-50 xl:z-0 xl:translate-x-0 transition-transform"
+        id="sidebar"
+        data-open="false"
+      >
+        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
+          <a class="flex items-center gap-3 mr-6" href="/">
+            <Logo />
+          </a>
+          <button
+            type="button"
+            aria-label="Close navigation bar"
+            id="sidebar-close"
+          >
+            <svg
+              viewBox="0 0 15 15"
+              width="16"
+              height="16"
+              class="text-foreground-secondary"
+            >
+              <g stroke="currentColor" stroke-width="1.2">
+                <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
+              </g>
+            </svg>
+          </button>
+        </div>
+        <props.comp.Sidebar
+          sidebar={sidebar}
+          search={props.search}
+          url={props.url}
+          headerPath={props.headerPath!}
+        />
+      </aside>
+      <div
+        class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
+        id="sidebar-cover"
+        data-open="false"
+      >
+      </div>
+      <div
+        class="absolute top-0 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 max-w-screen-2xl mx-auto"
+        style={{ scrollbarGutter: "stable" }}
+      >
+        <div
+          class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
+          style={{ scrollbarGutter: "stable" }}
+        >
+          {props.children}
+          <div class="xl:col-span-full">
+            <props.comp.Footer />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

learn/_pages/ExamplePage.tsx

@@ -2,8 +2,6 @@ import { CopyButton } from "../_components/CopyButton.tsx";
 import SnippetComponent from "../_components/SnippetComponent.tsx";
 import { ExampleFromFileSystem } from "../types.ts";
 
-export const layout = "doc.tsx";
-
 type Props = { example: ExampleFromFileSystem };
 
 export default function ExamplePage({ example }: Props) {

learn/index.examples.tsx

@@ -0,0 +1,33 @@
+import { walkSync } from "@std/fs/walk";
+import ExamplePage from "./_pages/ExamplePage.tsx";
+import { ExampleFromFileSystem } from "./types.ts";
+import { parseExample } from "./utils/parseExample.ts";
+import { sidebar as sidebar_ } from "./tutorials/_data.ts";
+
+export const layout = "raw_with_sidebar.tsx";
+
+export const sidebar = sidebar_;
+export const toc = [];
+
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
+  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
+
+  const examples = files.map((file) => {
+    const content = Deno.readTextFileSync(file.path);
+
+    return {
+      name: file.name,
+      content,
+      label: file.name.replace(".ts", ""),
+      parsed: parseExample(file.name, content),
+    } as ExampleFromFileSystem;
+  });
+
+  for (const example of examples) {
+    yield {
+      url: `/learn/examples/${example.label}/index.html`,
+      title: `${example.parsed.title} - Deno by Example`,
+      content: <ExamplePage example={example} />,
+    };
+  }
+}

learn/index.tsx

@@ -1,33 +1,10 @@
-import { walkSync } from "@std/fs/walk";
 import LandingPage from "./_pages/LandingPage.tsx";
-import ExamplePage from "./_pages/ExamplePage.tsx";
-import { ExampleFromFileSystem } from "./types.ts";
-import { parseExample } from "./utils/parseExample.ts";
 
 export const layout = "raw.tsx";
 
-export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
-  const files = [...walkSync("./learn/examples/", { exts: [".ts"] })];
-
-  const examples = files.map((file) => {
-    const content = Deno.readTextFileSync(file.path);
-
-    return {
-      name: file.name,
-      content,
-      label: file.name.replace(".ts", ""),
-      parsed: parseExample(file.name, content),
-    } as ExampleFromFileSystem;
-  });
-
-  for (const example of examples) {
-    yield {
-      url: `/learn/examples/${example.label}/index.html`,
-      title: `${example.parsed.title} - Deno by Example`,
-      content: <ExamplePage example={example} />,
-    };
-  }
+export const toc = [];
 
+export default function* (_data: Lume.Data, helpers: Lume.Helpers) {
   yield {
     url: `/learn/index.html`,
     title: `Learning Hub`,

learn/tutorials/_data.ts

@@ -728,7 +728,7 @@ export const sidebar = [
       },
     ],
   },
-] satisfies Sidebar;
+];
 
 export const sectionTitle = "Learning hub";
 export const sectionHref = "/learn/";