@pylonsync/create-pylon 0.11.0 → 0.11.3

package/templates/consumer/components/social/app-chrome.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState } from "react";
+import { Link, usePathname } from "@pylonsync/react";
+import { Compass, House, SquarePlus } from "lucide-react";
+import { SITE } from "@/lib/site";
+import { cn } from "@/lib/utils";
+import { Avatar } from "./avatar";
+import { CreatePostDialog } from "./create-post";
+import { SocialGate } from "./session";
+import { useSocial } from "./use-social";
+
+/**
+ * Navigation: a sidebar from the md breakpoint up, and a top bar with a tab
+ * bar underneath the page below it. Create opens the new-post dialog.
+ */
+export function AppChrome() {
+  return (
+    <SocialGate fallback={<ChromeFrame profileHref="/" profile={null} onCreate={() => {}} />}>
+      <LiveChrome />
+    </SocialGate>
+  );
+}
+
+function LiveChrome() {
+  const social = useSocial();
+  const [creating, setCreating] = useState(false);
+  const href = social.myProfile ? `/u/${social.myProfile.username}` : "/";
+  return (
+    <>
+      <ChromeFrame profileHref={href} profile={social.myProfile} onCreate={() => setCreating(true)} />
+      <CreatePostDialog open={creating} onOpenChange={setCreating} />
+    </>
+  );
+}
+
+function ChromeFrame({
+  profileHref,
+  profile,
+  onCreate,
+}: {
+  profileHref: string;
+  profile: Parameters<typeof Avatar>[0]["profile"];
+  onCreate: () => void;
+}) {
+  const path = usePathname();
+  const onProfile = profileHref !== "/" && path === profileHref;
+  const items = [
+    { label: "Home", href: "/", active: path === "/", icon: House },
+    { label: "Explore", href: "/explore", active: path === "/explore", icon: Compass },
+  ];
+
+  return (
+    <>
+      {/* Sidebar, md and up. */}
+      <nav className="fixed inset-y-0 left-0 z-30 hidden w-[72px] flex-col border-r bg-background px-3 pb-5 pt-7 md:flex xl:w-[244px]">
+        <Link href="/" className="mb-8 flex h-10 items-center px-3">
+          <span className="font-display text-[28px] italic leading-none xl:inline hidden">{SITE.name}</span>
+          <span className="font-display text-[28px] italic leading-none xl:hidden">{SITE.name.charAt(0)}</span>
+        </Link>
+        <div className="flex flex-col gap-1">
+          {items.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className="flex h-12 items-center gap-4 rounded-lg px-3 transition-colors hover:bg-zinc-100"
+            >
+              <item.icon className="size-6 shrink-0" strokeWidth={item.active ? 2.5 : 1.75} />
+              <span className={cn("hidden text-[15px] xl:inline", item.active ? "font-bold" : "")}>{item.label}</span>
+            </Link>
+          ))}
+          <button type="button" onClick={onCreate} className="flex h-12 items-center gap-4 rounded-lg px-3 text-left transition-colors hover:bg-zinc-100">
+            <SquarePlus className="size-6 shrink-0" strokeWidth={1.75} />
+            <span className="hidden text-[15px] xl:inline">Create</span>
+          </button>
+          <Link href={profileHref} className="flex h-12 items-center gap-4 rounded-lg px-3 transition-colors hover:bg-zinc-100">
+            <Avatar profile={profile} size={24} className={onProfile ? "outline outline-2 outline-offset-1 outline-zinc-900" : ""} />
+            <span className={cn("hidden text-[15px] xl:inline", onProfile ? "font-bold" : "")}>Profile</span>
+          </Link>
+        </div>
+      </nav>
+
+      {/* Top bar, below md. */}
+      <header className="sticky top-0 z-30 flex h-12 items-center justify-between border-b bg-background px-4 md:hidden">
+        <Link href="/" className="font-display text-[26px] italic leading-none">
+          {SITE.name}
+        </Link>
+        <button type="button" onClick={onCreate} aria-label="Create" className="p-1">
+          <SquarePlus className="size-6" strokeWidth={1.75} />
+        </button>
+      </header>
+
+      {/* Tab bar, below md. */}
+      <nav className="fixed inset-x-0 bottom-0 z-30 flex h-12 items-center justify-around border-t bg-background md:hidden">
+        {items.map((item) => (
+          <Link key={item.href} href={item.href} aria-label={item.label} className="p-2">
+            <item.icon className="size-6" strokeWidth={item.active ? 2.5 : 1.75} />
+          </Link>
+        ))}
+        <button type="button" onClick={onCreate} aria-label="Create" className="p-2">
+          <SquarePlus className="size-6" strokeWidth={1.75} />
+        </button>
+        <Link href={profileHref} aria-label="Profile" className="p-2">
+          <Avatar profile={profile} size={24} />
+        </Link>
+      </nav>
+    </>
+  );
+}

package/templates/consumer/components/social/avatar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { Profile } from "@/lib/social";
+
+/** A round profile photo, or the first letter of the name when there is none. */
+export function Avatar({
+  profile,
+  size = 32,
+  ring = false,
+  className,
+}: {
+  profile: Pick<Profile, "username" | "displayName" | "avatarUrl"> | null | undefined;
+  size?: number;
+  /** A colored ring, for people who posted recently. */
+  ring?: boolean;
+  className?: string;
+}) {
+  const letter = (profile?.displayName || profile?.username || "?").trim().charAt(0).toUpperCase();
+  const inner = profile?.avatarUrl ? (
+    <img
+      src={profile.avatarUrl}
+      alt=""
+      width={size}
+      height={size}
+      loading="lazy"
+      className="size-full rounded-full object-cover"
+    />
+  ) : (
+    <span
+      className="grid size-full place-items-center rounded-full bg-zinc-200 font-semibold text-zinc-600"
+      style={{ fontSize: Math.max(10, Math.round(size * 0.4)) }}
+    >
+      {letter}
+    </span>
+  );
+  return (
+    <span
+      className={cn(
+        "inline-block shrink-0 rounded-full",
+        ring ? "bg-brand p-[2px]" : "",
+        className,
+      )}
+      style={{ width: size + (ring ? 4 : 0), height: size + (ring ? 4 : 0) }}
+    >
+      <span className={cn("block size-full rounded-full", ring ? "bg-background p-[2px]" : "")}>{inner}</span>
+    </span>
+  );
+}

package/templates/consumer/components/social/comment-form.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useState } from "react";
+import { callFn } from "@pylonsync/react";
+import { COMMENT_MAX } from "@/lib/social";
+import { cn } from "@/lib/utils";
+
+/** "Add a comment" with a Post button that appears once there is text. */
+export function CommentForm({ postId, className, autoFocus }: { postId: string; className?: string; autoFocus?: boolean }) {
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const value = text.trim();
+    if (!value || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await callFn("addComment", { postId, text: value });
+      setText("");
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not post that comment.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className={cn("flex items-center gap-2", className)}>
+      <input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        maxLength={COMMENT_MAX}
+        placeholder={error ?? "Add a comment…"}
+        aria-label="Add a comment"
+        autoFocus={autoFocus}
+        className={cn(
+          "min-w-0 flex-1 bg-transparent py-2 text-sm outline-none placeholder:text-zinc-500",
+          error ? "placeholder:text-red-600" : "",
+        )}
+      />
+      {text.trim() ? (
+        <button type="submit" disabled={busy} className="text-sm font-semibold text-brand hover:text-zinc-900 disabled:opacity-50">
+          Post
+        </button>
+      ) : null}
+    </form>
+  );
+}

package/templates/consumer/components/social/create-post.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { callFn, uploadFile, useRouter } from "@pylonsync/react";
+import { ImagePlus } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { CAPTION_MAX } from "@/lib/social";
+import { cn } from "@/lib/utils";
+
+const MAX_BYTES = 10 * 1024 * 1024;
+
+/**
+ * Choose a photo, pick the crop, write a caption, share. The photo uploads
+ * as public, so every visitor can load it, then createPost stores the post.
+ */
+export function CreatePostDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const router = useRouter();
+  const input = useRef<HTMLInputElement | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [shape, setShape] = useState<"square" | "portrait">("square");
+  const [caption, setCaption] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => {
+    if (!file) {
+      setPreview(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreview(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  useEffect(() => {
+    if (open) return;
+    setFile(null);
+    setCaption("");
+    setShape("square");
+    setError(null);
+    setBusy(false);
+  }, [open]);
+
+  function choose(next: File | undefined | null) {
+    if (!next) return;
+    if (!next.type.startsWith("image/")) return setError("Choose a photo.");
+    if (next.size > MAX_BYTES) return setError("Choose a photo smaller than 10 MB.");
+    setError(null);
+    setFile(next);
+  }
+
+  async function share() {
+    if (!file) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const photo = await uploadFile(file, { visibility: "public" });
+      const out = await callFn<{ id: string }>("createPost", { imageUrl: photo.url, caption, shape });
+      onOpenChange(false);
+      router.push(`/p/${out.id}`);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not share that photo.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (busy ? null : onOpenChange(next))}>
+      <DialogContent className={cn("gap-0 overflow-hidden p-0", file ? "max-w-3xl" : "max-w-md")}>
+        <div className="flex h-11 items-center justify-center border-b px-12">
+          <DialogTitle className="text-base font-semibold">Create new post</DialogTitle>
+          {file ? (
+            <button
+              type="button"
+              onClick={share}
+              disabled={busy}
+              className="absolute right-12 text-sm font-semibold text-brand hover:text-zinc-900 disabled:opacity-50"
+            >
+              {busy ? "Sharing…" : "Share"}
+            </button>
+          ) : null}
+        </div>
+
+        {!file ? (
+          <div
+            onDragOver={(e) => {
+              e.preventDefault();
+              setDragging(true);
+            }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDragging(false);
+              choose(e.dataTransfer.files?.[0]);
+            }}
+            className={cn("flex aspect-square flex-col items-center justify-center gap-4 p-8", dragging ? "bg-zinc-50" : "")}
+          >
+            <ImagePlus className="size-16 text-zinc-800" strokeWidth={1} />
+            <p className="text-lg">Drag a photo here</p>
+            <input ref={input} type="file" accept="image/*" className="sr-only" onChange={(e) => choose(e.target.files?.[0])} />
+            <button
+              type="button"
+              onClick={() => input.current?.click()}
+              className="rounded-lg bg-brand px-4 py-1.5 text-sm font-semibold text-white hover:opacity-90"
+            >
+              Select from computer
+            </button>
+            {error ? <p className="text-sm text-red-600">{error}</p> : null}
+          </div>
+        ) : (
+          <div className="grid md:grid-cols-[1fr_300px]">
+            <div className="flex items-center justify-center bg-zinc-100">
+              {preview ? (
+                <img src={preview} alt="" className={cn("w-full object-cover", shape === "portrait" ? "aspect-[4/5]" : "aspect-square")} />
+              ) : null}
+            </div>
+            <div className="flex flex-col gap-3 border-l p-4">
+              <div className="flex gap-1 rounded-lg bg-zinc-100 p-1 text-sm">
+                {(["square", "portrait"] as const).map((s) => (
+                  <button
+                    key={s}
+                    type="button"
+                    onClick={() => setShape(s)}
+                    aria-pressed={shape === s}
+                    className={cn("flex-1 rounded-md py-1 font-medium", shape === s ? "bg-white shadow-sm" : "text-zinc-500")}
+                  >
+                    {s === "square" ? "Square" : "Portrait"}
+                  </button>
+                ))}
+              </div>
+              <textarea
+                value={caption}
+                onChange={(e) => setCaption(e.target.value)}
+                maxLength={CAPTION_MAX}
+                rows={8}
+                placeholder="Write a caption…"
+                aria-label="Caption"
+                className="w-full resize-none bg-transparent text-sm outline-none placeholder:text-zinc-500"
+              />
+              <p className="text-right text-xs text-zinc-400">
+                {caption.length.toLocaleString("en-US")}/{CAPTION_MAX.toLocaleString("en-US")}
+              </p>
+              {error ? <p className="text-sm text-red-600">{error}</p> : null}
+              <button type="button" onClick={() => setFile(null)} disabled={busy} className="mt-auto text-left text-sm text-zinc-500 hover:text-zinc-900">
+                Choose another photo
+              </button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/consumer/components/social/edit-profile.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { callFn, uploadFile, useRouter } from "@pylonsync/react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { BIO_MAX, DISPLAY_NAME_MAX, USERNAME_MAX, normalizeUsername, usernameProblem, type Profile } from "@/lib/social";
+import { Avatar } from "./avatar";
+
+const field = "w-full rounded-lg border bg-transparent px-3 py-2 text-sm outline-none focus:border-zinc-400";
+
+/** Photo, username, name, and bio. The server checks the username again. */
+export function EditProfileDialog({ profile, open, onOpenChange }: { profile: Profile; open: boolean; onOpenChange: (open: boolean) => void }) {
+  const router = useRouter();
+  const input = useRef<HTMLInputElement | null>(null);
+  const [username, setUsername] = useState(profile.username);
+  const [displayName, setDisplayName] = useState(profile.displayName);
+  const [bio, setBio] = useState(profile.bio ?? "");
+  const [avatarUrl, setAvatarUrl] = useState(profile.avatarUrl ?? "");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setUsername(profile.username);
+    setDisplayName(profile.displayName);
+    setBio(profile.bio ?? "");
+    setAvatarUrl(profile.avatarUrl ?? "");
+    setError(null);
+  }, [open, profile]);
+
+  async function pickPhoto(file: File | undefined) {
+    if (!file) return;
+    if (!file.type.startsWith("image/")) return setError("Choose a photo.");
+    setBusy(true);
+    setError(null);
+    try {
+      const photo = await uploadFile(file, { visibility: "public" });
+      setAvatarUrl(photo.url);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not upload that photo.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    const next = normalizeUsername(username);
+    const problem = usernameProblem(next);
+    if (problem) return setError(problem);
+    setBusy(true);
+    setError(null);
+    try {
+      await callFn("updateProfile", { username: next, displayName, bio, avatarUrl });
+      onOpenChange(false);
+      if (next !== profile.username) router.replace(`/u/${next}`);
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Could not save your profile.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (busy ? null : onOpenChange(next))}>
+      <DialogContent className="max-w-md">
+        <DialogTitle className="text-base font-semibold">Edit profile</DialogTitle>
+        <form onSubmit={save} className="grid gap-4">
+          <div className="flex items-center gap-4 rounded-xl bg-zinc-100 p-3">
+            <Avatar profile={{ ...profile, avatarUrl }} size={56} />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-semibold">{profile.username}</p>
+              <p className="truncate text-sm text-zinc-500">{profile.displayName}</p>
+            </div>
+            <input ref={input} type="file" accept="image/*" className="sr-only" onChange={(e) => void pickPhoto(e.target.files?.[0])} />
+            <button type="button" disabled={busy} onClick={() => input.current?.click()} className="rounded-lg bg-brand px-3 py-1.5 text-sm font-semibold text-white disabled:opacity-50">
+              Change photo
+            </button>
+          </div>
+          <label className="grid gap-1.5 text-sm">
+            <span className="font-semibold">Username</span>
+            <input value={username} onChange={(e) => setUsername(e.target.value)} maxLength={USERNAME_MAX + 1} className={field} autoCapitalize="none" autoCorrect="off" />
+          </label>
+          <label className="grid gap-1.5 text-sm">
+            <span className="font-semibold">Name</span>
+            <input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={DISPLAY_NAME_MAX} className={field} />
+          </label>
+          <label className="grid gap-1.5 text-sm">
+            <span className="font-semibold">Bio</span>
+            <textarea value={bio} onChange={(e) => setBio(e.target.value)} maxLength={BIO_MAX} rows={3} className={`${field} resize-none`} />
+            <span className="text-right text-xs text-zinc-400">
+              {bio.length}/{BIO_MAX}
+            </span>
+          </label>
+          {error ? <p className="text-sm text-red-600">{error}</p> : null}
+          <button type="submit" disabled={busy} className="h-10 rounded-lg bg-brand text-sm font-semibold text-white disabled:opacity-50">
+            {busy ? "Saving…" : "Save"}
+          </button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/consumer/components/social/explore-screen.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { GridSkeleton, PostGrid } from "./post-grid";
+import { SocialGate } from "./session";
+import { useSocial } from "./use-social";
+
+export function ExploreScreen() {
+  return (
+    <div className="mx-auto max-w-[935px] px-0 py-2 sm:px-5 sm:py-8">
+      <SocialGate fallback={<GridSkeleton count={12} />}>
+        <LiveExplore />
+      </SocialGate>
+    </div>
+  );
+}
+
+function LiveExplore() {
+  const social = useSocial();
+  if (social.loading) return <GridSkeleton count={12} />;
+  if (social.posts.length === 0) return <p className="py-16 text-center text-sm text-zinc-500">No posts yet.</p>;
+  return <PostGrid social={social} posts={social.posts} />;
+}

package/templates/consumer/components/social/home-screen.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { homeFeed, plural, recentPosters, suggestions } from "@/lib/social";
+import { SITE } from "@/lib/site";
+import { Avatar } from "./avatar";
+import { PostCard } from "./post-card";
+import { SocialGate } from "./session";
+import { actions, useSocial, type Social } from "./use-social";
+
+export function HomeScreen() {
+  return (
+    <SocialGate fallback={<HomeFrame />}>
+      <LiveHome />
+    </SocialGate>
+  );
+}
+
+function LiveHome() {
+  const social = useSocial();
+  const feed = homeFeed(social.posts, social.following, social.me);
+  const recent = recentPosters(social.posts).slice(0, 8);
+
+  return (
+    <HomeFrame
+      rail={<Rail social={social} />}
+      recent={
+        recent.length ? (
+          <ul className="flex gap-3 overflow-x-auto px-3 pb-4 pt-2 sm:px-0">
+            {recent.map((userId) => {
+              const profile = social.profileByUser.get(userId);
+              if (!profile) return null;
+              return (
+                <li key={userId} className="w-[74px] shrink-0">
+                  <Link href={`/u/${profile.username}`} className="flex flex-col items-center gap-1">
+                    <Avatar profile={profile} size={62} ring />
+                    <span className="w-full truncate text-center text-xs">{profile.username}</span>
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        ) : null
+      }
+    >
+      {social.loading ? (
+        <FeedSkeleton />
+      ) : feed.posts.length === 0 ? (
+        <p className="px-3 py-16 text-center text-sm text-zinc-500">No posts yet. Share the first photo with Create.</p>
+      ) : (
+        <>
+          {feed.everyone ? (
+            <p className="px-3 pb-2 text-sm text-zinc-500 sm:px-0">Posts from everyone. Follow people to see only theirs.</p>
+          ) : null}
+          <div className="flex flex-col gap-4">
+            {feed.posts.map((post) => (
+              <PostCard key={post.id} social={social} post={post} />
+            ))}
+          </div>
+        </>
+      )}
+    </HomeFrame>
+  );
+}
+
+function HomeFrame({ children, rail, recent }: { children?: React.ReactNode; rail?: React.ReactNode; recent?: React.ReactNode }) {
+  return (
+    <div className="mx-auto flex max-w-[935px] justify-center gap-16 pt-2 sm:pt-6">
+      <div className="w-full max-w-[470px]">
+        {recent}
+        {children ?? <FeedSkeleton />}
+      </div>
+      <aside className="hidden w-[320px] shrink-0 pt-6 lg:block">{rail}</aside>
+    </div>
+  );
+}
+
+function Rail({ social }: { social: Social }) {
+  const people = suggestions(social.profiles, social.follows, social.following, social.me, 5);
+  const me = social.myProfile;
+  return (
+    <div className="sticky top-8">
+      {me ? (
+        <div className="flex items-center gap-3">
+          <Link href={`/u/${me.username}`}>
+            <Avatar profile={me} size={44} />
+          </Link>
+          <div className="min-w-0 flex-1 text-sm">
+            <Link href={`/u/${me.username}`} className="block truncate font-semibold">
+              {me.username}
+            </Link>
+            <span className="block truncate text-zinc-500">{me.displayName}</span>
+          </div>
+          <Link href={`/u/${me.username}`} className="text-xs font-semibold text-brand hover:text-zinc-900">
+            Edit profile
+          </Link>
+        </div>
+      ) : null}
+
+      {people.length ? (
+        <>
+          <div className="mb-2 mt-6 flex items-center justify-between text-sm">
+            <span className="font-semibold text-zinc-500">Suggested for you</span>
+            <Link href="/explore" className="text-xs font-semibold hover:text-zinc-500">
+              See all
+            </Link>
+          </div>
+          <ul className="flex flex-col gap-3">
+            {people.map((p) => {
+              const followers = social.followerCount.get(p.userId) ?? 0;
+              return (
+                <li key={p.id} className="flex items-center gap-3">
+                  <Link href={`/u/${p.username}`}>
+                    <Avatar profile={p} size={32} />
+                  </Link>
+                  <div className="min-w-0 flex-1 text-sm">
+                    <Link href={`/u/${p.username}`} className="block truncate font-semibold">
+                      {p.username}
+                    </Link>
+                    <span className="block truncate text-xs text-zinc-500">{plural(followers, "follower")}</span>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => actions.toggleFollow(social, p.userId)}
+                    className="text-xs font-semibold text-brand hover:text-zinc-900"
+                  >
+                    Follow
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      ) : null}
+
+      <p className="mt-8 text-xs text-zinc-400">
+        {SITE.name} · Built with{" "}
+        <a href="https://pylonsync.com" className="hover:underline">
+          Pylon
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function FeedSkeleton() {
+  return (
+    <div className="flex flex-col gap-6" aria-hidden>
+      {[0, 1].map((i) => (
+        <div key={i}>
+          <div className="flex items-center gap-2.5 px-3 py-3 sm:px-0">
+            <span className="size-8 rounded-full bg-zinc-100" />
+            <span className="h-3 w-28 rounded bg-zinc-100" />
+          </div>
+          <div className="aspect-square w-full bg-zinc-100 sm:rounded-[4px]" />
+        </div>
+      ))}
+    </div>
+  );
+}