Commit 5d5d90b5 authored by ChanHaeng Lee's avatar ChanHaeng Lee
Browse files

Completed root page

parent ca0f896a

examples/sveltekit/src/app.css

+23 −0
Original line number Diff line number Diff line 
@import "tailwindcss";



:root {

  --background: #ffffff;

  --foreground: #171717;

}



@theme inline {

  --color-background: var(--background);

  --color-foreground: var(--foreground);

}



@media (prefers-color-scheme: dark) {

  :root {

    --background: #0a0a0a;

    --foreground: #ededed;

  }

}



body {

  background: var(--background);

  color: var(--foreground);

  font-family: Arial, Helvetica, sans-serif;

}

examples/sveltekit/src/app.html

+25 −8
Original line number Diff line number Diff line
@@ -8,4 +8,21 @@ 
  <body data-sveltekit-preload-data="hover">

    <div style="display: contents">%sveltekit.body%</div>

  </body>



  <script>

    const prefersDark = window.matchMedia(

      "(prefers-color-scheme: dark)",

    ).matches;

    const theme = prefersDark ? "dark" : "light";



    document.body.classList.remove("light", "dark");

    document.body.classList.add(theme);



    window

      .matchMedia("(prefers-color-scheme: dark)")

      .addEventListener("change", (e) => {

        document.body.classList.remove("light", "dark");

        document.body.classList.add(e.matches ? "dark" : "light");

      });

  </script>

</html>

examples/sveltekit/src/lib/assets/favicon.svg

+173 −1

File changed.

Preview size limit exceeded, changes collapsed.

examples/sveltekit/src/routes/+page.server.ts

0 → 100644
+14 −0
Original line number Diff line number Diff line 
import type { PageServerLoad } from "./$types";

import { relationStore } from "../data/store";



export const load: PageServerLoad = async ({ request, url }) => {

  const forwardedHost = request.headers.get("x-forwarded-host");

  const host = forwardedHost || request.headers.get("host") || url.host;



  const addresses = Array.from(relationStore.keys());



  return {

    host,

    addresses,

  };

};

examples/sveltekit/src/routes/+page.svelte

+75 −2
Original line number Diff line number Diff line 
<h1>Welcome to SvelteKit</h1>

<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
 
<script lang="ts">

  import type { PageData } from "./$types";



  export let data: PageData;

  const { addresses, host } = data;



  const bannerText = `

 _______  _______  _______   __   ___________    ____ 

|   ____||   ____||       \\ |  | |   ____\\   \\  /   / 

|  |__   |  |__   |  .--.  ||  | |  |__   \\   \\/   /  

|   __|  |   __|  |  |  |  ||  | |   __|   \\_    _/   

|  |     |  |____ |  '--'  ||  | |  |        |  |     

|__|     |_______||_______/ |__| |__|        |__|     `;

</script>



<main class="mx-auto my-8 grid max-w-[780px] gap-4 p-4">

  <img

    src="/fedify-svelte-logo.svg"

    alt="@fedify/svelte Logo"

    class="m-auto h-32 w-32"

  />

  <div

    class="flex flex-wrap justify-center font-mono leading-tight whitespace-pre"

  >

    <span>{bannerText}</span>

    <span class="content-end">

      with

      <a href="https://svelte.dev/">

        <img

          src="/svelte-horizontal.svg"

          alt="Next.js"

          class="inline-block w-24"

        />

      </a></span

    >

  </div>

  <p>

    This small federated server app is a demo of

    <a href="https://fedify.dev" class="text-blue-600">

      <img

        src="/fedify-logo.svg"

        alt="Fedify logo"

        class="inline w-4 pb-1"

      />Fedify</a

    >. The only one thing it does is to accept follow requests.

  </p>

  <p>

    You can follow this demo app via the below handle:{" "}

    <code class="pre rounded-md bg-gray-100 px-2 py-1 text-black select-all">

      @demo@{host}

    </code>

  </p>



  {#if addresses.length === 0}

    <p>

      No followers yet. Try to add a follower using{" "}

      <a

        href="https://activitypub.academy/"

        target="_blank"

        class="text-blue-600"

      >

        ActivityPub.Academy

      </a>.

    </p>

  {:else}

    <p>This account has the below {addresses.length} followers:</p>

    <ul class="flex w-max flex-col items-stretch gap-1 font-mono">

      {#each addresses as address}

        <li class="pre flex-1 rounded-md bg-gray-100 px-2 py-1 text-black">

          {address}

        </li>

      {/each}

    </ul>

  {/if}

</main>