add stackblitz

Author: matiasfha

package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-svelte3": "4.0.0",
     "husky": "8.0.1",
     "mdsvex": "0.10.6",
+    "package": "link:package",
     "postcss": "8.4.16",
     "postcss-load-config": "4.0.1",
     "prettier": "2.7.1",

pnpm-lock.yaml

@@ -0,0 +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
+
+    let baseUrl = "https://stackblitz.com/edit/vitejs-vite-yyoood?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%;
+        `}
+    />
+</GeneralObserver>

src/lib/components/stackblitz.svelte

@@ -7,6 +7,7 @@ export { default as GenericEmbed } from './components/generic-embed.svelte'
 export { default as SimpleCast } from './components/simple-cast.svelte'
 export { default as SoundCloud } from './components/sound-cloud.svelte'
 export { default as Spotify } from './components/spotify.svelte'
+export { default as StackBlitz } from './components/stackblitz.svelte'
 export { default as Tweet } from './components/tweet.svelte'
 export { default as Vimeo } from './components/vimeo.svelte'
 export { default as YouTube } from './components/you-tube.svelte'

src/lib/index.ts

@@ -11,6 +11,7 @@
     Tweet,
     Vimeo,
     YouTube,
+    StackBlitz
   } from 'sveltekit-embed'
   import { Head } from 'svead'
   import { page } from '$app/stores'
@@ -322,3 +323,10 @@ Usage:
 Output:
 
 <YouTube youTubeId="L7_z8rcbFPg" />
+
+
+## StackBlitz 
+
+Output:
+
+<StackBlitz id="vitejs-vite-yyoood" />