docs: fix inject

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

Author: Florian-Schoenherr

packages/docs/scripts/examples.js

@@ -7,12 +7,13 @@ export default {
     if (id.includes('examples')) {
       // 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 codeWithMaterialAppAdded = `${code
+      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>')}</MaterialApp>`;
-      const highlighted = Prism.highlight(codeWithMaterialAppAdded, Prism.languages.svelte, 'svelte');
+        .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/ClickOutside/usage.svelte

@@ -12,19 +12,14 @@
   }
 </script>
 
-<style>
-  div {
-    margin: 12px auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 250px;
-    height: 250px;
-  }
-</style>
-
 <div
   class="elevation-4 rounded text-h6"
+  style="margin: 12px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250px;
+  height: 250px;"
   class:primary-color={active}
   class:white-text={active}
   use:ClickOutside