diff options
feat: properly handle skip-animation
Diffstat (limited to 'src/routes/IndexPage.svelte')
| -rw-r--r-- | src/routes/IndexPage.svelte | 462 |
1 files changed, 462 insertions, 0 deletions
diff --git a/src/routes/IndexPage.svelte b/src/routes/IndexPage.svelte new file mode 100644 index 0000000..8a56f08 --- /dev/null +++ b/src/routes/IndexPage.svelte @@ -0,0 +1,462 @@ +<!-- +/** + * @license AGPL-3.0-OR-LATER + * @copyright 2024 memdmp + * + * Copyright (C) 2024 memdmp + * + * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. + */ + --> +<script lang="ts"> + import logo from './boot-logo.webp'; + import { architecture, hostname, tty, versions } from './distro-info'; + import { login, ttyLines, type RenderBlock, type TTYText } from './shared'; + import { onDestroy, onMount } from 'svelte'; + import { base } from '$app/paths'; + + const initTagLine = `line flex flex-row flex-wrap gap-3 justify-between`; + + const fsckFileCount = Math.floor(Math.random() * 32768 + 6732); + const fsckTotalCount = Math.round( + (fsckFileCount / 6732) * 753664 + Math.random() * 10000, + ); + const blocksTotal = Math.floor(Math.random() * 8000000 + 4000000); + const blocksCount = Math.floor(Math.random() * 600000 + 200000); + + const lanLeastSignificantIPPart = Math.floor(Math.random() * 253 + 2); + + let { + skipAnimation = false, + }: { + skipAnimation?: boolean; + } = $props(); + onMount(() => { + if (skipAnimation && location.pathname !== base + '/skip-animation') + history.replaceState({}, '', base + '/skip-animation'); + }); + + let isScripted = $state(false); + onMount(() => (isScripted = true)); + onDestroy(() => (isScripted = false)); +</script> + +<svelte:head> + <title>/~mem/</title> + <meta name="description" content="memdmp's pure-css homepage demo thing" /> +</svelte:head> + +{#snippet tagLeft(colour: string)} + <span class="text-[{colour}]">*</span> +{/snippet} +{#snippet okTagLeft()} + {@render tagLeft('#51f051')} +{/snippet} +{#snippet tagRight(innerText: string, innerColour: string)} + <span class="text-[#5f5fff]">[</span> + <span class="text-[{innerColour}]">{innerText}</span> + <span class="text-[#5f5fff]">]</span> +{/snippet} +{#snippet okTagRight()} + {@render tagRight('ok', '#51f051')} +{/snippet} +{#snippet okLine(text: string, classes?: string, rightClass?: string)} + <div class="{initTagLine}{classes ? ' ' + classes : ''}"> + <div class="left"> + {@render okTagLeft()} + {text} + </div> + <div class="right{rightClass ? ' ' + rightClass : ''}"> + {@render okTagRight()} + </div> + </div> +{/snippet} +{#snippet ttyTextInnerRenderer(section: RenderBlock)} + <span + class="ttytext-block {section.colour + ? ` text-[${section.colour}]` + : ''}{section.bg ? ` bg-[${section.bg}]` : ''} {section.weight + ? ` ${['', 'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'][section.weight / 100]}` + : ''}{typeof section.italic === 'undefined' + ? '' + : section.italic + ? ' italic' + : ' not-italic'}{typeof section.underlined === 'undefined' + ? '' + : section.underlined + ? ` underline` + : ' no-underline'} inline" + >{#if section.raw}{@html section.value}{:else}{#each section.value + .split('\n') + .map( (l, i, a) => (i === a.length - 1 ? [0, l] : [1, l]), ) as [nl, l]}{l}{#if nl}<br + />{/if}{/each}{/if}</span + > +{/snippet} +{#snippet ttyTextMiddleRenderer( + section: RenderBlock, + line: TTYText & { kind: 'text' }, +)} + {#if section.url} + {#if typeof section.url === 'string'} + {#if section.url.startsWith('newtab:')} + {@const url = section.url.substring(7)} + <a + href={url.startsWith('/') ? base + url : url} + target="_blank" + rel="noopener noreferrer" + class="no-underline text-inherit" + download={section.dl}>{@render ttyTextInnerRenderer(section)}</a + > + {:else if section.url.startsWith('currenttab:')} + {@const url = section.url.substring(11)} + <a + href={url.startsWith('/') ? base + url : url} + class="no-underline text-inherit" + download={section.dl}>{@render ttyTextInnerRenderer(section)}</a + > + {:else} + ERR: Unknown Link Format + {/if} + {:else} + <span + onclick={() => + typeof section.url !== 'function' ? void 0 : section.url(line)} + onkeypress={() => + typeof section.url !== 'function' ? void 0 : section.url(line)} + role="link" + tabindex="0">{@render ttyTextInnerRenderer(section)}</span + > + {/if} + {:else} + {@render ttyTextInnerRenderer(section)} + {/if} +{/snippet} +{#snippet ttyText(line: TTYText)} + {#if line.kind === 'text'} + {#if (line.renderrestriction ?? 'everywhere') === 'everywhere' || line.renderrestriction === 'noscript' || (line.renderrestriction === 'js-only' && isScripted)} + {#if line.renderrestriction === 'noscript'} + <noscript class="inline-block max-w-[100%] {line.classes.join(' ')}" + >{#each line.value as v}{@render ttyTextMiddleRenderer( + v, + line, + )}{/each}</noscript + > + {:else} + <span class="inline-block max-w-[100%] {line.classes.join(' ')}" + >{#each line.value as v}{@render ttyTextMiddleRenderer( + v, + line, + )}{/each}</span + > + {/if} + {/if} + {/if} +{/snippet} + +<div class="hidden"> + {#each ['inline-block', 'block', 'flex', 'inline-flex', 'max-w-full', 'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black'] as c} + <span class={c}></span> + {/each} +</div> + +<div + class="fixed top-0 left-0 w-screen h-screen font-mono" + id="app" + class:skip-animation={skipAnimation} +> + {#if !skipAnimation} + <div + id="bios" + class="flex flex-col items-center justify-between relative font-bios text-lg" + > + <div class="top flex items-center justify-center flex-col"> + <div class="inner text-[#999999]"> + <p class="leading-4 mt-8 -mb-8 max-w-[36rem]"> + <span class="bdsdxe-load" + >BdsDxe: loading Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span + ><br /> + <span class="bdsdxe-start" + >BdsDxe: starting Boot0002 "UEFI Misc Device" from PciRoot + (0x0)/Pci(0x2,0x4)/Pci(0x0,0x0)</span + > + </p> + </div> + </div> + <div class="middle"> + <img + src={logo} + alt="Bootloader Logo" + class="w-32 h-32 flex items-center justify-center" + /> + </div> + <div + class="bottom flex flex-col items-stretch justify-center text-center gap-0.5 w-full pb-4" + > + <div class="start-text">Start boot option</div> + <div + class="bar h-4" + style={`background-image: url("data:image/svg+xml,${encodeURIComponent(`<svg width="32" height="32" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> + <rect x="1" y="1" width="30" height="30" fill="white" stroke="black" stroke-width="2"/> +</svg> +`)}");background-size:contain;`} + ></div> + </div> + </div> + <div id="grub" class="font-grub text-sm"> + <div + class="relative p-4 flex items-stretch justify-stretch flex-col w-screen h-screen" + > + <p class="title text-[#a2a2a2] mb-4 h-4 text-center"> + GNU GRUB version 2.12 + </p> + <div + class="outer-border border-2 border-[#a8a8a8] border-solid h-full px-1 py-2 flex flex-col items-stretch" + > + <div class="entry bg-[#a8a8a8] text-[#000] text-left"> + *Alpine Linux {versions.alpine.number}, with {versions.kernel + .humanReadable} + </div> + <div class="entry text-[#a8a8a8] text-left"> + UEFI Firmware Setup + </div> + </div> + <p class="footer text-[#a2a2a2] my-4 text-left pl-2"> + <span class="block pl-6"> + Use the ↑ and ↓ keys to select which entry is highlighted.<br /> + Press enter to boot the selected OS, `e' to edit the commands before + booting or `c' for a command-line.<br /> + </span> + The highlighted entry will be executed automatically in + <span class="grub-2s inline-block">2</span><span + class="grub-1s inline-block">1</span + >s. + </p> + </div> + </div> + <div id="grub-term" class="font-grub text-sm text-left text-[#a2a2a2]"> + <p class="p-8"> + Booting `Alpine Linux {versions.alpine.number}, with {versions + .kernel.humanReadable}'<br /><br /><span class="load-kernel" + >Loading {versions.kernel.humanReadable} ...</span + ><br /><span class="load-ramdisk">Loading initial ramdisk ...</span> + </p> + </div> + <!-- + flex col reverse and mb auto are hacks for it to auto scroll to bottom(!) + flex col reverse only works due to nested inner (which would be at bottom of screen, if it wasnt for mb-auto div above it) + --> + <div id="openrc" class="overflow-y-auto flex flex-col-reverse"> + <div class="mb-auto"></div> + <div class="font-mono leading-4 text-[#b9b9b9] flex flex-col p-4"> + <div class="line"> + <span class="text-[#51f051]">OpenRC</span> + <span class="text-[#4bdfdf]">{versions.openrc}</span> + is starting up Linux + <span class="text-[#5f5fff]" + >{versions.kernel.id} ({architecture})</span + > + </div> + <div class="line">​</div> + {@render okLine('/proc/ is already mounted')} + {@render okLine('Mounting /run ...')} + {@render okLine('/run/openrc: creating directory')} + {@render okLine('/run/lock: creating directory', 'openrc-boot-step-1')} + {@render okLine('/run/lock: correcting owner', 'openrc-boot-step-1')} + {@render okLine( + 'Caching service dependencies ...', + 'openrc-boot-step-1', + )} + {@render okLine( + 'Remounting devtmpfs on /dev ...', + 'openrc-boot-step-2', + )} + {@render okLine('Mounting /dev/mqueue ...', 'openrc-boot-step-3')} + {@render okLine( + 'Mounting security filesystem ...', + 'openrc-boot-step-4', + )} + {@render okLine('Mounting debug filesystem ...', 'openrc-boot-step-5')} + {@render okLine( + 'Mounting persistent storage (pstore) filesystem ...', + 'openrc-boot-step-5', + )} + {@render okLine( + 'Mounting efivarfs filesystem ...', + 'openrc-boot-step-5', + )} + {@render okLine('Starting busybox mdev ...', 'openrc-boot-step-6')} + {@render okLine('Scanning hardware for mdev ...', 'openrc-boot-step-6')} + {@render okLine('Loading hardware drivers ...', 'openrc-boot-step-7')} + {@render okLine('Loading modules ...', 'openrc-boot-step-8')} + {@render okLine( + 'Setting system clock using the hardware clock [UTC] ...', + 'openrc-boot-step-9', + )} + {@render okLine( + 'Checking local filesystems ...', + 'openrc-boot-step-10', + )} + <div class="line openrc-boot-step-11"> + /dev/mapper/bepis: clean, {fsckFileCount}/{fsckTotalCount} files, {blocksCount}/{blocksTotal} + blocks + </div> + {@render okLine( + 'Remounting root filesystem read/write ...', + 'openrc-boot-step-12', + )} + {@render okLine('Remounting filesystems ...', 'openrc-boot-step-13')} + {@render okLine('Activating swap devices ...', 'openrc-boot-step-14')} + {@render okLine( + 'Mounting local filesystems ...', + 'openrc-boot-step-15', + )} + {@render okLine( + 'Configuring kernel parameters ...', + 'openrc-boot-step-16', + )} + {@render okLine( + 'Creating user login records ...', + 'openrc-boot-step-17', + )} + {@render okLine('Setting hostname ...', 'openrc-boot-step-18')} + {@render okLine('Setting keymap ...', 'openrc-boot-step-19')} + {@render okLine('Starting networking ...', 'openrc-boot-step-20')} + {@render okLine('\xa0\xa0lo ...', 'openrc-boot-step-21')} + {@render okLine('\xa0\xa0eth0 ...', 'openrc-boot-step-22')} + <div class="line openrc-boot-step-22">udhcpd: started</div> + <div class="line openrc-boot-step-23"> + udhcpd: broadcasting discover + </div> + <!-- TODO: configurable subnet uwu --> + <div class="line openrc-boot-step-24"> + udhcpd: broadcasting select for 192.168.1.{lanLeastSignificantIPPart}, + server 192.168.1.1 + </div> + <div class="line openrc-boot-step-25"> + udhcpd: lease of 192.168.1.{lanLeastSignificantIPPart} obtained from 192.168.1.1, + lease time 3600 + </div> + {@render okLine( + 'Seeding random number generator ...', + 'openrc-boot-step-26', + )} + {@render okLine( + 'Seeding 256 bits without crediting', + 'openrc-boot-step-26', + )} + {@render okLine( + 'Saving 256 bits of creditable seed for next boot', + 'openrc-boot-step-26', + )} + {@render okLine('Starting logbookd ...', 'openrc-boot-step-27')} + {@render okLine('Starting busybox acpid ...', 'openrc-boot-step-28')} + {@render okLine('Starting busybox crond ...', 'openrc-boot-step-29')} + {@render okLine('Starting busybox ntpd ...', 'openrc-boot-step-29')} + <div class="line openrc-boot-step-30">​</div> + <div class="line openrc-boot-step-30"> + Welcome to Alpine Linux {versions.alpine + .number}{#if versions.alpine.isEdge} (edge){/if} + </div> + <div class="line openrc-boot-step-30"> + Kernel {versions.kernel.humanReadable} on an {architecture} (/dev/{tty}) + </div> + <div class="line openrc-boot-step-30">​</div> + <div class="line openrc-boot-step-30"> + {hostname} login: <span class="openrc-username" + >{#each login.username + .split('') + .map((v, i) => [v, i] as const) as [char, idx]}<span + class="openrc-username-char openrc-username-char-{idx} inline-block" + >{char}</span + >{/each}</span + ><span class="openrc-hide-at-login-prompt-username-done" + ><span class="openrc-username-anim" + ><code class="hidden-after-anim">_</code></span + ></span + ><span class="openrc-pw-line" + ><br /> + Password: <span class="openrc-password-anim" + ><code class="hidden-after-anim">_</code></span + ></span + > + </div> + <!-- TODO: Animate login and launching a tui here (for js enjoyers) or a minimal terminal after clearing the screen, and a no js screen alongside a plaintext version of the thing (for schizo noscript lovers) --> + <div class="hidden-after-anim"> + <span class="openrc-hide-at-last-boot-step inline-block"> + <pre class="flashing-cursor">_</pre> + </span> + </div> + <div + class="line ttylines-openrc font-mono text-[#070505] flex flex-col" + > + {#each ttyLines.filter(((maxidx) => (_, i) => i < (maxidx === -1 ? Infinity : maxidx))(ttyLines.findIndex((v) => v.kind === 'clear'))) as line} + {@render ttyText(line)} + {/each} + </div> + </div> + </div> + {/if} + <!-- FIXME: what is this #if? this seems broken --> + {#if ttyLines.find((v) => v.kind === 'clear')} + <!-- FIXME: this is utterly unreadable and i dont know what this does anymore --> + {@const arr = ttyLines + .map((v, i) => [v, i] as const) + .filter(([v]) => v.kind === 'clear') + .map((v, i, a) => [v[1], a[i + 1]?.[1], i] as const)} + {#each skipAnimation ? [arr[arr.length - 1]] : arr as [idx, nextIdx, clearIdx]} + <div + id="tty-{clearIdx}" + class="overflow-y-auto max-h-screen flex flex-col-reverse" + > + <div class="mb-auto"></div> + <div class="font-mono leading-4 text-[#070505] flex flex-col p-4"> + {#each ttyLines.filter((_, i) => i >= idx && i < (nextIdx ?? Infinity)) as line} + {@render ttyText(line)} + {/each} + </div> + </div> + {/each} + {/if} +</div> + +<style> + @keyframes flashing-cursor { + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } + 99% { + opacity: 1; + } + 100% { + opacity: 0; + } + } + .flashing-cursor { + animation-name: flashing-cursor; + animation-duration: 0.4s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + .hidden-after-anim { + margin-top: -99999vh; + margin-bottom: 99999vh; + margin-left: -99999vw; + margin-right: 99999vw; + transform: scaleX(0); + opacity: 0; + } + .ttytext-block { + white-space-collapse: preserve-spaces; + } +</style> |