Make an Export to X option

Start by inspecting how the TypeScript samples, imports, and asset paths are assembled and served; the issue specifically shows imports and relative cubemap image URLs as examples. Define the supported multi-file export targets and determine how each export rewrites module and asset URLs. Done means a sample can be exported to at least one supported service with its files and references working.

It's nice to be able to edit the sample easily so consider making an [Export to X] where X is any service that supports multiple files.

• Examples: playcode, stackblitz, codesandbox.
• Non-Examples: jsfiddle, jsbin, these do not support multiple files.

The biggest issue is that the files need to URLs changed when uploaded.

Example:

import { mat4 } from 'wgpu-matrix';

import sampleCubemapWGSL from './sampleCubemap.wgsl';
import { quitIfWebGPUNotAvailableOrMissingFeatures } from '../util';

...

let cubemapTexture: GPUTexture;
{
  // The order of the array layers is [+X, -X, +Y, -Y, +Z, -Z]
  const imgSrcs = [
    '../../assets/img/cubemap/posx.jpg',
    '../../assets/img/cubemap/negx.jpg',
    '../../assets/img/cubemap/posy.jpg',
    '../../assets/img/cubemap/negy.jpg',
    '../../assets/img/cubemap/posz.jpg',
    '../../assets/img/cubemap/negz.jpg',
  ];
  const promises = imgSrcs.map(async (src) => {

Need to change to

import { mat4 } from 'https://unpkg.com/wgpu-matrix@latest/dist/3.x/wgpu-matrix.module.js';  // <- CHANGED

import sampleCubemapWGSL from './sampleCubemap.wgsl';
import { quitIfWebGPUNotAvailableOrMissingFeatures } from '../util';  // <- CHANGE?

...

let cubemapTexture: GPUTexture;
{
  // The order of the array layers is [+X, -X, +Y, -Y, +Z, -Z]
  const imgSrcs = [
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/posx.jpg',  // <- CHANGED
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/negx.jpg',  // <- CHANGED
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/posy.jpg',  // <- CHANGED
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/negy.jpg',  // <- CHANGED
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/posz.jpg',  // <- CHANGED
    'https://webgpu.github.io/webgpu-samples/assets/img/cubemap/negz.jpg',  // <- CHANGED
  ];
  const promises = imgSrcs.map(async (src) => {

Of course you could just import the entire repo