diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dd9c564ae..a75bcc7bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.3 +lockfileVersion: 5.4 specifiers: '@fontsource/roboto-mono': ^4.5.7 @@ -44,7 +44,7 @@ dependencies: devDependencies: '@sveltejs/adapter-auto': 1.0.0-next.90 '@sveltejs/adapter-vercel': 1.0.0-next.85 - '@sveltejs/kit': 1.0.0-next.589_svelte@3.54.0+vite@4.0.0 + '@sveltejs/kit': 1.0.0-next.586_svelte@3.54.0+vite@4.0.0 '@sveltejs/site-kit': 3.0.3 '@types/diff': 5.0.2 '@types/marked': 4.0.8 @@ -53,7 +53,7 @@ devDependencies: diff: 5.1.0 esbuild: 0.14.54 prettier: 2.8.1 - prettier-plugin-svelte: 2.9.0_prettier@2.8.1+svelte@3.54.0 + prettier-plugin-svelte: 2.9.0_sro2v6ld777payjtkjtiuogcxi svelte: 3.54.0 svelte-check: 2.10.2_svelte@3.54.0 tiny-glob: 0.2.9 @@ -356,8 +356,8 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.589_svelte@3.54.0+vite@4.0.0: - resolution: {integrity: sha512-5ABRw46z9B+cCe/YWhcx+I/azNZg1NCDEkVJifZn8ToFoJ3a1eP0OexNIrvMEWpllMbNMPcJm2TC9tnz9oPfWQ==} + /@sveltejs/kit/1.0.0-next.586_svelte@3.54.0+vite@4.0.0: + resolution: {integrity: sha512-lTYWy4voh/r4jz8qnurIATyrH2ZgHPUswYQ9KauyASSjQGYeB1TPDgwcafM/LtgMxpcvFgWsx2KeflykSHXKxg==} engines: {node: '>=16.14'} hasBin: true requiresBuild: true @@ -1297,7 +1297,7 @@ packages: source-map-js: 1.0.2 dev: true - /prettier-plugin-svelte/2.9.0_prettier@2.8.1+svelte@3.54.0: + /prettier-plugin-svelte/2.9.0_sro2v6ld777payjtkjtiuogcxi: resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==} peerDependencies: prettier: ^1.16.4 || ^2.0.0 @@ -1520,7 +1520,7 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 3.54.0 - svelte-preprocess: 4.10.7_svelte@3.54.0+typescript@4.6.4 + svelte-preprocess: 4.10.7_gk4i2giaum4t5l5a23coockzlu typescript: 4.6.4 transitivePeerDependencies: - '@babel/core' @@ -1544,7 +1544,7 @@ packages: svelte: 3.54.0 dev: true - /svelte-preprocess/4.10.7_svelte@3.54.0+typescript@4.6.4: + /svelte-preprocess/4.10.7_gk4i2giaum4t5l5a23coockzlu: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} requiresBuild: true diff --git a/src/lib/icons/chevron.svg b/src/lib/icons/chevron.svg index bab0e6cbb..d85858ec6 100644 --- a/src/lib/icons/chevron.svg +++ b/src/lib/icons/chevron.svg @@ -1,11 +1,3 @@ - - - - - - - - + \ No newline at end of file diff --git a/src/lib/icons/refresh.svg b/src/lib/icons/refresh.svg index bcdad913b..99308ad90 100644 --- a/src/lib/icons/refresh.svg +++ b/src/lib/icons/refresh.svg @@ -1,6 +1,4 @@ - - - \ No newline at end of file + + + diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte index 617052341..9ed3f5a3f 100644 --- a/src/routes/tutorial/[slug]/+page.svelte +++ b/src/routes/tutorial/[slug]/+page.svelte @@ -160,20 +160,6 @@ flex-direction: column; } - iframe { - width: 100%; - height: 100%; - flex: 1; - resize: none; - box-sizing: border-box; - border: none; - background: var(--sk-back-2); - } - - iframe:not(.loaded) { - display: none; - } - .editor-container { position: relative; background-color: var(--sk-back-3); diff --git a/src/routes/tutorial/[slug]/Chrome.svelte b/src/routes/tutorial/[slug]/Chrome.svelte index 64a2e4b21..86cfccd97 100644 --- a/src/routes/tutorial/[slug]/Chrome.svelte +++ b/src/routes/tutorial/[slug]/Chrome.svelte @@ -1,38 +1,18 @@
- - - @@ -63,11 +43,11 @@ .chrome button img { width: 2rem; height: 2rem; - transition: transform 0.2s ease-out, opacity 0.1s ease-out; + transition: 0.2s ease-out; transform: none; } - .chrome button.refresh:active img { + .chrome button:active img { transform: rotate(-360deg); transition: none; } @@ -91,26 +71,4 @@ outline: none; border: 2px solid var(--sk-theme-3); } - - .chrome button { - user-select: none; - } - - .chrome button[disabled] { - opacity: 1; - } - - .chrome button[disabled] img { - opacity: 0.5; - } - - .chrome button img { - opacity: 0.8; - } - - .chrome button:hover img, - .chrome button:active img, - .chrome button:focus-visible img { - opacity: 1; - } diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte index e566260a7..00610c862 100644 --- a/src/routes/tutorial/[slug]/Output.svelte +++ b/src/routes/tutorial/[slug]/Output.svelte @@ -23,16 +23,6 @@ /** @type {import('$lib/types').Adapter} Will be defined after first afterNavigate */ let adapter; - /** @type {string[]} */ - let history_bwd = []; - /** @type {string[]} */ - let history_fwd = []; - let ignore_path_change = false; - - function reset_history() { - history_bwd = []; - history_fwd = []; - } onMount(() => { const unsub = state.subscribe(async (state) => { @@ -57,11 +47,7 @@ } }); - function on_iframe_load() { - iframe.classList.add('loaded'); - } function destroy() { - iframe.removeEventListener('load', on_iframe_load); unsub(); if (adapter) { adapter.destroy(); @@ -69,13 +55,11 @@ } document.addEventListener('pagehide', destroy); - iframe.addEventListener('load', on_iframe_load); return destroy; }); afterNavigate(() => { clearTimeout(timeout); - reset_history(); }); /** @@ -155,16 +139,7 @@ if (e.origin !== adapter.base) return; if (e.data.type === 'ping') { - const new_path = e.data.data.path ?? path; - if (path !== new_path) { - // skip `nav_to` step if triggered by bwd/fwd action - if (ignore_path_change) { - ignore_path_change = false; - } else { - nav_to(); - } - path = new_path; - } + path = e.data.data.path ?? path; clearTimeout(timeout); timeout = setTimeout(() => { @@ -186,59 +161,26 @@ // change the src without adding a history entry, which // would make back/forward traversal very annoying const parentNode = /** @type {HTMLElement} */ (iframe.parentNode); - iframe.classList.remove('loaded'); parentNode?.removeChild(iframe); iframe.src = src; parentNode?.appendChild(iframe); } - - /** @param {string} path */ - function route_to(path) { - const url = new URL(path, adapter.base); - path = url.pathname + url.search + url.hash; - set_iframe_src(adapter.base + path); - } - - /** @param {string | null} new_path */ - function nav_to(new_path = null) { - if (path !== history_bwd[history_bwd.length - 1]) { - history_bwd = [...history_bwd, path]; - } - history_fwd = []; - if (new_path) route_to(new_path); - } - - function go_bwd() { - const new_path = history_bwd[history_bwd.length - 1]; - if (new_path) { - ignore_path_change = true; - [history_bwd, history_fwd] = [history_bwd.slice(0, -1), [path, ...history_fwd]]; - route_to(new_path); - } - } - - function go_fwd() { - const new_path = history_fwd[0]; - if (new_path) { - ignore_path_change = true; - [history_bwd, history_fwd] = [[...history_bwd, path], history_fwd.slice(1)]; - route_to(new_path); - } - } { set_iframe_src(adapter.base + path); }} - on:change={(e) => nav_to(e.detail.value)} - on:back={go_bwd} - on:forward={go_fwd} + on:change={(e) => { + if (adapter) { + const url = new URL(e.detail.value, adapter.base); + path = url.pathname + url.search + url.hash; + set_iframe_src(adapter.base + path); + } + }} />
@@ -272,8 +214,4 @@ border: none; background: var(--sk-back-2); } - - iframe:not(.loaded) { - display: none; - }