@meith/theme-raidframe 0.2.0

package/src/slots/error-notice.tsx

@@ -0,0 +1,26 @@
+import type { ErrorNoticeModel } from '@meith/theme-kit'
+
+import { BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC } from '../shared'
+
+export function ErrorNotice({ status, title, message, homeHref, requestId }: ErrorNoticeModel) {
+  return (
+    <Frame className="w-full max-w-lg">
+      <div className="px-5 py-5">
+        <p className={`${MICRO} ${NUMERIC} text-destructive`}>error {status}</p>
+        <h1 className={`${HEADING} mt-1 text-2xl text-foreground`}>{title}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+
+        <a href={homeHref} className={`${BUTTON_PRIMARY} mt-5`}>
+          forum home
+        </a>
+      </div>
+
+      {requestId !== null && (
+        <p className={`${MICRO} border-t border-border px-5 py-2 normal-case`}>
+          <span className="uppercase">request id</span>{' '}
+          <code className={`${NUMERIC} text-foreground select-all`}>{requestId}</code>
+        </p>
+      )}
+    </Frame>
+  )
+}

package/src/slots/footer.tsx

@@ -0,0 +1,34 @@
+import type { FooterModel } from '@meith/theme-kit'
+
+import { RULE } from '../shared'
+
+export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterModel) {
+  return (
+    <footer className="mt-auto">
+      <div className={RULE} aria-hidden="true" />
+      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 border-t border-border bg-surface px-4 py-3 font-mono text-[0.6875rem] tracking-[0.12em] text-muted-foreground uppercase">
+        <span className="inline-flex items-center gap-2 text-foreground">
+          <span aria-hidden="true" className="size-2 rotate-45 border border-primary" />
+          {boardTitle}
+        </span>
+
+        <nav aria-label="Board links" className="flex flex-wrap gap-x-4 gap-y-1">
+          {links.map((link) => (
+            <a key={link.href} href={link.href} className="hover:text-primary">
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        <span className="flex flex-wrap gap-x-4 gap-y-1">
+          <span>all times {timezoneLabel}</span>
+          {poweredBy && (
+            <a href={poweredBy.href} className="hover:text-primary">
+              {poweredBy.label}
+            </a>
+          )}
+        </span>
+      </div>
+    </footer>
+  )
+}

package/src/slots/forum-display.tsx

@@ -0,0 +1,81 @@
+import type { ForumDisplayModel } from '@meith/theme-kit'
+
+import { BUTTON, BUTTON_PRIMARY, Frame, HEADING, MICRO, NUMERIC, RULE } from '../shared'
+
+export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      <div className="border border-border bg-card shadow-elevation">
+        <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
+          <div className="min-w-0">
+            <p className={MICRO}>forum</p>
+            <h1 className={`${HEADING} text-xl text-foreground`}>{forum.title}</h1>
+            {forum.description !== null && (
+              <p className="mt-1 text-xs text-muted-foreground">{forum.description}</p>
+            )}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <span className={`${MICRO} ${NUMERIC} normal-case`}>
+              <span className="text-foreground">{forum.threadCount}</span> threads
+              <span className="text-border">{' | '}</span>
+              <span className="text-foreground">{forum.postCount}</span> posts
+            </span>
+            {newThreadHref !== null && (
+              <a href={newThreadHref} className={BUTTON_PRIMARY}>
+                new thread
+              </a>
+            )}
+          </div>
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      {regions.announcements !== undefined && (
+        <div className="flex flex-col gap-4 empty:hidden">{regions.announcements}</div>
+      )}
+
+      {regions.subforums}
+
+      {regions.tools !== undefined && (
+        <div className="flex flex-col gap-2 empty:hidden">{regions.tools}</div>
+      )}
+
+      <Frame>
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className={`${MICRO} border-b border-border bg-surface text-left`}>
+              <th scope="col" className="px-3 py-2 font-semibold">
+                Thread
+              </th>
+              <th scope="col" className="w-16 px-2 py-2 text-right font-semibold">
+                Replies
+              </th>
+              <th scope="col" className="w-16 px-2 py-2 text-right font-semibold">
+                Views
+              </th>
+              <th scope="col" className="hidden w-52 px-3 py-2 font-semibold sm:table-cell">
+                Last post
+              </th>
+            </tr>
+          </thead>
+          <tbody>{regions.threads}</tbody>
+        </table>
+      </Frame>
+
+      {regions.pagination}
+
+      {regions.afterContent !== undefined && (
+        <div className="flex flex-col gap-2 empty:hidden">{regions.afterContent}</div>
+      )}
+
+      {markReadAction !== null && (
+        <form action={markReadAction} method="post">
+          <button type="submit" className={BUTTON}>
+            mark this forum read
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}

package/src/slots/forum-jump.tsx

@@ -0,0 +1,45 @@
+import type { ForumJumpModel } from '@meith/theme-kit'
+
+import { BUTTON, MICRO } from '../shared'
+
+export function ForumJump({ action, field, forums, submitLabel, label }: ForumJumpModel) {
+  if (forums.length === 0) return null
+
+  const id = `forum-jump-${field}`
+
+  return (
+    <div className="border-t border-border bg-card/40">
+      <form
+        method="get"
+        action={action}
+        className="mx-auto flex w-full max-w-6xl flex-wrap items-center gap-2 px-4 py-3 sm:justify-end"
+      >
+        <label htmlFor={id} className={MICRO}>
+          {label}
+        </label>
+
+        <select
+          id={id}
+          name={field}
+          defaultValue={forums.find((forum) => forum.isSelected)?.value ?? ''}
+          className="h-8 w-auto min-w-48 flex-1 border border-input bg-surface px-2 font-mono text-xs text-foreground sm:flex-none"
+        >
+          {forums.map((forum) => (
+            <option
+              key={forum.value}
+              value={forum.value}
+              disabled={forum.isCategory}
+              label={`${'  '.repeat(forum.depth)}${forum.label}`}
+            >
+              {`${'  '.repeat(forum.depth)}${forum.label}`}
+            </option>
+          ))}
+        </select>
+
+        <button type="submit" className={BUTTON}>
+          {submitLabel}
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/slots/forum-row.tsx

@@ -0,0 +1,66 @@
+import type { ForumRowSlotModel } from '@meith/theme-kit'
+
+import { HEADING, MICRO, NUMERIC, ReadPip, Stamp, UserRef } from '../shared'
+
+export function ForumRow({ forum }: ForumRowSlotModel) {
+  const isLink = forum.type === 'link'
+
+  return (
+    <tr className="border-t border-border align-top hover:bg-secondary/50">
+      <td className="px-3 py-2.5">
+        <div className="flex items-baseline gap-2">
+          <ReadPip unread={forum.isUnread} className="mt-1.5" />
+          <div className="min-w-0">
+            <a href={forum.href} className={`${HEADING} text-sm text-foreground hover:text-primary`}>
+              {forum.title}
+            </a>
+            {forum.isUnread && <span className="sr-only">(new posts)</span>}
+            {isLink && <span className={`${MICRO} ml-2`}>link</span>}
+
+            {forum.description !== null && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{forum.description}</p>
+            )}
+
+            {forum.subforums.length > 0 && (
+              <p className="mt-1.5 flex flex-wrap gap-1.5">
+                {forum.subforums.map((sub) => (
+                  <a
+                    key={sub.href}
+                    href={sub.href}
+                    className="border border-border bg-surface px-1.5 py-0.5 font-mono text-[0.625rem] tracking-[0.1em] text-muted-foreground uppercase hover:border-primary/60 hover:text-primary"
+                  >
+                    {sub.label}
+                  </a>
+                ))}
+              </p>
+            )}
+          </div>
+        </div>
+      </td>
+
+      <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>
+        {isLink ? <span className="text-muted-foreground">—</span> : forum.threadCount}
+      </td>
+      <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>
+        {isLink ? <span className="text-muted-foreground">—</span> : forum.postCount}
+      </td>
+
+      <td className="hidden w-60 px-3 py-2.5 text-xs text-muted-foreground sm:table-cell">
+        {isLink || forum.lastPost === null ? (
+          <span className={MICRO}>{isLink ? '' : 'no posts yet'}</span>
+        ) : (
+          <>
+            <a href={forum.lastPost.href} className="block truncate text-foreground hover:text-primary">
+              {forum.lastPost.threadTitle}
+            </a>
+            <span className={`${MICRO} mt-0.5 block normal-case`}>
+              <UserRef user={forum.lastPost.author} className="hover:text-primary" />
+              {' · '}
+              <Stamp at={forum.lastPost.at} />
+            </span>
+          </>
+        )}
+      </td>
+    </tr>
+  )
+}

package/src/slots/header.tsx

@@ -0,0 +1,67 @@
+import type { HeaderModel } from '@meith/theme-kit'
+
+import { RULE } from '../shared'
+
+function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'>) {
+  if (logo === undefined) {
+    return (
+      <span className="font-heading text-xl leading-none font-bold tracking-[0.16em] text-foreground uppercase">
+        {boardTitle}
+      </span>
+    )
+  }
+
+  const image = (
+    <img
+      src={logo.src}
+      alt={logo.alt}
+      className="h-8 w-auto max-w-48 object-contain"
+      decoding="async"
+    />
+  )
+
+  if (logo.darkSrc === null) return image
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={logo.darkSrc} />
+      {image}
+    </picture>
+  )
+}
+
+export function Header({ boardTitle, homeHref, navigation, logo, children }: HeaderModel) {
+  return (
+    <header>
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b border-border bg-surface px-4 py-3">
+        <a href={homeHref} className="group inline-flex items-center gap-3 hover:text-primary">
+          <span
+            aria-hidden="true"
+            className="size-3.5 rotate-45 border-2 border-primary bg-primary/25 group-hover:bg-primary/50"
+          />
+          <BoardMark boardTitle={boardTitle} logo={logo} />
+        </a>
+        {children}
+      </div>
+
+      <div className={RULE} aria-hidden="true" />
+
+      {navigation.length > 0 && (
+        <nav
+          aria-label="Board sections"
+          className="flex flex-wrap border-b border-border bg-card/60"
+        >
+          {navigation.map((item) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="border-t-2 border-r border-t-transparent border-r-border px-3.5 py-2 font-mono text-[0.6875rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:border-t-primary hover:bg-secondary hover:text-primary"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </header>
+  )
+}

package/src/slots/latest-posts.tsx

@@ -0,0 +1,42 @@
+import type { LatestPostsModel } from '@meith/theme-kit'
+
+import { Frame, MICRO, PanelHead, Stamp, UserRef } from '../shared'
+
+export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+  return (
+    <Frame aria-labelledby="latest-posts-heading">
+      <PanelHead id="latest-posts-heading" title="Latest posts" />
+
+      {posts.length === 0 ? (
+        <p className={`${MICRO} px-3 py-2.5`}>nothing said yet</p>
+      ) : (
+        <ul className="divide-y divide-border">
+          {posts.map((post) => (
+            <li key={post.href} className="px-3 py-2 hover:bg-secondary/50">
+              <a href={post.href} className="block truncate text-xs text-foreground hover:text-primary">
+                {post.threadTitle}
+              </a>
+              <p className={`${MICRO} mt-0.5 truncate normal-case`}>
+                <a href={post.forum.href} className="uppercase hover:text-primary">
+                  {post.forum.label}
+                </a>
+                <span className="text-border">{' | '}</span>
+                <UserRef user={post.author} className="hover:text-primary" />
+              </p>
+              <p className={`${MICRO} truncate normal-case`}>
+                <Stamp at={post.postedAt} />
+              </p>
+              {post.excerpt !== '' && (
+                <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">{post.excerpt}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
+        <span className="uppercase">as of</span> <Stamp at={capturedAt} />
+      </p>
+    </Frame>
+  )
+}

package/src/slots/latest-threads.tsx

@@ -0,0 +1,42 @@
+import type { LatestThreadsModel } from '@meith/theme-kit'
+
+import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
+
+export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+  return (
+    <Frame aria-labelledby="latest-threads-heading">
+      <PanelHead id="latest-threads-heading" title="Latest threads" />
+
+      {threads.length === 0 ? (
+        <p className={`${MICRO} px-3 py-2.5`}>nothing started yet</p>
+      ) : (
+        <ul className="divide-y divide-border">
+          {threads.map((thread) => (
+            <li key={thread.href} className="px-3 py-2 hover:bg-secondary/50">
+              <a href={thread.href} className="block truncate text-xs text-foreground hover:text-primary">
+                {thread.title}
+              </a>
+              <p className={`${MICRO} mt-0.5 truncate normal-case`}>
+                <a href={thread.forum.href} className="uppercase hover:text-primary">
+                  {thread.forum.label}
+                </a>
+                <span className="text-border">{' | '}</span>
+                <UserRef user={thread.author} className="hover:text-primary" />
+              </p>
+              <p className={`${MICRO} truncate normal-case`}>
+                <Stamp at={thread.startedAt} />
+                <span className="text-border">{' | '}</span>
+                <span className={NUMERIC}>{thread.replyCount}</span>
+                <span className="uppercase"> replies</span>
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
+        <span className="uppercase">as of</span> <Stamp at={capturedAt} />
+      </p>
+    </Frame>
+  )
+}

package/src/slots/member-profile.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react'
+
+import type { MemberProfileModel } from '@meith/theme-kit'
+
+import { BUTTON, Frame, HEADING, MICRO, NUMERIC, PanelHead, RULE, Stamp } from '../shared'
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="border border-border bg-surface px-2.5 py-2">
+      <dt className={MICRO}>{label}</dt>
+      <dd className={`${NUMERIC} mt-0.5 text-sm text-foreground`}>{children}</dd>
+    </div>
+  )
+}
+
+export function MemberProfile({
+  user,
+  avatarUrl,
+  title,
+  joinedAt,
+  lastVisitAt,
+  postCount,
+  signatureHtml,
+  fields,
+  actions,
+  regions,
+}: MemberProfileModel) {
+  return (
+    <article className="flex flex-col gap-4 p-4">
+      <div className="border border-border bg-card shadow-elevation">
+        <div className="flex flex-wrap items-center gap-4 px-4 py-4">
+          {avatarUrl !== null && (
+            <span className="relative inline-block border border-primary/50 p-1">
+              <img src={avatarUrl} alt="" width={72} height={72} className="size-18 object-cover" />
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute -top-px -left-px size-2 border-t-2 border-l-2 border-primary"
+              />
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute -right-px -bottom-px size-2 border-r-2 border-b-2 border-primary"
+              />
+            </span>
+          )}
+
+          <div className="min-w-0">
+            <p className={MICRO}>profile</p>
+            <h1
+              className={[`${HEADING} text-2xl text-foreground`, user.nameClass]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {user.username}
+            </h1>
+            {title !== null && <p className={`${MICRO} mt-0.5 text-primary/90`}>{title}</p>}
+          </div>
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      <Frame aria-labelledby="member-stats-heading">
+        <PanelHead id="member-stats-heading" title="Statistics" />
+        <dl className="grid grid-cols-2 gap-1.5 p-3 sm:grid-cols-3">
+          <Field label="posts">{postCount}</Field>
+          <Field label="joined">
+            <Stamp at={joinedAt} />
+          </Field>
+          <Field label="last visit">
+            {lastVisitAt === null ? 'never' : <Stamp at={lastVisitAt} />}
+          </Field>
+          {fields.map((field) => (
+            <Field key={field.label} label={field.label}>
+              {field.value}
+            </Field>
+          ))}
+        </dl>
+      </Frame>
+
+      {signatureHtml !== null && (
+        <Frame aria-labelledby="member-signature-heading">
+          <PanelHead id="member-signature-heading" title="Signature" />
+          <div
+            className="prose-md p-3 text-sm"
+            dangerouslySetInnerHTML={{ __html: signatureHtml }}
+          />
+        </Frame>
+      )}
+
+      {regions?.plugins}
+
+      {actions.length > 0 && (
+        <nav aria-label="Member actions" className="flex flex-wrap gap-2">
+          {actions.map((action) => (
+            <a key={action.href} href={action.href} className={BUTTON}>
+              {action.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </article>
+  )
+}

package/src/slots/navigation.tsx

@@ -0,0 +1,31 @@
+import type { NavigationModel } from '@meith/theme-kit'
+
+export function Navigation({ items }: NavigationModel) {
+  return (
+    <nav aria-label="Breadcrumb" className="border-b border-border bg-card/40 px-4 py-2">
+      <ol className="flex flex-wrap items-center gap-1.5 font-mono text-[0.6875rem] tracking-[0.1em] text-muted-foreground uppercase">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return (
+            <li key={item.href} className="flex items-center gap-1.5">
+              {index > 0 && (
+                <span aria-hidden="true" className="text-primary/60">
+                  ›
+                </span>
+              )}
+              {isLast ? (
+                <span aria-current="page" className="font-semibold text-foreground">
+                  {item.label}
+                </span>
+              ) : (
+                <a href={item.href} className="hover:text-primary">
+                  {item.label}
+                </a>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/slots/notice.tsx

@@ -0,0 +1,32 @@
+import type { NoticeModel } from '@meith/theme-kit'
+
+const TONE: Record<NoticeModel['kind'], string> = {
+  info: 'border-l-forum-unread text-forum-unread',
+  success: 'border-l-moderation-approved text-moderation-approved',
+  warning: 'border-l-thread-pinned text-thread-pinned',
+  error: 'border-l-destructive text-destructive',
+}
+
+export function Notice({ kind, message, dismissHref }: NoticeModel) {
+  return (
+    <div
+      role={kind === 'error' ? 'alert' : undefined}
+      className={`flex items-start justify-between gap-3 border border-l-[3px] border-border bg-card px-3 py-2 text-sm shadow-elevation ${TONE[kind]}`}
+    >
+      <p className="text-foreground">
+        <span className="mr-2 font-mono text-[0.625rem] font-bold tracking-[0.18em] uppercase">
+          {kind}
+        </span>
+        {message}
+      </p>
+      {dismissHref !== null && (
+        <a
+          href={dismissHref}
+          className="font-mono text-[0.625rem] font-semibold tracking-[0.14em] text-muted-foreground uppercase hover:text-primary"
+        >
+          dismiss
+        </a>
+      )}
+    </div>
+  )
+}

package/src/slots/pagination.tsx

@@ -0,0 +1,48 @@
+import type { PaginationModel } from '@meith/theme-kit'
+
+import { MICRO, NUMERIC } from '../shared'
+
+const STEP =
+  'inline-flex min-w-8 items-center justify-center border border-border bg-card px-2 py-1 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.12em] tabular-nums text-muted-foreground hover:border-primary/60 hover:text-primary'
+
+export function Pagination({ page, pageCount, pages, previousHref, nextHref }: PaginationModel) {
+  if (pageCount <= 1) return null
+
+  return (
+    <nav aria-label="Pagination" className="flex flex-wrap items-center gap-1.5">
+      {previousHref !== null && (
+        <a href={previousHref} rel="prev" className={STEP}>
+          prev
+        </a>
+      )}
+
+      {pages.map((entry) =>
+        entry.isCurrent ? (
+          <span
+            key={entry.href}
+            aria-current="page"
+            className={`${STEP} border-primary bg-primary text-primary-foreground hover:text-primary-foreground`}
+          >
+            {entry.page}
+          </span>
+        ) : (
+          <a key={entry.href} href={entry.href} className={STEP}>
+            {entry.page}
+          </a>
+        ),
+      )}
+
+      {nextHref !== null && (
+        <a href={nextHref} rel="next" className={STEP}>
+          next
+        </a>
+      )}
+
+      <span className={`${MICRO} ml-2 normal-case`}>
+        <span className="uppercase">page</span> <span className={NUMERIC}>{page}</span>
+        {' / '}
+        <span className={NUMERIC}>{pageCount}</span>
+      </span>
+    </nav>
+  )
+}