doc: use StackBlitz

mistic100 · Dec 20, 2024 · eae2827 · eae2827
1 parent 1d4e961
commit eae2827
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 116 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -12,7 +12,7 @@ body:
 
         Use [markdown codeblocks](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) when posting code samples, **do not use screenshots**!
 
-        You can quickly create a demo by forking the [basic demo](https://photo-sphere-viewer.js.org/demos/basic/0-config.html) to jsFiddle, Codepen or CodeSandbox.
+        You can quickly create a demo by forking the [basic demo](https://photo-sphere-viewer.js.org/demos/basic/0-config.html) to jsFiddle, Codepen or StackBlitz.
   - id: description
     type: textarea
     attributes:

diff --git a/.github/workflows/comment-issues.yml b/.github/workflows/comment-issues.yml
@@ -24,7 +24,7 @@ jobs:
           NUMBER: ${{ github.event.issue.number }}
           BODY: |
             An isolated working demo is required in order to analyze this issue.
-            You can easily create a demo on Codepen/JSFiddle/CodeSandBox by clicking the buttons on the top of every example in the documentation.
+            You can easily create a demo on Codepen/JSFiddle/StackBlitz by clicking the buttons on the top of every example in the documentation.
 
             **Why this is important:**
             - I do not have the time to reproduce every test case from scratch

diff --git a/docs/.vitepress/plugins/code-demo/constants.ts b/docs/.vitepress/plugins/code-demo/constants.ts
@@ -1,8 +1,8 @@
 import ICON_CODEPEN from './icons/codepen.svg?raw';
-import ICON_CODESANDBOX from './icons/codesandbox.svg?raw';
 import ICON_JSFIDDLE from './icons/jsfiddle.svg?raw';
+import ICON_STACKBLITZ from './icons/stackblitz.svg?raw';
 
-export type Service = 'codepen' | 'jsfiddle' | 'codesandbox';
+export type Service = 'codepen' | 'jsfiddle' | 'stackblitz';
 
 export const SERVICES: Record<Service, {
     name: string;
@@ -21,10 +21,10 @@ export const SERVICES: Record<Service, {
         url: 'https://jsfiddle.net/api/post/library/pure',
         icon: ICON_JSFIDDLE,
     },
-    codesandbox: {
-        // https://codesandbox.io/docs/importing#define-api
-        name: 'CodeSandbox',
-        url: 'https://codesandbox.io/api/v1/sandboxes/define',
-        icon: ICON_CODESANDBOX,
+    stackblitz: {
+        // https://developer.stackblitz.com/platform/api/post-api
+        name: 'StackBlitz',
+        url: 'https://stackblitz.com/run',
+        icon: ICON_STACKBLITZ,
     },
 };
diff --git a/docs/.vitepress/plugins/code-demo/icons/codesandbox.svg b/docs/.vitepress/plugins/code-demo/icons/codesandbox.svg
diff --git a/docs/.vitepress/plugins/code-demo/icons/stackblitz.svg b/docs/.vitepress/plugins/code-demo/icons/stackblitz.svg
diff --git a/docs/.vitepress/plugins/code-demo/utils.ts b/docs/.vitepress/plugins/code-demo/utils.ts
@@ -1,4 +1,3 @@
-import { getParameters } from 'codesandbox-import-utils/lib/api/define';
 import { Service, SERVICES } from './constants';
 
 const ORG = '@photo-sphere-viewer/';
@@ -51,7 +50,7 @@ function getFullCss(css: string, packages: Package[], cdnImport: boolean) {
 ${packages
     .filter(({ style }) => style)
     .map(({ name, version, css }) => {
-        return `@import '${cdnImport ? buildCdnPath({ name, version, file: css! }) : `../node_modules/${name}/${css}`}';`;
+        return `@import '${cdnImport ? buildCdnPath({ name, version, file: css! }) : `${name}/${css}`}';`;
     })
     .join('\n')}
 
@@ -158,32 +157,18 @@ function getCodePenValue({ title, js, css, html, packages }: Params) {
     };
 }
 
-function getCodeSandboxValue({ title, js, css, html, packages }: Params) {
+function getStackBlitzValue({ title, js, css, html, packages }: Params) {
     return {
-        parameters: getParameters({
-            files: {
-                'package.json': {
-                    isBinary: false,
-                    content: JSON.stringify({
-                        description: title,
-                        main: 'index.html',
-                        scripts: {
-                            start: 'parcel index.html --open',
-                            build: 'parcel build index.html',
-                        },
-                        dependencies: packages.reduce((deps, { name, version }) => {
-                            deps[name] = `${version}`;
-                            return deps;
-                        }, {}),
-                        devDependencies: {
-                            parcel: '^2.9.0',
-                            typescript: '^5.2.0',
-                        },
-                    }),
-                },
-                'index.html': {
-                    isBinary: false,
-                    content: `<!DOCTYPE html>
+        'project[template]': 'typescript',
+        'project[title]': title,
+        'project[dependencies]': JSON.stringify(packages.reduce((deps, { name, version }) => {
+            deps[name] = `${version}`;
+            return deps;
+        }, {})),
+        'project[files][index.ts]': `import './styles.css';
+${js}`,
+        'project[files][styles.css]': getFullCss(css, packages, false),
+        'project[files][index.html]': `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
@@ -194,22 +179,8 @@ function getCodeSandboxValue({ title, js, css, html, packages }: Params) {
 
 <body>
     ${getFullHtml(html, packages, false)}
-
-    <script src="src/index.ts"></script>
 </body>
 </html>`,
-                },
-                'src/index.ts': {
-                    isBinary: false,
-                    content: `import './styles.css';
-${js}`,
-                },
-                'src/styles.css': {
-                    isBinary: false,
-                    content: getFullCss(css, packages, false),
-                },
-            },
-        }),
     };
 }
 
@@ -229,8 +200,8 @@ export function openService(service: Service, params: Params) {
             data = getJsFiddleValue(params);
             break;
 
-        case 'codesandbox':
-            data = getCodeSandboxValue(params);
+        case 'stackblitz':
+            data = getStackBlitzValue(params);
             break;
     }
 

diff --git a/docs/package.json b/docs/package.json
@@ -9,7 +9,6 @@
     "serve-doc": "vitepress dev"
   },
   "dependencies": {
-    "codesandbox-import-utils": "^2.2.3",
     "lodash-es": "^4.17.21",
     "markdown-it-container": "^4.0.0",
     "vitepress": "^1.5.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1833,11 +1833,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-binaryextensions@^2.1.2:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
-  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
-
 birpc@^0.2.19:
   version "0.2.19"
   resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.2.19.tgz#cdd183a4a70ba103127d49765b4a71349da5a0ca"
@@ -2077,20 +2072,6 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-codesandbox-import-util-types@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
-  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
-
-codesandbox-import-utils@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.2.3.tgz#f7b4801245b381cb8c90fe245e336624e19b6c84"
-  integrity sha512-ymtmcgZKU27U+nM2qUb21aO8Ut/u2S9s6KorOgG81weP+NA0UZkaHKlaRqbLJ9h4i/4FLvwmEXYAnTjNmp6ogg==
-  dependencies:
-    codesandbox-import-util-types "^2.2.3"
-    istextorbinary "^2.2.1"
-    lz-string "^1.4.4"
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2488,14 +2469,6 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-editions@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/editions/-/editions-2.3.1.tgz#3bc9962f1978e801312fbd0aebfed63b49bfe698"
-  integrity sha512-ptGvkwTvGdGfC0hfhKg0MT+TRLRKGtUiWGBInxOm5pz7ssADezahjCUaYuZ8Dr+C05FW0AECIIPt4WBxVINEhA==
-  dependencies:
-    errlop "^2.0.0"
-    semver "^6.3.0"
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -2551,11 +2524,6 @@ env-paths@^2.2.1:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
-errlop@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b"
-  integrity sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -3666,15 +3634,6 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-istextorbinary@^2.2.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.6.0.tgz#60776315fb0fa3999add276c02c69557b9ca28ab"
-  integrity sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==
-  dependencies:
-    binaryextensions "^2.1.2"
-    editions "^2.2.0"
-    textextensions "^2.5.0"
-
 jackspeak@^3.1.2:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
@@ -3982,11 +3941,6 @@ lunr@^2.3.9:
   resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
   integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
 
-lz-string@^1.4.4:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
-  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
-
 magic-string@^0.30.11:
   version "0.30.12"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.12.tgz#9eb11c9d072b9bcb4940a5b2c2e1a217e4ee1a60"
@@ -5038,7 +4992,7 @@ selfsigned@^2.4.1:
     "@types/node-forge" "^1.3.0"
     node-forge "^1"
 
-semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
+semver@^6.0.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
@@ -5531,11 +5485,6 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-textextensions@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
-  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
-
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@@ -6063,7 +6012,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -6081,15 +6030,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"