Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const tile = tv({ slots: { root: "flex flex-col gap-2 rounded-sm border border-border-default p-4", heading: "flex items-center gap-2 typography-paragraph-regular text-foreground-default", body: "flex-1 typography-paragraph-small text-foreground-muted", action: "ml-auto flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline" }, variants: { span: { full: { root: "sm:col-span-2" }, tall: { root: "sm:row-span-2" }, single: { root: "" } }, link: { true: { root: "flex-1 gap-1 no-underline transition-colors hover:bg-background-subtle hover:no-underline" }, false: { root: "" } } }, defaultVariants: { span: "single", link: false } });
export type TileVariants = VariantProps<typeof tile>;
const TILE_STAGGER_MS = 60; const TILE_MAX_DELAY_MS = 140;
function tileDelay(index: number) { return Math.min(index * TILE_STAGGER_MS, TILE_MAX_DELAY_MS); }</script>
<script lang="ts"> import type { Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { quintOut } from "svelte/easing"; import { fly } from "svelte/transition"; import { prefersReducedMotion } from "svelte/motion"; import { resolve } from "$app/paths"; import ArrowRight from "$icon/arrow-right"; import BookMarked from "$icon/book-marked"; import GitPullRequest from "$icon/git-pull-request"; import Layers2 from "$icon/layers-2"; import MessageCircle from "$icon/message-circle"; import Server from "$icon/server"; import Twitter from "$icon/twitter"; import Bluesky from "$lib/components/icons/Bluesky.svelte"; import StepHeader from "$lib/components/welcome/StepHeader.svelte";
const slot = tile();
function tileTransition(index: number) { return { y: prefersReducedMotion.current ? 0 : 8, duration: prefersReducedMotion.current ? 0 : 220, delay: prefersReducedMotion.current ? 0 : tileDelay(index), easing: quintOut }; }
const coreHref = resolve("/tangled.org/core" as "/"); const newRepoHref = resolve("/repo/new");
const docs: { icon: Component<SvelteHTMLElements["svg"]>; title: string; body: string; href: string; }[] = [ { icon: Server, title: "Host your own knot", body: "Host repositories on your own infrastructure with knots.", href: "https://docs.tangled.org/knot-self-hosting-guide.html" }, { icon: Layers2, title: "Host your own spindle", body: "Run CI jobs on your own infrastructure using spindles.", href: "https://docs.tangled.org/spindles.html#self-hosting-guide" } ];
const community: { icon: Component<SvelteHTMLElements["svg"]>; title: string; body: string; href: string; }[] = [ { icon: Bluesky, title: "Bluesky", body: "Follow us @tangled.org on Bluesky for updates.", href: "https://bsky.app/profile/tangled.org" }, { icon: MessageCircle, title: "Discord", body: "Join the community on Discord.", href: "https://chat.tangled.org" }, { icon: Twitter, title: "X (Twitter)", body: "Follow us @tangled_org on X for updates.", href: "https://x.com/tangled_org" } ];</script>
<div class="flex flex-col gap-6"> <StepHeader title="You're all set!" subtitle="Here are a few things to explore next:" />
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2"> <div class={tile({ span: "full" }).root()} in:fly={tileTransition(0)}> {@render heading(BookMarked, "Create a repository")} <p class={slot.body()}>Kick things off by creating your first repository.</p> <a href={newRepoHref} class={slot.action()}> Create <ArrowRight class="size-4 shrink-0" aria-hidden="true" /> </a> </div>
<div class={tile({ span: "tall" }).root()} in:fly={tileTransition(1)}> {@render heading(GitPullRequest, "Contribute to the Tangled project")} <p class={slot.body()}> Tangled is fully open-source: Open a feature request, or submit a bug-fix! <br /><br /> All contributions are welcome. </p> <a href={coreHref} class={slot.action()}> Contribute <ArrowRight class="size-4 shrink-0" aria-hidden="true" /> </a> </div>
{#each docs as doc, i (doc.title)} <div class={slot.root()} in:fly={tileTransition(2 + i)}> {@render heading(doc.icon, doc.title)} <p class={slot.body()}>{doc.body}</p> <a href={doc.href} target="_blank" rel="external noopener noreferrer" class={slot.action()} > Read the docs <ArrowRight class="size-4 shrink-0" aria-hidden="true" /> </a> </div> {/each} </div>
<ul class="grid grid-cols-1 gap-3 sm:grid-cols-3"> {#each community as link, i (link.title)} <li class="flex" in:fly={tileTransition(4 + i)}> <a href={link.href} target="_blank" rel="external noopener noreferrer" class={tile({ link: true }).root()} > {@render heading(link.icon, link.title)} <span class={slot.body()}>{link.body}</span> </a> </li> {/each} </ul></div>
{#snippet heading(icon: Component<SvelteHTMLElements["svg"]>, title: string)} {@const Icon = icon} <span class={slot.heading()}> <Icon class="size-4 shrink-0" aria-hidden="true" /> {title} </span>{/snippet}