{{ define "title" }}tangled · tightly-knit social coding{{ end }}

{{ define "extrameta" }}
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="tangled · tightly-knit social coding" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://tangled.org" />
    <meta property="og:description" content="The next-generation social coding platform." />
    <meta property="og:image" content="https://assets.tangled.network/tangled_og.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Tangled" />
    <meta name="twitter:description" content="The next-generation social coding platform." />
    <meta name="twitter:image" content="https://assets.tangled.network/tangled_og.png" />

    <!-- Additional SEO -->
    <meta name="description" content="The next-generation social coding platform. Host repos on your infrastructure with knots, use stacked pull requests, and run CI with spindles." />
    <link rel="canonical" href="https://tangled.org" />
{{ end }}


{{ define "content" }}
  <div class="flex flex-col gap-24 md:gap-40 my-24 md:my-32">
    {{ template "timeline/fragments/hero" . }}
    {{ template "timeline/fragments/preview" . }}
    {{ template "features1" . }}
    {{ template "features2" . }}
    {{ template "recentUpdates" . }}
    {{ template "community" . }}
  </div>
{{ end }}

{{ block "topbarLayout" . }}
  <header class="max-w-screen-xl mx-auto w-full col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
     {{ if .LoggedInUser }}
      <div id="upgrade-banner"
           hx-get="/upgradeBanner"
           hx-trigger="load"
           hx-swap="innerHTML">
      </div>
    {{ end }}
    {{ template "layouts/fragments/topbar" . }}
  </header>
{{ end }}

{{ block "footerLayout" . }}
  <footer class="z-10">
    {{ template "layouts/fragments/footer" . }}
  </footer>
{{ end }}

{{ block "bodyClasses" . }}
  bg-transparent bg-gradient-to-b from-white to-slate-100 dark:bg-none dark:bg-gray-900
{{ end }}

{{ block "mainLayout" . }}
  <div class="flex-grow relative">
    <div
      class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none bg-[url('https://assets.tangled.network/yarn_ball.svg')] bg-no-repeat bg-right-bottom bg-[length:500px] md:bg-[length:1000px] w-full">
    </div>
    <div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10">
      {{ block "contentLayout" . }}
      <main>
        {{ block "content" . }}{{ end }}
      </main>
      {{ end }}

      {{ block "contentAfterLayout" . }}
      <main>
        {{ block "contentAfter" . }}{{ end }}
      </main>
      {{ end }}
    </div>
  </div>
{{ end }}

{{ define "features1" }}
  {{ $labelStyle := "normal-case cursor-pointer w-auto md:w-full p-4 md:px-6 rounded bg-white dark:bg-gray-800 font-medium text-base md:text-lg opacity-50 border border-gray-200 dark:border-gray-700 relative overflow-hidden" }}
  {{ $spanStyle := "z-10 items-center justify-between gap-2 w-full" }}
  {{ $connectorStyle := "w-0.5 h-6 bg-gray-300 dark:bg-gray-600 opacity-0 mx-auto" }}
  {{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm p-6 border border-gray-200 dark:border-gray-700 grid-cols-1 md:grid-cols-2" }}
  {{ $progressOverlayStyle := "absolute inset-0 bg-gray-600/10 dark:bg-gray-100/10 w-0 transition-none" }}

  <style>
    @media (max-width: 768px) {
      .features-grid:has(#feature-prs:checked) {
        grid-template-columns: 1fr auto auto;
      }

      .features-grid:has(#feature-knots:checked) {
        grid-template-columns: auto 1fr auto;
      }

      .features-grid:has(#feature-spindles:checked) {
        grid-template-columns: auto auto 1fr;
      }

      #feature-prs:checked ~ label[for="feature-prs"] .label-text,
      #feature-knots:checked ~ label[for="feature-knots"] .label-text,
      #feature-spindles:checked ~ label[for="feature-spindles"] .label-text {
        display: inline-flex !important;
      }
      #feature-prs:checked ~ label[for="feature-prs"] .icon-only,
      #feature-knots:checked ~ label[for="feature-knots"] .icon-only,
      #feature-spindles:checked ~ label[for="feature-spindles"] .icon-only {
        display: none !important;
      }
    }
  </style>

  <div class="features-grid w-full grid grid-cols-3 gap-x-6 px-2">
    <input type="radio" id="feature-prs" name="feature" class="peer/prs hidden" checked />
    <input type="radio" id="feature-knots" name="feature" class="peer/knots hidden" />
    <input type="radio" id="feature-spindles" name="feature" class="peer/spindles hidden" />

    <label for="feature-prs" class="{{ $labelStyle }} peer-checked/prs:opacity-100 peer-checked/prs:shadow-sm">
      <span class="label-text hidden md:inline-flex {{ $spanStyle }}">A better way to review {{ i "git-pull-request" "size-5" }}</span>
      <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "git-pull-request" "size-5" }}</span>
      <div class="{{ $progressOverlayStyle }}" data-progress="prs"></div>
    </label>

    <label for="feature-knots" class="{{ $labelStyle }} peer-checked/knots:opacity-100 peer-checked/knots:shadow-sm">
      <span class="label-text hidden md:inline-flex {{ $spanStyle }}">Completely self-hostable {{ i "hard-drive" "size-5" }}</span>
      <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "hard-drive" "size-5" }}</span>
      <div class="{{ $progressOverlayStyle }}" data-progress="knots"></div>
    </label>

    <label for="feature-spindles" class="{{ $labelStyle }} peer-checked/spindles:opacity-100 peer-checked/spindles:shadow-sm">
      <span class="label-text hidden md:inline-flex {{ $spanStyle }}">Quick and easy CI {{ i "layers-2" "size-5" }}</span>
      <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "layers-2" "size-5" }}</span>
      <div class="{{ $progressOverlayStyle }}" data-progress="spindles"></div>
    </label>

    <div class="{{ $connectorStyle }} peer-checked/prs:opacity-100"></div>
    <div class="{{ $connectorStyle }} peer-checked/knots:opacity-100"></div>
    <div class="{{ $connectorStyle }} peer-checked/spindles:opacity-100"></div>

    {{ $titleStyle := "text-xl md:text-2xl font-bold my-2 text-gray-900 dark:text-gray-100" }}
    {{ $textContentStyle := "pb-6 md:p-6 md:pr-12 md:text-lg" }}
    {{ $imgContentStyle := "w-full p-6 min-h-96 min-h-[400px] md:min-h-[500px] rounded overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700" }}

    <div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid ">
      <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center">
        <section>
          <h1 class="{{ $titleStyle }}">Stacked PRs</h1>
          <p>
          Break down large features into small, reviewable chunks. Stack pull
          requests on top of each other and ship faster with better code
          reviews. Tangled natively supports stacking using Jujutsu <a
            href="https://docs.jj-vcs.dev/latest/glossary/#change-id"
            class="underline">Change-Ids</a>. 
          </p>
        </section>
        <section>
          <h1 class="{{ $titleStyle }}">Round-based review</h1>
          <p>
          Pull-requests in Tangled are round-based, which means, each
          submission is "immutable". To update a PR, the author must start a
          second revision or "round". As a reviewer, you never have to worry
          about a PR changing <em>during</em> a review!
          </p>
        </section>
      </div>
      <div class="{{ $imgContentStyle }} pl-24 md:pl-40">
        <div class="flex flex-col" style="transform: perspective(1000px) rotateX(15deg)">
          {{ $mockPRs := list
            (dict "Id" 941 "Title" "spindle/nixery: update setup command docs" "State" "open" )
            (dict "Id" 940 "Title" "appview/pulls: fix search not updating count of pull requests" "State" "open" )
            (dict "Id" 939 "Title" "appview/pages: improved seo tags for home, repo and profile" "State" "open" )
            (dict "Id" 938 "Title" "appview/state: update robots.txt" "State" "merged" )
            (dict "Id" 937 "Title" "appview/profile: show dummy profile when no tangled profile" "State" "merged" )
            (dict "Id" 936 "Title" "appview/pipelines: fix incorrect totals" "State" "merged" )
          }}
          {{ range $index, $pr := $mockPRs }}
            {{ $scale := 1.4 }}
            {{ if gt $index 0 }}
              {{ $scale = subf64 1.4 (mulf64 (f64 $index) 0.04) }}
              {{ if lt $scale 1.0 }}{{ $scale = 1.0 }}{{ end }}
            {{ end }}
            {{ $zIndex := sub 100 $index }}
            {{ template "mockPRRow" (dict "PR" $pr "Scale" $scale "ZIndex" $zIndex) }}
          {{ end }}
        </div>
      </div>
    </div>

    <div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid">
      <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center">
        <section>
          <h1 class="{{ $titleStyle }}">Knots</h1>
          <p>
          Host your repositories on your own infrastructure with <a
            href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="underline">knots</a>.
          Knots are lightweight git repository hosts that syndicate git
          operations across the network. You can setup a knot server on a
          machine as small as a Raspberry Pi!
          <br>
          <br>
          If you want to try Tangled without self-hosting, fear not! All users
          are added to our hosted knot by default.
          </p>
        </section>
        <section>
          <h1 class="{{ $titleStyle }}">Spindles</h1>
          <p>
          Host CI runners on your own infrastructure with <a
            href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="underline">spindles</a>.
          Spindles are responsible for queuing up CI jobs and syndicating
          pipeline statuses to the network. Presently, the task of sandboxing
          workflows and caching dependencies is delegated to Docker.
          </p>
        </section>
      </div>
      {{ $planetWrapperStyle := "absolute left-1/2 bottom-0 flex items-start justify-center -translate-x-1/2 translate-y-1/2" }}
      {{ $orbitStyle := "absolute left-1/2 bottom-0 rounded-full border-2 border-gray-200 dark:border-gray-700 -translate-x-1/2 translate-y-1/2 shadow-lg" }}
      {{ $planetStyle := "-mt-8 size-16 md:-mt-10 md:size-20 rounded-full shadow-sm border flex items-center justify-center" }}
      <div class="{{ $imgContentStyle }} min-h-[500px] relative">
        <div class="size-[250px] {{ $orbitStyle }}"></div>
        <div class="size-[500px] {{ $orbitStyle }}"></div>
        <div class="size-[750px] {{ $orbitStyle }}"></div>

        <!-- planets on inner orbit  -->
        <div class="{{ $planetWrapperStyle }} size-[250px] rotate-[12deg]">
          <div class="{{ $planetStyle }} -rotate-[12deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500">
            {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }}
          </div>
        </div>

        <!-- Planets on middle orbit  -->
        <div class="{{ $planetWrapperStyle }} size-[500px] -rotate-[32deg]">
          <div class="{{ $planetStyle }} rotate-[32deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500">
            {{ i "hard-drive" "size-8" "text-green-500" "dark:text-green-500" }}
          </div>
        </div>
        <div class="{{ $planetWrapperStyle }} size-[500px] rotate-[24deg]">
          <div class="{{ $planetStyle }} -rotate-[24deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500">
            {{ i "server" "size-8" "text-amber-500" "dark:text-amber-500" }}
          </div>
        </div>

        <!-- Planets on outer orbit -->
        <div class="{{ $planetWrapperStyle }} size-[750px] -rotate-[40deg]">
          <div class="{{ $planetStyle }} rotate-[40deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500">
            {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }}
          </div>
        </div>
        <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[3deg]">
          <div class="{{ $planetStyle }} -rotate-[3deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500">
            {{ i "router" "size-8" "text-green-500" "dark:text-green-500" }}
          </div>
        </div>
        <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[44deg]">
          <div class="{{ $planetStyle }} -rotate-[44deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500">
            {{ i "database" "size-8" "text-amber-500" "dark:text-amber-500" }}
          </div>
        </div>
      </div>
    </div>

    <div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid">
      <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center">
        <section>
          <h1 class="{{ $titleStyle }}">Nix-powered CI</h1>
          <p>
          Pick and choose dependencies for your CI pipelines from <a
            href="https://docs.tangled.org/spindles.html#dependencies"
            class="underline"><code>nixpkgs</code></a>, one of the biggest
          package repositories.
          <br>
          <br>
          All dependencies and workflow images are cached using <a
            href="https://nixery.dev/">nixery</a>. Subsuquent runs of your CI
          pipeline will load all dependencies almost instantly.
          </p>
        </section>
        <section>
          <div class="flex items-center gap-2 my-4">
            <h1 class="{{ $titleStyle }}">Customizable Engines</h1>
            <span class="text-sm text-blue-500 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 rounded p-1">coming soon</span>
          </div>
          <p>
          We know nix is not for everybody! Spindles are built to have
          swappable engines, on our roadmap are Docker and Firecracker based
          engines.
          </p>
        </section>
      </div>
      <div class="{{ $imgContentStyle }} flex items-end pb-0">
        <div class="w-full mx-auto border-t border-l border-r border-gray-200 dark:border-gray-700 rounded-t overflow-hidden shadow-lg">
          <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2 justify-between">
            <span class="font-mono text-gray-600 dark:text-gray-400 text-sm md:text-lg">.tangled/workflows/test.yml</span>
            <div class="flex items-center gap-2">
              <div class="size-3 rounded-full bg-red-500"></div>
              <div class="size-3 rounded-full bg-yellow-500"></div>
              <div class="size-3 rounded-full bg-green-500"></div>
            </div>
          </div>
          <div class="bg-white dark:bg-gray-800 p-4 overflow-x-auto text-sm md:text-lg">
            {{ $yamlContent := `when:
  - event: push
    branch: main

dependencies:
  nixpkgs:
    - go
    - gcc

environment:
  CGO_ENABLED: 1

steps:
  - name: run all tests
    command: go test -v ./...` }}
            <div class="whitespace-pre">{{ code $yamlContent ".tangled/workflows/test.yml" | escapeHtml }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const featureIds = ['feature-prs', 'feature-knots', 'feature-spindles'];
      const progressNames = ['prs', 'knots', 'spindles'];
      let currentIndex = 0;
      let timerInterval = null;

      function stopTimer() {
        if (timerInterval) {
          clearInterval(timerInterval);
          timerInterval = null;
        }
        document.querySelectorAll('[data-progress]').forEach(el => {
          el.classList.remove('animate-progress');
        });
      }

      const firstProgress = document.querySelector('[data-progress="prs"]');
      if (firstProgress) {
        firstProgress.classList.add('animate-progress');
      }

      document.querySelectorAll('label[for^="feature-"]').forEach(label => {
        label.addEventListener('click', stopTimer);
      });

      timerInterval = setInterval(function() {
        document.querySelectorAll('[data-progress]').forEach(el => {
          el.classList.remove('animate-progress');
          void el.offsetWidth; // force reflow
        });

        currentIndex = (currentIndex + 1) % featureIds.length;
        document.getElementById(featureIds[currentIndex]).checked = true;

        const activeProgress = document.querySelector('[data-progress="' + progressNames[currentIndex] + '"]');
        if (activeProgress) {
          activeProgress.classList.add('animate-progress');
        }
      }, 5000);
    });
  </script>
{{ end }}

{{ define "mockPRRow" }}
  {{ $pr := .PR }}
  <div class="flex text-sm items-center justify-between w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 shadow relative" style="transform: scale({{ .Scale }}); transform-origin: top center; z-index: {{ .ZIndex }};">
    <div class="flex items-center gap-2 min-w-0 flex-1 pr-2">
      <div class="flex-shrink-0">
        {{ if eq $pr.State "open" }}
          {{ i "git-pull-request" "size-4 text-green-500" }}
        {{ else }}
          {{ i "git-merge" "size-4 text-purple-500" }}
        {{ end }}
      </div>
      <span class="truncate text-sm text-gray-800 dark:text-gray-200">
        <span class="text-gray-500 dark:text-gray-400">#{{ $pr.Id }}</span>
        {{ $pr.Title }}
      </span>
    </div>
  </div>
{{ end }}

{{ define "features2" }}
  {{ $cardStyle := "bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700" }}
  {{ $cardInnerStyle := "flex flex-row items-center gap-4 md:gap-6 p-4 md:p-6 md:pt-8 relative" }}
  {{ $contentStyle := "flex-1 flex flex-col" }}
  {{ $titleStyle := "text-xl md:text-2xl font-bold mb-2 md:mb-3 text-gray-900 dark:text-gray-100" }}
  {{ $descriptionStyle := "text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-3 md:mb-0" }}
  {{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-gray-700 dark:text-gray-300 font-medium" }}
  {{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }}
  {{ $iconCircleStyle := "w-full h-full rounded-full flex items-center justify-center" }}
  {{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}

  <div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
    <div class="{{ $cardStyle }} md:mr-32">
      <div class="{{ $cardInnerStyle }}">
        <div class="{{ $contentStyle }}">
          <h3 class="{{ $titleStyle }}">Built on AT Protocol</h3>
          <p class="{{ $descriptionStyle }}">
            AT Protocol enables federated code-collaboration. Submit
            pull-requests or bug-reports to any repository hosted on any
            server.
            <br>
            <br>
            Bring an existing AT Protocol account (such as your Bluesky
            account), or signup for one with us.
            <a class="underline" href="https://docs.tangled.org/quick-start-guide.html#login-or-sign-up">Read the docs to know more.</a>
          </p>
          <a href="TODO" class="{{ $linkMobileStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
        <div class="{{ $iconContainerStyle }}">
          <div class="{{ $iconCircleStyle }} bg-blue-100 dark:bg-blue-900/50">
            {{ i "at-sign" "size-12 md:size-24" "text-blue-500 dark:text-blue-500" "rotate-12" }}
          </div>
          <a href="TODO" class="{{ $linkDesktopStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
      </div>
    </div>

    <div class="{{ $cardStyle }} md:ml-32">
      <div class="{{ $cardInnerStyle }}">
        <div class="{{ $contentStyle }}">
          <h3 class="{{ $titleStyle }}">Free and Open-source</h3>
          <p class="{{ $descriptionStyle }}">
            All of Tangled is open-source and built in the open!
            Check out the <a class="underline" href="https://tangled.org/core">monorepo</a> and join in on the fun.
            <br>
            <br>
            We welcome contributions however big or small. You can start contributing by picking up a
            <a class="underline" href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>.
          </p>
          <a href="TODO" class="{{ $linkMobileStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
        <div class="{{ $iconContainerStyle }}">
          <div class="{{ $iconCircleStyle }} bg-green-100 dark:bg-green-900/50">
            {{ i "package-open" "size-12 md:size-24" "text-green-500 dark:text-green-500" "-rotate-12" }}
          </div>
          <a href="TODO" class="{{ $linkDesktopStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
      </div>
    </div>

    <div class="{{ $cardStyle }} md:mr-32">
      <div class="{{ $cardInnerStyle }}">
        <div class="{{ $contentStyle }}">
          <h3 class="{{ $titleStyle }}">Social coding is back</h3>
          <p class="{{ $descriptionStyle }}">
            Discover trending projects, follow your friends and star your favourite repositories. Coding is better together!
            <br>
            <br>
            You can use one account for all of the atmosphere. If you have
            friends on Bluesky, you will find them on Tangled with the same
            handle.
          </p>
          <a href="TODO" class="{{ $linkMobileStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
        <div class="{{ $iconContainerStyle }}">
          <div class="{{ $iconCircleStyle }} bg-amber-100 dark:bg-amber-900/50">
            {{ i "message-circle-heart" "size-12 md:size-24" "text-amber-500 dark:text-amber-500" "rotate-12" }}
          </div>
          <a href="TODO" class="{{ $linkDesktopStyle }}">
            Learn more
            {{ i "arrow-right" "size-4" }}
          </a>
        </div>
      </div>
    </div>
  </div>
{{ end }}

{{ define "changelog" }}
  <div class="w-full px-2 py-16 md:py-24">
    <h2 class="text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100">Changelog</h2>

    <div class="grid grid-cols-1 gap-6 mb-6">
      {{ range $index := list 0 1 2 3 }}
        <div class="bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 p-6">
          <div class="flex items-center gap-2 mb-3">
            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">v1.{{ sub 3 $index }}.0</span>
            <span class="text-xs text-gray-400 dark:text-gray-500">•</span>
            <span class="text-xs text-gray-500 dark:text-gray-400">Feb {{ sub 16 $index }}, 2026</span>
          </div>
          <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-gray-100">Feature Update {{ sub 4 $index }}</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
            Improvements to the platform including bug fixes, performance enhancements, and new features.
          </p>
        </div>
      {{ end }}
    </div>

    <div class="flex justify-end">
      <a href="/changelog" class="hover:no-underline inline-flex items-center gap-2 px-4 py-2 text-base btn">
        View full changelog
        {{ i "arrow-right" "size-4" }}
      </a>
    </div>
  </div>
{{ end }}

{{ define "recentUpdates" }}
  <div class="w-full px-2 py-16 md:py-24">
    <h2 class="px-4 text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Recent updates</h2>
    <p class="px-4 mb-8 text-gray-500 dark:text-gray-400">
      Follow <a href="https://bsky.app/profile/tangled.org">@tangled.org</a> on Bluesky for more!
    </p>
    <div class="columns-1 md:columns-2 lg:columns-3 gap-6">
      {{ range $index, $post := .BlueskyPosts }}
        <div class="{{ if ge $index 3 }}hidden md:block{{ end }}">
          {{ template "post" $post }}
        </div>
      {{ end }}
    </div>
  </div>
{{ end }}

{{ define "post" }}
  <div class="bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 px-6 py-4 flex flex-col gap-2 break-inside-avoid mb-6">
    <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
      <span class="flex items-center gap-2">
        {{ template "user/fragments/picHandle" "tangled.org" }}
      </span>
      <span>{{ template "repo/fragments/shortTimeAgo" .CreatedAt }}</span>
    </div>
    <p class="text-gray-900 dark:text-gray-100 text-base leading-relaxed whitespace-pre-wrap">{{ .Text }}</p>

    {{ if .Embed }}
      {{ if .Embed.EmbedImages_View }}
        <div class="grid {{ if eq (len .Embed.EmbedImages_View.Images) 1 }}grid-cols-1{{ else if eq (len .Embed.EmbedImages_View.Images) 2 }}grid-cols-2{{ else }}grid-cols-2{{ end }} gap-2">
          {{ range .Embed.EmbedImages_View.Images }}
            <img src="{{ .Fullsize }}" alt="{{ .Alt }}" class="rounded w-full h-auto object-cover border border-gray-200 dark:border-gray-700" loading="lazy" />
          {{ end }}
        </div>
      {{ else if .Embed.EmbedExternal_View }}
        <a href="{{ .Embed.EmbedExternal_View.External.Uri }}" target="_blank" rel="noopener noreferrer" class="hover:no-underline block border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
          {{ if .Embed.EmbedExternal_View.External.Thumb }}
            <img src="{{ .Embed.EmbedExternal_View.External.Thumb }}" alt="" class="w-full h-48 object-cover" loading="lazy" />
          {{ end }}
          <div class="p-3">
            <div class="font-medium text-gray-900 dark:text-gray-100 text-sm mb-1">{{ .Embed.EmbedExternal_View.External.Title }}</div>
            <div class="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">{{ .Embed.EmbedExternal_View.External.Description }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ .Embed.EmbedExternal_View.External.Uri }}</div>
          </div>
        </a>
      {{ else if .Embed.EmbedVideo_View }}
        <div class="rounded overflow-hidden bg-gray-100 dark:bg-gray-700 aspect-video flex items-center justify-center">
          <span class="text-gray-500 dark:text-gray-400 text-sm">Video embed</span>
        </div>
      {{ end }}
    {{ end }}

    <a href="https://bsky.app/profile/tangled.org/post/{{ .Rkey }}"
      target="_blank"
      rel="noopener noreferrer"
      class="flex items-center justify-between gap-4 text-sm text-gray-500 dark:text-gray-400 pt-2 no-underline hover:no-underline">
      <div class="flex items-center gap-4">
        <div class="flex items-center gap-1">
          {{ i "heart" "size-4" }}
          <span>{{ .LikeCount }}</span>
        </div>
        <div class="flex items-center gap-1">
          {{ i "repeat-2" "size-4" }}
          <span>{{ .RepostCount }}</span>
        </div>
        <div class="flex items-center gap-1">
          {{ i "reply" "size-4 -scale-x-1" }}
          <span>{{ add64 .ReplyCount .QuoteCount }}</span>
        </div>
      </div>
      {{ i "arrow-up-right" "size-4" }}
    </a>
  </div>
{{ end }}

{{ define "community" }}
  <div class="w-full px-2 py-16 md:py-24">
    <div class="max-w-2xl mx-auto text-center space-y-6">
    <h2 class="text-3xl md:text-6xl font-bold text-gray-900 dark:text-gray-100">Join the network</h2>
    <p class="text-xl text-gray-600 dark:text-gray-300">
      You can participate in the Tangled network with an AT account. If you
      don't know what that is, you can sign up for one below.
      <br>
      <a href="https://docs.tangled.org/quick-start-guide.html#login-or-sign-up">Read more on the docs.</a>
    </p>
    <form class="flex gap-2 items-stretch w-full md:max-w-md mx-auto p-2 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded shadow-sm">
      <input
        type="email"
        id="email"
        name="email"
        tabindex="4"
        required
        placeholder="Enter your email"
        class="py-2 w-full"
      />
      <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit">
        join now
        {{ i "arrow-right" "size-4" }}
      </button>
    </form>
  </div>
{{ end }}