@meith/theme-raidframe 0.6.0 → 0.8.0

package/src/slots/thread-row.tsx

@@ -1,10 +1,13 @@
-import type { ThreadRowSlotModel } from '@meith/theme-kit'
+import type { SlotCopy, ThreadRowSlotModel } from '@meith/theme-kit'
+import { fromSlotCopy } 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) {
+export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.threadRow.${key}`)
+
   return (
     <tr className="border-t border-border align-top hover:bg-secondary/50">
       <td className="px-3 py-2.5">
@@ -31,40 +34,45 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
           <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.isUnread && <span className="sr-only">{c('newPosts')}</span>}
 
           {thread.isSticky && (
-            <span className={`${TAG} border-thread-pinned/60 text-thread-pinned`}>pinned</span>
+            <span className={`${TAG} border-thread-pinned/60 text-thread-pinned`}>
+              {c('pinned')}
+            </span>
           )}
           {thread.isLocked && (
-            <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>locked</span>
+            <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>
+              {c('locked')}
+            </span>
           )}
           {thread.isMoved && (
-            <span className={`${TAG} border-thread-moved/60 text-thread-moved`}>moved</span>
+            <span className={`${TAG} border-thread-moved/60 text-thread-moved`}>{c('moved')}</span>
           )}
         </div>
 
         <p className={`${MICRO} mt-1 normal-case`}>
-          <span className="uppercase">started by</span>{' '}
+          <span className="uppercase">{c('startedBy')}</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}
+        {thread.replyCount.label}
       </td>
       <td className={`w-16 px-2 py-2.5 text-right text-xs ${NUMERIC} text-muted-foreground`}>
-        {thread.viewCount}
+        {thread.viewCount.label}
       </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>
+          <span className={MICRO}>{c('none')}</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} />
+              {c('byPrefix')}
+              <UserRef user={thread.lastPost.author} linked={false} />
             </span>
           </a>
         )}

package/src/slots/thread-view.tsx

@@ -1,14 +1,24 @@
-import type { ThreadViewModel } from '@meith/theme-kit'
+import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
+import { fromSlotCopy } 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) {
+export function ThreadView({
+  thread,
+  forum,
+  replyHref,
+  markReadAction,
+  regions,
+  copy,
+}: ThreadViewModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.threadView.${key}`)
+
   const reply =
     replyHref === null ? null : (
       <a href={replyHref} className={BUTTON_PRIMARY}>
-        post reply
+        {c('postReply')}
       </a>
     )
 
@@ -26,15 +36,19 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
 
             <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>
+                <span className={`${TAG} border-thread-pinned/60 text-thread-pinned`}>
+                  {c('pinned')}
+                </span>
               )}
               {thread.isLocked && (
-                <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>locked</span>
+                <span className={`${TAG} border-thread-locked/60 text-thread-locked`}>
+                  {c('locked')}
+                </span>
               )}
               <span className={`${MICRO} ${NUMERIC} normal-case`}>
-                <span className="text-foreground">{thread.replyCount}</span> replies
+                <span className="text-foreground">{thread.replyCount.label}</span> {c('replies')}
                 <span className="text-border">{' | '}</span>
-                <span className="text-foreground">{thread.viewCount}</span> views
+                <span className="text-foreground">{thread.viewCount.label}</span> {c('views')}
               </span>
             </p>
           </div>
@@ -65,7 +79,7 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
         {markReadAction !== null && (
           <form action={markReadAction} method="post">
             <button type="submit" className={BUTTON}>
-              mark read
+              {c('markRead')}
             </button>
           </form>
         )}

package/src/slots/user-panel.tsx

@@ -1,5 +1,6 @@
+import type { SlotCopy, UserPanelModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Menu } from '@meith/ui/menu'
-import type { UserPanelModel } from '@meith/theme-kit'
 
 import { BUTTON, BUTTON_PRIMARY, MICRO } from '../shared'
 
@@ -30,7 +31,10 @@ export function UserPanel({
   notificationsHref,
   messagesHref,
   children,
-}: UserPanelModel) {
+  copy,
+}: UserPanelModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.userPanel.${key}`)
+
   if (viewer.isGuest) {
     return (
       <div className="flex flex-wrap items-center gap-2">
@@ -43,7 +47,7 @@ export function UserPanel({
     )
   }
 
-  const name = viewer.username ?? 'signed in'
+  const name = viewer.username ?? c('signedIn')
 
   return (
     <div className="flex flex-wrap items-center gap-2">
@@ -54,26 +58,26 @@ export function UserPanel({
         }}
       />
 
-      {unreadNotifications > 0 && (
+      {unreadNotifications.value > 0 && (
         <a
           href={notificationsHref}
           className={`${COUNT} border-primary/60 bg-primary/15 text-primary hover:border-primary`}
         >
-          {unreadNotifications} new
+          {unreadNotifications.label} {c('new')}
         </a>
       )}
-      {unreadMessages > 0 && (
+      {unreadMessages.value > 0 && (
         <a
           href={messagesHref}
           className={`${COUNT} border-forum-unread/60 bg-forum-unread/15 text-forum-unread hover:border-forum-unread`}
         >
-          {unreadMessages} pm
+          {unreadMessages.label} {c('pm')}
         </a>
       )}
 
       <div data-account="menu" className="flex min-w-0 items-center">
         <Menu
-          label="Your account"
+          label={c('accountLabel')}
           items={links}
           triggerClassName="rounded-none border-border bg-card px-2 py-1 hover:border-primary/70 hover:bg-card"
           trigger={
@@ -96,16 +100,12 @@ export function UserPanel({
       <nav
         data-account="plain"
         style={{ display: 'none' }}
-        aria-label="Your account"
+        aria-label={c('accountLabel')}
         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`}
-          >
+          <a key={link.href} href={link.href} className={`${MICRO} hover:text-primary`}>
             {link.label}
           </a>
         ))}

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

@@ -1,20 +1,25 @@
-import type { WhoIsOnlineModel } from '@meith/theme-kit'
+import type { SlotCopy, WhoIsOnlineModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Frame, MICRO, NUMERIC, PanelHead, Stamp, UserRef } from '../shared'
 
 export function WhoIsOnline({
   guestCount,
   members,
+  memberCount,
   total,
   recordCount,
   recordAt,
   fullListHref,
-}: WhoIsOnlineModel) {
+  copy,
+}: WhoIsOnlineModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `raidframe.whoIsOnline.${key}`)
+
   return (
     <Frame aria-labelledby="who-is-online-heading">
       <PanelHead
         id="who-is-online-heading"
-        title="Online now"
+        title={c('heading')}
         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
@@ -24,21 +29,21 @@ export function WhoIsOnline({
             <span
               className={`${NUMERIC} text-[0.625rem] font-bold tracking-[0.12em] text-moderation-approved uppercase`}
             >
-              {total} online
+              {total.label} {c('onlineSuffix')}
             </span>
           </span>
         }
       />
 
       <p className="px-3 py-2.5 text-xs">
-        {members.length === 0 ? (
-          <span className={MICRO}>no members</span>
+        {memberCount.value === 0 ? (
+          <span className={MICRO}>{c('noMembers')}</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>}
+              {member.isInvisible && <span className={`${MICRO} ml-1`}>{c('hidden')}</span>}
             </span>
           ))
         )}
@@ -46,12 +51,16 @@ export function WhoIsOnline({
 
       <p className={`${MICRO} border-t border-border px-3 py-1.5 normal-case`}>
         <a href={fullListHref} className="uppercase hover:text-primary">
-          full list
+          {c('fullList')}
         </a>
         <span className="text-border">{' | '}</span>
-        <span className="uppercase">{guestCount} guests</span>
+        <span className="uppercase">
+          {guestCount.label} {c('guests')}
+        </span>
         <span className="text-border">{' | '}</span>
-        <span className="uppercase">record {recordCount}</span>
+        <span className="uppercase">
+          {c('record')} {recordCount.label}
+        </span>
         {recordAt !== null && (
           <>
             {' '}

package/src/theme.ts

@@ -1,6 +1,39 @@
 import { defaultTheme } from '@meith/theme-default'
 import { defineTheme } from '@meith/theme-kit'
 
+import {
+  announcementCopy,
+  authPageCopy,
+  boardIndexCopy,
+  boardStatsCopy,
+  categoryBlockCopy,
+  discoveryViewCopy,
+  errorNoticeCopy,
+  footerCopy,
+  forumDisplayCopy,
+  forumRowCopy,
+  headerCopy,
+  latestPostsCopy,
+  latestThreadsCopy,
+  memberProfileCopy,
+  navigationCopy,
+  noticeCopy,
+  paginationCopy,
+  panelNavCopy,
+  panelPageCopy,
+  postActionsCopy,
+  postBitCopy,
+  postFormCopy,
+  redirectNoticeCopy,
+  searchFormCopy,
+  searchResultsCopy,
+  shellCopy,
+  subforumListCopy,
+  threadRowCopy,
+  threadViewCopy,
+  userPanelCopy,
+  whoIsOnlineCopy,
+} from './copy'
 import { Announcement } from './slots/announcement'
 import { AuthPage } from './slots/auth-page'
 import { BoardIndex } from './slots/board-index'
@@ -81,4 +114,37 @@ export const raidframeTheme = defineTheme({
     RedirectNotice,
     ErrorNotice,
   },
+  copy: {
+    Announcement: announcementCopy,
+    AuthPage: authPageCopy,
+    BoardIndex: boardIndexCopy,
+    BoardStats: boardStatsCopy,
+    CategoryBlock: categoryBlockCopy,
+    DiscoveryView: discoveryViewCopy,
+    ErrorNotice: errorNoticeCopy,
+    Footer: footerCopy,
+    ForumDisplay: forumDisplayCopy,
+    ForumRow: forumRowCopy,
+    Header: headerCopy,
+    LatestPosts: latestPostsCopy,
+    LatestThreads: latestThreadsCopy,
+    MemberProfile: memberProfileCopy,
+    Navigation: navigationCopy,
+    Notice: noticeCopy,
+    Pagination: paginationCopy,
+    PanelNav: panelNavCopy,
+    PanelPage: panelPageCopy,
+    PostActions: postActionsCopy,
+    PostBit: postBitCopy,
+    PostForm: postFormCopy,
+    RedirectNotice: redirectNoticeCopy,
+    SearchForm: searchFormCopy,
+    SearchResults: searchResultsCopy,
+    Shell: shellCopy,
+    SubforumList: subforumListCopy,
+    ThreadRow: threadRowCopy,
+    ThreadView: threadViewCopy,
+    UserPanel: userPanelCopy,
+    WhoIsOnline: whoIsOnlineCopy,
+  },
 })