docs: replace webfonts in remark

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

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/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/template.html

@@ -24,15 +24,6 @@
         rel="stylesheet"
       />
     </noscript>
-    <link
-      rel="preload"
-      as="style"
-      href="fonts/materialdesignicons.min.css"
-      onload="this.onload=null;this.rel='stylesheet'"
-    />
-    <noscript>
-      <link rel="stylesheet" href="fonts/materialdesignicons.min.css" />
-    </noscript>
     <link
       rel="preload"
       as="style"