perf: improve docs

packages/docs/playground/breadcrumbs.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Playground from '@shared/Playground.svelte';
+  import { Breadcrumbs } from 'svelte-materialify/src';
+
+  const controls = {
+    large: { type: 'switch' },
+    divider: {
+      type: 'select',
+      items: ['/', '>', ':', '\\'],
+      mandatory: true,
+    },
+  };
+
+  let values = {
+    large: false,
+    divider: ['/'],
+  };
+
+  const items = [
+    { text: 'Dashboard', href: '#' },
+    { text: 'Link 1', href: '#' },
+    { text: 'Link 2', disabled: true },
+  ];
+</script>
+
+<Playground {controls} bind:values>
+  <Breadcrumbs large={values.large} {items} divider={values.divider[0]} />
+</Playground>

packages/docs/rollup.config.js

@@ -21,8 +21,7 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning) =>
   (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
-  (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
-  onwarn(warning);
+  (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message));
 
 loadLanguages(['bash', 'scss', 'typescript']);
 const preprocess = [

packages/docs/shared/Example.svelte

@@ -4,6 +4,9 @@
   export function setExamples(examples) {
     [sources, components] = examples;
   }
+  export function preload() {
+    console.log('lol');
+  }
 </script>
 
 <script>

packages/docs/src/helpers/Markdown/CodeBlock.svelte

@@ -10,8 +10,8 @@
   import { Button, Icon } from 'svelte-materialify/src';
 
   export let lang = '';
-  Object.keys(aliases).forEach((alias) => {
-    if (aliases[alias].includes(lang)) lang = alias;
+  Object.entries(aliases).forEach(([alias, names]) => {
+    if (names.includes(lang)) lang = alias;
   });
 
   function copy(node) {

packages/docs/src/helpers/Markdown/MDXLayout.svelte

@@ -9,11 +9,8 @@
 </script>
 
 <script>
-  import { stores } from '@sapper/app';
   import { onMount, onDestroy, tick } from 'svelte';
 
-  const { page } = stores();
-
   onMount(() => {
     document.querySelectorAll('.markdown-container .heading a').forEach((a) => {
       if (!a.hash || !document.querySelectorAll(a.hash).length) return;
@@ -94,7 +91,7 @@
       <a
         class="app-link"
         rel="noopener"
-        href="https://github.com/TheComputerM/svelte-materialify/tree/master/site/src/routes{$page.path}.svx">
+        href="https://github.com/TheComputerM/svelte-materialify/tree/master/packages/docs/src/routes">
         GitHub
       </a>
     </span>

packages/docs/src/helpers/Navigation/LeftNavigationDrawer.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+  let activeDepth = -1;
+</script>
+
 <script>
   import { stores } from '@sapper/app';
   import { ListGroup, ListItem, Icon } from 'svelte-materialify/src';
@@ -8,13 +12,15 @@
   const offset = 1.5 ** depth * 54;
 
   function expand(parent) {
-    return parent.some((child) => {
+    const found = parent.some((child) => {
       if (child.items) return expand(child.items);
       return $page.path === child.href;
     });
+    if (found) activeDepth = depth;
+    return found;
   }
 
-  export let expanded = expand(item.items);
+  export let expanded = depth > activeDepth && expand(item.items);
 
   function toggle() {
     expanded = !expanded;

packages/docs/src/helpers/Navigation/SiteNavigation.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let navigation;
+  export let mobile;
   export let sidenav;
 
   import { Button, NavigationDrawer, List, Overlay } from 'svelte-materialify/src/';
@@ -10,7 +10,7 @@
 </script>
 
 <NavigationDrawer
-  active={navigation || sidenav}
+  active={!mobile || sidenav}
   style="height:100vh;"
   fixed
   clipped
@@ -28,11 +28,11 @@
 </NavigationDrawer>
 <Overlay
   index="3"
-  active={!navigation && sidenav}
+  active={mobile && sidenav}
   on:click={() => (sidenav = false)}
   fadeOptions={{ duration: 250 }} />
 
-{#if navigation}
+{#if !mobile}
   <NavigationDrawer
     style="height:100vh;background:var(--theme-surface)"
     right

packages/docs/src/routes/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { mdiGithub, mdiWeatherSunny, mdiWeatherNight, mdiMenu } from '@mdi/js';
+  import { mdiGithub } from '@mdi/js';
   import { MaterialApp, AppBar, Button, Icon } from 'svelte-materialify/src';
   import SiteNavigation from '../helpers/Navigation/SiteNavigation.svelte';
   import Loading from '../helpers/Navigation/Loading.svelte';
@@ -10,25 +10,27 @@
 
   let sidenav = false;
   let breakpoints = {};
-  let navigation = false;
+  let mobile = false;
 
   function checkMobile() {
-    navigation = !window.matchMedia(breakpoints['md-and-down']).matches;
+    mobile = window.matchMedia(breakpoints['md-and-down']).matches;
   }
 
   function toggleTheme() {
     if ($theme === 'light') theme.set('dark');
     else theme.set('light');
   }
 
-  onMount(async () => {
+  onMount(() => {
     theme.set(window.localStorage.getItem('theme') || 'light');
     const unsubscribe = theme.subscribe((value) => {
       window.localStorage.setItem('theme', value);
     });
 
-    breakpoints = await import('svelte-materialify/src/utils/breakpoints');
-    breakpoints = breakpoints.default;
+    import('svelte-materialify/src/utils/breakpoints').then(({ default: data }) => {
+      breakpoints = data;
+    });
+
     checkMobile();
 
     return unsubscribe;
@@ -39,7 +41,7 @@
   main {
     padding-top: 56px;
   }
-  .navigation-enabled:not(.index-page) {
+  .navigation-enabled {
     padding: 56px 256px 0 256px;
   }
 </style>
@@ -60,13 +62,13 @@
     style="width:100%"
     class={segment === undefined ? 'primary-color theme--dark' : ''}>
     <div slot="icon">
-      {#if !navigation && segment !== undefined}
+      {#if mobile && segment !== undefined}
         <Button
           fab
           depressed
           on:click={() => (sidenav = !sidenav)}
           aria-label="Open Menu">
-          <Icon path={mdiMenu} />
+          <Icon class="mdi mdi-menu" />
         </Button>
       {/if}
     </div>
@@ -76,21 +78,21 @@
       href="https://github.com/TheComputerM/svelte-materialify"
       target="_blank"
       rel="noopener">
-      <Button class="white-text grey darken-3" aria-label="GitHub" fab={!navigation}>
-        <Icon path={mdiGithub} class={navigation ? 'mr-3' : ''} />
-        {#if navigation}GitHub{/if}
+      <Button class="white-text grey darken-3" aria-label="GitHub" fab={mobile}>
+        <Icon path={mdiGithub} class={!mobile ? 'mr-3' : ''} />
+        {#if !mobile}GitHub{/if}
       </Button>
     </a>
     <Button fab text on:click={toggleTheme} aria-label="Toggle Theme">
-      <Icon path={theme === 'light' ? mdiWeatherNight : mdiWeatherSunny} />
+      <Icon class="mdi mdi-weather-{$theme === 'light' ? 'night' : 'sunny'}" />
     </Button>
   </AppBar>
 
   {#if segment !== undefined}
-    <SiteNavigation {navigation} {sidenav} />
+    <SiteNavigation {mobile} bind:sidenav />
   {/if}
 
-  <main class:navigation-enabled={navigation} class:index-page={segment === undefined}>
+  <main class:navigation-enabled={!mobile && segment !== undefined}>
     {#if segment !== undefined}
       <Loading />
     {/if}

packages/docs/src/routes/components/alerts.svx

@@ -1,7 +1,7 @@
 ---
 title: Alert Component
 related:
-  - Buttons: /components/buttons/
+  - Button: /components/buttons/
   - Icon: /components/icons/
   - Alert API: /api/Alert/
 ---

packages/docs/src/routes/components/breadcrumbs.svx

@@ -2,7 +2,8 @@
 title: Breadcrumbs Component
 related:
   - Switch: /components/switches/
-  - Breadcrumbs API: /api/Breadcrumbs/
+  - Button: /components/buttons/
+  - NavigationDrawer: /components/navigation-drawer/
 ---
 
 <script context="module">
@@ -17,12 +18,20 @@ related:
   import { API, Example, setExamples } from '@shared';
   import { Breadcrumbs as doc } from 'svelte-materialify-api';
   import * as Examples from '@examples/components/breadcrumbs';
+  import Playground from '@playground/breadcrumbs.svelte';
   export let sources;
   setExamples([sources, Examples]);
 </script>
 
 # Breadcrumbs
 
+The `Breadcrumbs` component is a navigational helper for pages. It can accept a Material Icons icon or text characters as a divider. An array of objects can be passed to the items property of the component. Additionally, slots exists for more control of the breadcrumbs.
+
+## Playground
+
+By default, breadcrumbs use a text divider. This can be any string.
+<Playground />
+
 ## API
 
 <API {doc} />
@@ -32,33 +41,29 @@ The array of item in the `items` prop.
 ```ts
 type items = Array<item>;
 type item = {
-  disabled?: false,
-  href?: '',
-  text: '',
-  class?: '',
-  props?: {},
+  disabled?: false;
+  href?: '';
+  text: '';
+  class?: '';
+  props?: {};
 };
 ```
 
 ## Examples
 
 Below is a collection of simple to complex examples.
 
-
 ### Basic
 
 Basic examples for breadcrumbs.
 <Example name="basic" />
 
-
 ### Custom Divider
 
 Breadcrumbs separator can be set using `divider` slot. You can also use material icons as dividers.
 <Example name="customDivider" />
 
-
 ### Slots
 
 You can use the default slot to customize each breadcrumb item. Remember to add class `s-breadcrumb-item` to each item to add the default styles.
 <Example name="slots" />
-

packages/docs/src/routes/components/lists.svx

@@ -1,5 +1,9 @@
 ---
 title: Lists
+related:
+  - ItemGroup: /components/item-groups/
+  - ListItemGroup: /components/list-item-groups/
+  - Subheader: /components/subheaders/
 ---
 
 <script context="module">

packages/svelte-materialify/src/utils/breakpoints.js

@@ -13,7 +13,7 @@ export const breakpoints = {
   xl,
 };
 
-const displayBreakpoints = {
+export default {
   'xs-only': `only screen and (max-width: ${sm - 1}px)`,
   'sm-only': `only screen and (min-width: ${sm}px) and (max-width: ${md - 1}px)`,
   'sm-and-down': `only screen and (max-width: ${md - 1}px)`,
@@ -26,5 +26,3 @@ const displayBreakpoints = {
   'lg-and-up': `only screen and (min-width: ${lg}px)`,
   'xl-only': `only screen and (min-width: ${xl}px)`,
 };
-
-export default displayBreakpoints;