docs: add initial recipes

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>