@meith/theme-raidframe 0.2.0

package/LICENSE.md

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@meith/theme-raidframe",
+  "version": "0.2.0",
+  "description": "A gaming theme for Meith — guild, raid and match boards — built on the default theme's slots.",
+  "license": "LGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meith-dev/meith.git",
+    "directory": "themes/raidframe"
+  },
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.type-test.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@meith/theme-default": "^0.2.0",
+    "@meith/theme-kit": "^0.2.0",
+    "@meith/ui": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18"
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { LIGHT_TOKENS, DARK_TOKENS, BROWSER_THEME_COLOR } from './tokens'
+
+export { raidframeTheme } from './theme'

package/src/shared.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react'
+
+import type { TimeModel, UserRefModel } from '@meith/theme-kit'
+
+export const MICRO =
+  'font-mono text-[0.625rem] font-semibold uppercase tracking-[0.18em] text-muted-foreground'
+
+export const HEADING = 'font-heading font-bold uppercase tracking-[0.12em]'
+
+export const NUMERIC = 'font-mono tabular-nums'
+
+export const LINK = 'text-foreground hover:text-primary'
+
+export const MUTED_LINK = 'text-muted-foreground hover:text-primary'
+
+export const BUTTON =
+  'inline-flex items-center gap-1.5 border border-border bg-secondary px-3 py-1.5 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.14em] text-secondary-foreground hover:border-primary/70 hover:text-primary'
+
+export const BUTTON_PRIMARY =
+  'inline-flex items-center gap-1.5 border border-primary bg-primary px-3 py-1.5 font-mono text-[0.6875rem] font-bold uppercase tracking-[0.14em] text-primary-foreground hover:bg-primary-hover hover:border-primary-hover'
+
+export const CHIP =
+  'inline-flex items-center gap-1 border border-border bg-surface px-1.5 py-0.5 font-mono text-[0.625rem] font-semibold uppercase tracking-[0.12em]'
+
+export const RULE =
+  'h-px w-full bg-gradient-to-r from-primary/70 via-primary/15 to-transparent'
+
+export function Frame({
+  children,
+  className,
+  as: Element = 'section',
+  ...rest
+}: {
+  children: ReactNode
+  className?: string
+  as?: 'section' | 'div' | 'article'
+  'aria-labelledby'?: string
+  'aria-label'?: string
+}) {
+  return (
+    <Element
+      {...rest}
+      className={`relative border border-border bg-card text-card-foreground shadow-elevation ${className ?? ''}`}
+    >
+      <Corner className="-top-px -left-px border-t-2 border-l-2" />
+      <Corner className="-top-px -right-px border-t-2 border-r-2" />
+      <Corner className="-bottom-px -left-px border-b-2 border-l-2" />
+      <Corner className="-right-px -bottom-px border-r-2 border-b-2" />
+      {children}
+    </Element>
+  )
+}
+
+function Corner({ className }: { className: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={`pointer-events-none absolute z-10 size-2 border-primary/70 ${className}`}
+    />
+  )
+}
+
+export function PanelHead({
+  id,
+  title,
+  href,
+  aside,
+}: {
+  id?: string
+  title: string
+  href?: string | null
+  aside?: ReactNode
+}) {
+  return (
+    <>
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border bg-surface px-3 py-2">
+        <h2 id={id} className={`${HEADING} text-sm text-foreground`}>
+          {href == null ? (
+            title
+          ) : (
+            <a href={href} className="hover:text-primary">
+              {title}
+            </a>
+          )}
+        </h2>
+        {aside}
+      </div>
+      <div className={RULE} aria-hidden="true" />
+    </>
+  )
+}
+
+export function ReadPip({ unread, className }: { unread: boolean; className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={`inline-block size-1.5 shrink-0 rotate-45 ${
+        unread
+          ? 'bg-forum-unread shadow-[0_0_8px_var(--color-forum-unread)]'
+          : 'border border-forum-read'
+      } ${className ?? ''}`}
+    />
+  )
+}
+
+export function Stamp({ at, className }: { at: TimeModel; className?: string }) {
+  return (
+    <time dateTime={at.iso} className={`${NUMERIC} ${className ?? ''}`}>
+      {at.label}
+    </time>
+  )
+}
+
+export function UserRef({
+  user,
+  className,
+  linked = true,
+}: {
+  user: UserRefModel
+  className?: string
+  linked?: boolean
+}) {
+  const classes = [className, user.nameClass].filter(Boolean).join(' ') || undefined
+
+  if (!linked || user.profileHref === null) {
+    return <span className={classes}>{user.username}</span>
+  }
+  return (
+    <a href={user.profileHref} className={classes}>
+      {user.username}
+    </a>
+  )
+}

package/src/slots/announcement.tsx

@@ -0,0 +1,40 @@
+import type { AnnouncementModel } from '@meith/theme-kit'
+
+import { Frame, HEADING, MICRO, Stamp, UserRef } from '../shared'
+
+export function Announcement({ title, bodyHtml, postedBy, postedAt, forum }: AnnouncementModel) {
+  return (
+    <Frame as="article">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border bg-surface px-3 py-2">
+        <span className={`${MICRO} text-primary`}>announcement</span>
+        {forum !== null && (
+          <a href={forum.href} className={`${MICRO} hover:text-primary`}>
+            {forum.label}
+          </a>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2 px-4 py-3">
+        <h2 className={`${HEADING} text-base text-foreground`}>{title}</h2>
+
+        <div
+          className="prose-md text-sm text-foreground"
+          dangerouslySetInnerHTML={{ __html: bodyHtml }}
+        />
+
+        <p className={MICRO}>
+          {postedBy === null ? (
+            'posted'
+          ) : (
+            <>
+              {'posted by '}
+              <UserRef user={postedBy} className="text-primary hover:underline" />
+            </>
+          )}
+          {' · '}
+          <Stamp at={postedAt} />
+        </p>
+      </div>
+    </Frame>
+  )
+}

package/src/slots/auth-page.tsx

@@ -0,0 +1,53 @@
+import type { AuthPageModel } from '@meith/theme-kit'
+
+import { Frame, HEADING, MICRO } from '../shared'
+
+export function AuthPage({ title, alert, links, regions }: AuthPageModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="flex flex-1 flex-col items-center justify-center p-4"
+    >
+      <Frame className="w-full max-w-sm">
+        <div className="flex flex-col gap-5 px-5 py-5">
+          <div className="flex flex-col gap-1">
+            <p className={`${MICRO} text-primary`}>access</p>
+            <h1 className={`${HEADING} text-2xl text-foreground`}>{title}</h1>
+            {regions.lede !== undefined && (
+              <p className="text-sm text-muted-foreground">{regions.lede}</p>
+            )}
+          </div>
+
+          {alert !== null && (
+            <p
+              role="alert"
+              className="border border-l-[3px] border-border border-l-destructive bg-surface px-3 py-2 text-sm"
+            >
+              {alert}
+            </p>
+          )}
+
+          {regions.note !== undefined && (
+            <p className="text-sm text-muted-foreground">{regions.note}</p>
+          )}
+
+          {regions.form}
+
+          {links.length > 0 && (
+            <div className="flex flex-col gap-1 border-t border-border pt-3 text-sm text-muted-foreground">
+              {links.map((link) => (
+                <span key={link.href}>
+                  {link.lead === null ? null : `${link.lead} `}
+                  <a href={link.href} className="font-medium text-foreground hover:text-primary">
+                    {link.label}
+                  </a>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </Frame>
+    </main>
+  )
+}

package/src/slots/board-index.tsx

@@ -0,0 +1,35 @@
+import type { BoardIndexModel } from '@meith/theme-kit'
+
+import { BUTTON } from '../shared'
+
+export function BoardIndex({ markAllReadAction, regions }: BoardIndexModel) {
+  const latest = regions.latest ?? null
+
+  return (
+    <div className="flex flex-col gap-4 p-4">
+      {regions.announcements !== undefined && (
+        <div className="flex flex-col gap-4 empty:hidden">{regions.announcements}</div>
+      )}
+
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
+        <div className="flex min-w-0 flex-1 flex-col gap-4">{regions.categories}</div>
+
+        <aside className="flex flex-col gap-4 empty:hidden lg:w-80 lg:shrink-0">
+          {regions.online}
+          {regions.stats}
+          {latest}
+        </aside>
+      </div>
+
+      {regions.plugins}
+
+      {markAllReadAction !== null && (
+        <form action={markAllReadAction} method="post">
+          <button type="submit" className={BUTTON}>
+            mark all read
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}

package/src/slots/board-stats.tsx

@@ -0,0 +1,52 @@
+import type { BoardStatsModel } from '@meith/theme-kit'
+
+import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
+
+function Stat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="border border-border bg-surface px-2 py-1.5">
+      <dt className={MICRO}>{label}</dt>
+      <dd className={`${NUMERIC} text-lg leading-tight font-semibold text-foreground`}>{value}</dd>
+    </div>
+  )
+}
+
+export function BoardStats({
+  threadCount,
+  postCount,
+  memberCount,
+  newestMember,
+  computedAt,
+}: BoardStatsModel) {
+  return (
+    <Frame aria-labelledby="board-stats-heading">
+      <PanelHead id="board-stats-heading" title="Board statistics" />
+
+      <dl className="grid grid-cols-3 gap-1.5 px-3 py-3">
+        <Stat label="threads" value={threadCount} />
+        <Stat label="posts" value={postCount} />
+        <Stat label="members" value={memberCount} />
+      </dl>
+
+      <p className={`${MICRO} border-t border-border px-3 py-2 normal-case`}>
+        <span className="uppercase">newest member</span>
+        {': '}
+        {newestMember === null ? (
+          '—'
+        ) : (
+          <UserRef user={newestMember} className="text-primary hover:underline" />
+        )}
+      </p>
+
+      <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
+        {computedAt === null ? (
+          <span className="uppercase">not counted yet</span>
+        ) : (
+          <>
+            <span className="uppercase">counted</span> <Stamp at={computedAt} />
+          </>
+        )}
+      </p>
+    </Frame>
+  )
+}

package/src/slots/category-block.tsx

@@ -0,0 +1,37 @@
+import type { CategoryBlockModel } from '@meith/theme-kit'
+
+import { Frame, MICRO, PanelHead } from '../shared'
+
+export function CategoryBlock({ category, children }: CategoryBlockModel) {
+  return (
+    <Frame>
+      <PanelHead title={category.title} href={category.href} />
+
+      {category.description !== null && (
+        <p className="border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+          {category.description}
+        </p>
+      )}
+
+      <table className="w-full border-collapse text-sm">
+        <thead>
+          <tr className={`${MICRO} text-left`}>
+            <th scope="col" className="px-3 py-1.5 font-semibold">
+              Forum
+            </th>
+            <th scope="col" className="w-16 px-2 py-1.5 text-right font-semibold">
+              Threads
+            </th>
+            <th scope="col" className="w-16 px-2 py-1.5 text-right font-semibold">
+              Posts
+            </th>
+            <th scope="col" className="hidden w-60 px-3 py-1.5 font-semibold sm:table-cell">
+              Last post
+            </th>
+          </tr>
+        </thead>
+        <tbody>{children}</tbody>
+      </table>
+    </Frame>
+  )
+}

package/src/slots/discovery-view.tsx

@@ -0,0 +1,122 @@
+import type { DiscoveryViewModel, TabModel } from '@meith/theme-kit'
+
+import { Frame, HEADING, MICRO, NUMERIC, RULE, Stamp } from '../shared'
+
+const TAB =
+  'inline-flex items-center border px-3 py-1.5 font-mono text-[0.6875rem] font-semibold uppercase tracking-[0.14em] whitespace-nowrap'
+
+const CURRENT = 'border-primary bg-primary text-primary-foreground'
+const OTHER = 'border-border bg-card text-muted-foreground hover:border-primary/60 hover:text-primary'
+
+function Tabs({ label, tabs }: { label: string; tabs: readonly TabModel[] }) {
+  if (tabs.length === 0) return null
+
+  return (
+    <nav aria-label={label}>
+      <ul className="flex flex-wrap items-center gap-1.5">
+        {tabs.map((tab) => (
+          <li key={tab.href}>
+            <a
+              href={tab.href}
+              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
+              className={`${TAB} ${tab.isCurrent ? CURRENT : OTHER}`}
+            >
+              {tab.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export function DiscoveryView({
+  title,
+  blurb,
+  tabsLabel,
+  tabs,
+  rows,
+  nextHref,
+  nextLabel,
+  emptyMessage,
+  refusal,
+}: DiscoveryViewModel) {
+  return (
+    <main
+      id="board-content"
+      tabIndex={-1}
+      className="mx-auto flex w-full max-w-5xl 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}>listing</p>
+          <h1 className={`${HEADING} text-xl text-foreground`}>{title}</h1>
+          <p className="mt-1 text-xs text-muted-foreground">{blurb}</p>
+        </div>
+        <div className={RULE} aria-hidden="true" />
+      </div>
+
+      <Tabs label={tabsLabel} tabs={tabs} />
+
+      {refusal !== null ? (
+        <p
+          role="alert"
+          className="border border-l-[3px] border-border border-l-primary bg-card px-3 py-2 text-sm"
+        >
+          {refusal.message}{' '}
+          <a href={refusal.signInHref} className="font-medium text-foreground hover:text-primary">
+            {refusal.signInLabel}
+          </a>
+        </p>
+      ) : rows.length === 0 ? (
+        <Frame>
+          <p className="px-4 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</p>
+        </Frame>
+      ) : (
+        <Frame>
+          <ul className="divide-y divide-border">
+            {rows.map((row) => (
+              <li
+                key={row.threadId}
+                className="flex flex-col gap-1.5 px-4 py-3 hover:bg-secondary/50 sm:flex-row sm:items-center sm:justify-between sm:gap-6"
+              >
+                <div className="flex min-w-0 flex-col gap-1">
+                  <a
+                    href={row.href}
+                    className="truncate text-sm font-medium text-foreground hover:text-primary"
+                  >
+                    {row.title}
+                  </a>
+                  <p className={`${MICRO} truncate normal-case`}>
+                    <a href={row.forum.href} className="uppercase hover:text-primary">
+                      {row.forum.label}
+                    </a>
+                    <span className="text-border">{' | '}</span>
+                    <span className="uppercase">started by</span> {row.authorUsername}
+                  </p>
+                </div>
+
+                <p className={`${MICRO} shrink-0 normal-case sm:text-right`}>
+                  <span className={`${NUMERIC} text-foreground`}>{row.replyCount}</span>{' '}
+                  <span className="uppercase">{row.replyCount === 1 ? 'reply' : 'replies'}</span>
+                  <span className="block">
+                    <Stamp at={row.lastPostAt} />
+                    {row.lastPostUsername === null ? null : ` by ${row.lastPostUsername}`}
+                  </span>
+                </p>
+              </li>
+            ))}
+          </ul>
+        </Frame>
+      )}
+
+      {nextHref !== null && (
+        <p>
+          <a href={nextHref} className={`${MICRO} hover:text-primary`}>
+            {nextLabel} →
+          </a>
+        </p>
+      )}
+    </main>
+  )
+}