diff --git a/.gitignore b/.gitignore index 1499a0e6970c..bf38bbc4e919 100644 --- a/.gitignore +++ b/.gitignore @@ -21,4 +21,6 @@ _actual*.* /site/cypress/screenshots/ /site/__sapper__/ /site/.env -/site/.sessions \ No newline at end of file +/site/.sessions +/site/static/svelte-app.json +/site/scripts/svelte-app \ No newline at end of file diff --git a/site/package.json b/site/package.json index 62f253753036..5d6a36b14c79 100644 --- a/site/package.json +++ b/site/package.json @@ -5,13 +5,13 @@ "scripts": { "dev": "sapper dev", "sapper": "sapper build --legacy", - "export": "sapper export --legacy", + "update_template": "sh ./scripts/update_template.sh", "start": "node __sapper__/build", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run", "deploy": "npm run stage && now alias", - "prestage": "npm run sapper", + "prestage": "npm run update_template && npm run sapper", "stage": "now" }, "dependencies": { diff --git a/site/scripts/build-svelte-app-json.js b/site/scripts/build-svelte-app-json.js new file mode 100644 index 000000000000..59a4b4a07b39 --- /dev/null +++ b/site/scripts/build-svelte-app-json.js @@ -0,0 +1,11 @@ +const fs = require('fs'); + +const files = []; + +for (const path of process.argv.slice(2)) { + if (!path.includes('/.')) { + files.push({ path: path.slice(19), data: fs.readFileSync(path).toString() }); + } +} + +fs.writeFileSync('static/svelte-app.json', JSON.stringify(files)); diff --git a/site/scripts/update_template.sh b/site/scripts/update_template.sh new file mode 100755 index 000000000000..59ab3cb0cd9e --- /dev/null +++ b/site/scripts/update_template.sh @@ -0,0 +1,15 @@ +cd `dirname $0`/.. + +# fetch svelte-app +rm -rf scripts/svelte-app +node_modules/.bin/degit sveltejs/template scripts/svelte-app + +# update repl-viewer.css based on template +cp scripts/svelte-app/public/global.css static/repl-viewer.css + +# remove src (will be recreated client-side) and node_modules +rm -rf scripts/svelte-app/src +rm -rf scripts/svelte-app/node_modules + +# build svelte-app.json +node scripts/build-svelte-app-json.js `find scripts/svelte-app -type f` diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html index ff8bc20d7384..09c3603f274e 100644 --- a/site/src/routes/guide/index.html +++ b/site/src/routes/guide/index.html @@ -83,6 +83,17 @@ overflow: hidden; } + aside::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: var(--top-offset); + background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%); + pointer-events: none; + } + .sidebar { padding: var(--top-offset) 3.2rem var(--top-offset) 0; font-family: var(--font-ui); diff --git a/site/src/routes/repl/_components/AppControls/index.html b/site/src/routes/repl/_components/AppControls/index.html index 381cc93f75d0..ab439251ac16 100644 --- a/site/src/routes/repl/_components/AppControls/index.html +++ b/site/src/routes/repl/_components/AppControls/index.html @@ -171,13 +171,15 @@ async function download() { downloading = true; + const { components, imports, values } = repl.toJSON(); + const files = await (await fetch('/svelte-app.json')).json(); - if (bundle.imports.length > 0) { + if (imports.length > 0) { const idx = files.findIndex(({ path }) => path === 'package.json'); const pkg = JSON.parse(files[idx].data); const deps = {}; - bundle.imports.forEach(mod => { + imports.forEach(mod => { const match = /^(@[^\/]+\/)?[^@\/]+/.exec(mod); deps[match[0]] = 'latest'; }); @@ -191,7 +193,7 @@ var app = new App({ target: document.body, - props: ${JSON.stringify(data, null, '\t').replace(/\n/g, '\n\t')} + props: ${JSON.stringify(values, null, '\t').replace(/\n/g, '\n\t')} }); export default app;` }); diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html index 55a044a6c413..bd24e7ea1922 100644 --- a/site/src/routes/repl/_components/Repl.html +++ b/site/src/routes/repl/_components/Repl.html @@ -18,6 +18,7 @@ version; // workaround return { + imports: bundle.imports, components: $component_store, values: $values_store };