Add recipe TOC

src/lib/layouts/Recipe.svelte

@@ -0,0 +1,74 @@
+<script>
+  import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
+  import { categories } from '$lib/stores/recipes';
+  import { page } from '$app/stores';
+
+  export let title,
+    description = "";
+</script>
+
+<main>
+  <div class="TOC">
+    <h1>Table of Contents</h1>
+    {#each $categories as node}
+      <div class="TOCLink" class:active={$page.path.includes(node.path)}>
+        <img src={node.meta.icon} alt="" />
+        <a href={node.path}>{node.meta.title}</a>
+      </div>
+      {#if $page.path.includes(node.path)}
+        <CategoryTree nodes={node.children} />
+      {/if}
+    {/each}
+  </div>
+  <article>
+    <h1>{title}</h1>
+    <slot />
+  </article>
+</main>
+
+<style>
+  .TOCLink {
+    align-items: baseline;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    padding: 1rem 0;
+    border-bottom: 1px solid #d0deec;
+    font-size: 1.1em;
+  }
+  .TOCLink.active a {
+    font-weight: bold;
+  }
+  .TOCLink img {
+    height: 1em;
+  }
+  @media (min-width: 1024px) {
+    main {
+      display: flex;
+    }
+  }
+  main {
+    margin: 0 auto;
+    max-width: var(--width-content);
+    padding: 2rem 1rem;
+  }
+  .TOC {
+    margin-right: 2rem;
+    flex: 1;
+    font-family: Overpass;
+    line-height: 150%;
+  }
+  .TOC :global(a) {
+    color: #2e2e35;
+    font-weight: normal;
+  }
+  article {
+    flex: 3;
+    overflow-x: hidden;
+  }
+  @media (min-width: 1024px) {
+    article {
+      margin-left: 2rem;
+    }
+  }
+</style>

src/lib/layouts/RecipeCategory.svelte

@@ -0,0 +1,84 @@
+<script>
+  import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
+  import { categories } from '$lib/stores/recipes';
+  import { page } from '$app/stores';
+
+  const childrenNodes = $categories.find(c => c.path === $page.path);
+
+  export let title,
+    description = "";
+</script>
+
+<main>
+  <div class="TOC">
+    <h1>Table of Contents</h1>
+    {#each $categories as node}
+      <div class="TOCLink" class:active={$page.path.includes(node.path)}>
+        <img src={node.meta.icon} alt="" />
+        <a href={node.path}>{node.meta.title}</a>
+      </div>
+      {#if $page.path.includes(node.path)}
+        <CategoryTree nodes={node.children} />
+      {/if}
+    {/each}
+  </div>
+  <article>
+    <h1>{title}</h1>
+    <slot />
+
+    <ul>
+      {#each childrenNodes as node}
+        <li>
+          <a href={node.path}>{node.meta.title}</a>
+        </li>
+      {/each}
+    </ul>
+  </article>
+</main>
+
+<style>
+  .TOCLink {
+    align-items: baseline;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    padding: 1rem 0;
+    border-bottom: 1px solid #d0deec;
+    font-size: 1.1em;
+  }
+  .TOCLink.active a {
+    font-weight: bold;
+  }
+  .TOCLink img {
+    height: 1em;
+  }
+  @media (min-width: 1024px) {
+    main {
+      display: flex;
+    }
+  }
+  main {
+    margin: 0 auto;
+    max-width: var(--width-content);
+    padding: 2rem 1rem;
+  }
+  .TOC {
+    margin-right: 2rem;
+    flex: 1;
+    font-family: Overpass;
+    line-height: 150%;
+  }
+  .TOC :global(a) {
+    color: #2e2e35;
+    font-weight: normal;
+  }
+  article {
+    flex: 3;
+    overflow-x: hidden;
+  }
+  @media (min-width: 1024px) {
+    article {
+      margin-left: 2rem;
+    }
+  }
+</style>

src/lib/stores/recipes.ts

@@ -0,0 +1,15 @@
+import { Writable, writable } from 'svelte/store'
+
+type Recipe = {
+   meta: any;
+   filename: string;
+   path: string;
+   children: Recipe[]
+}
+
+type RecipeStore = {
+    subscribe: Writable<Recipe[]>["subscribe"],
+    set: Writable<Recipe[]>["set"]
+}
+
+export const categories: RecipeStore = writable([]);

src/routes/recipes/__layout.svelte

@@ -1,3 +1,22 @@
+<script lang="ts" context="module">
+  import { categories } from '$lib/stores/recipes';
+
+  export async function load({ fetch }) {
+    const res = await fetch('/recipes/recipes');
+    const recipeCategories = await res.json();
+
+    if (!res.ok) {
+      return {
+        status: res.status,
+        error: new Error()
+      };
+    }
+
+    categories.set(recipeCategories);
+    return { props: { categories: recipeCategories } };
+  }
+</script>
+
 <svelte:head>
   <title>Svelte Recipes</title>
   <link rel="stylesheet" href="/prism.css" />

src/routes/recipes/index.svelte

@@ -1,19 +1,8 @@
-<script lang="ts" context="module">
-  export async function load({ fetch }) {
-    const res = await fetch('/recipes/recipes');
-    if (res.ok) return { props: { categories: await res.json() } };
-    return {
-      status: res.status,
-      error: new Error()
-    };
-  }
-</script>
-
 <script>
   import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
   import Icon from "$lib/components/Icon/index.svelte";
   import { page } from '$app/stores';
-  export let categories = [];
+  import { categories } from '$lib/stores/recipes';
 </script>
 
 <div class="content-wrap">
@@ -32,7 +21,7 @@
     <div class="navigation-content">
       <h3>Pick a Category to Get Started</h3>
       <div class="categories-wrap">
-        {#each categories as category}
+        {#each $categories as category}
           {#if category}
             <div class="category-style">
               <div class="list-meta">

svelte.config.js

@@ -9,7 +9,11 @@ const config = {
 		preprocess(),
 		mdsvex({
 			extensions: extensions,
-			layout: { eventPage: './src/lib/layouts/EventPage.svelte' }
+			layout: {
+				eventPage: './src/lib/layouts/EventPage.svelte',
+				recipe: './src/lib/layouts/Recipe.svelte',
+				recipeCategory: './src/lib/layouts/RecipeCategory.svelte'
+			}
 		})
 	],
 	extensions: extensions,