docs: mark some more fields as translatable (#7569)

website/src/components/Versions.tsx

@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useContext, useEffect, useState, type ReactNode} from 'react';
+import {useDocsPreferredVersion} from '@docusaurus/theme-common';
+import {useVersions} from '@docusaurus/plugin-content-docs/client';
+import Translate from '@docusaurus/Translate';
+import CodeBlock from '@theme/CodeBlock';
+
+type ContextValue = {
+  name: string;
+  time: string | undefined;
+};
+
+const Context = React.createContext<ContextValue | null>(null);
+
+export function VersionsProvider({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  const [canaryVersion, setCanaryVersion] = useState<ContextValue | null>(null);
+  useEffect(() => {
+    fetch('https://registry.npmjs.org/@docusaurus/core')
+      .then((res) => res.json())
+      .then(
+        (data: {versions: string[]; time: {[versionName: string]: string}}) => {
+          const name = Object.keys(data.versions).at(-1)!;
+          const time = data.time[name];
+          setCanaryVersion({name, time});
+        },
+      );
+  }, []);
+  return <Context.Provider value={canaryVersion}>{children}</Context.Provider>;
+}
+
+function useStableVersion(): string {
+  const preferredVersion =
+    useDocsPreferredVersion('default').preferredVersion?.name;
+
+  const allVersions = useVersions('default');
+  const lastVersion = (
+    allVersions.find((v) => v.name !== 'current') ?? allVersions[0]!
+  ).name;
+  return preferredVersion && preferredVersion !== 'current'
+    ? preferredVersion
+    : lastVersion;
+}
+
+export function CanaryVersion(): JSX.Element {
+  const canaryVersion = useContext(Context);
+  // Show a sensible name
+  return canaryVersion ? (
+    <span>
+      <Translate
+        description="The hint text for the current canary version tag."
+        values={{canaryVersionName: <b>{canaryVersion.name}</b>}}>
+        {'Current: {canaryVersionName}'}
+      </Translate>
+    </span>
+  ) : (
+    <span>
+      <Translate description="An example canary version tag when the actual version can't be fetched.">
+        Example: 0.0.0-4922
+      </Translate>
+    </span>
+  );
+}
+
+export function StableVersion(): JSX.Element {
+  const currentVersion = useStableVersion();
+  return <span>{currentVersion}</span>;
+}
+
+export function InsertIfCanaryVersionUnknown({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode | null {
+  const canaryVersion = useContext(Context);
+  if (!canaryVersion) {
+    return children;
+  }
+  return null;
+}
+
+export function InsertIfCanaryVersionKnown({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode | null {
+  const canaryVersion = useContext(Context);
+  if (canaryVersion) {
+    return children;
+  }
+  return null;
+}
+
+export function PackageJSONDiff(): JSX.Element {
+  const canaryVersion = useContext(Context)?.name ?? '0.0.0-4922';
+  const stableVersion = useStableVersion();
+  return (
+    <CodeBlock language="diff">
+      {`-  "@docusaurus/core": "^${stableVersion}",
+-  "@docusaurus/preset-classic": "^${stableVersion}",
++  "@docusaurus/core": "${canaryVersion}",
++  "@docusaurus/preset-classic": "${canaryVersion}",
+`}
+    </CodeBlock>
+  );
+}
+
+export function PublishTime(): JSX.Element | null {
+  const time = useContext(Context)?.time;
+  if (!time) {
+    return null;
+  }
+  return (
+    <Translate values={{time: <b>{new Date(time).toLocaleString()}</b>}}>
+      {
+        "The latest canary version that's available on npm is published at {time}."
+      }
+    </Translate>
+  );
+}

website/src/data/users.tsx

@@ -7,6 +7,7 @@
 
 /* eslint-disable global-require */
 
+import {translate} from '@docusaurus/Translate';
 import {sortBy} from '@site/src/utils/jsUtils';
 
 /*
@@ -79,72 +80,102 @@ export type User = {
 export const Tags: {[type in TagType]: Tag} = {
   // DO NOT USE THIS TAG: we choose sites to add to favorites
   favorite: {
-    label: 'Favorite',
-    description:
-      'Our favorite Docusaurus sites that you must absolutely check-out!',
+    label: translate({message: 'Favorite'}),
+    description: translate({
+      message:
+        'Our favorite Docusaurus sites that you must absolutely check out!',
+      id: 'showcase.tag.favorite.description',
+    }),
     color: '#e9669e',
   },
 
   // For open-source sites, a link to the source code is required
   // The source should be your *website's* source, not your project's source!
   opensource: {
-    label: 'Open-Source',
-    description: 'Open-Source Docusaurus sites can be useful for inspiration!',
+    label: translate({message: 'Open-Source'}),
+    description: translate({
+      message: 'Open-Source Docusaurus sites can be useful for inspiration!',
+      id: 'showcase.tag.opensource.description',
+    }),
     color: '#39ca30',
   },
 
   product: {
-    label: 'Product',
-    description: 'Docusaurus sites associated to a commercial product!',
+    label: translate({message: 'Product'}),
+    description: translate({
+      message: 'Docusaurus sites associated to a commercial product!',
+      id: 'showcase.tag.product.description',
+    }),
     color: '#dfd545',
   },
 
   design: {
-    label: 'Design',
-    description:
-      'Beautiful Docusaurus sites, polished and standing out from the initial template!',
+    label: translate({message: 'Design'}),
+    description: translate({
+      message:
+        'Beautiful Docusaurus sites, polished and standing out from the initial template!',
+      id: 'showcase.tag.design.description',
+    }),
     color: '#a44fb7',
   },
 
   i18n: {
-    label: 'I18n',
-    description:
-      'Translated Docusaurus sites using the internationalization support with more than 1 locale.',
+    label: translate({message: 'I18n'}),
+    description: translate({
+      message:
+        'Translated Docusaurus sites using the internationalization support with more than 1 locale.',
+      id: 'showcase.tag.i18n.description',
+    }),
     color: '#127f82',
   },
 
   versioning: {
-    label: 'Versioning',
-    description:
-      'Docusaurus sites using the versioning feature of the docs plugin to manage multiple versions.',
+    label: translate({message: 'Versioning'}),
+    description: translate({
+      message:
+        'Docusaurus sites using the versioning feature of the docs plugin to manage multiple versions.',
+      id: 'showcase.tag.versioning.description',
+    }),
     color: '#fe6829',
   },
 
   // Large sites, with a lot of content (> 200 pages, excluding versions)
   large: {
-    label: 'Large',
-    description:
-      'Very large Docusaurus sites, including many more pages than the average!',
+    label: translate({message: 'Large'}),
+    description: translate({
+      message:
+        'Very large Docusaurus sites, including many more pages than the average!',
+      id: 'showcase.tag.large.description',
+    }),
     color: '#8c2f00',
   },
 
   meta: {
-    label: 'Meta',
-    description: 'Docusaurus sites of Meta (formerly Facebook) projects',
+    label: translate({message: 'Meta'}),
+    description: translate({
+      message: 'Docusaurus sites of Meta (formerly Facebook) projects',
+      id: 'showcase.tag.meta.description',
+    }),
     color: '#4267b2', // Facebook blue
   },
 
   personal: {
-    label: 'Personal',
-    description:
-      'Personal websites, blogs and digital gardens built with Docusaurus',
+    label: translate({message: 'Personal'}),
+    description: translate({
+      message:
+        'Personal websites, blogs and digital gardens built with Docusaurus',
+      id: 'showcase.tag.personal.description',
+    }),
     color: '#14cfc3',
   },
 
   rtl: {
-    label: 'RTL Direction',
-    description:
-      'Docusaurus sites using the right-to-left reading direction support.',
+    label: translate({message: 'RTL Direction'}),
+    description: translate({
+      message:
+        'Docusaurus sites using the right-to-left reading direction support.',
+      id: 'showcase.tag.rtl.description',
+    }),
     color: '#ffcfc3',
   },
 };