Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879<script lang="ts"> import "#lib/components/landing/landing.css"; import "#lib/components/landing/material.css"; import { onMount } from "svelte"; import Cta from "#lib/components/landing/cta/Cta.svelte"; import EmbossFilter from "#lib/components/landing/EmbossFilter.svelte"; import Features from "#lib/components/landing/features/Features.svelte"; import { Guest, setGuest } from "#lib/components/landing/guest.svelte.ts"; import Hackable from "#lib/components/landing/hackable/Hackable.svelte"; import Hero from "#lib/components/landing/hero/Hero.svelte"; import Footer from "#lib/components/landing/shell/Footer.svelte"; import SelfHost from "#lib/components/landing/selfhost/SelfHost.svelte"; import Navbar from "#lib/components/landing/shell/Navbar.svelte"; import { setThread, Thread } from "#lib/components/landing/thread/thread.svelte.ts"; import ThreadRail from "#lib/components/landing/thread/ThreadRail.svelte"; import { loadSounds } from "#lib/components/landing/sound.ts"; import type { Notification } from "#lib/components/landing/hero/notifications.ts"; import RecentUpdates from "#lib/components/landing/updates/RecentUpdates.svelte"; import type { Update } from "#lib/components/landing/updates/updates.ts";
/* * The landing page for signed-out visitors. One thread runs through it, from the hero's * notification stack down the rail beside every section into the CTA's knot (thread/). * Sections sit in rail containers, so their content keeps clear of the line. */
interface Props { /** The hero stack's live activity, from the public timeline. */ activity?: Notification[] | null; updates?: Update[] | null; }
// Each is null when its source couldn't be reached: the hero's stack shows a recorded // snapshot instead (hero/mock.ts) and Recent updates is left out. let { activity, updates }: Props = $props();
const thread = setThread(new Thread()); const guest = setGuest(new Guest());
onMount(() => { void loadSounds(); return () => guest.destroy(); });
const startAtTop = `<script> if (performance.getEntriesByType("navigation")[0]?.type === "reload") { history.scrollRestoration = "manual"; history.replaceState(null, ""); } </${"script"}>`;</script>
<svelte:head> <!-- eslint-disable-next-line svelte/no-at-html-tags -- static --> {@html startAtTop}</svelte:head>
<div class="landing" {@attach thread.mark("root")}> <!-- the hero's side grids, the full height of the page --> <div class="page-grid l" aria-hidden="true"></div> <div class="page-grid r" aria-hidden="true"></div> <EmbossFilter /> <Navbar /> <main> <Hero {activity} /> <div class="body" {@attach thread.mark("body")}> <Features /> <Hackable /> <SelfHost /> {#if updates?.length} <RecentUpdates {updates} /> {/if} </div> <Cta /> </main> <Footer /> <ThreadRail /></div>