feat: ✨ add StackBlitz component

Thanks @matiasfha 🙏

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-embed",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": {
     "name": "Scott Spence",
     "email": "[email protected]",
@@ -18,7 +18,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
-    "build": "pnpm run sveltekit-embed && pnpm i -D sveltekit-embed && vite build",
+    "build": "pnpm un sveltekit-embed && pnpm i -D sveltekit-embed && vite build",
     "package": "svelte-package",
     "preview": "vite preview",
     "test": "playwright test",
@@ -59,7 +59,7 @@
     "svelte-check": "2.9.0",
     "svelte-preprocess": "4.10.7",
     "svelte2tsx": "0.5.19",
-    "sveltekit-embed": "0.0.5",
+    "sveltekit-embed": "^0.0.5",
     "tailwindcss": "3.1.8",
     "tslib": "2.4.0",
     "typescript": "4.8.3",

src/lib/components/stackblitz.svelte

@@ -1,43 +1,43 @@
 <script lang="ts">
-    import GeneralObserver from "./general-observer.svelte"
-    
-    export let width: string = '100'
-    export let height: string = '500'
-    export let id: string = ''
-    export let view: 'editor' | 'preview' | 'default' = 'default'
-    export let clickToLoad: boolean = true //ctl
-    export let hideNavigation: boolean = false //hideNavigation
-    export let hideExplorer: boolean = true
-    export let theme: string | 'light' | 'dark' | 'default' = 'dark'
-    export let file: string | undefined
+  import GeneralObserver from './general-observer.svelte'
 
-    let baseUrl = `https://stackblitz.com/edit/${id}?embed=1
-    const config = {
-        ctl: `${clickToLoad ? 1 : 0}`,
-        hideExplorer: `${hideExplorer ? 1 : 0}`,
-        hideNavigation: `${hideNavigation ? 1: 0}`,
-        theme
-    }
-    if(view !== 'default') {
-        config['view'] = view 
-    }
-    if(file) {
-        config['file'] = file
-    }
-    const queryString = new URLSearchParams(config)
-    const src = `${baseUrl}&${queryString.toString()}`
+  export let width: string = '100'
+  export let height: string = '500'
+  export let id: string = ''
+  export let view: 'editor' | 'preview' | 'default' = 'default'
+  export let clickToLoad: boolean = true //ctl
+  export let hideNavigation: boolean = false //hideNavigation
+  export let hideExplorer: boolean = true
+  export let theme: string | 'light' | 'dark' | 'default' = 'dark'
+  export let file: string | undefined
+
+  let baseUrl = `https://stackblitz.com/edit/${id}?embed=1`
+  const config = {
+    ctl: `${clickToLoad ? 1 : 0}`,
+    hideExplorer: `${hideExplorer ? 1 : 0}`,
+    hideNavigation: `${hideNavigation ? 1 : 0}`,
+    theme,
+  }
+  if (view !== 'default') {
+    config['view'] = view
+  }
+  if (file) {
+    config['file'] = file
+  }
+  const queryString = new URLSearchParams(config)
+  const src = `${baseUrl}&${queryString.toString()}`
 </script>
 
 <GeneralObserver {height} {width}>
-    <iframe 
-        {height}
-        class="stackblitz-sveltekit-embed"
-        title={`stackblitz-${id}`}
-        {src}
-        frameborder="no"
-        allowfullscreen
-        style={`
-            width: 100%;
-        `}
-    />
+  <iframe
+    {height}
+    class="stackblitz-sveltekit-embed"
+    title={`stackblitz-${id}`}
+    {src}
+    frameborder="no"
+    allowfullscreen
+    style={`
+      width: 100%;
+    `}
+  />
 </GeneralObserver>

src/routes/+page.md

@@ -8,10 +8,10 @@
     SimpleCast,
     SoundCloud,
     Spotify,
+    StackBlitz,
     Tweet,
     Vimeo,
     YouTube,
-    StackBlitz
   } from 'sveltekit-embed'
   import { Head } from 'svead'
   import { page } from '$app/stores'
@@ -261,6 +261,32 @@ Output:
   height="180px"
 />
 
+## StackBlitz
+
+Props:
+
+```ts
+width: string = '100'
+height: string = '500'
+id: string = ''
+view: 'editor' | 'preview' | 'default' = 'default'
+clickToLoad: boolean = true
+hideNavigation: boolean = false
+hideExplorer: boolean = true
+theme: string | 'light' | 'dark' | 'default' = 'dark'
+file: string | undefined
+```
+
+Usage:
+
+```html
+<StackBlitz id="vitejs-vite-yyoood" theme="light" />
+```
+
+Output:
+
+<StackBlitz id="vitejs-vite-yyoood" hideNavigation />
+
 ## Tweet
 
 Props:
@@ -323,31 +349,3 @@ Usage:
 Output:
 
 <YouTube youTubeId="L7_z8rcbFPg" />
-
-
-## StackBlitz 
-
-Props:
-
-```ts
-
-width: string = '100'
-height: string = '500'
-id: string = ''
-view: 'editor' | 'preview' | 'default' = 'default'
-clickToLoad: boolean = true 
-hideNavigation: boolean = false
-hideExplorer: boolean = true
-theme: string | 'light' | 'dark' | 'default' = 'dark'
-file: string | undefined
-```
-
-Usage:
-
-```html
-<StackBlitz id="vitejs-vite-yyoood" theme="light"/>
-```
-
-Output:
-
-<StackBlitz id="vitejs-vite-yyoood" hideNavigation />