@meith/theme-default 0.6.0 → 0.8.0

package/src/slots/redirect-notice.tsx

@@ -1,22 +1,31 @@
-import { Card, CardContent, buttonVariants } from '@meith/ui'
-import type { RedirectNoticeModel } from '@meith/theme-kit'
+import type { RedirectNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
+import { buttonVariants, Card, CardContent } from '@meith/ui'
+
+export function RedirectNotice({
+  message,
+  targetHref,
+  delaySeconds,
+  copy,
+}: RedirectNoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.redirectNotice.${key}`)
 
-export function RedirectNotice({ message, targetHref, delaySeconds }: RedirectNoticeModel) {
   return (
     <Card className="w-full max-w-lg">
       <CardContent className="p-6">
         <p className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-          Redirecting
+          {c('redirecting')}
         </p>
-        <h1 className="mt-1 text-2xl font-semibold tracking-tight">Please wait</h1>
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight">{c('pleaseWait')}</h1>
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <div className="mt-5 flex flex-wrap items-center gap-3">
           <a href={targetHref} className={buttonVariants({ variant: 'primary' })}>
-            Continue now
+            {c('continueNow')}
           </a>
           <span className="text-xs text-muted-foreground">
-            Continuing on its own in {delaySeconds} {delaySeconds === 1 ? 'second' : 'seconds'}.
+            {c('continuingOnItsOwnIn')} {delaySeconds}{' '}
+            {delaySeconds === 1 ? c('second.one') : c('second.other')}.
           </span>
         </div>
       </CardContent>

package/src/slots/search-form.tsx

@@ -1,16 +1,17 @@
+import type { OptionModel, SearchAdvancedModel, SearchFormModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import {
   Alert,
   AlertDescription,
   AlertTitle,
+  buttonVariants,
   Card,
   CardContent,
   Disclosure,
   Field,
   Input,
   NativeSelect,
-  buttonVariants,
 } from '@meith/ui'
-import type { OptionModel, SearchAdvancedModel, SearchFormModel } from '@meith/theme-kit'
 
 export function SearchForm({
   action,
@@ -22,14 +23,17 @@ export function SearchForm({
   hint,
   errorMessage,
   advanced,
-}: SearchFormModel) {
+  copy,
+}: SearchFormModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.searchForm.${key}`)
+
   return (
     <Card>
       <CardContent className="p-4 sm:p-5">
         <form method="get" action={action} className="flex flex-col gap-4">
           <Field
             name={fields.query}
-            label="Search for"
+            label={c('searchFor')}
             error={errorMessage}
             {...(hint === null ? {} : { description: hint })}
           >
@@ -40,21 +44,21 @@ export function SearchForm({
                 maxLength={maxQueryLength}
                 type="search"
                 autoComplete="off"
-                placeholder="Words in a subject or a post"
+                placeholder={c('placeholder')}
               />
             )}
           </Field>
 
           <div className="grid gap-4 sm:grid-cols-2">
-            <Choice label="In" name={fields.forum} options={forums} />
-            <Choice label="Sort by" name={fields.sort} options={sorts} />
+            <Choice label={c('in')} name={fields.forum} options={forums} />
+            <Choice label={c('sortBy')} name={fields.sort} options={sorts} />
           </div>
 
           {advanced !== undefined && <Advanced {...advanced} />}
 
           <div>
             <button type="submit" className={buttonVariants({ variant: 'primary' })}>
-              Search
+              {c('search')}
             </button>
           </div>
         </form>
@@ -62,7 +66,7 @@ export function SearchForm({
         {errorMessage !== null && (
           <Alert tone="error" className="mt-4">
             <AlertDescription>
-              <AlertTitle>No results.</AlertTitle> {errorMessage}
+              <AlertTitle>{c('noResults')}</AlertTitle> {errorMessage}
             </AlertDescription>
           </Alert>
         )}

package/src/slots/search-results.tsx

@@ -1,20 +1,21 @@
+import type { OptionModel, SearchRefineModel, SearchResultsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import {
+  buttonVariants,
   Card,
   CardContent,
   CardFooter,
   CardRows,
+  cn,
   Empty,
   EmptyDescription,
   EmptyTitle,
   Field,
   Input,
   NativeSelect,
-  buttonVariants,
-  cn,
 } from '@meith/ui'
-import type { OptionModel, SearchRefineModel, SearchResultsModel } from '@meith/theme-kit'
 
-import { LINK, Stamp, pageAt } from '../shared'
+import { LINK, pageAt, Stamp } from '../shared'
 
 export function SearchResults({
   terms,
@@ -26,7 +27,10 @@ export function SearchResults({
   within,
   refine,
   regions,
-}: SearchResultsModel) {
+  copy,
+}: SearchResultsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.searchResults.${key}`)
+
   return (
     <main
       id="board-content"
@@ -35,23 +39,22 @@ export function SearchResults({
     >
       <div className="flex flex-col gap-1">
         <h1 className="font-heading text-2xl font-semibold">
-          Results for &ldquo;{terms}&rdquo;
+          {c('resultsFor')} {c('openQuote')}
+          {terms}
+          {c('closeQuote')}
         </h1>
         <p className="text-sm text-muted-foreground">
-          Searched <Stamp at={searchedAt} />. Results are checked against your access
-          every time this page is opened, so they can change.
+          {c('searched')} <Stamp at={searchedAt} />. {c('searchedNote')}
         </p>
       </div>
 
-      {refine !== undefined && <Refine {...refine} />}
+      {refine !== undefined && <Refine {...refine} copy={copy} />}
 
       <Card>
         {hits.length === 0 ? (
           <Empty>
-            <EmptyTitle>Nothing matched.</EmptyTitle>
-            <EmptyDescription>
-              Or nothing you can see does. Try fewer words, or a different spelling.
-            </EmptyDescription>
+            <EmptyTitle>{c('nothingMatched')}</EmptyTitle>
+            <EmptyDescription>{c('tryFewerWords')}</EmptyDescription>
           </Empty>
         ) : (
           <CardRows>
@@ -65,7 +68,7 @@ export function SearchResults({
                   dangerouslySetInnerHTML={{ __html: hit.excerptHtml }}
                 />
                 <p className="text-xs text-muted-foreground">
-                  {hit.authorUsername} · <Stamp at={hit.postedAt} />
+                  {hit.authorUsername} {c('dot')} <Stamp at={hit.postedAt} />
                 </p>
               </li>
             ))}
@@ -78,7 +81,7 @@ export function SearchResults({
           nextHref !== null && (
             <CardFooter>
               <a href={nextHref} className={`font-medium text-foreground ${LINK}`}>
-                {nextLabel} →
+                {nextLabel} {c('nextArrow')}
               </a>
             </CardFooter>
           )
@@ -99,12 +102,7 @@ export function SearchResults({
 
             <Field name={within.field} label={within.label} description={within.hint}>
               {(control) => (
-                <Input
-                  {...control}
-                  defaultValue={within.value}
-                  type="search"
-                  autoComplete="off"
-                />
+                <Input {...control} defaultValue={within.value} type="search" autoComplete="off" />
               )}
             </Field>
 
@@ -118,7 +116,7 @@ export function SearchResults({
       </Card>
 
       <a href={newSearchHref} className={`text-sm font-medium text-foreground ${LINK}`}>
-        Start a new search
+        {c('startNewSearch')}
       </a>
     </main>
   )
@@ -135,7 +133,10 @@ function Refine({
   submitLabel,
   applied,
   clearHref,
-}: SearchRefineModel) {
+  copy,
+}: SearchRefineModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.searchResults.${key}`)
+
   return (
     <section
       aria-label={label}
@@ -171,8 +172,8 @@ function Refine({
             className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-primary/20"
           >
             {chip.label}
-            <span aria-hidden="true">×</span>
-            <span className="sr-only">— remove this filter</span>
+            <span aria-hidden="true">{c('removeFilterX')}</span>
+            <span className="sr-only">{c('removeFilter')}</span>
           </a>
         ))}
       </div>
@@ -200,7 +201,7 @@ function Refine({
 
         {clearHref !== null && (
           <a href={clearHref} className={`text-xs font-medium text-foreground ${LINK}`}>
-            Clear filters
+            {c('clearFilters')}
           </a>
         )}
       </form>

package/src/slots/shell.tsx

@@ -1,6 +1,7 @@
-import type { ShellModel } from '@meith/theme-kit'
+import type { ShellModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-export function Shell({ viewer, children }: ShellModel) {
+export function Shell({ viewer, children, copy }: ShellModel & { copy: SlotCopy }) {
   return (
     <div
       className="flex min-h-dvh flex-col bg-background text-foreground"
@@ -10,7 +11,7 @@ export function Shell({ viewer, children }: ShellModel) {
         href="#board-content"
         className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:left-4 focus-visible:top-4 focus-visible:z-50 focus-visible:inline-flex focus-visible:h-9 focus-visible:items-center focus-visible:rounded-md focus-visible:border focus-visible:border-border focus-visible:bg-card focus-visible:px-3 focus-visible:text-sm focus-visible:font-medium focus-visible:text-foreground focus-visible:shadow-lg"
       >
-        Skip to content
+        {fromSlotCopy(copy, 'default.shell.skipToContent')}
       </a>
       {children}
     </div>

package/src/slots/subforum-list.tsx

@@ -1,16 +1,19 @@
+import type { SlotCopy, SubforumListModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Card, CardContent, CardHeader, CardTitle } from '@meith/ui'
-import type { SubforumListModel } from '@meith/theme-kit'
 
 import { Counts, LINK } from '../shared'
 
-export function SubforumList({ forums }: SubforumListModel) {
+export function SubforumList({ forums, copy }: SubforumListModel & { copy: SlotCopy }) {
   if (forums.length === 0) return null
 
+  const c = (key: string) => fromSlotCopy(copy, `default.subforumList.${key}`)
+
   return (
     <Card aria-labelledby="subforums-heading">
       <CardHeader>
         <CardTitle id="subforums-heading" className="text-sm">
-          Subforums
+          {c('heading')}
         </CardTitle>
       </CardHeader>
 
@@ -25,16 +28,16 @@ export function SubforumList({ forums }: SubforumListModel) {
                 <Counts
                   items={[
                     {
-                      label: 'Threads',
+                      label: c('threadsLabel'),
                       value: forum.threadCount,
-                      one: 'thread',
-                      many: 'threads',
+                      one: c('thread.one'),
+                      many: c('thread.other'),
                     },
                     {
-                      label: 'Posts',
+                      label: c('postsLabel'),
                       value: forum.postCount,
-                      one: 'post',
-                      many: 'posts',
+                      one: c('post.one'),
+                      many: c('post.other'),
                     },
                   ]}
                 />

package/src/slots/thread-row.tsx

@@ -1,9 +1,12 @@
+import type { SlotCopy, ThreadRowSlotModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge } from '@meith/ui'
-import type { ThreadRowSlotModel } from '@meith/theme-kit'
 
 import { Counts, LINK, Prefix, ReadSpacer, Stamp, UnreadDot, UserRef } from '../shared'
 
-export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
+export function ThreadRow({ thread, select, copy }: ThreadRowSlotModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.threadRow.${key}`)
+
   return (
     <li
       data-unread={thread.isUnread ? '' : undefined}
@@ -29,9 +32,9 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
       <div className="min-w-0">
         <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
           {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
-          {thread.isSticky && <Badge tone="pinned">Pinned</Badge>}
-          {thread.isLocked && <Badge tone="locked">Locked</Badge>}
-          {thread.isMoved && <Badge tone="moved">Moved</Badge>}
+          {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
+          {thread.isLocked && <Badge tone="locked">{c('locked')}</Badge>}
+          {thread.isMoved && <Badge tone="moved">{c('moved')}</Badge>}
 
           <a
             href={thread.href}
@@ -42,11 +45,11 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
           >
             {thread.title}
           </a>
-          {thread.isUnread && <span className="sr-only"> (new posts)</span>}
+          {thread.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
         </div>
 
         <p className="mt-0.5 text-xs text-muted-foreground">
-          Started by <UserRef user={thread.author} className="font-normal" />
+          {c('startedBy')} <UserRef user={thread.author} className="font-normal" />
         </p>
       </div>
 
@@ -54,32 +57,30 @@ export function ThreadRow({ thread, select }: ThreadRowSlotModel) {
         className="col-start-2 md:col-start-3 md:justify-end"
         items={[
           {
-            label: 'Replies',
+            label: c('repliesLabel'),
             value: thread.replyCount,
-            one: 'reply',
-            many: 'replies',
+            one: c('reply.one'),
+            many: c('reply.other'),
           },
           {
-            label: 'Views',
+            label: c('viewsLabel'),
             value: thread.viewCount,
-            one: 'view',
-            many: 'views',
+            one: c('view.one'),
+            many: c('view.other'),
           },
         ]}
       />
 
       <div className="col-start-2 min-w-0 text-xs text-muted-foreground md:col-start-4">
         {thread.lastPost === null ? (
-          <span className="text-thread-moved">No replies yet</span>
+          <span className="text-thread-moved">{c('noRepliesYet')}</span>
         ) : (
           <>
             <a href={thread.lastPost.href} className={`block font-medium text-foreground ${LINK}`}>
-              Latest reply
+              {c('latestReply')}
             </a>
             <span className="mt-0.5 block truncate">
-              {'by '}
-              <UserRef user={thread.lastPost.author} className="font-normal" />
-              {' · '}
+              {c('by')} <UserRef user={thread.lastPost.author} className="font-normal" /> {c('dot')}{' '}
               <Stamp at={thread.lastPost.at} />
             </span>
           </>

package/src/slots/thread-view.tsx

@@ -1,9 +1,19 @@
+import type { SlotCopy, ThreadViewModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Badge, buttonVariants } from '@meith/ui'
-import type { ThreadViewModel } from '@meith/theme-kit'
 
 import { Counts, MUTED_LINK, PAGE_BODY, Prefix } from '../shared'
 
-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, `default.threadView.${key}`)
+
   return (
     <div className={PAGE_BODY}>
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
@@ -18,23 +28,23 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
 
           <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2">
             {thread.prefix !== null && <Prefix prefix={thread.prefix} />}
-            {thread.isSticky && <Badge tone="pinned">Pinned</Badge>}
-            {thread.isLocked && <Badge tone="locked">Locked — no new replies</Badge>}
-            {thread.isMoved && <Badge tone="moved">Moved</Badge>}
+            {thread.isSticky && <Badge tone="pinned">{c('pinned')}</Badge>}
+            {thread.isLocked && <Badge tone="locked">{c('locked')}</Badge>}
+            {thread.isMoved && <Badge tone="moved">{c('moved')}</Badge>}
 
             <Counts
               items={[
                 {
-                  label: 'Replies',
+                  label: c('repliesLabel'),
                   value: thread.replyCount,
-                  one: 'reply',
-                  many: 'replies',
+                  one: c('reply.one'),
+                  many: c('reply.other'),
                 },
                 {
-                  label: 'Views',
+                  label: c('viewsLabel'),
                   value: thread.viewCount,
-                  one: 'view',
-                  many: 'views',
+                  one: c('view.one'),
+                  many: c('view.other'),
                 },
               ]}
             />
@@ -45,13 +55,13 @@ export function ThreadView({ thread, forum, replyHref, markReadAction, regions }
           {markReadAction !== null && (
             <form action={markReadAction} method="post">
               <button type="submit" className={buttonVariants({ variant: 'ghost' })}>
-                Mark read
+                {c('markRead')}
               </button>
             </form>
           )}
           {replyHref !== null && (
             <a href={replyHref} className={buttonVariants({ variant: 'primary' })}>
-              Reply
+              {c('replyAction')}
             </a>
           )}
         </div>

package/src/slots/user-panel.tsx

@@ -1,10 +1,12 @@
+import type { SlotCopy, UserPanelModel } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { Avatar, Badge, buttonVariants } from '@meith/ui'
 import { Menu } from '@meith/ui/menu'
-import type { UserPanelModel } from '@meith/theme-kit'
 
 import { MUTED_LINK } from '../shared'
 
-const COUNT_LINK = 'rounded-full outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring'
+const COUNT_LINK =
+  'rounded-full outline-offset-2 focus-visible:outline-2 focus-visible:outline-ring'
 
 export function UserPanel({
   viewer,
@@ -14,7 +16,10 @@ export function UserPanel({
   notificationsHref,
   messagesHref,
   children,
-}: UserPanelModel) {
+  copy,
+}: UserPanelModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `default.userPanel.${key}`)
+
   if (viewer.isGuest) {
     return (
       <div className="flex items-center gap-2">
@@ -34,7 +39,7 @@ export function UserPanel({
     )
   }
 
-  const name = viewer.username ?? 'Signed in'
+  const name = viewer.username ?? c('signedIn')
 
   return (
     <div className="flex min-w-0 flex-col items-start gap-1 sm:items-end">
@@ -46,28 +51,28 @@ export function UserPanel({
       />
 
       <div className="flex min-w-0 items-center gap-2">
-        {unreadNotifications > 0 && (
+        {unreadNotifications.value > 0 && (
           <a href={notificationsHref} className={COUNT_LINK}>
             <Badge tone="solid">
-              {unreadNotifications}
-              <span className="sr-only"> unread notifications</span>
-              <span aria-hidden="true"> new</span>
+              {unreadNotifications.label}
+              <span className="sr-only"> {c('unreadNotifications')}</span>
+              <span aria-hidden="true"> {c('new')}</span>
             </Badge>
           </a>
         )}
-        {unreadMessages > 0 && (
+        {unreadMessages.value > 0 && (
           <a href={messagesHref} className={COUNT_LINK}>
             <Badge tone="outline">
-              {unreadMessages}
-              <span className="sr-only"> unread messages</span>
-              <span aria-hidden="true"> unread</span>
+              {unreadMessages.label}
+              <span className="sr-only"> {c('unreadMessages')}</span>
+              <span aria-hidden="true"> {c('unread')}</span>
             </Badge>
           </a>
         )}
 
         <span data-account="menu" className="flex min-w-0 items-center">
           <Menu
-            label="Your account"
+            label={c('yourAccount')}
             items={links}
             trigger={
               <>
@@ -96,7 +101,7 @@ export function UserPanel({
       <nav
         data-account="plain"
         style={{ display: 'none' }}
-        aria-label="Your account"
+        aria-label={c('yourAccount')}
         className="flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:justify-end"
       >
         <span className="font-medium text-foreground">{name}</span>