Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128<!-- eslint-disable svelte/no-navigation-without-resolve -- external docs and repos --><script lang="ts"> import "#lib/components/landing/hackable/hackable.css"; import ArrowRight from "$icon/arrow-right"; import Corners from "#lib/components/landing/hackable/Corners.svelte"; import DollyCanvas from "#lib/components/landing/hackable/DollyCanvas.svelte"; import { getThread } from "#lib/components/landing/thread/thread.svelte.ts"; import Container from "#lib/components/landing/ui/Container.svelte"; import Heading from "#lib/components/landing/ui/Heading.svelte"; import Section from "#lib/components/landing/ui/Section.svelte"; import Card from "#lib/components/ui/Card.svelte";
/* * Hackable all the way down: centred heading, then three cards in a column and the dolly * editor beside them (DollyCanvas.svelte). Below desktop the heading sits flush left on * one run; on mobile the editor comes before the cards. * * The thread ties its knot for the section on the heading on desktop's rail, and below * that one for each card, as the features do for theirs. */
const thread = getThread();
const MONOREPO = "https://tangled.org/@tangled.org/core"; const CARD = "relative flex flex-1 flex-col gap-sm overflow-visible border border-border-strong p-md typography-paragraph-regular text-foreground-muted md:p-lg"; const TITLE = "text-lg font-semibold text-foreground-default md:text-xl";</script>
<Section class="hk" id="hackable"> <Container width="rail"> <header class="hk-head"> <Heading class="gh" solid="Hackable all the way down." dim="Extend it as you see fit." {@attach thread.knot({ id: "hackable", label: "Hackable", on: "desktop" })} /> </header>
<div class="hk-body grid grid-cols-1 gap-xl md:grid-cols-2"> <div class="flex flex-col gap-xl md:order-first [&_a]:whitespace-nowrap [&_a]:text-foreground-default [&_a]:underline [&_a]:decoration-border-strong [&_a]:underline-offset-4 [&_a:hover]:decoration-foreground-default" > <Card rounded={false} border={false} padding="none" class={CARD}> <Corners /> <h3 class={TITLE} {@attach thread.knot({ id: "extensible", label: "Infinitely extensible", on: "narrow" })} > Infinitely extensible </h3> <p> You can implement your own repository storage backends or CI services by following the Tangled lexicon specification. </p> <p> Store your code anywhere, connect your CI to any provider, bring your own clients! </p> </Card>
<Card rounded={false} border={false} padding="none" class={CARD}> <Corners /> <h3 class={TITLE} {@attach thread.knot({ id: "open-source", label: "Completely open source", on: "narrow" })} > Completely open source </h3> <p> All of Tangled is open source and built with the community! Check out the <a href={MONOREPO} target="_blank" rel="noopener noreferrer">monorepo</a> and join in on the fun. </p> <p> We welcome contributions however big or small. You can start contributing by picking up a <a href="{MONOREPO}/issues?label=good-first-issue" target="_blank" rel="noopener noreferrer">good-first-issue</a >. </p> </Card>
<Card rounded={false} border={false} padding="none" class={CARD}> <Corners /> <h3 class={TITLE} {@attach thread.knot({ id: "atproto", label: "Built on AT Protocol", on: "narrow" })} > Built on AT Protocol </h3> <p> AT Protocol enables federated code collaboration. Submit pull requests or bug reports to any repository hosted on any server. </p> <p> <a href="https://tangled.org/docs/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2xs" > Read the docs <ArrowRight class="size-4" aria-hidden="true" /> </a> </p> </Card> </div>
<DollyCanvas class="order-first" /> </div> </Container></Section>