@meith/theme-clubhouse 0.7.0 → 0.8.0

package/src/slots/forum-display.tsx

@@ -1,18 +1,27 @@
-import { Card, CardRows, Empty, EmptyAction, EmptyDescription, EmptyTitle, cn } from '@meith/ui'
-import type { ForumDisplayModel } from '@meith/theme-kit'
+import type { ForumDisplayModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { Card, CardRows, cn, Empty, EmptyAction, EmptyDescription, EmptyTitle } from '@meith/ui'
 
 import {
   BUTTON,
   ColumnHeads,
   HEADING,
+  isEmptyRegion,
   MICRO,
   NUMERIC,
   PAGE_BODY,
   PageHead,
-  isEmptyRegion,
 } from '../shared'
 
-export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }: ForumDisplayModel) {
+export function ForumDisplay({
+  forum,
+  newThreadHref,
+  markReadAction,
+  regions,
+  copy,
+}: ForumDisplayModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.forumDisplay.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       <PageHead
@@ -27,7 +36,7 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
                     'bg-secondary text-secondary-foreground hover:bg-secondary/80',
                   )}
                 >
-                  Mark read
+                  {c('markRead')}
                 </button>
               </form>
             )}
@@ -36,7 +45,7 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
                 href={newThreadHref}
                 className={cn(BUTTON, 'bg-primary text-primary-foreground hover:bg-primary-hover')}
               >
-                New thread
+                {c('newThread')}
               </a>
             )}
           </>
@@ -46,8 +55,7 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
         <p className="mt-0.5 flex flex-wrap items-baseline gap-x-2 text-xs text-muted-foreground">
           {forum.type !== 'link' && (
             <span className={`${MICRO} ${NUMERIC}`}>
-              {forum.threadCount.toLocaleString('en')} threads ·{' '}
-              {forum.postCount.toLocaleString('en')} posts
+              {forum.threadCount.label} {c('threads')} · {forum.postCount.label} {c('posts')}
             </span>
           )}
           {forum.description !== null && <span>{forum.description}</span>}
@@ -67,11 +75,9 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
       <Card>
         {isEmptyRegion(regions.threads) ? (
           <Empty>
-            <EmptyTitle>No threads here yet</EmptyTitle>
+            <EmptyTitle>{c('noThreadsYet')}</EmptyTitle>
             <EmptyDescription>
-              {newThreadHref === null
-                ? 'Nothing has been posted in this forum.'
-                : 'Nothing has been posted in this forum. Yours would be the first.'}
+              {newThreadHref === null ? c('emptyNoThread') : c('emptyNoThreadFirst')}
             </EmptyDescription>
             {newThreadHref !== null && (
               <EmptyAction>
@@ -82,14 +88,18 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
                     'bg-primary text-primary-foreground hover:bg-primary-hover',
                   )}
                 >
-                  Start the first thread
+                  {c('startFirstThread')}
                 </a>
               </EmptyAction>
             )}
           </Empty>
         ) : (
           <>
-            <ColumnHeads first="Thread" counts={['Replies', 'Views']} last="Latest" />
+            <ColumnHeads
+              first={c('thread')}
+              counts={[c('replies'), c('views')]}
+              last={c('latest')}
+            />
             <CardRows>{regions.threads}</CardRows>
           </>
         )}

package/src/slots/forum-row.tsx

@@ -1,8 +1,10 @@
-import type { ForumRowSlotModel } from '@meith/theme-kit'
+import type { ForumRowSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { CHIP, HEADING, LINK, MICRO, ReadMark, Stamp, TABLE_ROW, Tally, UserRef } from '../shared'
 
-export function ForumRow({ forum }: ForumRowSlotModel) {
+export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.forumRow.${key}`)
   const isLink = forum.type === 'link'
 
   return (
@@ -19,8 +21,8 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
         >
           {forum.title}
         </a>
-        {forum.isUnread && <span className="sr-only"> (new posts)</span>}
-        {isLink && <span className={`${MICRO} ml-2`}>Link</span>}
+        {forum.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
+        {isLink && <span className={`${MICRO} ml-2`}>{c('link')}</span>}
 
         {forum.description !== null && (
           <p className="mt-0.5 text-xs text-muted-foreground">{forum.description}</p>
@@ -40,19 +42,19 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
       {!isLink && (
         <>
           <span className="col-start-2 md:col-start-3 md:block md:text-right">
-            <Tally value={forum.threadCount} label="threads" />
+            <Tally value={forum.threadCount} label={c('threads')} />
             <span className="ms-3 md:hidden">
-              <Tally value={forum.postCount} label="posts" />
+              <Tally value={forum.postCount} label={c('posts')} />
             </span>
           </span>
 
           <span className="hidden md:block md:text-right">
-            <Tally value={forum.postCount} label="posts" />
+            <Tally value={forum.postCount} label={c('posts')} />
           </span>
 
           <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-5">
             {forum.lastPost === null ? (
-              <span className={MICRO}>No posts yet</span>
+              <span className={MICRO}>{c('noPostsYet')}</span>
             ) : (
               <>
                 <a

package/src/slots/header.tsx

@@ -1,4 +1,5 @@
-import type { HeaderModel } from '@meith/theme-kit'
+import type { HeaderModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { ClubRule, Crest, HEADING, PAGE, TAB } from '../shared'
 
@@ -33,7 +34,16 @@ function BoardMark({ boardTitle, logo }: Pick<HeaderModel, 'boardTitle' | 'logo'
   )
 }
 
-export function Header({ boardTitle, homeHref, navigation, logo, children }: HeaderModel) {
+export function Header({
+  boardTitle,
+  homeHref,
+  navigation,
+  logo,
+  children,
+  copy,
+}: HeaderModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.header.${key}`)
+
   return (
     <header className="bg-card">
       <div className={`${PAGE} flex flex-wrap items-center justify-between gap-x-6 gap-y-3 py-3`}>
@@ -49,7 +59,7 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
       <ClubRule />
 
       {navigation.length > 0 && (
-        <nav aria-label="Board sections" className="border-b border-border bg-surface">
+        <nav aria-label={c('boardSections')} className="border-b border-border bg-surface">
           <div className={PAGE}>
             <ul className="-mx-4 flex items-stretch overflow-x-auto px-4 sm:-mx-6 sm:px-6">
               {navigation.map((item) => (

package/src/slots/latest-posts.tsx

@@ -1,25 +1,28 @@
+import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Card, CardContent, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
-import type { LatestPostsModel } from '@meith/theme-kit'
 
 import { LINK, MICRO, MUTED_LINK, PanelHead, Stamp, UserRef } from '../shared'
 
-export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
+export function LatestPosts({ posts, capturedAt, copy }: LatestPostsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.latestPosts.${key}`)
+
   return (
     <Card aria-labelledby="latest-posts-heading">
       <PanelHead
         id="latest-posts-heading"
-        title="Latest posts"
+        title={c('title')}
         aside={
           <span className={MICRO}>
-            As of <Stamp at={capturedAt} />
+            {c('asOf')} <Stamp at={capturedAt} />
           </span>
         }
       />
 
       {posts.length === 0 ? (
         <Empty className="py-5">
-          <EmptyTitle>Nothing said yet</EmptyTitle>
-          <EmptyDescription>The newest posts you can see will appear here.</EmptyDescription>
+          <EmptyTitle>{c('nothingSaidYet')}</EmptyTitle>
+          <EmptyDescription>{c('newestPostsEmpty')}</EmptyDescription>
         </Empty>
       ) : (
         <CardContent className="px-0 py-0">
@@ -39,7 +42,7 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
 
                 <p className="truncate text-xs text-muted-foreground">
                   <UserRef user={post.author} className="font-medium" />
-                  {' in '}
+                  {` ${c('in')} `}
                   <a href={post.forum.href} className={MUTED_LINK}>
                     {post.forum.label}
                   </a>

package/src/slots/latest-threads.tsx

@@ -1,25 +1,32 @@
+import type { LatestThreadsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Card, CardContent, Empty, EmptyDescription, EmptyTitle } from '@meith/ui'
-import type { LatestThreadsModel } from '@meith/theme-kit'
 
 import { LINK, MICRO, MUTED_LINK, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
 
-export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
+export function LatestThreads({
+  threads,
+  capturedAt,
+  copy,
+}: LatestThreadsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.latestThreads.${key}`)
+
   return (
     <Card aria-labelledby="latest-threads-heading">
       <PanelHead
         id="latest-threads-heading"
-        title="Latest threads"
+        title={c('title')}
         aside={
           <span className={MICRO}>
-            As of <Stamp at={capturedAt} />
+            {c('asOf')} <Stamp at={capturedAt} />
           </span>
         }
       />
 
       {threads.length === 0 ? (
         <Empty className="py-5">
-          <EmptyTitle>Nothing started yet</EmptyTitle>
-          <EmptyDescription>The newest threads you can see will appear here.</EmptyDescription>
+          <EmptyTitle>{c('nothingStartedYet')}</EmptyTitle>
+          <EmptyDescription>{c('newestThreadsEmpty')}</EmptyDescription>
         </Empty>
       ) : (
         <CardContent className="px-0 py-0">
@@ -34,13 +41,13 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
                     {thread.title}
                   </a>
                   <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
-                    {thread.replyCount.toLocaleString('en')}
+                    {thread.replyCount.label}
                   </span>
                 </div>
 
                 <p className="truncate text-xs text-muted-foreground">
                   <UserRef user={thread.author} className="font-medium" />
-                  {' in '}
+                  {` ${c('in')} `}
                   <a href={thread.forum.href} className={MUTED_LINK}>
                     {thread.forum.label}
                   </a>

package/src/slots/member-profile.tsx

@@ -1,5 +1,6 @@
+import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Avatar, Card, CardContent, cn } from '@meith/ui'
-import type { MemberProfileModel } from '@meith/theme-kit'
 
 import { BUTTON, ClubBar, HEADING, MICRO, NUMERIC, PAGE_BODY, PanelHead, Stamp } from '../shared'
 
@@ -14,7 +15,10 @@ export function MemberProfile({
   fields,
   actions,
   regions,
-}: MemberProfileModel) {
+  copy,
+}: MemberProfileModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.memberProfile.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       <Card className="flex items-stretch">
@@ -40,7 +44,7 @@ export function MemberProfile({
 
             {actions.length > 0 && (
               <nav
-                aria-label="Member actions"
+                aria-label={c('memberActions')}
                 className="flex shrink-0 flex-wrap items-center gap-2"
               >
                 {actions.map((action, index) => (
@@ -63,21 +67,19 @@ export function MemberProfile({
 
           <dl className="flex flex-wrap gap-x-6 gap-y-1 border-t-2 border-t-secondary bg-surface px-4 py-2.5 text-xs">
             <div className="flex items-baseline gap-1.5">
-              <dt className={MICRO}>Posts</dt>
-              <dd className={`${NUMERIC} font-semibold text-foreground`}>
-                {postCount.toLocaleString('en')}
-              </dd>
+              <dt className={MICRO}>{c('posts')}</dt>
+              <dd className={`${NUMERIC} font-semibold text-foreground`}>{postCount.label}</dd>
             </div>
             <div className="flex items-baseline gap-1.5">
-              <dt className={MICRO}>Joined</dt>
+              <dt className={MICRO}>{c('joined')}</dt>
               <dd className="font-semibold text-foreground">
                 <Stamp at={joinedAt} />
               </dd>
             </div>
             <div className="flex items-baseline gap-1.5">
-              <dt className={MICRO}>Last visit</dt>
+              <dt className={MICRO}>{c('lastVisit')}</dt>
               <dd className="font-semibold text-foreground">
-                {lastVisitAt === null ? 'Never' : <Stamp at={lastVisitAt} />}
+                {lastVisitAt === null ? c('never') : <Stamp at={lastVisitAt} />}
               </dd>
             </div>
           </dl>
@@ -86,7 +88,7 @@ export function MemberProfile({
 
       {fields.length > 0 && (
         <Card aria-labelledby="profile-fields-heading">
-          <PanelHead id="profile-fields-heading" title="About" />
+          <PanelHead id="profile-fields-heading" title={c('about')} />
           <CardContent className="px-4 py-3">
             <dl className="grid gap-x-6 gap-y-2.5 sm:grid-cols-2">
               {fields.map((field) => (
@@ -102,7 +104,7 @@ export function MemberProfile({
 
       {signatureHtml !== null && (
         <Card aria-labelledby="profile-signature-heading">
-          <PanelHead id="profile-signature-heading" title="Signature" />
+          <PanelHead id="profile-signature-heading" title={c('signature')} />
           <CardContent className="px-4 py-3">
             <div
               className="prose-md text-sm text-muted-foreground"

package/src/slots/navigation.tsx

@@ -1,12 +1,15 @@
-import type { NavigationModel } from '@meith/theme-kit'
+import type { NavigationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MICRO, MUTED_LINK, PAGE } from '../shared'
 
-export function Navigation({ items }: NavigationModel) {
+export function Navigation({ items, copy }: NavigationModel & { copy: SlotCopy }) {
   if (items.length === 0) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.navigation.${key}`)
+
   return (
-    <nav aria-label="Breadcrumb" className="border-b border-border bg-card">
+    <nav aria-label={c('breadcrumb')} className="border-b border-border bg-card">
       <ol
         className={`${PAGE} flex items-center gap-2 overflow-x-auto py-2 whitespace-nowrap ${MICRO}`}
       >

package/src/slots/notice.tsx

@@ -1,25 +1,28 @@
+import type { NoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Alert, AlertDescription, AlertTitle } from '@meith/ui'
-import type { NoticeModel } from '@meith/theme-kit'
 
 import { MICRO, MUTED_LINK } from '../shared'
 
-const KIND_LABELS: Record<NoticeModel['kind'], string> = {
-  info: 'Notice',
-  success: 'Done',
-  warning: 'Warning',
-  error: 'Error',
-}
+export function Notice({ kind, message, dismissHref, copy }: NoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.notice.${key}`)
+
+  const kindLabels: Record<NoticeModel['kind'], string> = {
+    info: c('kindInfo'),
+    success: c('kindSuccess'),
+    warning: c('kindWarning'),
+    error: c('kindError'),
+  }
 
-export function Notice({ kind, message, dismissHref }: NoticeModel) {
   return (
     <Alert tone={kind}>
       <AlertDescription>
-        <AlertTitle className={MICRO}>{KIND_LABELS[kind]}</AlertTitle> {message}
+        <AlertTitle className={MICRO}>{kindLabels[kind]}</AlertTitle> {message}
       </AlertDescription>
 
       {dismissHref !== null && (
         <a href={dismissHref} className={`shrink-0 text-xs ${MUTED_LINK}`}>
-          Dismiss
+          {c('dismiss')}
         </a>
       )}
     </Alert>

package/src/slots/pagination.tsx

@@ -1,5 +1,6 @@
+import type { PaginationModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
-import type { PaginationModel } from '@meith/theme-kit'
 
 import { BUTTON, MICRO, NUMERIC } from '../shared'
 
@@ -10,21 +11,24 @@ export function Pagination({
   pages,
   previousHref,
   nextHref,
-}: PaginationModel) {
+  copy,
+}: PaginationModel & { copy: SlotCopy }) {
   if (pageCount <= 1 && previousHref === null && nextHref === null) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.pagination.${key}`)
+
   const step = cn(BUTTON, 'min-w-20 justify-center border border-border bg-card hover:bg-accent')
   const stepDisabled = cn(step, 'pointer-events-none opacity-40')
 
   return (
-    <nav aria-label="Pagination" className="flex flex-wrap items-center justify-between gap-3">
+    <nav aria-label={c('pagination')} className="flex flex-wrap items-center justify-between gap-3">
       {previousHref === null ? (
         <span className={stepDisabled} aria-hidden="true">
-          Previous
+          {c('previous')}
         </span>
       ) : (
         <a href={previousHref} rel="prev" className={step}>
-          Previous
+          {c('previous')}
         </a>
       )}
 
@@ -43,7 +47,7 @@ export function Pagination({
               <a
                 href={entry.href}
                 aria-current={entry.isCurrent ? 'page' : undefined}
-                aria-label={`Page ${entry.page}`}
+                aria-label={`${c('page')} ${entry.page}`}
                 className={cn(
                   BUTTON,
                   'min-w-8 justify-center px-2.5',
@@ -61,18 +65,20 @@ export function Pagination({
 
         <li className={`ml-2 whitespace-nowrap ${MICRO}`}>
           <span className={NUMERIC}>
-            {pageCountIsExact ? `Page ${page} of ${pageCount}` : `Page ${page}`}
+            {pageCountIsExact
+              ? `${c('page')} ${page} ${c('of')} ${pageCount}`
+              : `${c('page')} ${page}`}
           </span>
         </li>
       </ol>
 
       {nextHref === null ? (
         <span className={stepDisabled} aria-hidden="true">
-          Next
+          {c('next')}
         </span>
       ) : (
         <a href={nextHref} rel="next" className={step}>
-          Next
+          {c('next')}
         </a>
       )}
     </nav>

package/src/slots/post-actions.tsx

@@ -1,5 +1,6 @@
-import { Separator, cn } from '@meith/ui'
-import type { PostActionsSlotModel } from '@meith/theme-kit'
+import type { PostActionsSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { cn, Separator } from '@meith/ui'
 
 import { BUTTON, isEmptyRegion } from '../shared'
 
@@ -10,18 +11,24 @@ interface Action {
 
 const ACTION = cn(BUTTON, 'h-7 px-2.5 text-muted-foreground hover:bg-accent hover:text-foreground')
 
-export function PostActions({ actions, children }: PostActionsSlotModel) {
+export function PostActions({
+  actions,
+  children,
+  copy,
+}: PostActionsSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `clubhouse.postActions.${key}`)
+
   const reader: Action[] = [
-    actions.quoteHref === null ? null : { href: actions.quoteHref, label: 'Quote' },
-    actions.editHref === null ? null : { href: actions.editHref, label: 'Edit' },
-    actions.rateHref === null ? null : { href: actions.rateHref, label: 'Rate' },
-    actions.reportHref === null ? null : { href: actions.reportHref, label: 'Report' },
+    actions.quoteHref === null ? null : { href: actions.quoteHref, label: c('quote') },
+    actions.editHref === null ? null : { href: actions.editHref, label: c('edit') },
+    actions.rateHref === null ? null : { href: actions.rateHref, label: c('rate') },
+    actions.reportHref === null ? null : { href: actions.reportHref, label: c('report') },
   ].filter((action): action is Action => action !== null)
 
   const staff: Action[] = [
-    actions.restoreHref === null ? null : { href: actions.restoreHref, label: 'Restore' },
-    actions.warnHref === null ? null : { href: actions.warnHref, label: 'Warn' },
-    actions.moderateHref === null ? null : { href: actions.moderateHref, label: 'Moderate' },
+    actions.restoreHref === null ? null : { href: actions.restoreHref, label: c('restore') },
+    actions.warnHref === null ? null : { href: actions.warnHref, label: c('warn') },
+    actions.moderateHref === null ? null : { href: actions.moderateHref, label: c('moderate') },
   ].filter((action): action is Action => action !== null)
 
   const extra = isEmptyRegion(children) ? null : children
@@ -30,7 +37,7 @@ export function PostActions({ actions, children }: PostActionsSlotModel) {
 
   return (
     <nav
-      aria-label="Post actions"
+      aria-label={c('postActions')}
       className="flex flex-wrap items-center gap-1 border-t border-border bg-surface px-3 py-1.5 empty:hidden"
     >
       {reader.map((action) => (