@conduction/docusaurus-preset 3.16.1 → 3.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.16.1",
+  "version": "3.18.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/ContentCard/ContentCard.jsx

@@ -37,6 +37,7 @@
  */
 
 import React from 'react';
+import {translate} from '@docusaurus/Translate';
 import HexThumbnail from '../primitives/HexThumbnail';
 import Pill from '../primitives/Pill';
 import {CONTENT_TYPE_LABELS} from '../ContentTypeFilter/contentTypes';
@@ -48,7 +49,14 @@ function readOrWatch(_contentType, minutes) {
   /* No verb appended — the type line below the date (BLOG / TUTORIAL /
      WEBINAR) already signals read vs. watch, and the extra word kept
      wrapping to a second line on narrow card columns. */
-  return `${minutes} min`;
+  return translate(
+    {
+      id: 'preset.contentCard.minLabel',
+      message: '{minutes} min',
+      description: 'Duration label under a content card (just minutes, no verb).',
+    },
+    {minutes},
+  );
 }
 
 function formatDate(date, locale = 'nl') {
@@ -168,7 +176,24 @@ export default function ContentCard({
 
         {audience.length > 0 && (
           <div className={styles.audienceLine}>
-            For: {audience.map((a) => AUDIENCE_SHORT_LABELS[a] || a).join(', ')}
+            {translate(
+              {
+                id: 'preset.contentCard.audienceFor',
+                message: 'For: {list}',
+                description: 'Audience line under a content card. {list} is a comma-separated audience list.',
+              },
+              {
+                list: audience
+                  .map((a) => translate(
+                    {
+                      id: `preset.audience.short.${a}`,
+                      message: AUDIENCE_SHORT_LABELS[a] || a,
+                      description: `Short audience label used in the "For: ..." line. Slug: ${a}.`,
+                    },
+                  ))
+                  .join(', '),
+              },
+            )}
           </div>
         )}
 

package/src/components/ContentTypeFilter/ContentTypeFilter.jsx

@@ -51,6 +51,7 @@
  */
 
 import React from 'react';
+import {translate} from '@docusaurus/Translate';
 import {
   CONTENT_TYPES,
   CONTENT_TYPE_PLURAL_LABELS,
@@ -64,12 +65,17 @@ export default function ContentTypeFilter({
   onChange,
   hrefForType,
   counts,
-  allLabel = 'Everything',
+  allLabel,
   allCount,
   types = CONTENT_TYPES,
   labels,
   className,
 }) {
+  const resolvedAllLabel = allLabel ?? translate({
+    id: 'preset.contentTypeFilter.all',
+    message: 'Everything',
+    description: 'Default label on the "all" chip of the content type filter when no allLabel is passed',
+  });
   const isLinkMode = typeof hrefForType === 'function';
   const labelFor = (key) => {
     if (labels && labels[key]) return labels[key];
@@ -116,7 +122,7 @@ export default function ContentTypeFilter({
 
   return (
     <div className={[styles.row, className].filter(Boolean).join(' ')}>
-      {renderChip(ALL, allLabel, allCount)}
+      {renderChip(ALL, resolvedAllLabel, allCount)}
       {types.map((t) =>
         renderChip(t, labelFor(t), counts && counts[t])
       )}

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -27,16 +27,18 @@
  */
 
 import React from 'react';
+import {translate} from '@docusaurus/Translate';
 import HexThumbnail from '../primitives/HexThumbnail';
 import HexBullet from '../primitives/HexBullet';
 import AuthorByline from '../primitives/AuthorByline';
-import {AUDIENCE_LABELS} from '../../data/audience';
+import {AUDIENCE_SHORT_LABELS} from '../../data/audience';
 import styles from './FeaturedCard.module.css';
 
 function readOrWatch(contentType, minutes) {
   if (!minutes) return null;
-  const verb = contentType === 'webinar' ? 'watch' : 'read';
-  return `${minutes} min ${verb}`;
+  return contentType === 'webinar'
+    ? translate({id: 'preset.featuredCard.minWatch', message: '{minutes} min watch', description: 'Duration label for video content'}, {minutes})
+    : translate({id: 'preset.featuredCard.minRead', message: '{minutes} min read', description: 'Duration label for text content'}, {minutes});
 }
 
 export default function FeaturedCard({
@@ -44,7 +46,7 @@ export default function FeaturedCard({
   eyebrow,
   title,
   lede,
-  ctaLabel = 'Read more',
+  ctaLabel,
   author,
   date,
   dateLabel,
@@ -61,15 +63,39 @@ export default function FeaturedCard({
   className,
 }) {
   const readWatch = readOrWatch(contentType, durationMinutes);
+  const resolvedCtaLabel = ctaLabel ?? translate({
+    id: 'preset.featuredCard.cta',
+    message: 'Read more',
+    description: 'Default CTA label on FeaturedCard when the consuming MDX does not pass ctaLabel',
+  });
   const moduleLabel = moduleSlug
     ? (modulePosition && moduleTotalParts
-        ? `Part ${modulePosition} of ${moduleTotalParts}`
-        : (modulePosition ? `Part ${modulePosition}` : null))
+        ? translate({id: 'preset.featuredCard.modulePartOf', message: 'Part {position} of {total}', description: 'Module-position label, e.g. "Part 2 of 4"'}, {position: modulePosition, total: moduleTotalParts})
+        : (modulePosition ? translate({id: 'preset.featuredCard.modulePart', message: 'Part {position}', description: 'Module-position label when total parts is unknown'}, {position: modulePosition}) : null))
     : null;
-  const audienceLabel = audience.length > 0
-    ? audience.map((a) => AUDIENCE_LABELS[a] || a).join(' · ')
+  /* Audience renders on its own "For: A, B, C" line below the meta bits,
+     matching ContentCard and ModuleCard. Each short label gets its own
+     translate() so consuming sites can localise the audience names
+     without forking the data file. */
+  const audienceLabels = audience
+    .map((a) => translate(
+      {
+        id: `preset.audience.short.${a}`,
+        message: AUDIENCE_SHORT_LABELS[a] || a,
+        description: `Short audience label used in the "For: ..." line. Slug: ${a}.`,
+      },
+    ));
+  const audienceLine = audienceLabels.length > 0
+    ? translate(
+        {
+          id: 'preset.featuredCard.audienceFor',
+          message: 'For: {list}',
+          description: 'Audience line under the FeaturedCard meta row. {list} is a comma-separated audience list.',
+        },
+        {list: audienceLabels.join(', ')},
+      )
     : null;
-  const metaBits = [readWatch, moduleLabel, moduleSlug ? (moduleTitle || moduleSlug) : null, audienceLabel]
+  const metaBits = [readWatch, moduleLabel, moduleSlug ? (moduleTitle || moduleSlug) : null]
     .filter(Boolean);
   const Tag = href ? 'a' : 'div';
   const composed = [styles.card, className].filter(Boolean).join(' ');
@@ -98,6 +124,10 @@ export default function FeaturedCard({
           </div>
         )}
 
+        {audienceLine && (
+          <div className={styles.audienceLine}>{audienceLine}</div>
+        )}
+
         {(author || date) && (
           <div className={styles.meta}>
             <AuthorByline
@@ -112,9 +142,9 @@ export default function FeaturedCard({
           </div>
         )}
 
-        {ctaLabel && (
+        {resolvedCtaLabel && (
           <span className={styles.cta}>
-            <span>{ctaLabel}</span>
+            <span>{resolvedCtaLabel}</span>
             <span aria-hidden="true">→</span>
           </span>
         )}

package/src/components/FeaturedCard/FeaturedCard.module.css

@@ -70,6 +70,20 @@
 .metaBits .metaBit  { white-space: nowrap; }
 .metaBits .metaSep  { opacity: 0.6; }
 
+/* "For: MKB, Overheid, Developers" — same line treatment as the meta
+   bits but its own row so the audience set never wraps into the
+   duration / module line. On-dark variant of the ContentCard
+   audienceLine. */
+.audienceLine {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-200);
+  line-height: 1.4;
+  margin-top: calc(var(--space-3) * -1);
+  margin-bottom: var(--space-4);
+}
+
 .meta { margin-bottom: var(--space-5); }
 
 .cta {

package/src/components/GameModal/GameModal.jsx

@@ -42,6 +42,7 @@
 
 import React, {useEffect, useState, useCallback, useMemo} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate, {translate} from '@docusaurus/Translate';
 import styles from './GameModal.module.css';
 
 const STORAGE_KEY = 'conduction:minigames';
@@ -142,29 +143,43 @@ export default function GameModal({games = DEFAULT_GAMES, className}) {
 
   if (!isBrowser || !open || !event) return null;
 
-  const eyebrow = event.won ? 'Mini-game complete' : 'Game over';
-  const title = event.title || (event.won ? 'Nice run.' : "That's all of them.");
+  const eyebrow = event.won
+    ? translate({id: 'preset.gameModal.eyebrow.won', message: 'Mini-game complete', description: 'Eyebrow above the game-over heading when the player won'})
+    : translate({id: 'preset.gameModal.eyebrow.lost', message: 'Game over', description: 'Eyebrow above the game-over heading when the player lost'});
+  const title = event.title || (event.won
+    ? translate({id: 'preset.gameModal.title.won', message: 'Nice run.', description: 'Default headline on the game-over modal when the player won'})
+    : translate({id: 'preset.gameModal.title.lost', message: "That's all of them.", description: 'Default headline on the game-over modal when the player lost'}));
   const subtitle = event.subtitle ||
     (event.won
-      ? "You've cleared a hidden Conduction mini-game."
-      : "Try again any time, the rain doesn't stop.");
+      ? translate({id: 'preset.gameModal.subtitle.won', message: "You've cleared a hidden Conduction mini-game.", description: 'Default subtitle on the game-over modal when the player won'})
+      : translate({id: 'preset.gameModal.subtitle.lost', message: "Try again any time, the rain doesn't stop.", description: 'Default subtitle on the game-over modal when the player lost'}));
 
   return (
     <div className={[styles.modal, className].filter(Boolean).join(' ')} role="dialog" aria-modal="true" aria-labelledby="gm-title">
       <div className={styles.overlay} onClick={close} />
       <div className={styles.panel}>
-        <button type="button" className={styles.close} onClick={close} aria-label="Close">×</button>
+        <button type="button" className={styles.close} onClick={close} aria-label={translate({id: 'preset.gameModal.close', message: 'Close', description: 'Accessible label for the close (×) button on the game-over modal'})}>×</button>
         <p className={styles.eyebrow}>{eyebrow}</p>
         <h2 className={styles.title} id="gm-title">{title}</h2>
         <p className={styles.subtitle}>{subtitle}</p>
 
         {typeof event.score !== 'undefined' && (
-          <span className={styles.scorePill}>{event.summary || `score: ${event.score}`}</span>
+          <span className={styles.scorePill}>{event.summary || translate({id: 'preset.gameModal.scorePill', message: 'score: {score}', description: 'Default score pill text. {score} is the numeric score.'}, {score: event.score})}</span>
         )}
 
         <div className={styles.progress}>
           <div className={styles.progressLabel}>
-            <span><strong>{foundCount}</strong> / {total} mini-games found</span>
+            <span>
+              <Translate
+                id="preset.gameModal.progress.found"
+                description="Progress label below the game-over copy. {found} bolded count of games discovered; {total} is the total."
+                values={{
+                  found: <strong>{foundCount}</strong>,
+                  total: total,
+                }}>
+                {'{found} / {total} mini-games found'}
+              </Translate>
+            </span>
             <span>{percent}%</span>
           </div>
           <div className={styles.progressBar}>
@@ -183,13 +198,24 @@ export default function GameModal({games = DEFAULT_GAMES, className}) {
 
         <p className={styles.cta}>
           {foundCount < total
-            ? `${total - foundCount} more game${total - foundCount === 1 ? '' : 's'} hidden somewhere. Keep clicking.`
-            : "All five found. You read the kit."}
+            ? translate(
+                {
+                  id: 'preset.gameModal.cta.remaining',
+                  message: '{remaining, plural, one {# more game hidden somewhere. Keep clicking.} other {# more games hidden somewhere. Keep clicking.}}',
+                  description: 'CTA text on the game-over modal when at least one game is still hidden. {remaining} is the count of games still hidden.',
+                },
+                {remaining: total - foundCount},
+              )
+            : translate({id: 'preset.gameModal.cta.allFound', message: 'All five found. You read the kit.', description: 'CTA text on the game-over modal when the player has discovered every mini-game.'})}
         </p>
 
         <div className={styles.actions}>
-          <button type="button" className={styles.btnSecondary} onClick={close}>Close</button>
-          <button type="button" className={styles.btnPrimary} onClick={replay}>Play again</button>
+          <button type="button" className={styles.btnSecondary} onClick={close}>
+            <Translate id="preset.gameModal.action.close" description="Close button label on the game-over modal">Close</Translate>
+          </button>
+          <button type="button" className={styles.btnPrimary} onClick={replay}>
+            <Translate id="preset.gameModal.action.replay" description="Replay button label on the game-over modal">Play again</Translate>
+          </button>
         </div>
       </div>
     </div>

package/src/components/ModuleCard/ModuleCard.jsx

@@ -24,6 +24,7 @@
  */
 
 import React from 'react';
+import {translate} from '@docusaurus/Translate';
 import HexThumbnail from '../primitives/HexThumbnail';
 import {AUDIENCE_SHORT_LABELS} from '../../data/audience';
 import {CONTENT_TYPE_PLURAL_LABELS} from '../ContentTypeFilter/contentTypes';
@@ -86,14 +87,41 @@ export default function ModuleCard({
      the composite type summary below already signal whether this is
      something the visitor reads or watches. Keeps the date line on a
      single row in narrow columns. */
-  const totalLabel = typeof totalMinutes === 'number' ? `${totalMinutes} min` : null;
+  const totalLabel = typeof totalMinutes === 'number'
+    ? translate(
+        {
+          id: 'preset.moduleCard.minLabel',
+          message: '{minutes} min',
+          description: 'Total duration label under a module card (just minutes, no verb).',
+        },
+        {minutes: totalMinutes},
+      )
+    : null;
   const dateLabel  = formatDate(latestDate, locale);
   const dateReadLine = [dateLabel, totalLabel].filter(Boolean).join(' · ');
 
+  const moduleEyebrow = translate({
+    id: 'preset.moduleCard.moduleLabel',
+    message: 'MODULE',
+    description: 'All-caps eyebrow word in the module card type line.',
+  });
   const partsLabel = typeof parts === 'number'
-    ? (parts === 1 ? '1 PART' : `${parts} PARTS`)
+    ? (parts === 1
+        ? translate({
+            id: 'preset.moduleCard.singlePart',
+            message: '1 PART',
+            description: 'Module-parts count when the module has exactly one part.',
+          })
+        : translate(
+            {
+              id: 'preset.moduleCard.multipleParts',
+              message: '{count} PARTS',
+              description: 'Module-parts count when the module has 2+ parts.',
+            },
+            {count: parts},
+          ))
     : null;
-  const typeLine = ['MODULE', partsLabel].filter(Boolean).join(' · ');
+  const typeLine = [moduleEyebrow, partsLabel].filter(Boolean).join(' · ');
 
   /* Composite content-type summary on line 4. For a single-type
      module ("Tutorials") this is one word; mixed modules read
@@ -141,7 +169,24 @@ export default function ModuleCard({
 
         {audience.length > 0 && (
           <div className={styles.audienceLine}>
-            For: {audience.map((a) => AUDIENCE_SHORT_LABELS[a] || a).join(', ')}
+            {translate(
+              {
+                id: 'preset.moduleCard.audienceFor',
+                message: 'For: {list}',
+                description: 'Audience line under a module card. {list} is a comma-separated audience list.',
+              },
+              {
+                list: audience
+                  .map((a) => translate(
+                    {
+                      id: `preset.audience.short.${a}`,
+                      message: AUDIENCE_SHORT_LABELS[a] || a,
+                      description: `Short audience label used in the "For: ..." line. Slug: ${a}.`,
+                    },
+                  ))
+                  .join(', '),
+              },
+            )}
           </div>
         )}
       </div>

package/src/components/NextSteps/NextSteps.jsx

@@ -34,19 +34,25 @@
  */
 
 import React from 'react';
+import {translate} from '@docusaurus/Translate';
 import styles from './NextSteps.module.css';
 
-export function NextStep({href, title, cta = 'Read more', children, className}) {
+export function NextStep({href, title, cta, children, className}) {
   const composed = [styles.card, className].filter(Boolean).join(' ');
   const Tag = href ? 'a' : 'div';
   const props = href ? {href} : {};
+  const resolvedCta = cta ?? translate({
+    id: 'preset.nextSteps.step.cta',
+    message: 'Read more',
+    description: 'Default CTA label on a NextStep card when the consuming MDX does not pass cta',
+  });
   return (
     <Tag className={composed} {...props}>
       {title && <div className={styles.title}>{title}</div>}
       {children && <div className={styles.body}>{children}</div>}
       {href && (
         <div className={styles.cta}>
-          {cta}
+          {resolvedCta}
           <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
                fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round">
@@ -58,12 +64,17 @@ export function NextStep({href, title, cta = 'Read more', children, className})
   );
 }
 
-export default function NextSteps({title = 'Next steps', lede, children, columns = 3, className}) {
+export default function NextSteps({title, lede, children, columns = 3, className}) {
+  const resolvedTitle = title ?? translate({
+    id: 'preset.nextSteps.title',
+    message: 'Next steps',
+    description: 'Default section heading on NextSteps when the consuming MDX does not pass title',
+  });
   const composed = [styles.section, className].filter(Boolean).join(' ');
   const gridClass = [styles.grid, styles['cols-' + columns]].join(' ');
   return (
     <section className={composed}>
-      {title && <h2 className={styles.title}>{title}</h2>}
+      {resolvedTitle && <h2 className={styles.title}>{resolvedTitle}</h2>}
       {lede && <p className={styles.lede}>{lede}</p>}
       <div className={gridClass}>{children}</div>
     </section>

package/src/components/PartnersFor/PartnersFor.jsx

@@ -0,0 +1,55 @@
+/**
+ * <PartnersFor />
+ *
+ * Section that lists the partners shipping a given app or solution.
+ * Reuses <PartnerCard/> (full variant) for each partner, with the
+ * <BecomePartner/> CTA as the trailing grid cell.
+ *
+ * Pure presentation: the consuming site resolves which partners ship
+ * the subject (via usePartnersByApp / usePartnersBySolution) and
+ * passes the locale-resolved copy in. When `partners` is empty, the
+ * grid contains only the BecomePartner cell so the section still
+ * recruits without looking broken.
+ *
+ * Usage in MDX:
+ *
+ *   import {PartnersFor} from '@conduction/docusaurus-preset/components';
+ *   import {usePartnersByApp, useBecomePartner} from '@site/src/data/partners-catalog';
+ *
+ *   <PartnersFor
+ *     eyebrow="Partners"
+ *     title="Partners shipping OpenRegister"
+ *     lede="Implementation, hosting, and integration partners that deliver OpenRegister to their customers."
+ *     partners={usePartnersByApp('OpenRegister')}
+ *     becomePartner={useBecomePartner()}
+ *   />
+ */
+
+import React from 'react';
+import Section from '../primitives/Section';
+import SectionHead from '../primitives/SectionHead';
+import PartnerCard, {PartnerGrid, BecomePartner} from '../PartnerCard/PartnerCard';
+
+export default function PartnersFor({
+  eyebrow = 'Partners',
+  title,
+  lede,
+  partners = [],
+  becomePartner,
+  gridColumns = 3,
+  background = 'default',
+  spacing = 'default',
+  className,
+}) {
+  return (
+    <Section background={background} spacing={spacing} className={className}>
+      <SectionHead eyebrow={eyebrow} title={title} lede={lede} />
+      <PartnerGrid columns={gridColumns}>
+        {partners.map((p, i) => (
+          <PartnerCard key={p.href || p.name || i} {...p} />
+        ))}
+        {becomePartner && <BecomePartner {...becomePartner} />}
+      </PartnerGrid>
+    </Section>
+  );
+}

package/src/components/index.js

@@ -41,6 +41,7 @@ export {default as SolutionCard, SolutionGrid} from './SolutionCard/SolutionCard
 export {default as PartnerCard, PartnerGrid, BecomePartner} from './PartnerCard/PartnerCard.jsx';
 export {default as PartnerDirectory} from './PartnerDirectory/PartnerDirectory.jsx';
 export {default as PartnerSidecard} from './PartnerSidecard/PartnerSidecard.jsx';
+export {default as PartnersFor} from './PartnersFor/PartnersFor.jsx';
 export {default as ManagedCommonGround} from './ManagedCommonGround/ManagedCommonGround.jsx';
 export {default as Clients, DEFAULT_CLIENTS, DEFAULT_PARTNERS} from './Clients/Clients.jsx';
 export {default as ReferenceCard, ReferenceGrid} from './ReferenceCard/ReferenceCard.jsx';

package/src/theme/Footer/index.jsx

@@ -23,6 +23,7 @@ import Link from '@docusaurus/Link';
 import {useLocation} from '@docusaurus/router';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate, {translate} from '@docusaurus/Translate';
 import {brandFor} from '../brand.jsx';
 import {useLazyScript} from '../../utils/lazyScript';
 import {useLazyStylesheet} from '../../utils/lazyStylesheet';
@@ -272,21 +273,32 @@ export default function Footer() {
               they're absent on a product page. */}
           {minigamesOn && (
             <>
-              <div className="game-hud" aria-live="polite" aria-label="Boat-sinking mini game">
+              <div className="game-hud" aria-live="polite" aria-label={translate({id: 'preset.footer.game.ariaLabel', message: 'Boat-sinking mini game', description: 'Accessible name for the footer minigame region'})}>
                 <div className="hud-block hud-counter">
                   <span className="hud-num" data-counter="">100</span>
-                  <span className="hud-label">Boats left</span>
+                  <span className="hud-label">
+                    <Translate id="preset.footer.game.boatsLeft" description="HUD label counting boats remaining">Boats left</Translate>
+                  </span>
                 </div>
                 <div className="hud-block hud-timer">
                   <span className="hud-num" data-timer="">60</span>
-                  <span className="hud-label">Seconds</span>
+                  <span className="hud-label">
+                    <Translate id="preset.footer.game.seconds" description="HUD label for the seconds-remaining timer">Seconds</Translate>
+                  </span>
                 </div>
               </div>
 
-              <div className="game-over" role="dialog" aria-label="Mini game over">
-                <p className="go-title" data-go-title="">Time's up</p>
-                <p className="go-stat"><span data-go-sunk="">0</span> sunk</p>
-                <button type="button" data-restart="">Play again</button>
+              <div className="game-over" role="dialog" aria-label={translate({id: 'preset.footer.game.overAriaLabel', message: 'Mini game over', description: 'Accessible name for the game-over dialog'})}>
+                <p className="go-title" data-go-title="">
+                  <Translate id="preset.footer.game.timesUp" description="Default headline shown when the minigame timer hits zero">Time's up</Translate>
+                </p>
+                <p className="go-stat">
+                  <span data-go-sunk="">0</span>{' '}
+                  <Translate id="preset.footer.game.sunk" description="Suffix after the number of boats sunk in the game-over stat">sunk</Translate>
+                </p>
+                <button type="button" data-restart="">
+                  <Translate id="preset.footer.game.playAgain" description="Button label to restart the minigame">Play again</Translate>
+                </button>
               </div>
             </>
           )}
@@ -337,8 +349,12 @@ export default function Footer() {
                 <div className="wm">{wordmark}</div>
               )}
               <p>
-                Open-source apps for <span className="next-blue">Nextcloud</span>. Built and
-                maintained by Conduction in Amsterdam, released under EUPL-1.2.
+                <Translate
+                  id="preset.footer.brandBlurb"
+                  description="Footer brand-citation paragraph. {nextcloud} is the styled Nextcloud word."
+                  values={{nextcloud: <span className="next-blue">Nextcloud</span>}}>
+                  {'Open-source apps for {nextcloud}. Built and maintained by Conduction in Amsterdam, released under EUPL-1.2.'}
+                </Translate>
               </p>
               {/*
                 Brand citation. The producer chain stays dot-separated

package/src/theme/Navbar/index.jsx

@@ -48,6 +48,7 @@ import {useLocation} from '@docusaurus/router';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import {brandFor, productWordmark, deriveStability} from '../brand.jsx';
 import {ICONS} from '../../components/primitives/icons';
@@ -96,7 +97,7 @@ function NavItem({item, location, appVersion}) {
         className={styles.iconLink}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={item['aria-label'] || 'GitHub repository'}
+        aria-label={item['aria-label'] || translate({id: 'preset.navbar.github.ariaLabel', message: 'GitHub repository', description: 'Default accessible label for the icon-only GitHub link in the navbar'})}
         title="GitHub"
       >
         <span className={styles.iconGlyph} aria-hidden="true">{ICONS.github}</span>
@@ -108,7 +109,7 @@ function NavItem({item, location, appVersion}) {
      (the Redocusaurus mount point used by every Conduction docs site).
      Sites can override via `to` or `href`. */
   if (typeIs(item, 'apiDocs')) {
-    const label = item.label || 'API Documentation';
+    const label = item.label || translate({id: 'preset.navbar.apiDocs.label', message: 'API Documentation', description: 'Default label for the API Documentation navbar link when the consuming site does not set one'});
     const to = item.to || '/api';
     const href = item.href;
     const isActive = !href && (location?.pathname === to ||
@@ -225,7 +226,10 @@ export default function Navbar() {
      sub-route (e.g. /docs/intro/img/app-logo.svg). */
   const logoSrcRaw = navbar.logo?.src;
   const logoSrc = useBaseUrl(logoSrcRaw || '');
-  const logoAlt = navbar.logo?.alt || `${navbar.title} avatar`;
+  const logoAlt = navbar.logo?.alt || translate(
+    {id: 'preset.navbar.logoAlt', message: '{title} avatar', description: 'Default alt text for the navbar logo. {title} is the site title.'},
+    {title: navbar.title},
+  );
 
   /* Split into "left links" (regular nav) and "right CTAs" (locale,
      external links, install button, GitHub icon, version pill).