@meith/theme-default 0.6.0 → 0.8.0

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

@@ -1,5 +1,6 @@
+import type { OnlineMemberModel, SlotCopy, WhoIsOnlineModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge } from '@meith/ui'
-import type { OnlineMemberModel, WhoIsOnlineModel } from '@meith/theme-kit'
 
 import { LINK, NUMERIC, Stamp, UserRef } from '../shared'
 
@@ -8,39 +9,45 @@ const VISIBLE_NAMES = 12
 export function WhoIsOnline({
   guestCount,
   members,
+  memberCount,
   total,
   recordCount,
   recordAt,
   fullListHref,
-}: WhoIsOnlineModel) {
+  copy,
+}: WhoIsOnlineModel & { copy: SlotCopy }) {
   const shown = members.slice(0, VISIBLE_NAMES)
   const rest = members.slice(VISIBLE_NAMES)
 
+  const c = (key: string) => fromSlotCopy(copy, `default.whoIsOnline.${key}`)
+
   return (
     <section
       aria-labelledby="who-is-online-heading"
       className="flex flex-wrap items-baseline gap-x-3 gap-y-1"
     >
       <h2 id="who-is-online-heading" className="sr-only">
-        Who&rsquo;s online
+        {c('heading')}
       </h2>
 
       <span className={NUMERIC}>
-        <span className="font-medium text-foreground">{total.toLocaleString('en')}</span> online —{' '}
-        {members.length.toLocaleString('en')} {members.length === 1 ? 'member' : 'members'},{' '}
-        {guestCount.toLocaleString('en')} {guestCount === 1 ? 'guest' : 'guests'}
+        <span className="font-medium text-foreground">{total.label}</span> {c('online')}{' '}
+        {memberCount.label} {memberCount.value === 1 ? c('member.one') : c('member.other')}
+        {', '}
+        {guestCount.label} {guestCount.value === 1 ? c('guest.one') : c('guest.other')}
       </span>
 
-      {members.length === 0 ? (
-        <span>
-          {guestCount === 0
-            ? 'Nobody is reading the board right now.'
-            : 'Only guests are reading the board right now.'}
-        </span>
+      {memberCount.value === 0 ? (
+        <span>{guestCount.value === 0 ? c('nobody') : c('onlyGuests')}</span>
       ) : (
         <div className="min-w-0">
           {shown.map((member, index) => (
-            <Name key={member.userId ?? member.username} member={member} first={index === 0} />
+            <Name
+              key={member.userId ?? member.username}
+              member={member}
+              first={index === 0}
+              copy={copy}
+            />
           ))}
 
           {rest.length > 0 && (
@@ -48,8 +55,8 @@ export function WhoIsOnline({
               <summary
                 className={`inline cursor-default list-none ${LINK} [&::-webkit-details-marker]:hidden [&::marker]:content-none`}
               >
-                {' and '}
-                <span className={NUMERIC}>{rest.length.toLocaleString('en')}</span> more
+                {' '}
+                {c('and')} <span className={NUMERIC}>{rest.length}</span> {c('more')}
               </summary>
               {': '}
               {rest.map((member, index) => (
@@ -57,6 +64,7 @@ export function WhoIsOnline({
                   key={member.userId ?? member.username}
                   member={member}
                   first={index === 0}
+                  copy={copy}
                 />
               ))}
             </details>
@@ -66,11 +74,11 @@ export function WhoIsOnline({
 
       <span className="ms-auto flex flex-wrap items-baseline gap-x-3 gap-y-1">
         <a href={fullListHref} className={`font-medium text-foreground ${LINK}`}>
-          See everyone online
+          {c('seeEveryone')}
         </a>
         {recordAt !== null && (
           <span className={NUMERIC}>
-            Record: {recordCount.toLocaleString('en')} on <Stamp at={recordAt} />
+            {c('record')} {recordCount.label} on <Stamp at={recordAt} />
           </span>
         )}
       </span>
@@ -78,7 +86,15 @@ export function WhoIsOnline({
   )
 }
 
-function Name({ member, first }: { member: OnlineMemberModel; first: boolean }) {
+function Name({
+  member,
+  first,
+  copy,
+}: {
+  member: OnlineMemberModel
+  first: boolean
+  copy: SlotCopy
+}) {
   return (
     <>
       {!first && ', '}
@@ -86,7 +102,7 @@ function Name({ member, first }: { member: OnlineMemberModel; first: boolean })
       {member.isInvisible && (
         <>
           {' '}
-          <Badge tone="neutral">Invisible</Badge>
+          <Badge tone="neutral">{fromSlotCopy(copy, 'default.whoIsOnline.invisible')}</Badge>
         </>
       )}
     </>

package/src/theme.ts

@@ -1,38 +1,69 @@
 import { defineTheme } from '@meith/theme-kit'
 
+import {
+  announcementCopy,
+  boardIndexCopy,
+  boardStatsCopy,
+  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'
 import { BoardStats } from './slots/board-stats'
 import { CategoryBlock } from './slots/category-block'
-import { WhoIsOnline } from './slots/who-is-online'
+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 { ForumDisplay } from './slots/forum-display'
-import { Header } from './slots/header'
+import { MemberProfile } from './slots/member-profile'
 import { Navigation } from './slots/navigation'
 import { Notice } from './slots/notice'
-import { Announcement } from './slots/announcement'
-import { Shell } from './slots/shell'
-import { UserPanel } from './slots/user-panel'
 import { Pagination } from './slots/pagination'
-import { SubforumList } from './slots/subforum-list'
-import { ThreadRow } from './slots/thread-row'
-import { ThreadView } from './slots/thread-view'
+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 { PostActions } from './slots/post-actions'
-import { MemberProfile } from './slots/member-profile'
-import { ForumJump } from './slots/forum-jump'
+import { RedirectNotice } from './slots/redirect-notice'
 import { SearchForm } from './slots/search-form'
-import { AuthPage } from './slots/auth-page'
 import { SearchResults } from './slots/search-results'
-import { DiscoveryView } from './slots/discovery-view'
-import { PanelShell } from './slots/panel-shell'
-import { PanelNav } from './slots/panel-nav'
-import { PanelPage, PanelSection } from './slots/panel-page'
-import { RedirectNotice } from './slots/redirect-notice'
-import { ErrorNotice } from './slots/error-notice'
+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 defaultTheme = defineTheme({
   key: 'default',
@@ -84,4 +115,44 @@ export const defaultTheme = defineTheme({
     RedirectNotice,
     ErrorNotice,
   },
+  copy: {
+    Shell: shellCopy,
+    Header: headerCopy,
+    UserPanel: userPanelCopy,
+    Navigation: navigationCopy,
+    Footer: footerCopy,
+    Notice: noticeCopy,
+    Announcement: announcementCopy,
+
+    BoardIndex: boardIndexCopy,
+    ForumRow: forumRowCopy,
+    BoardStats: boardStatsCopy,
+    WhoIsOnline: whoIsOnlineCopy,
+    LatestThreads: latestThreadsCopy,
+    LatestPosts: latestPostsCopy,
+
+    ForumDisplay: forumDisplayCopy,
+    SubforumList: subforumListCopy,
+    ThreadRow: threadRowCopy,
+    Pagination: paginationCopy,
+
+    ThreadView: threadViewCopy,
+    PostBit: postBitCopy,
+    PostActions: postActionsCopy,
+
+    PostForm: postFormCopy,
+
+    MemberProfile: memberProfileCopy,
+
+    SearchForm: searchFormCopy,
+    SearchResults: searchResultsCopy,
+
+    DiscoveryView: discoveryViewCopy,
+
+    PanelNav: panelNavCopy,
+    PanelPage: panelPageCopy,
+
+    RedirectNotice: redirectNoticeCopy,
+    ErrorNotice: errorNoticeCopy,
+  },
 })