docs: add initial recipes

docs/src/components/Preview.svelte

@@ -87,6 +87,10 @@
     color: #bb8eff;
   }
 
+  .token.comment {
+    color: #bebebe;
+  }
+
   .code-override {
     border: 1px solid #262626;
   }

docs/src/layouts/Recipe.svelte

@@ -0,0 +1,126 @@
+<script>
+  import {
+    Grid,
+    Row,
+    Column,
+    Content,
+    Select,
+    SelectItem,
+    InlineNotification,
+  } from "carbon-components-svelte";
+  import { page, metatags } from "@sveltech/routify";
+  import { onMount } from "svelte";
+  import { theme } from "../store";
+
+  export let component = $page.title;
+  export let source = "";
+
+  metatags.title = $page.title;
+
+  onMount(() => {
+    const currentTheme = window.location.search.split("?theme=")[1];
+
+    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
+    }
+  });
+</script>
+
+<style global>
+  #select-theme {
+    width: auto;
+  }
+
+  .prose > p > .bx--link {
+    font-size: inherit;
+  }
+
+  .prose .toc {
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .table {
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    top: 3rem;
+    padding-top: var(--cds-spacing-05);
+    padding-bottom: var(--cds-spacing-05);
+    padding-left: var(--cds-spacing-08);
+    overflow-y: auto;
+  }
+
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--cds-layout-02);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  [data-components] {
+    z-index: 2;
+    position: relative;
+    display: flex;
+  }
+
+  [data-components] .bx--grid {
+    width: 100%;
+  }
+
+  .toc h5 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+
+  .toc.mobile {
+    display: none;
+  }
+
+  @media (max-width: 1056px) {
+    .table {
+      display: none;
+    }
+
+    .toc.mobile {
+      display: block;
+    }
+  }
+</style>
+
+<Content data-components>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>{component}</h1>
+        <div class="bar">
+          <Select
+            id="select-theme"
+            inline
+            labelText="Theme"
+            bind:selected="{$theme}"
+          >
+            <SelectItem value="white" text="White" />
+            <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g90" text="Gray 90" />
+            <SelectItem value="g100" text="Gray 100" />
+          </Select>
+        </div>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column class="prose">
+        <div class="toc mobile">
+          <h5>Table of Contents</h5>
+          <slot name="aside" />
+        </div>
+        <slot />
+      </Column>
+    </Row>
+  </Grid>
+
+  <Column class="table" xlg="{4}" lg="{5}">
+    <div class="toc">
+      <h5>Table of Contents</h5>
+      <slot name="aside" />
+    </div>
+  </Column>
+</Content>

docs/src/pages/_layout.svelte

@@ -26,6 +26,7 @@
   $: components = $layout.children.filter(
     (child) => child.title === "components"
   )[0];
+  $: recipes = $layout.children.filter((child) => child.title === "recipes")[0];
 
   $beforeUrlChange(() => {
     if (isMobile) isSideNavOpen = false;
@@ -215,7 +216,10 @@
 
   <SideNav bind:isOpen="{isSideNavOpen}">
     <SideNavItems>
-      <SideNavMenu expanded text="Components">
+      <SideNavMenu
+        expanded="{$isActive($url('/components'))}"
+        text="Components"
+      >
         {#each components.children as child, i (child.path)}
           <SideNavMenuItem
             text="{child.title}"
@@ -224,6 +228,15 @@
           />
         {/each}
       </SideNavMenu>
+      <SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
+        {#each recipes.children as child, i (child.path)}
+          <SideNavMenuItem
+            text="{child.title}"
+            href="{$url(child.path)}"
+            isSelected="{$isActive($url(child.path))}"
+          />
+        {/each}
+      </SideNavMenu>
     </SideNavItems>
   </SideNav>
   <slot />

docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,32 @@
+<script>
+  /**
+   * @type {{ href?: string; text: string; }[]} [items=[]]
+   */
+  export let items = [
+    { href: "/", text: "Dashboard" },
+    { href: "/reports", text: "Annual reports" },
+    { href: "/reports/2019", text: "2019" },
+  ];
+
+  import {
+    Row,
+    Column,
+    Breadcrumb,
+    BreadcrumbItem,
+  } from "carbon-components-svelte";
+</script>
+
+<Row>
+  <Column>
+    <Breadcrumb>
+      {#each items as item, i}
+        <BreadcrumbItem
+          href="{item.href}"
+          isCurrentPage="{i === items.length - 1}"
+        >
+          {item.text}
+        </BreadcrumbItem>
+      {/each}
+    </Breadcrumb>
+  </Column>
+</Row>

docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte

@@ -0,0 +1,8 @@
+<script>
+  export let code = "yarn add -D carbon-component-svelte";
+
+  import { CodeSnippet } from "carbon-components-svelte";
+  import copy from "clipboard-copy";
+</script>
+
+<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>

docs/src/pages/recipes/Breadcrumbs.svx

@@ -0,0 +1,11 @@
+---
+layout: recipe
+---
+
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Breadcrumb trail
+
+<FileSource src="/framed/Breadcrumbs/Breadcrumbs" />

docs/src/pages/recipes/CopyableCodeSnippet.svx

@@ -0,0 +1,15 @@
+---
+layout: recipe
+---
+
+<script>
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) do not include logic to copy the supplied `code` text.
+
+## clipboard-copy
+
+This example uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy), a lightweight module designed for the web.
+
+<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />

docs/src/pages/recipes/TileAspectRatio.svx

@@ -0,0 +1,16 @@
+---
+layout: recipe
+---
+
+<script>
+  import { AspectRatio, Tile, Column } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Tile (16x9 ratio)
+
+<Column lg={8}>
+<AspectRatio ratio="16x9">
+  <Tile style="height: 100%">Content</Tile>
+</AspectRatio>
+</Column>

docs/svelte.config.js

@@ -141,13 +141,55 @@ module.exports = {
     }),
     mdsvex({
       remarkPlugins: [plugin, slug, carbonify],
-      layout: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
+      layout: {
+        recipe: path.join(__dirname, "src/layouts/Recipe.svelte"),
+        _: path.join(__dirname, "src/layouts/ComponentLayout.svelte"),
+      },
     }),
     {
       markup({ content, filename }) {
+        if (filename.endsWith(".svx") && filename.match(/pages\/(recipes)/)) {
+          const toc = [];
+
+          walk(parse(content), {
+            enter(node) {
+              if (node.type === "Element") {
+                if (node.name === "h2") {
+                  const id = node.attributes.find(
+                    (attribute) => attribute.name === "id"
+                  );
+                  toc.push({
+                    id: id.value[0].raw,
+                    text: node.children[0].raw,
+                  });
+                }
+              }
+            },
+          });
+
+          return {
+            code: content.replace(
+              "</Layout_MDSVEX_DEFAULT>",
+              `<div slot="aside">
+                <ul class="bx--list--unordered">
+                ${toc
+                  .map((item) => {
+                    return `
+                      <li class="bx--list__item">
+                        <a class="bx--link" href="\#${item.id}">${item.text}</a>
+                      </li>`;
+                  })
+                  .join("")}
+                </ul>
+              </div>
+            </Layout_MDSVEX_DEFAULT>`
+            ),
+          };
+        }
+
         if (
-          filename.includes("pages/components") &&
-          filename.endsWith(".svx")
+          filename.endsWith(".svx") &&
+          filename.match(/pages\/(components)/)
         ) {
           const toc = [];