Commit 45b3a537 authored by ChanHaeng Lee's avatar ChanHaeng Lee
Browse files

Refactored by modularizing

parent 3ede79e9

examples/sveltekit-sample/src/lib/components/Profile.svelte

0 → 100644
+24 −0
Original line number Diff line number Diff line 
<script lang="ts">

  import type { User } from "$lib/types";



  let { user }: { user: User } = $props();

</script>



<div class="profile-header">

  <div class="avatar-section">

    <img

      src={user.icon?.url ?? "/demo-profile.png"}

      alt="{user.name}'s profile"

      class="avatar"

    />

  </div>

  <div class="user-info">

    <h1 class="user-name">{user.name}</h1>

    <p class="user-handle">

      @{user.preferredUsername}@{new URL(user.url).host}

    </p>

    {#if user.summary}

      <p class="user-bio">{user.summary}</p>

    {/if}

  </div>

</div>

examples/sveltekit-sample/src/lib/fetch.ts

0 → 100644
+22 −0
Original line number Diff line number Diff line 
import { Note, type RequestContext } from "@fedify/fedify";

import type { Post, User } from "./types";



export const getUser = async (

  ctx: RequestContext<unknown>,

  identifier: string,

): Promise<User> => await (await ctx.getActor(identifier))?.toJsonLd() as User;



export const getPost = async (

  ctx: RequestContext<unknown>,

  identifier: string,

  id: string,

): Promise<Post> =>

  await (await ctx.getObject(Note, { id, identifier }))?.toJsonLd() as Post;



export const getPosts = async (

  author: User,

) =>

  (await Array.fromAsync(

    postStore.getAll(),

    (p) => p.toJsonLd() as Promise<Post>,

  )).map((p) => ({ ...p, author } as Post & { author: User }));

examples/sveltekit-sample/src/lib/types.ts

0 → 100644
+11 −0
Original line number Diff line number Diff line 
export interface User {

  icon: { url: string };

  name: string;

  preferredUsername: string;

  url: string;

  summary: string;

}

export interface Post {

  published?: string;

  content: string;

}

examples/sveltekit-sample/src/routes/users/[identifier]/+page.server.ts

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

import fedi from "$lib/federation";

import { error } from "@sveltejs/kit";

import { getUser } from "$lib/fetch";



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

  try {

    const ctx = fedi.createContext(request, undefined);

    const { identifier } = params;



    const user = await getUser(ctx, identifier);



    return { user };

  } catch {

    error(404, { message: "Not Found" });

  }

};

examples/sveltekit-sample/src/routes/users/[identifier]/+page.svelte

+25 −64
Original line number Diff line number Diff line 
<script lang="ts">

  import Profile from "$lib/components/Profile.svelte";

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

  import { browser } from "$app/environment";

  import type { Person } from "@fedify/fedify";

  import Spinner from "$lib/components/Spinner.svelte";



  let { params }: PageProps = $props();

  const { identifier } = params;

  const data = browser

    ? fetch(`/users/${identifier}`, {

        headers: { Accept: "application/activity+json" },

      }).then(

        (res) => res.json() as Promise<Person & { icon: { url: string } }>,

      )

    : Promise.resolve(null);

  let { data }: PageProps = $props();

  const { user } = data;

</script>



{#await data}

  <!-- promise is pending -->

  <div class="flex h-svh w-svw items-center justify-center">

    <Spinner />

  </div>

{:then user}

  {#if user}

<div class="profile-container">

      <div class="profile-header">

        <div class="avatar-section">

          <img

            src={user.icon?.url ?? "/demo-profile.png"}

            alt="{user.name}'s profile"

            class="avatar"

          />

        </div>

        <div class="user-info">

          <h1 class="user-name">{user.name}</h1>

          <p class="user-handle">@{identifier}@{window.location.host}</p>

          {#if user.summary}

            <p class="user-bio">{user.summary}</p>

          {/if}

        </div>

      </div>

  <Profile {user} />



  <div class="profile-content">

    <div class="info-card">
@@ -48,11 +17,7 @@ 
          <span class="info-label">Information</span>

          <span class="info-value"

            >This profile is demo for

                <a

                  href="https://fedify.dev"

                  class="fedify-anchor"

                  target="_blank"

                >

            <a href="https://fedify.dev" class="fedify-anchor" target="_blank">

              Fedify

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

              <img
@@ -67,7 +32,3 @@ 
    </div>

  </div>

</div>
 
  {/if}

{:catch}

  <h1>404 Not found</h1>

{/await}