@meith/theme-phasebook 0.6.0 → 0.8.0

package/src/slots/error-notice.tsx

@@ -1,12 +1,24 @@
-import type { ErrorNoticeModel } from '@meith/theme-kit'
+import type { ErrorNoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { NUMERIC, PILL_PRIMARY } from '../shared'
 
-export function ErrorNotice({ status, title, message, homeHref, requestId }: ErrorNoticeModel) {
+export function ErrorNotice({
+  status,
+  title,
+  message,
+  homeHref,
+  requestId,
+  copy,
+}: ErrorNoticeModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.errorNotice.${key}`)
+
   return (
     <section className="w-full max-w-lg overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation">
       <div className="px-5 py-6">
-        <p className={`text-xs font-semibold text-destructive ${NUMERIC}`}>Error {status}</p>
+        <p className={`text-xs font-semibold text-destructive ${NUMERIC}`}>
+          {c('error')} {status}
+        </p>
 
         <h1 className="mt-1 text-2xl leading-tight font-bold tracking-tight text-balance">
           {title}
@@ -14,14 +26,13 @@ export function ErrorNotice({ status, title, message, homeHref, requestId }: Err
         <p className="mt-2 text-sm text-muted-foreground">{message}</p>
 
         <a href={homeHref} className={`mt-5 ${PILL_PRIMARY}`}>
-          Forum home
+          {c('home')}
         </a>
       </div>
 
       {requestId !== null && (
         <p className="border-t border-border px-5 py-3 text-xs text-muted-foreground">
-          Quote this if you report it:{' '}
-          <code className="font-mono text-foreground select-all">{requestId}</code>
+          {c('quote')} <code className="font-mono text-foreground select-all">{requestId}</code>
         </p>
       )}
     </section>

package/src/slots/footer.tsx

@@ -1,13 +1,22 @@
-import type { FooterModel } from '@meith/theme-kit'
+import type { FooterModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { MUTED_LINK, PAGE } from '../shared'
 
-export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterModel) {
+export function Footer({
+  boardTitle,
+  links,
+  timezoneLabel,
+  poweredBy,
+  copy,
+}: FooterModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.footer.${key}`)
+
   return (
     <footer className="mt-auto bg-background">
       <div className={`${PAGE} flex flex-col gap-2 py-6 text-xs text-muted-foreground`}>
         {links.length > 0 && (
-          <nav aria-label="Footer" className="flex flex-wrap gap-x-4 gap-y-1">
+          <nav aria-label={c('ariaLabel')} className="flex flex-wrap gap-x-4 gap-y-1">
             {links.map((link) => (
               <a key={link.href} href={link.href} className={MUTED_LINK}>
                 {link.label}
@@ -18,7 +27,9 @@ export function Footer({ boardTitle, links, timezoneLabel, poweredBy }: FooterMo
 
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
           <span className="font-semibold text-foreground">{boardTitle}</span>
-          <span>Times are shown in {timezoneLabel}</span>
+          <span>
+            {c('timezone')} {timezoneLabel}
+          </span>
           {poweredBy && (
             <a href={poweredBy.href} className={MUTED_LINK}>
               {poweredBy.label}

package/src/slots/forum-display.tsx

@@ -1,18 +1,27 @@
-import type { ForumDisplayModel } from '@meith/theme-kit'
+import type { ForumDisplayModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import {
   Circle,
+  count,
   FEED,
+  isEmptyRegion,
   NUMERIC,
   PAGE,
   PILL,
   PILL_PRIMARY,
-  count,
-  isEmptyRegion,
   plural,
 } 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, `phasebook.forumDisplay.${key}`)
+
   return (
     <div className={`${PAGE} py-4 sm:py-6`}>
       <div className={`${FEED} flex flex-col gap-4`}>
@@ -30,8 +39,10 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
                   </h1>
                   {forum.type !== 'link' && (
                     <p className={`mt-0.5 text-xs text-muted-foreground ${NUMERIC}`}>
-                      {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')} ·{' '}
-                      {count(forum.postCount)} {plural(forum.postCount, 'post', 'posts')}
+                      {count(forum.threadCount)}{' '}
+                      {plural(forum.threadCount, c('thread.one'), c('thread.other'))} ·{' '}
+                      {count(forum.postCount)}{' '}
+                      {plural(forum.postCount, c('post.one'), c('post.other'))}
                     </p>
                   )}
                 </div>
@@ -40,7 +51,7 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
               {markReadAction !== null && (
                 <form action={markReadAction} method="post" className="shrink-0">
                   <button type="submit" className={PILL}>
-                    Mark read
+                    {c('markRead')}
                   </button>
                 </form>
               )}
@@ -59,10 +70,10 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
               href={newThreadHref}
               className="min-w-0 flex-1 truncate rounded-full bg-secondary px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent"
             >
-              Start a thread in {forum.title}…
+              {c('startThreadIn')} {forum.title}…
             </a>
             <a href={newThreadHref} className={`hidden sm:inline-flex ${PILL_PRIMARY}`}>
-              New thread
+              {c('newThread')}
             </a>
           </div>
         )}
@@ -79,15 +90,13 @@ export function ForumDisplay({ forum, newThreadHref, markReadAction, regions }:
 
         {isEmptyRegion(regions.threads) ? (
           <div className="rounded-lg border border-border bg-card px-4 py-10 text-center shadow-elevation">
-            <p className="text-base font-semibold">No threads here yet</p>
+            <p className="text-base font-semibold">{c('noThreadsYet')}</p>
             <p className="mt-1 text-sm text-muted-foreground">
-              {newThreadHref === null
-                ? 'Nothing has been posted in this forum.'
-                : 'Nothing has been posted in this forum. Yours would be the first.'}
+              {newThreadHref === null ? c('emptyForum') : c('emptyForumInvite')}
             </p>
             {newThreadHref !== null && (
               <a href={newThreadHref} className={`mt-4 ${PILL_PRIMARY}`}>
-                Start the first thread
+                {c('startFirstThread')}
               </a>
             )}
           </div>

package/src/slots/forum-row.tsx

@@ -1,9 +1,11 @@
-import type { ForumRowSlotModel } from '@meith/theme-kit'
+import type { ForumRowSlotModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { Circle, MUTED_LINK, NUMERIC, Stamp, UserRef, count, plural } from '../shared'
+import { Circle, count, MUTED_LINK, NUMERIC, plural, Stamp, UserRef } from '../shared'
 
-export function ForumRow({ forum }: ForumRowSlotModel) {
+export function ForumRow({ forum, copy }: ForumRowSlotModel & { copy: SlotCopy }) {
   const isLink = forum.type === 'link'
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.forumRow.${key}`)
 
   return (
     <li
@@ -28,12 +30,13 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
           >
             {forum.title}
           </a>
-          {forum.isUnread && <span className="sr-only"> (new posts)</span>}
+          {forum.isUnread && <span className="sr-only"> {c('newPosts')}</span>}
 
           {!isLink && (
             <span className={`shrink-0 text-xs text-muted-foreground ${NUMERIC}`}>
-              {count(forum.threadCount)} {plural(forum.threadCount, 'thread', 'threads')} ·{' '}
-              {count(forum.postCount)} {plural(forum.postCount, 'post', 'posts')}
+              {count(forum.threadCount)}{' '}
+              {plural(forum.threadCount, c('thread.one'), c('thread.other'))} ·{' '}
+              {count(forum.postCount)} {plural(forum.postCount, c('post.one'), c('post.other'))}
             </span>
           )}
         </div>
@@ -59,7 +62,7 @@ export function ForumRow({ forum }: ForumRowSlotModel) {
         {!isLink && (
           <p className="mt-1.5 truncate text-xs text-muted-foreground">
             {forum.lastPost === null ? (
-              <span className="text-forum-read">No posts yet</span>
+              <span className="text-forum-read">{c('noPostsYet')}</span>
             ) : (
               <>
                 <a href={forum.lastPost.href} className={`font-semibold ${MUTED_LINK}`}>

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 { PAGE } from '../shared'
 
@@ -35,7 +36,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, `phasebook.header.${key}`)
+
   return (
     <header className="sticky top-0 z-30 border-b border-border bg-card shadow-elevation">
       <div className={`${PAGE} flex h-14 items-center justify-between gap-3`}>
@@ -50,7 +60,10 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
         </a>
 
         {navigation.length > 0 && (
-          <nav aria-label="Board sections" className="hidden min-w-0 flex-1 justify-center lg:flex">
+          <nav
+            aria-label={c('sectionsAriaLabel')}
+            className="hidden min-w-0 flex-1 justify-center lg:flex"
+          >
             <ul className="flex items-center gap-1">
               {navigation.map((item) => (
                 <li key={item.href}>
@@ -70,7 +83,7 @@ export function Header({ boardTitle, homeHref, navigation, logo, children }: Hea
       </div>
 
       {navigation.length > 0 && (
-        <nav aria-label="Board sections" className="border-t border-border lg:hidden">
+        <nav aria-label={c('sectionsAriaLabel')} className="border-t border-border lg:hidden">
           <ul className={`${PAGE} flex items-center gap-1 overflow-x-auto py-1`}>
             {navigation.map((item) => (
               <li key={item.href} className="shrink-0">

package/src/slots/latest-posts.tsx

@@ -1,11 +1,14 @@
-import type { LatestPostsModel } from '@meith/theme-kit'
+import type { LatestPostsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
 import { Circle, MUTED_LINK, NUMERIC, Rail, 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, `phasebook.latestPosts.${key}`)
+
   return (
     <Rail
-      title="Latest posts"
+      title={c('title')}
       titleId="latest-posts-heading"
       action={
         <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
@@ -14,13 +17,14 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
       }
     >
       {posts.length === 0 ? (
-        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">
-          The newest posts you can see will appear here.
-        </p>
+        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">{c('empty')}</p>
       ) : (
         <ul className="px-1 pt-1 pb-1">
           {posts.map((post) => (
-            <li key={post.href} className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent">
+            <li
+              key={post.href}
+              className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent"
+            >
               <div className="flex items-start gap-2.5">
                 <Circle name={post.author.username} size={32} className="mt-0.5" />
 
@@ -40,7 +44,7 @@ export function LatestPosts({ posts, capturedAt }: LatestPostsModel) {
 
                   <p className="mt-0.5 truncate text-xs text-muted-foreground">
                     <UserRef user={post.author} className="text-xs font-medium" />
-                    {' in '}
+                    {` ${c('in')} `}
                     <a href={post.forum.href} className={MUTED_LINK}>
                       {post.forum.label}
                     </a>

package/src/slots/latest-threads.tsx

@@ -1,11 +1,18 @@
-import type { LatestThreadsModel } from '@meith/theme-kit'
+import type { LatestThreadsModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 
-import { Circle, MUTED_LINK, NUMERIC, Rail, Stamp, UserRef, count, plural } from '../shared'
+import { Circle, count, MUTED_LINK, NUMERIC, plural, Rail, Stamp, UserRef } from '../shared'
+
+export function LatestThreads({
+  threads,
+  capturedAt,
+  copy,
+}: LatestThreadsModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.latestThreads.${key}`)
 
-export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
   return (
     <Rail
-      title="Latest threads"
+      title={c('title')}
       titleId="latest-threads-heading"
       action={
         <span className={`text-xs text-muted-foreground ${NUMERIC}`}>
@@ -14,13 +21,14 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
       }
     >
       {threads.length === 0 ? (
-        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">
-          The newest threads you can see will appear here.
-        </p>
+        <p className="px-3 pt-1 pb-3 text-xs text-muted-foreground">{c('empty')}</p>
       ) : (
         <ul className="px-1 pt-1 pb-1">
           {threads.map((thread) => (
-            <li key={thread.href} className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent">
+            <li
+              key={thread.href}
+              className="rounded-lg px-2 py-1.5 transition-colors hover:bg-accent"
+            >
               <div className="flex items-start gap-2.5">
                 <Circle name={thread.author.username} size={32} className="mt-0.5" />
 
@@ -41,7 +49,8 @@ export function LatestThreads({ threads, capturedAt }: LatestThreadsModel) {
                   </p>
 
                   <p className={`mt-0.5 truncate text-xs text-muted-foreground ${NUMERIC}`}>
-                    {count(thread.replyCount)} {plural(thread.replyCount, 'reply', 'replies')} ·{' '}
+                    {count(thread.replyCount)}{' '}
+                    {plural(thread.replyCount, c('reply.one'), c('reply.other'))} ·{' '}
                     <Stamp at={thread.startedAt} />
                   </p>
                 </div>

package/src/slots/member-profile.tsx

@@ -1,7 +1,8 @@
+import type { MemberProfileModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
-import type { MemberProfileModel } from '@meith/theme-kit'
 
-import { Circle, FEED, NUMERIC, PAGE, PILL, PILL_PRIMARY, Stamp, count } from '../shared'
+import { Circle, count, FEED, NUMERIC, PAGE, PILL, PILL_PRIMARY, Stamp } from '../shared'
 
 export function MemberProfile({
   user,
@@ -14,7 +15,10 @@ export function MemberProfile({
   fields,
   actions,
   regions,
-}: MemberProfileModel) {
+  copy,
+}: MemberProfileModel & { copy: SlotCopy }) {
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.memberProfile.${key}`)
+
   return (
     <div className={`${PAGE} py-4 sm:py-6`}>
       <div className={`${FEED} flex flex-col gap-4`}>
@@ -45,7 +49,7 @@ export function MemberProfile({
 
             {actions.length > 0 && (
               <nav
-                aria-label="Member actions"
+                aria-label={c('actionsAriaLabel')}
                 className="flex shrink-0 flex-wrap items-center justify-center gap-2"
               >
                 {actions.map((action, index) => (
@@ -63,22 +67,20 @@ export function MemberProfile({
 
           <dl className="grid grid-cols-3 gap-2 border-t border-border px-4 py-3 text-center">
             <div>
-              <dd className={`text-lg font-bold text-foreground ${NUMERIC}`}>
-                {count(postCount)}
-              </dd>
-              <dt className="text-xs text-muted-foreground">Posts</dt>
+              <dd className={`text-lg font-bold text-foreground ${NUMERIC}`}>{count(postCount)}</dd>
+              <dt className="text-xs text-muted-foreground">{c('posts')}</dt>
             </div>
             <div>
               <dd className="text-sm font-semibold text-foreground">
                 <Stamp at={joinedAt} />
               </dd>
-              <dt className="text-xs text-muted-foreground">Joined</dt>
+              <dt className="text-xs text-muted-foreground">{c('joined')}</dt>
             </div>
             <div>
               <dd className="text-sm font-semibold text-foreground">
-                {lastVisitAt === null ? 'Never' : <Stamp at={lastVisitAt} />}
+                {lastVisitAt === null ? c('never') : <Stamp at={lastVisitAt} />}
               </dd>
-              <dt className="text-xs text-muted-foreground">Last visit</dt>
+              <dt className="text-xs text-muted-foreground">{c('lastVisit')}</dt>
             </div>
           </dl>
         </section>
@@ -92,7 +94,7 @@ export function MemberProfile({
               id="profile-fields-heading"
               className="px-4 pt-3 pb-1 text-[1.0625rem] font-bold tracking-tight"
             >
-              About
+              {c('about')}
             </h2>
             <dl className="grid gap-x-6 gap-y-3 px-4 pt-2 pb-4 sm:grid-cols-2">
               {fields.map((field) => (
@@ -114,7 +116,7 @@ export function MemberProfile({
               id="profile-signature-heading"
               className="px-4 pt-3 pb-1 text-[1.0625rem] font-bold tracking-tight"
             >
-              Signature
+              {c('signature')}
             </h2>
             <div
               className="prose-md px-4 pt-2 pb-4 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 { 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, `phasebook.navigation.${key}`)
+
   return (
-    <nav aria-label="Breadcrumb" className="bg-background">
+    <nav aria-label={c('ariaLabel')} className="bg-background">
       <ol
         className={`${PAGE} flex items-center gap-1 overflow-x-auto pt-3 text-sm whitespace-nowrap text-muted-foreground`}
       >

package/src/slots/notice.tsx

@@ -1,31 +1,33 @@
+import type { NoticeModel, SlotCopy } from '@meith/theme-kit'
+import { fromSlotCopy } from '@meith/theme-kit'
 import { cn } from '@meith/ui'
-import type { NoticeModel } from '@meith/theme-kit'
 
 const KIND = {
   info: {
-    label: 'Notice',
+    copyKey: 'info',
     className: 'border-primary/30 bg-primary/8 text-foreground',
     mark: 'bg-primary text-primary-foreground',
   },
   success: {
-    label: 'Done',
+    copyKey: 'success',
     className: 'border-moderation-approved/30 bg-moderation-approved/8 text-foreground',
     mark: 'bg-moderation-approved text-card',
   },
   warning: {
-    label: 'Warning',
+    copyKey: 'warning',
     className: 'border-thread-pinned/30 bg-thread-pinned/8 text-foreground',
     mark: 'bg-thread-pinned text-card',
   },
   error: {
-    label: 'Error',
+    copyKey: 'error',
     className: 'border-destructive/30 bg-destructive/8 text-foreground',
     mark: 'bg-destructive text-destructive-foreground',
   },
 } as const
 
-export function Notice({ kind, message, dismissHref }: NoticeModel) {
+export function Notice({ kind, message, dismissHref, copy }: NoticeModel & { copy: SlotCopy }) {
   const tone = KIND[kind]
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.notice.${key}`)
 
   return (
     <div
@@ -46,7 +48,7 @@ export function Notice({ kind, message, dismissHref }: NoticeModel) {
       </span>
 
       <p className="min-w-0 flex-1">
-        <span className="font-semibold">{tone.label}:</span> {message}
+        <span className="font-semibold">{c(tone.copyKey)}:</span> {message}
       </p>
 
       {dismissHref !== null && (
@@ -54,7 +56,7 @@ export function Notice({ kind, message, dismissHref }: NoticeModel) {
           href={dismissHref}
           className="shrink-0 rounded-full px-2 py-1 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
         >
-          Dismiss
+          {c('dismiss')}
         </a>
       )}
     </div>

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 { NUMERIC, PILL } from '../shared'
 
@@ -10,23 +11,25 @@ export function Pagination({
   pages,
   previousHref,
   nextHref,
-}: PaginationModel) {
+  copy,
+}: PaginationModel & { copy: SlotCopy }) {
   if (pageCount <= 1 && previousHref === null && nextHref === null) return null
 
   const disabled = cn(PILL, 'pointer-events-none opacity-40')
+  const c = (key: string) => fromSlotCopy(copy, `phasebook.pagination.${key}`)
 
   return (
     <nav
-      aria-label="Pagination"
+      aria-label={c('ariaLabel')}
       className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-3 py-2.5 shadow-elevation"
     >
       {previousHref === null ? (
         <span className={disabled} aria-hidden="true">
-          Previous
+          {c('previous')}
         </span>
       ) : (
         <a href={previousHref} rel="prev" className={PILL}>
-          Previous
+          {c('previous')}
         </a>
       )}
 
@@ -45,7 +48,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(
                   'inline-flex size-9 items-center justify-center rounded-full text-sm font-semibold transition-colors',
                   NUMERIC,
@@ -61,18 +64,18 @@ export function Pagination({
         })}
 
         <li className={`ml-1 text-xs whitespace-nowrap text-muted-foreground ${NUMERIC}`}>
-          <span className="sr-only">Page </span>
-          {pageCountIsExact ? `${page} of ${pageCount}` : `Page ${page}`}
+          <span className="sr-only">{c('page')} </span>
+          {pageCountIsExact ? `${page} ${c('of')} ${pageCount}` : `${c('page')} ${page}`}
         </li>
       </ol>
 
       {nextHref === null ? (
         <span className={disabled} aria-hidden="true">
-          Next
+          {c('next')}
         </span>
       ) : (
         <a href={nextHref} rel="next" className={PILL}>
-          Next
+          {c('next')}
         </a>
       )}
     </nav>