Merge pull request #163 from TheComputerM/docs/source-with-materialapp

Docs/source with materialapp

Author: Florian-Schoenherr

packages/docs/scripts/examples.js

@@ -5,7 +5,15 @@ export default {
   name: 'examples',
   transform(code, id) {
     if (id.includes('examples')) {
-      const highlighted = Prism.highlight(code, Prism.languages.svelte, 'svelte');
+      // some files still have CRLF line-endings, that's why the last 3 replaces aren't combined
+      // when that's solved, do .replace('</script>\n', '</script>\n\n<MaterialApp>') instead
+      const codeWithInject1 = code
+        .replace(' } from \'svelte-materialify/src\'', ', MaterialApp } from \'svelte-materialify/src\'')
+        .replace('</script>', '</script>\n\n<MaterialApp>')
+        .replace('<MaterialApp>\n', '<MaterialApp>')
+        .replace('<MaterialApp>\r\n', '<MaterialApp>');
+      const codeWithInject2 = codeWithInject1.includes('<MaterialApp>') ? `${codeWithInject1}</MaterialApp>` : codeWithInject1;
+      const highlighted = Prism.highlight(codeWithInject2, Prism.languages.svelte, 'svelte');
       const output = `<script context="module">export const source = ${JSON.stringify(
         highlighted,
       )}</script>`;

packages/docs/src/examples/Alert/border.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
+  import { Alert } from 'svelte-materialify/src';
 </script>
 
 <Alert class="indigo white-text" border="left">

packages/docs/src/examples/Alert/coloredBorder.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
+  import { Alert } from 'svelte-materialify/src';
 </script>
 
 <Alert class="indigo-text" border="left" coloredBorder>

packages/docs/src/examples/Alert/colors.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
+  import { Alert, Icon } from 'svelte-materialify/src';
   import { mdiCheck, mdiThumbUp, mdiAlert } from '@mdi/js';
 </script>
 

packages/docs/src/examples/Alert/dense.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
+  import { Alert, Icon } from 'svelte-materialify/src';
   import { mdiCheck, mdiThumbUp, mdiAlert } from '@mdi/js';
 </script>
 

packages/docs/src/examples/Alert/dismissible.svelte

@@ -1,7 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
-  import Button from 'svelte-materialify/src/components/Button';
+  import { Alert, Icon, Button } from 'svelte-materialify/src';
   import { mdiAlertCircle } from '@mdi/js';
 
   let timesDismissed = 0;

packages/docs/src/examples/Alert/icon.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
+  import { Alert, Icon } from 'svelte-materialify/src';
   import { mdiCheck, mdiThumbUp, mdiAlert } from '@mdi/js';
 </script>
 

packages/docs/src/examples/Alert/outlined.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
+  import { Alert, Icon } from 'svelte-materialify/src';
   import { mdiCheck, mdiThumbUp, mdiAlert } from '@mdi/js';
 </script>
 

packages/docs/src/examples/Alert/text.svelte

@@ -1,6 +1,5 @@
 <script>
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Icon from 'svelte-materialify/src/components/Icon';
+  import { Alert, Icon } from 'svelte-materialify/src';
   import { mdiThumbUp, mdiAlert, mdiFire } from '@mdi/js';
 </script>
 

packages/docs/src/examples/Alert/transition.svelte

@@ -1,7 +1,6 @@
 <script>
   import { scale } from 'svelte/transition';
-  import Alert from 'svelte-materialify/src/components/Alert';
-  import Button from 'svelte-materialify/src/components/Button';
+  import { Alert, Button } from 'svelte-materialify/src';
 
   let alert = true;
 </script>