@meith/theme-midnight 0.1.0

package/src/slots/latest-threads.tsx

@@ -0,0 +1,44 @@
+import type { LatestThreadsModel } from '@meith/theme-kit'
+
+import { UserRef } from '../shared'
+
+export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+  return (
+    <section aria-labelledby="latest-threads-heading" className="border border-border">
+      <h2
+        id="latest-threads-heading"
+        className="border-b border-border bg-secondary px-3 py-1 font-mono text-xs uppercase tracking-wide"
+      >
+        Latest threads
+      </h2>
+
+      {threads.length === 0 ? (
+        <p className="px-3 py-2 font-mono text-xs text-muted-foreground">nothing started yet</p>
+      ) : (
+        <ul className="divide-y divide-border font-mono text-xs">
+          {threads.map((thread) => (
+            <li key={thread.href} className="px-3 py-1.5">
+              <a href={thread.href} className="text-primary hover:underline">
+                {thread.title}
+              </a>
+              <span className="text-muted-foreground">
+                {' · '}
+                <a href={thread.forum.href} className="hover:text-foreground">
+                  {thread.forum.label}
+                </a>
+                {' · '}
+                <UserRef user={thread.author} className="hover:text-foreground" />
+                {' · '}
+                <time dateTime={thread.startedAt.iso}>{thread.startedAt.label}</time>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
+        as of <time dateTime={capturedAt.iso}>{capturedAt.label}</time>
+      </p>
+    </section>
+  )
+}

package/src/slots/member-profile.tsx

@@ -0,0 +1,91 @@
+import type { MemberProfileModel } from '@meith/theme-kit'
+
+export function MemberProfile({
+  user,
+  avatarUrl,
+  title,
+  joinedAt,
+  lastVisitAt,
+  postCount,
+  signatureHtml,
+  fields,
+  actions,
+  regions,
+}: MemberProfileModel) {
+  return (
+    <article className="flex flex-col gap-3 p-3">
+      <header className="flex items-start gap-3 border border-border bg-secondary p-3">
+        {avatarUrl !== null && (
+          <img
+            src={avatarUrl}
+            alt=""
+            width={72}
+            height={72}
+            className="size-18 border border-border object-cover"
+          />
+        )}
+        <div>
+          <h1
+            className={['font-mono text-2xl font-semibold', user.nameClass]
+              .filter(Boolean)
+              .join(' ')}
+          >
+            {user.username}
+          </h1>
+          {title !== null && <p className="font-mono text-xs text-muted-foreground">{title}</p>}
+        </div>
+      </header>
+
+      <dl className="grid grid-cols-2 gap-x-4 gap-y-1 border border-border p-3 font-mono text-xs sm:grid-cols-3">
+        <div>
+          <dt className="text-muted-foreground">joined</dt>
+          <dd>
+            <time dateTime={joinedAt.iso}>{joinedAt.label}</time>
+          </dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">last visit</dt>
+          <dd>
+            {lastVisitAt === null ? (
+              'never'
+            ) : (
+              <time dateTime={lastVisitAt.iso}>{lastVisitAt.label}</time>
+            )}
+          </dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">posts</dt>
+          <dd>{postCount}</dd>
+        </div>
+        {fields.map((field) => (
+          <div key={field.label}>
+            <dt className="text-muted-foreground">{field.label}</dt>
+            <dd>{field.value}</dd>
+          </div>
+        ))}
+      </dl>
+
+      {signatureHtml !== null && (
+        <section aria-label="Signature" className="border border-border p-3 text-sm">
+          <div className="prose-md" dangerouslySetInnerHTML={{ __html: signatureHtml }} />
+        </section>
+      )}
+
+      {regions?.plugins}
+
+      {actions.length > 0 && (
+        <nav aria-label="Member actions" className="flex flex-wrap gap-2 font-mono text-xs">
+          {actions.map((action) => (
+            <a
+              key={action.href}
+              href={action.href}
+              className="border border-border px-2 py-1 hover:bg-muted"
+            >
+              {action.label}
+            </a>
+          ))}
+        </nav>
+      )}
+    </article>
+  )
+}

package/src/slots/navigation.tsx

@@ -0,0 +1,27 @@
+import type { NavigationModel } from '@meith/theme-kit'
+
+export function Navigation({ items }: NavigationModel) {
+  return (
+    <nav aria-label="Breadcrumb" className="border-b border-border bg-muted px-4 py-1.5">
+      <ol className="flex flex-wrap items-center gap-1 font-mono text-xs text-muted-foreground">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return (
+            <li key={item.href} className="flex items-center gap-1">
+              {index > 0 && <span aria-hidden="true">/</span>}
+              {isLast ? (
+                <span aria-current="page" className="text-foreground">
+                  {item.label}
+                </span>
+              ) : (
+                <a href={item.href} className="hover:text-foreground">
+                  {item.label}
+                </a>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </nav>
+  )
+}

package/src/slots/notice.tsx

@@ -0,0 +1,30 @@
+import type { NoticeModel } from '@meith/theme-kit'
+
+const EDGE: Record<NoticeModel['kind'], string> = {
+  info: 'border-l-primary',
+  success: 'border-l-moderation-approved',
+  warning: 'border-l-thread-pinned',
+  error: 'border-l-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-4 border-border bg-muted px-3 py-2 text-sm ${EDGE[kind]}`}
+    >
+      <p>
+        <span className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
+          {kind}
+          {': '}
+        </span>
+        {message}
+      </p>
+      {dismissHref !== null && (
+        <a href={dismissHref} className="font-mono text-xs text-muted-foreground hover:text-foreground">
+          dismiss
+        </a>
+      )}
+    </div>
+  )
+}

package/src/slots/pagination.tsx

@@ -0,0 +1,38 @@
+import type { PaginationModel } from '@meith/theme-kit'
+
+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 font-mono text-xs">
+      {previousHref !== null && (
+        <a href={previousHref} rel="prev" className="border border-border px-2 py-1 hover:bg-muted">
+          prev
+        </a>
+      )}
+      {pages.map((entry) =>
+        entry.isCurrent ? (
+          <span
+            key={entry.href}
+            aria-current="page"
+            className="border border-primary bg-primary px-2 py-1 text-primary-foreground"
+          >
+            {entry.page}
+          </span>
+        ) : (
+          <a key={entry.href} href={entry.href} className="border border-border px-2 py-1 hover:bg-muted">
+            {entry.page}
+          </a>
+        ),
+      )}
+      {nextHref !== null && (
+        <a href={nextHref} rel="next" className="border border-border px-2 py-1 hover:bg-muted">
+          next
+        </a>
+      )}
+      <span className="ml-2 text-muted-foreground">
+        page {page} of {pageCount}
+      </span>
+    </nav>
+  )
+}

package/src/slots/post-actions.tsx

@@ -0,0 +1,26 @@
+import type { PostActionsSlotModel } from '@meith/theme-kit'
+
+export function PostActions({ actions, children }: PostActionsSlotModel) {
+  const items = [
+    { href: actions.quoteHref, label: 'quote' },
+    { href: actions.editHref, label: 'edit' },
+    { href: actions.restoreHref, label: 'restore' },
+    { href: actions.rateHref, label: 'rate' },
+    { href: actions.reportHref, label: 'report' },
+    { href: actions.warnHref, label: 'warn' },
+    { href: actions.moderateHref, label: 'moderate' },
+  ].filter((item): item is { href: string; label: string } => item.href !== null)
+
+  if (items.length === 0 && children === undefined) return null
+
+  return (
+    <nav aria-label="Post actions" className="flex flex-wrap gap-3 font-mono text-xs">
+      {items.map((item) => (
+        <a key={item.label} href={item.href} className="text-muted-foreground hover:text-primary">
+          {item.label}
+        </a>
+      ))}
+      {children}
+    </nav>
+  )
+}

package/src/slots/post-bit.tsx

@@ -0,0 +1,182 @@
+import type { PostBitSlotModel } from '@meith/theme-kit'
+
+import { UserRef } from '../shared'
+
+function GroupBadge({ badge }: { badge: NonNullable<PostBitSlotModel['post']['author']['badge']> }) {
+  const image = (
+    <img
+      src={badge.src}
+      alt=""
+      aria-hidden="true"
+      className="h-4 w-auto max-w-full object-contain"
+      loading="lazy"
+      decoding="async"
+    />
+  )
+
+  if (badge.darkSrc === null) return image
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={badge.darkSrc} />
+      {image}
+    </picture>
+  )
+}
+
+function StatusBanner({ visibility }: { visibility: PostBitSlotModel['post']['visibility'] }) {
+  if (visibility === 'visible') return null
+  return (
+    <p className="border-b border-border bg-muted px-3 py-1 font-mono text-xs text-muted-foreground">
+      {visibility === 'deleted'
+        ? 'deleted — visible to moderators only'
+        : 'awaiting approval — visible to moderators only'}
+    </p>
+  )
+}
+
+export function PostBit({ post, select, regions }: PostBitSlotModel) {
+  return (
+    <article id={`post-${post.number}`} data-post-id={post.id} className="border border-border">
+      <StatusBanner visibility={post.visibility} />
+
+      <div className="grid grid-cols-1 sm:grid-cols-[11rem_1fr]">
+        <div className="border-b border-border bg-secondary px-3 py-2 sm:border-b-0 sm:border-r">
+          <p className="flex items-center gap-2">
+            {select !== null && (
+              <label className="flex items-center">
+                <span className="sr-only">{select.label}</span>
+                <input
+                  type="checkbox"
+                  name={select.name}
+                  value={select.value}
+                  form={select.formId}
+                  className="size-3.5"
+                />
+              </label>
+            )}
+            <UserRef
+              user={post.author}
+              className={
+                post.author.profileHref === null ? 'font-medium' : 'font-medium hover:text-primary'
+              }
+            />
+          </p>
+
+          {regions.pluginBadges}
+
+          {post.author.badge != null && (
+            <p className="mt-1">
+              <GroupBadge badge={post.author.badge} />
+            </p>
+          )}
+          {post.author.title !== null && (
+            <p className="font-mono text-xs text-muted-foreground">{post.author.title}</p>
+          )}
+          {post.author.avatarUrl !== null && (
+            <img
+              src={post.author.avatarUrl}
+              alt=""
+              width={64}
+              height={64}
+              className="mt-2 size-16 border border-border object-cover"
+            />
+          )}
+          <dl className="mt-2 font-mono text-xs text-muted-foreground">
+            <div className="flex gap-1">
+              <dt>posts</dt>
+              <dd className="text-foreground">{post.author.postCount}</dd>
+            </div>
+            {post.author.joinedAt !== null && (
+              <div className="flex gap-1">
+                <dt>joined</dt>
+                <dd>
+                  <time dateTime={post.author.joinedAt.iso}>{post.author.joinedAt.label}</time>
+                </dd>
+              </div>
+            )}
+            {post.author.reputation != null && (
+              <div className="flex gap-1">
+                <dt>rep</dt>
+                <dd className="text-foreground">{post.author.reputation}</dd>
+              </div>
+            )}
+            {post.author.isOnline && <div className="text-forum-unread">online</div>}
+          </dl>
+
+          {post.author.fields.length > 0 && (
+            <dl className="mt-2 font-mono text-xs text-muted-foreground">
+              {post.author.fields.map((field) => (
+                <div key={field.label} className="flex gap-1">
+                  <dt>{field.label}</dt>
+                  <dd className="text-foreground">{field.value}</dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+
+        <div className="min-w-0">
+          <div className="flex items-baseline justify-between gap-2 border-b border-border px-3 py-1 font-mono text-xs text-muted-foreground">
+            <time dateTime={post.postedAt.iso}>{post.postedAt.label}</time>
+            <a href={post.permalink} className="hover:text-foreground">
+              #{post.number}
+            </a>
+          </div>
+
+          {post.ignored !== null ? (
+            <p className="px-3 py-3 text-sm text-muted-foreground">
+              Post from {post.ignored.authorUsername}, who you are ignoring.{' '}
+              <a href={post.ignored.revealHref} className="text-primary hover:underline">
+                Show it
+              </a>
+            </p>
+          ) : (
+            <>
+              <div
+                className="prose-md px-3 py-3 text-sm"
+                dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+              />
+
+              {post.attachments.length > 0 && (
+                <ul className="border-t border-border px-3 py-2 font-mono text-xs">
+                  {post.attachments.map((attachment) => (
+                    <li key={attachment.id}>
+                      <a href={attachment.href} className="text-primary hover:underline">
+                        {attachment.filename}
+                      </a>
+                      <span className="ml-2 text-muted-foreground">{attachment.size}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {post.author.signatureHtml !== null && (
+                <div
+                  className="border-t border-border px-3 py-2 text-xs text-muted-foreground"
+                  dangerouslySetInnerHTML={{ __html: post.author.signatureHtml }}
+                />
+              )}
+            </>
+          )}
+
+          {post.editedNote !== null && (
+            <p className="border-t border-border px-3 py-1 font-mono text-xs text-muted-foreground">
+              {post.editedNote}
+            </p>
+          )}
+
+          {regions.pluginFooter !== undefined && regions.pluginFooter !== null && (
+            <div className="border-t border-border px-3 py-1 font-mono text-xs">
+              {regions.pluginFooter}
+            </div>
+          )}
+
+          {regions.actions !== null && (
+            <div className="border-t border-border px-3 py-1">{regions.actions}</div>
+          )}
+        </div>
+      </div>
+    </article>
+  )
+}

package/src/slots/shell.tsx

@@ -0,0 +1,20 @@
+import type { ShellModel } from '@meith/theme-kit'
+
+export function Shell({ viewer, children }: ShellModel) {
+  return (
+    <div
+      className="min-h-dvh bg-background text-foreground"
+      data-viewer={viewer.isGuest ? 'guest' : 'member'}
+    >
+      <a
+        href="#board-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:border focus:border-primary focus:bg-card focus:px-3 focus:py-2 focus:text-sm"
+      >
+        Skip to content
+      </a>
+      <div className="mx-auto flex min-h-dvh w-full max-w-6xl flex-col border-x border-border bg-card">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/slots/subforum-list.tsx

@@ -0,0 +1,16 @@
+import type { SubforumListModel } from '@meith/theme-kit'
+
+export function SubforumList({ forums }: SubforumListModel) {
+  if (forums.length === 0) return null
+
+  return (
+    <nav aria-label="Subforums" className="flex flex-wrap gap-x-3 gap-y-1 border border-border bg-muted px-3 py-2 font-mono text-xs">
+      {forums.map((forum) => (
+        <a key={forum.href} href={forum.href} className="text-primary hover:underline">
+          {forum.title}
+          <span className="ml-1 text-muted-foreground">({forum.threadCount})</span>
+        </a>
+      ))}
+    </nav>
+  )
+}

package/src/slots/thread-row.tsx

@@ -0,0 +1,62 @@
+import type { ThreadRowSlotModel } from '@meith/theme-kit'
+
+import { UserRef } from '../shared'
+
+export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+  return (
+    <tr className="border-t border-border align-top odd:bg-card even:bg-muted/40">
+      <td className="px-3 py-2">
+        <div className="flex flex-wrap items-baseline gap-2">
+          {select !== null && (
+            <label className="flex items-center">
+              <span className="sr-only">{select.label}</span>
+              <input
+                type="checkbox"
+                name={select.name}
+                value={select.value}
+                form={select.formId}
+                className="size-3.5"
+              />
+            </label>
+          )}
+          {thread.isUnread && (
+            <span className="size-1.5 shrink-0 bg-forum-unread" aria-hidden="true" />
+          )}
+          {thread.prefix !== null && (
+            <span className="border border-border px-1 font-mono text-xs text-secondary-foreground">
+              {thread.prefix.label}
+            </span>
+          )}
+          <a href={thread.href} className="font-medium hover:text-primary">
+            {thread.title}
+          </a>
+          {thread.isUnread && <span className="sr-only">(new posts)</span>}
+          {thread.isSticky && <span className="font-mono text-xs text-thread-pinned">pinned</span>}
+          {thread.isLocked && <span className="font-mono text-xs text-thread-locked">locked</span>}
+          {thread.isMoved && <span className="font-mono text-xs text-thread-moved">moved</span>}
+        </div>
+        <p className="mt-0.5 font-mono text-xs text-muted-foreground">
+          <UserRef user={thread.author} className="hover:text-foreground" />
+        </p>
+      </td>
+      <td className="w-16 px-2 py-2 text-right font-mono text-xs text-muted-foreground">
+        {thread.replyCount}
+      </td>
+      <td className="w-16 px-2 py-2 text-right font-mono text-xs text-muted-foreground">
+        {thread.viewCount}
+      </td>
+      <td className="w-56 px-3 py-2 text-xs text-muted-foreground">
+        {thread.lastPost === null ? (
+          <span className="text-forum-read">—</span>
+        ) : (
+          <a href={thread.lastPost.href} className="hover:text-primary">
+            <time dateTime={thread.lastPost.at.iso}>{thread.lastPost.at.label}</time>
+            <span className="block">
+              by <UserRef user={thread.lastPost.author} linked={false} />
+            </span>
+          </a>
+        )}
+      </td>
+    </tr>
+  )
+}

package/src/slots/thread-view.tsx

@@ -0,0 +1,55 @@
+import type { ThreadViewModel } from '@meith/theme-kit'
+
+export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+  const reply =
+    replyHref === null ? null : (
+      <a
+        href={replyHref}
+        className="border border-primary bg-primary px-3 py-1 font-mono text-xs text-primary-foreground hover:opacity-90"
+      >
+        reply
+      </a>
+    )
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      <div className="flex flex-wrap items-baseline justify-between gap-2 border-b border-border pb-2">
+        <div>
+          <h1 className="font-mono text-lg font-semibold">{thread.title}</h1>
+          <p className="font-mono text-xs text-muted-foreground">
+            in <a href={forum.href} className="hover:text-primary">{forum.label}</a>
+          </p>
+        </div>
+        {reply}
+      </div>
+
+      {regions.tools !== undefined && (
+        <div className="flex flex-col gap-2 empty:hidden">{regions.tools}</div>
+      )}
+
+      {regions.pagination}
+      <div className="flex flex-col gap-2">{regions.posts}</div>
+      {regions.pagination}
+
+      {regions.afterContent !== undefined && (
+        <div className="flex flex-col gap-2 empty:hidden">{regions.afterContent}</div>
+      )}
+
+      {regions.quickReply}
+
+      <div className="flex flex-wrap items-center gap-2">
+        {reply}
+        {markReadAction !== null && (
+          <form action={markReadAction} method="post">
+            <button
+              type="submit"
+              className="border border-border px-2 py-1 font-mono text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              mark read
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/slots/user-panel.tsx

@@ -0,0 +1,32 @@
+import type { UserPanelModel } from '@meith/theme-kit'
+
+export function UserPanel({
+  viewer,
+  links,
+  unreadNotifications,
+  unreadMessages,
+  children,
+}: UserPanelModel) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-xs">
+      <span className="text-muted-foreground">
+        {viewer.isGuest ? 'guest' : (viewer.username ?? 'signed in')}
+      </span>
+
+      {unreadNotifications > 0 && (
+        <span className="text-accent">[{unreadNotifications} new]</span>
+      )}
+      {unreadMessages > 0 && (
+        <span className="text-accent">[{unreadMessages} pm]</span>
+      )}
+
+      {links.map((link) => (
+        <a key={link.href} href={link.href} className="text-primary hover:underline">
+          {link.label}
+        </a>
+      ))}
+
+      {children}
+    </div>
+  )
+}