examples: add screenshot example (#1456)

docs/examples/screenshot/ScreenshotExample.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import sdk from '@stackblitz/sdk'
+
+const el = ref<HTMLDivElement>()
+
+onMounted(() => {
+  sdk.embedProjectId(el.value!, 'vitejs-vite-wnam9z', {
+    forceEmbedLayout: true,
+    openFile: 'src/App.vue',
+    height: 750,
+  })
+})
+</script>
+
+<template>
+  <div ref="el" class="outline-none"></div>
+</template>

docs/package.json

@@ -11,8 +11,8 @@
     "typedocs": "typedoc --options ./typedoc.json"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.22.1",
-    "@stackblitz/sdk": "^1.9.0",
+    "@algolia/client-search": "^4.23.3",
+    "@stackblitz/sdk": "^1.10.0",
     "@vercel/analytics": "^1.1.2",
     "@vercel/speed-insights": "^1.0.8",
     "@vue-flow/background": "workspace:*",
@@ -27,18 +27,18 @@
     "web-vitals": "^3.5.2"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.176",
+    "@iconify/json": "^2.2.217",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@windicss/plugin-scrollbar": "^1.2.3",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "ohmyfetch": "^0.4.21",
     "typedoc": "^0.25.7",
     "typedoc-plugin-markdown": "^3.17.1",
     "typedoc-plugin-merge-modules": "^5.1.0",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-icons": "^0.18.3",
-    "unplugin-vue-components": "^0.26.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
     "vite-plugin-windicss": "^1.9.3",
     "vitepress": "1.0.0-rc.40",
     "windicss": "^3.5.6"

docs/src/.vitepress/config.mts

@@ -206,13 +206,14 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Save & Restore', link: '/examples/save' },
-            { text: 'Hide/Show', link: '/examples/hidden' },
-            { text: 'Intersection', link: '/examples/intersection' },
-            { text: 'Multiple', link: '/examples/multi' },
-            { text: 'Pinia', link: '/examples/pinia' },
-            { text: 'Transition', link: '/examples/transition' },
-            { text: 'Teleport', link: '/examples/teleport' },
-            { text: 'Stress', link: '/examples/stress' },
+            { text: 'Screenshot', link: '/examples/screenshot' },
+            { text: 'Node Visibility', link: '/examples/hidden' },
+            { text: 'Node Intersections', link: '/examples/intersection' },
+            { text: 'Multiple Flows', link: '/examples/multi' },
+            { text: 'Pinia Store', link: '/examples/pinia' },
+            { text: 'Viewport Transition', link: '/examples/transition' },
+            { text: 'Teleport Nodes', link: '/examples/teleport' },
+            { text: 'Stress Test', link: '/examples/stress' },
           ],
         },
         {

docs/src/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     Acknowledgement: typeof import('./../components/home/Acknowledgement.vue')['default']

docs/src/examples/screenshot.md

@@ -0,0 +1,11 @@
+# Screenshot
+
+<script setup>
+import ScreenshotExample from '../../examples/screenshot/ScreenshotExample.vue';
+</script>
+
+This example demonstrates how to take a screenshot of the current graph.
+
+<div class="mt-6">
+  <ScreenshotExample />
+</div>