@meith/theme-raidframe 0.2.0

package/src/slots/search-results.tsx

@@ -0,0 +1,108 @@
+import type { SearchResultsModel } from '@meith/theme-kit'
+
+import { BUTTON_PRIMARY, Frame, HEADING, MICRO, RULE, Stamp } from '../shared'
+
+export function SearchResults({
+  terms,
+  searchedAt,
+  hits,
+  nextHref,
+  nextLabel,
+  newSearchHref,
+  within,
+}: SearchResultsModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-4 p-4"
+    >
+      <div className="border border-border bg-card shadow-elevation">
+        <div className="px-4 py-3">
+          <p className={MICRO}>search</p>
+          <h1 className={`${HEADING} text-xl text-foreground`}>
+            Results for &ldquo;{terms}&rdquo;
+          </h1>
+          <p className={`${MICRO} mt-1 normal-case`}>
+            <span className="uppercase">run</span> <Stamp at={searchedAt} />
+            <span className="text-border">{' | '}</span>
+            <span>checked against your access every time this page is opened</span>
+          </p>
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      <Frame>
+        {hits.length === 0 ? (
+          <div className="px-4 py-6 text-center">
+            <p className={`${HEADING} text-sm text-foreground`}>Nothing matched</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Or nothing you can see does. Try fewer words, or a different spelling.
+            </p>
+          </div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {hits.map((hit) => (
+              <li key={hit.postId} className="flex flex-col gap-1 px-4 py-3 hover:bg-secondary/50">
+                <a href={hit.href} className="text-sm font-medium text-foreground hover:text-primary">
+                  {hit.threadTitle}
+                </a>
+                <p
+                  className="text-sm text-muted-foreground [&_b]:font-semibold [&_b]:text-primary"
+                  dangerouslySetInnerHTML={{ __html: hit.excerptHtml }}
+                />
+                <p className={`${MICRO} normal-case`}>
+                  {hit.authorUsername}
+                  <span className="text-border">{' | '}</span>
+                  <Stamp at={hit.postedAt} />
+                </p>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        {nextHref !== null && (
+          <p className="border-t border-border px-4 py-2">
+            <a href={nextHref} className={`${MICRO} hover:text-primary`}>
+              {nextLabel} →
+            </a>
+          </p>
+        )}
+      </Frame>
+
+      <Frame>
+        <form method="get" action={within.action} className="flex flex-col gap-3 px-4 py-4">
+          <div>
+            <label htmlFor="search-within" className={`${MICRO} mb-1 block`}>
+              {within.label}
+            </label>
+            <input
+              id="search-within"
+              type="search"
+              name={within.field}
+              defaultValue={within.value}
+              autoComplete="off"
+              aria-describedby="search-within-hint"
+              className="w-full border border-input bg-surface px-3 py-2 text-sm text-foreground focus-visible:border-ring"
+            />
+            <p id="search-within-hint" className="mt-1.5 text-xs text-muted-foreground">
+              {within.hint}
+            </p>
+          </div>
+
+          <div>
+            <button type="submit" className={BUTTON_PRIMARY}>
+              {within.submitLabel}
+            </button>
+          </div>
+        </form>
+      </Frame>
+
+      <p>
+        <a href={newSearchHref} className={`${MICRO} hover:text-primary`}>
+          start a new search
+        </a>
+      </p>
+    </main>
+  )
+}

package/src/slots/shell.tsx

@@ -0,0 +1,40 @@
+import type { ShellModel } from '@meith/theme-kit'
+
+const APP_REGIONS = `
+[data-theme-raidframe] .font-heading:not([class*="tracking-"]) {
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+}
+`
+
+export function Shell({ viewer, children }: ShellModel) {
+  return (
+    <div
+      className="relative min-h-dvh bg-background text-foreground"
+      data-theme-raidframe=""
+      data-viewer={viewer.isGuest ? 'guest' : 'member'}
+    >
+      <style>{APP_REGIONS}</style>
+
+      <div
+        aria-hidden="true"
+        className="pointer-events-none fixed inset-x-0 top-0 h-80 bg-[radial-gradient(70%_100%_at_50%_0%,var(--color-primary),transparent_72%)] opacity-10"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none fixed inset-x-0 bottom-0 h-64 bg-[radial-gradient(60%_100%_at_50%_100%,var(--color-forum-unread),transparent_75%)] opacity-[0.07]"
+      />
+
+      <a
+        href="#board-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:border focus:border-primary focus:bg-card focus:px-3 focus:py-2 focus:font-mono focus:text-xs focus:uppercase"
+      >
+        Skip to content
+      </a>
+
+      <div className="relative mx-auto flex min-h-dvh w-full max-w-6xl flex-col border-x border-border bg-background/80">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/slots/subforum-list.tsx

@@ -0,0 +1,26 @@
+import type { SubforumListModel } from '@meith/theme-kit'
+
+import { MICRO, NUMERIC } from '../shared'
+
+export function SubforumList({ forums }: SubforumListModel) {
+  if (forums.length === 0) return null
+
+  return (
+    <nav
+      aria-label="Subforums"
+      className="flex flex-wrap items-center gap-2 border border-border bg-card px-3 py-2"
+    >
+      <span className={MICRO}>subforums</span>
+      {forums.map((forum) => (
+        <a
+          key={forum.href}
+          href={forum.href}
+          className="inline-flex items-center gap-1.5 border border-border bg-surface px-2 py-0.5 font-mono text-[0.625rem] tracking-[0.1em] text-foreground uppercase hover:border-primary/60 hover:text-primary"
+        >
+          {forum.title}
+          <span className={`${NUMERIC} text-muted-foreground`}>{forum.threadCount}</span>
+        </a>
+      ))}
+    </nav>
+  )
+}

package/src/slots/thread-row.tsx

@@ -0,0 +1,74 @@
+import type { ThreadRowSlotModel } from '@meith/theme-kit'
+
+import { MICRO, NUMERIC, ReadPip, Stamp, UserRef } from '../shared'
+
+const TAG = 'border px-1.5 py-px font-mono text-[0.625rem] font-bold uppercase tracking-[0.12em]'
+
+export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+  return (
+    <tr className="border-t border-border align-top hover:bg-secondary/50">
+      <td className="px-3 py-2.5">
+        <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 accent-primary"
+              />
+            </label>
+          )}
+
+          <ReadPip unread={thread.isUnread} />
+
+          {thread.prefix !== null && (
+            <span className={`${TAG} border-primary/60 text-primary`}>{thread.prefix.label}</span>
+          )}
+
+          <a href={thread.href} className="font-medium text-foreground hover:text-primary">
+            {thread.title}
+          </a>
+          {thread.isUnread && <span className="sr-only">(new posts)</span>}
+
+          {thread.isSticky && (
+            <span className={`${TAG} border-thread-pinned/60 text-thread-pinned`}>pinned</span>
+          )}
+          {thread.isLocked && (
+            <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>locked</span>
+          )}
+          {thread.isMoved && (
+            <span className={`${TAG} border-thread-moved/60 text-thread-moved`}>moved</span>
+          )}
+        </div>
+
+        <p className={`${MICRO} mt-1 normal-case`}>
+          <span className="uppercase">started by</span>{' '}
+          <UserRef user={thread.author} className="hover:text-primary" />
+        </p>
+      </td>
+
+      <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-foreground`}>
+        {thread.replyCount}
+      </td>
+      <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-muted-foreground`}>
+        {thread.viewCount}
+      </td>
+
+      <td className="hidden w-52 px-3 py-2.5 text-xs text-muted-foreground sm:table-cell">
+        {thread.lastPost === null ? (
+          <span className={MICRO}>—</span>
+        ) : (
+          <a href={thread.lastPost.href} className="block hover:text-primary">
+            <Stamp at={thread.lastPost.at} className="text-foreground" />
+            <span className={`${MICRO} mt-0.5 block normal-case`}>
+              by <UserRef user={thread.lastPost.author} linked={false} />
+            </span>
+          </a>
+        )}
+      </td>
+    </tr>
+  )
+}

package/src/slots/thread-view.tsx

@@ -0,0 +1,75 @@
+import type { ThreadViewModel } from '@meith/theme-kit'
+
+import { BUTTON, BUTTON_PRIMARY, HEADING, MICRO, NUMERIC, RULE } from '../shared'
+
+const TAG = 'border px-1.5 py-px font-mono text-[0.625rem] font-bold uppercase tracking-[0.12em]'
+
+export function ThreadView({ thread, forum, replyHref, markReadAction, regions }: ThreadViewModel) {
+  const reply =
+    replyHref === null ? null : (
+      <a href={replyHref} className={BUTTON_PRIMARY}>
+        post reply
+      </a>
+    )
+
+  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-start justify-between gap-3 px-4 py-3">
+          <div className="min-w-0">
+            <p className={`${MICRO} normal-case`}>
+              <a href={forum.href} className="uppercase hover:text-primary">
+                {forum.label}
+              </a>
+            </p>
+            <h1 className={`${HEADING} text-xl text-foreground`}>{thread.title}</h1>
+
+            <p className="mt-1.5 flex flex-wrap items-center gap-2">
+              {thread.isSticky && (
+                <span className={`${TAG} border-thread-pinned/60 text-thread-pinned`}>pinned</span>
+              )}
+              {thread.isLocked && (
+                <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>locked</span>
+              )}
+              <span className={`${MICRO} ${NUMERIC} normal-case`}>
+                <span className="text-foreground">{thread.replyCount}</span> replies
+                <span className="text-border">{' | '}</span>
+                <span className="text-foreground">{thread.viewCount}</span> views
+              </span>
+            </p>
+          </div>
+
+          {reply}
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      {regions.tools !== undefined && (
+        <div className="flex flex-col gap-2 empty:hidden">{regions.tools}</div>
+      )}
+
+      {regions.pagination}
+
+      <div className="flex flex-col gap-3">{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={BUTTON}>
+              mark read
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/slots/user-panel.tsx

@@ -0,0 +1,118 @@
+import { Menu } from '@meith/ui/menu'
+import type { UserPanelModel } from '@meith/theme-kit'
+
+import { BUTTON, BUTTON_PRIMARY, MICRO } from '../shared'
+
+const COUNT =
+  'inline-flex items-center gap-1 border px-1.5 py-0.5 font-mono text-[0.625rem] font-bold uppercase tracking-[0.12em] tabular-nums'
+
+function Caret() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 10 10"
+      className="size-2 text-primary"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="square"
+    >
+      <path d="M1.5 3.5 5 7l3.5-3.5" />
+    </svg>
+  )
+}
+
+export function UserPanel({
+  viewer,
+  links,
+  unreadNotifications,
+  unreadMessages,
+  children,
+}: UserPanelModel) {
+  if (viewer.isGuest) {
+    return (
+      <div className="flex flex-wrap items-center gap-2">
+        {links.map((link, index) => (
+          <a key={link.href} href={link.href} className={index === 0 ? BUTTON_PRIMARY : BUTTON}>
+            {link.label}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  const name = viewer.username ?? 'signed in'
+  const hrefFor = (label: string): string | null =>
+    links.find((link) => link.label === label)?.href ?? null
+  const notificationsHref = hrefFor('Notifications')
+  const messagesHref = hrefFor('Messages')
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <noscript
+        dangerouslySetInnerHTML={{
+          __html:
+            '<style>[data-account="menu"]{display:none}[data-account="plain"]{display:flex!important}</style>',
+        }}
+      />
+
+      {unreadNotifications > 0 && (
+        <a
+          href={notificationsHref ?? undefined}
+          className={`${COUNT} border-primary/60 bg-primary/15 text-primary hover:border-primary`}
+        >
+          {unreadNotifications} new
+        </a>
+      )}
+      {unreadMessages > 0 && (
+        <a
+          href={messagesHref ?? undefined}
+          className={`${COUNT} border-forum-unread/60 bg-forum-unread/15 text-forum-unread hover:border-forum-unread`}
+        >
+          {unreadMessages} pm
+        </a>
+      )}
+
+      <div data-account="menu" className="flex min-w-0 items-center">
+        <Menu
+          label="Your account"
+          items={links}
+          triggerClassName="rounded-none border-border bg-card px-2 py-1 hover:border-primary/70 hover:bg-card"
+          trigger={
+            <>
+              <span
+                aria-hidden="true"
+                className="size-1.5 rotate-45 bg-moderation-approved shadow-[0_0_6px_var(--color-moderation-approved)]"
+              />
+              <span className="font-mono text-[0.6875rem] font-semibold tracking-[0.12em] text-foreground uppercase">
+                {name}
+              </span>
+              <Caret />
+            </>
+          }
+        >
+          {children}
+        </Menu>
+      </div>
+
+      <nav
+        data-account="plain"
+        style={{ display: 'none' }}
+        aria-label="Your account"
+        className="flex-wrap items-center gap-x-3 gap-y-1"
+      >
+        <span className={`${MICRO} text-foreground`}>{name}</span>
+        {links.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            className={`${MICRO} hover:text-primary`}
+          >
+            {link.label}
+          </a>
+        ))}
+        {children}
+      </nav>
+    </div>
+  )
+}

package/src/slots/who-is-online.tsx

@@ -0,0 +1,64 @@
+import type { WhoIsOnlineModel } from '@meith/theme-kit'
+
+import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
+
+export function WhoIsOnline({
+  guestCount,
+  members,
+  total,
+  recordCount,
+  recordAt,
+  fullListHref,
+}: WhoIsOnlineModel) {
+  return (
+    <Frame aria-labelledby="who-is-online-heading">
+      <PanelHead
+        id="who-is-online-heading"
+        title="Online now"
+        aside={
+          <span className="inline-flex items-center gap-1.5 border border-moderation-approved/50 bg-moderation-approved/10 px-1.5 py-0.5">
+            <span
+              aria-hidden="true"
+              className="size-1.5 bg-moderation-approved shadow-[0_0_6px_var(--color-moderation-approved)]"
+            />
+            <span
+              className={`${NUMERIC} text-[0.625rem] font-bold tracking-[0.12em] text-moderation-approved uppercase`}
+            >
+              {total} online
+            </span>
+          </span>
+        }
+      />
+
+      <p className="px-3 py-2.5 text-xs">
+        {members.length === 0 ? (
+          <span className={MICRO}>no members</span>
+        ) : (
+          members.map((member, index) => (
+            <span key={member.username}>
+              {index > 0 && <span className="text-border">{' | '}</span>}
+              <UserRef user={member} className="text-foreground hover:text-primary" />
+              {member.isInvisible && <span className={`${MICRO} ml-1`}>hidden</span>}
+            </span>
+          ))
+        )}
+      </p>
+
+      <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
+        <a href={fullListHref} className="uppercase hover:text-primary">
+          full list
+        </a>
+        <span className="text-border">{' | '}</span>
+        <span className="uppercase">{guestCount} guests</span>
+        <span className="text-border">{' | '}</span>
+        <span className="uppercase">record {recordCount}</span>
+        {recordAt !== null && (
+          <>
+            {' '}
+            <Stamp at={recordAt} />
+          </>
+        )}
+      </p>
+    </Frame>
+  )
+}

package/src/theme.ts

@@ -0,0 +1,84 @@
+import { defaultTheme } from '@meith/theme-default'
+import { defineTheme } from '@meith/theme-kit'
+
+import { Announcement } from './slots/announcement'
+import { AuthPage } from './slots/auth-page'
+import { BoardIndex } from './slots/board-index'
+import { BoardStats } from './slots/board-stats'
+import { CategoryBlock } from './slots/category-block'
+import { DiscoveryView } from './slots/discovery-view'
+import { ErrorNotice } from './slots/error-notice'
+import { Footer } from './slots/footer'
+import { ForumDisplay } from './slots/forum-display'
+import { ForumJump } from './slots/forum-jump'
+import { ForumRow } from './slots/forum-row'
+import { Header } from './slots/header'
+import { LatestPosts } from './slots/latest-posts'
+import { LatestThreads } from './slots/latest-threads'
+import { MemberProfile } from './slots/member-profile'
+import { Navigation } from './slots/navigation'
+import { Notice } from './slots/notice'
+import { Pagination } from './slots/pagination'
+import { PanelNav } from './slots/panel-nav'
+import { PanelPage, PanelSection } from './slots/panel-page'
+import { PanelShell } from './slots/panel-shell'
+import { PostActions } from './slots/post-actions'
+import { PostBit } from './slots/post-bit'
+import { PostForm } from './slots/post-form'
+import { RedirectNotice } from './slots/redirect-notice'
+import { SearchForm } from './slots/search-form'
+import { SearchResults } from './slots/search-results'
+import { Shell } from './slots/shell'
+import { SubforumList } from './slots/subforum-list'
+import { ThreadRow } from './slots/thread-row'
+import { ThreadView } from './slots/thread-view'
+import { UserPanel } from './slots/user-panel'
+import { WhoIsOnline } from './slots/who-is-online'
+
+export const raidframeTheme = defineTheme({
+  key: 'raidframe',
+  title: 'Raidframe',
+  extends: defaultTheme,
+  slots: {
+    Shell,
+    Header,
+    UserPanel,
+    Navigation,
+    Footer,
+    Notice,
+    Announcement,
+
+    BoardIndex,
+    CategoryBlock,
+    ForumRow,
+    BoardStats,
+    WhoIsOnline,
+    LatestThreads,
+    LatestPosts,
+
+    ForumDisplay,
+    ThreadRow,
+    SubforumList,
+    Pagination,
+
+    ThreadView,
+    PostBit,
+    PostActions,
+
+    PostForm,
+    MemberProfile,
+    SearchForm,
+    SearchResults,
+    DiscoveryView,
+    ForumJump,
+
+    PanelShell,
+    PanelNav,
+    PanelPage,
+    PanelSection,
+    AuthPage,
+
+    RedirectNotice,
+    ErrorNotice,
+  },
+})