Merge pull request #158 from TheComputerM/docs/remove-webfonts

Docs/remove webfonts

Author: Florian-Schoenherr

packages/docs/package.json

@@ -8,6 +8,7 @@
     "preview": "serve __sapper__/export"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@mdi/js": "^5.9.55",
     "compression": "^1.7.1",
     "gumshoejs": "^5.1.2",

packages/docs/scripts/preprocess.js

@@ -2,6 +2,7 @@ import { mdsvex } from 'mdsvex';
 import sveltePreprocess from 'svelte-preprocess';
 import Prism from 'prismjs';
 import loadLanguages from 'prismjs/components/';
+import { mdiOpenInNew, mdiPound } from '@mdi/js';
 
 loadLanguages(['bash', 'scss', 'typescript']);
 
@@ -41,8 +42,11 @@ export default [
           rel: ['noopener', 'noreferrer'],
           content: {
             type: 'element',
-            tagName: 'i',
-            properties: { className: ['mdi', 'mdi-open-in-new'] },
+            tagName: 'svg',
+            properties: { width: '16px', height: '16px', viewBox: '0 0 24 24' },
+            children: [
+              { type: 'element', tagName: 'path', properties: { d: mdiOpenInNew } },
+            ],
           },
         },
       ],
@@ -52,8 +56,11 @@ export default [
         {
           content: {
             type: 'element',
-            tagName: 'i',
-            properties: { className: ['mdi', 'mdi-pound'] },
+            tagName: 'svg',
+            properties: { width: '0.7em', height: '0.7em', viewBox: '0 0 24 24' },
+            children: [
+              { type: 'element', tagName: 'path', properties: { d: mdiPound } },
+            ],
           },
         },
       ],

packages/docs/src/components/doc/Alert.svelte

@@ -1,9 +1,13 @@
+<svelte:options immutable={true} />
+
 <script context="module">
+  import { mdiInformation, mdiAlert, mdiAlertOctagram, mdiCheck } from '@mdi/js';
+
   const icons = {
-    info: 'information',
-    danger: 'alert',
-    warning: 'alert-octagram',
-    success: 'check',
+    info: mdiInformation,
+    danger: mdiAlert,
+    warning: mdiAlertOctagram,
+    success: mdiCheck,
   };
 </script>
 
@@ -20,11 +24,9 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <Alert class="s-alert--doc {type}-text" border="left" text>
   <div slot="icon">
-    <Icon class="mdi mdi-{icon}" />
+    <Icon path={icon} />
   </div>
   <slot />
 </Alert>

packages/docs/src/components/doc/Example.svelte

@@ -1,10 +1,13 @@
+<svelte:options immutable={true} />
+
 <script>
   import { theme } from '@/util/stores';
   import links from '@/util/links';
   import { onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import Markup from './Markup.svelte';
   import { Icon, Button } from 'svelte-materialify/src';
+  import { mdiInvertColors, mdiGithub, mdiCodeTags } from '@mdi/js';
 
   export let file = '';
   export let style = null;
@@ -35,8 +38,6 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <div class="example">
   <div class="example-toolbar text-right pa-1">
     {#if colorInvertable}
@@ -46,7 +47,7 @@
         size="small"
         aria-label="invert color"
         on:click={() => (codeThemeDark = !codeThemeDark)}>
-        <Icon class="mdi mdi-invert-colors" />
+        <Icon path={mdiInvertColors} />
       </Button>
     {/if}
     <a
@@ -55,7 +56,7 @@
       rel="noopener noreferrer"
       target="_blank">
       <Button fab icon size="small" aria-label="GitHub" class="text--primary">
-        <Icon class="mdi mdi-github" />
+        <Icon path={mdiGithub} />
       </Button>
     </a>
     <Button
@@ -64,7 +65,7 @@
       size="small"
       aria-label="Show Code"
       on:click={() => (codeVisible = !codeVisible)}>
-      <Icon class="mdi mdi-code-tags" />
+      <Icon path={mdiCodeTags} />
     </Button>
   </div>
   {#if codeVisible}

packages/docs/src/components/doc/Layout.svelte

@@ -11,8 +11,9 @@
   import links from '@/util/links';
   import Meta from '../Meta.svelte';
   import RelatedPages from './RelatedPages.svelte';
-  import { Divider } from 'svelte-materialify/src';
+  import { Divider, Icon } from 'svelte-materialify/src';
   import { onMount, onDestroy, tick } from 'svelte';
+  import { mdiOpenInNew } from '@mdi/js';
 
   onMount(() => {
     document.querySelectorAll('.markdown-container .heading a').forEach((a) => {
@@ -48,8 +49,7 @@
   .heading > a {
     position: absolute;
     top: 0;
-    left: -1em;
-    font-size: 0.75em;
+    left: -0.7em;
     opacity: 0;
   }
   .heading:hover > a {
@@ -77,13 +77,16 @@
   <br /><br />
   <Divider />
   <div class="mt-8 d-flex justify-space-between blue-grey-text text-darken-1">
-    <span>
-      <b>Edit This Page on</b>
-      <a class="app-link" rel="noopener" target="_blank" href="{links.docs}/src/routes">
-        GitHub
-        <span> <i class="mdi mdi-open-in-new" /> </span>
+    <div class="d-flex">
+      <a
+        class="app-link d-flex justify-center align-center"
+        rel="noopener"
+        target="_blank"
+        href="{links.docs}/src/routes">
+        Edit This Page on GitHub
+        <Icon path={mdiOpenInNew} size="16px" style="color: currentColor" class="ml-1" />
       </a>
-    </span>
+    </div>
     <span> <b>Last Updated</b>: CURRENT_DATE </span>
   </div>
 </section>

packages/docs/src/components/doc/Markup.svelte

@@ -1,6 +1,9 @@
+<svelte:options immutable={true} />
+
 <script>
   import Clipboard from 'clipboard';
   import { Button, Icon } from 'svelte-materialify/src';
+  import { mdiContentCopy } from '@mdi/js';
 
   export let lang = '';
   function copy(node) {
@@ -50,17 +53,16 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <div class="code-block" use:copy>
-  <pre class="language-{lang}">
+  <pre
+    class="language-{lang}">
     <code
       class="language-{lang}">
       <slot />
     </code>
   </pre>
   <Button fab depressed size="small" style="position:absolute" aria-label="Copy">
-    <Icon size="20px" class="mdi mdi-content-copy" />
+    <Icon size="20px" path={mdiContentCopy} />
   </Button>
   <span aria-hidden="true">{lang}</span>
 </div>

packages/docs/src/components/doc/Playground.svelte

@@ -13,6 +13,7 @@
     Ripple,
     ListItem,
   } from 'svelte-materialify/src';
+  import { mdiInvertColors } from '@mdi/js';
 
   export let values;
   export let controls;
@@ -82,7 +83,7 @@
       <div class="playground__toolbar justify-space-between pl-2 pr-2">
         <div class="text-h6">Options</div>
         <Button icon on:click={toggleTheme}>
-          <Icon class="mdi mdi-invert mdi-invert-colors" />
+          <Icon path={mdiInvertColors} />
         </Button>
       </div>
       <div class="pa-2">
@@ -99,10 +100,21 @@
               class="mt-4"
               mandatory={controls[label].mandatory}
               bind:value={values[label]}
-              items={controls[label].items}>
+              items={controls[label].items}
+              format={(val) => (controls[label].format ?
+                  controls[label].format(val) :
+                  Array.isArray(val) ?
+                  val.join(', ') :
+                  val)}>
               {label}
               <div slot="item" let:item>
-                <ListItem value={item}>{item}</ListItem>
+                {#if controls[label].format}
+                  <ListItem value={item.value}>
+                    {item.name}
+                  </ListItem>
+                {:else}
+                  <ListItem value={item}>{item}</ListItem>
+                {/if}
               </div>
             </Select>
           {:else if controls[label].type === 'text'}

packages/docs/src/components/doc/RelatedPages.svelte

@@ -1,5 +1,14 @@
+<svelte:options immutable={true} />
+
 <script>
   import { Row, Col, ListItem, Icon } from 'svelte-materialify/src';
+  import {
+    mdiViewDashboardOutline,
+    mdiSpeedometer,
+    mdiPaletteOutline,
+    mdiFlaskEmptyOutline,
+    mdiFunction,
+  } from '@mdi/js';
 
   export let related;
   const items = related.map((x) => x.split('/'));
@@ -12,11 +21,14 @@
   }
 
   const icons = {
-    components: 'view-dashboard-outline indigo-text',
-    'getting-started': 'speedometer green-text',
-    styles: 'palette-outline deep-purple-text',
-    api: 'flask-empty-outline amber-text',
-    actions: 'function indigo-text',
+    components: {
+      path: mdiViewDashboardOutline,
+      color: 'view-dashboard-outline indigo-text',
+    },
+    'getting-started': { path: mdiSpeedometer, color: 'speedometer green-text' },
+    styles: { path: mdiPaletteOutline, color: 'palette-outline deep-purple-text' },
+    api: { path: mdiFlaskEmptyOutline, color: 'flask-empty-outline amber-text' },
+    actions: { path: mdiFunction, color: 'function indigo-text' },
   };
 </script>
 
@@ -26,8 +38,6 @@
   }
 </style>
 
-<svelte:options immutable={true} />
-
 <section>
   <h2 class="text-h4 mb-3">Ready For More?</h2>
   <p>
@@ -39,7 +49,7 @@
         <a href="/{dir}/{page}/">
           <ListItem ripple class="rounded ready-for-more">
             <div slot="prepend">
-              <Icon class="mdi mdi-{icons[dir]}" />
+              <Icon path={icons[dir].path} class={icons[dir].color} />
             </div>
             {fmt(page)}
             <span slot="subtitle">{fmt(dir)}</span>

packages/docs/src/components/navigation/LeftNavigationDrawer.svelte

@@ -7,6 +7,7 @@
 <script>
   import { stores } from '@sapper/app';
   import { ListGroup, ListItem, Icon } from 'svelte-materialify/src';
+  import { mdiChevronDown } from '@mdi/js';
 
   const { page } = stores();
   export let item;
@@ -31,12 +32,12 @@
 <ListGroup class="secondary-text" eager {offset} bind:active={expanded}>
   <div slot="prepend">
     {#if item.icon}
-      <Icon class="mdi mdi-{expanded ? item.openIcon : item.icon}" />
+      <Icon path={expanded ? item.openIcon : item.icon} />
     {/if}
   </div>
   <slot slot="activator">{item.text}</slot>
   <div slot="append">
-    <Icon class="mdi mdi-chevron-down" rotate={expanded ? 180 : 0} />
+    <Icon path={mdiChevronDown} rotate={expanded ? 180 : 0} />
   </div>
   {#each item.items as children}
     {#if children.items}

packages/docs/src/components/navigation/SiteNavigation.svelte

@@ -26,11 +26,7 @@
     {/each}
   </List>
 </NavigationDrawer>
-<Overlay
-  index="3"
-  active={mobile && sidenav}
-  on:click={() => (sidenav = false)}
-  fadeOptions={{ duration: 250 }} />
+<Overlay index="3" active={mobile && sidenav} on:click={() => (sidenav = false)} />
 
 {#if !mobile}
   <NavigationDrawer