From: Ardis Lu Date: Fri, 15 Dec 2023 05:31:58 +0000 (-0800) Subject: Dynamically load main script and styles X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=ff9da65d14ecf53e577e8031496c389a760cdb0f;p=zip-page Dynamically load main script and styles Halves index.html file size for zip-pages, but doubles load time for homepage (since render is now deferred). --- diff --git a/index.html b/index.html index 0edf7ef..2ebd1b5 100644 --- a/index.html +++ b/index.html @@ -28,83 +28,14 @@ document.close(); }); } - - + @@ -127,41 +58,6 @@ - - \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..86dc8d2 --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +async function textToGzipBase64(text) { + const stream = new Blob([text]).stream(); + const compressed = stream.pipeThrough(new CompressionStream('gzip')); + const buffer = new Uint8Array(await new Response(compressed).arrayBuffer()); + let encoded = ''; + buffer.forEach(byte => encoded += String.fromCharCode(byte)); + const b64 = btoa(encoded); + return b64; +} + +document.querySelector('form').addEventListener('submit', async e => { + e.preventDefault(); + + const content = new FormData(e.target).get('content'); + const b64 = await textToGzipBase64(content); + + const url = `${location.href}#${b64}`; + e.target.elements['url'].innerHTML = `${url.substring(0, 60)}${url.length > 60 ? '...' : ''}`; +}); + +addEventListener('hashchange', e => { + gzipBase64ToText(new URL(e.newURL).hash.substring(1)).then(html => { + document.open(); + document.write(html); + document.close(); + }); +}); + +// Blocks flash of original UI before document.write in the header script executes +if (location.hash === '') { + document.querySelector('body').style.setProperty('display', ''); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..6cfd021 --- /dev/null +++ b/style.css @@ -0,0 +1,74 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; + color: hsl(216deg 50% 10%); + background: hsl(216deg 50% 95%); + block-size: 100dvh; + margin: 0; +} + +body, +form { + display: flex; + flex-direction: column; + align-items: center; +} + +header, +main { + display: flex; + justify-content: center; + inline-size: min(100% - 16px, 720px); + margin-inline: auto; +} + +form { + inline-size: 100%; + gap: 16px; +} + +textarea, +button { + padding: 8px; + border-radius: 8px; + border: 1px solid hsl(216deg 50% 60%); + font-size: 1rem; +} + +textarea { + font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; + box-sizing: border-box; + min-inline-size: min(100%, 720px); + min-block-size: 40ch; + white-space: nowrap; +} + +button { + inline-size: fit-content; + padding: 4px 8px; + cursor: pointer; +} + +output { + word-break: break-all; +} + +footer { + margin-block-start: auto; + margin-block-end: 16px; +} + +a { + text-decoration: none; + font-weight: 700; + color: hsl(216deg 50% 50%); +} + +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} \ No newline at end of file