docs(styles): document CDN styles usage (#232)

metonym · web-flow · commit 97c8e5c0c28b · 2022-08-06T16:17:10.000-07:00
Closes #214
diff --git a/README.md b/README.md
@@ -93,6 +93,37 @@ Depending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS
 <Highlight language={typescript} {code} />
 ```
 
+#### Linking from a CDN
+
+CSS StyleSheets can also be externally linked from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
+
+This is best suited for prototyping and not recommended for production use.
+
+**HTML**
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/svelte-highlight/styles/github.css"
+    />
+  </head>
+</html>
+```
+
+**svelte:head**
+
+```svelte
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/svelte-highlight/styles/github.css"
+  />
+</svelte:head>
+```
+
 ## Svelte Syntax Highlighting
 
 Use the `HighlightSvelte` component for Svelte syntax highlighting.
diff --git a/demo/lib/ScopedStyle.svelte b/demo/lib/ScopedStyle.svelte
@@ -2,25 +2,31 @@
   export let name = "";
   export let moduleName = "";
   export let useInjectedStyles = true;
+  export let useCdnImport = false;
 
   import HighlightSvelte from "../../src/HighlightSvelte.svelte";
   import * as styles from "../../src/styles";
 
+  $: importStyles = useInjectedStyles
+    ? `import ${moduleName} from "svelte-highlight/styles/${name}";`
+    : `import "svelte-highlight/styles/${name}.css";`;
   $: code = `<script>
   import Highlight from "svelte-highlight";
   import typescript from "svelte-highlight/languages/typescript";
-  ${
-    useInjectedStyles
-      ? `import ${moduleName} from "svelte-highlight/styles/${name}";`
-      : `import "svelte-highlight/styles/${name}.css";`
-  }
-
+  ${!useInjectedStyles && useCdnImport ? "" : importStyles + "\n"}
   const code = "const add = (a: number, b: number) => a + b;";
 <\/script>
 ${
-  useInjectedStyles
+  useInjectedStyles || useCdnImport
     ? `\n<svelte:head>
-  {@html ${moduleName}}
+  ${
+    useInjectedStyles
+      ? `{@html ${moduleName}}`
+      : `<link
+    rel="stylesheet"
+    href="https://unpkg.com/svelte-highlight/styles/${name}.css"
+  />`
+  }
 </svelte:head>\n`
     : ""
 }
diff --git a/demo/routes/index.svelte b/demo/routes/index.svelte
@@ -24,6 +24,10 @@
     include: ["highlight.js", "highlight.js/lib/core"],
   },
 };`;
+  const svelteHeadCdn = `<link
+  rel="stylesheet"
+  href="https://unpkg.com/svelte-highlight/styles/github.css"
+/>\n`;
 </script>
 
 <Row>
@@ -158,6 +162,16 @@
       Refer to the <Link size="lg" href="{base}/styles">Styles page</Link> for a
       list of supported styles.
     </p>
+    <p>
+      CSS StyleSheets can also be externally linked from a Content Delivery
+      Network (CDN) like <Link size="lg" href="https://unpkg.com/"
+        >unpkg.com</Link
+      >. This is best suited for prototyping and not recommended for production
+      use.
+    </p>
+  </Column>
+  <Column xlg={12}>
+    <HighlightSvelte code={svelteHeadCdn} class="atomOneDark" />
   </Column>
 </Row>
 
diff --git a/demo/routes/styles.svelte b/demo/routes/styles.svelte
@@ -7,6 +7,7 @@
     StructuredListRow,
     StructuredListCell,
     StructuredListBody,
+    Toggle,
   } from "carbon-components-svelte";
   import ScopedStyle from "../lib/ScopedStyle.svelte";
   import CodeSnippet from "../lib/CodeSnippet.svelte";
@@ -15,6 +16,7 @@
 
   let currentLabel = "Injected styles";
   let filtered = [];
+  let useCdnImport = false;
 
   $: useInjectedStyles = currentLabel === "Injected styles";
 </script>
@@ -28,6 +30,23 @@
   bind:currentLabel
   bind:filtered
 >
+  {#if !useInjectedStyles}
+    <Row>
+      <Column xlg={9} lg={12}>
+        <p class="mb-5">
+          CSS StyleSheets can also be externally linked from a Content Delivery
+          Network (CDN). This is best suited for prototyping and not recommended
+          for production use.
+        </p>
+        <Toggle
+          size="sm"
+          labelText="Import from UNPKG"
+          bind:toggled={useCdnImport}
+        />
+      </Column>
+    </Row>
+  {/if}
+
   {#if filtered.length > 0}
     <Row>
       <Column noGutter>
@@ -55,7 +74,7 @@
                   </div>
                 </StructuredListCell>
                 <StructuredListCell>
-                  <ScopedStyle {...style} {useInjectedStyles} />
+                  <ScopedStyle {...style} {useInjectedStyles} {useCdnImport} />
                 </StructuredListCell>
               </StructuredListRow>
             {/each}
