Adoptium.net 2215 translate the asciidoc contributors

locales/fr/asciidoc.json

@@ -1,4 +1,10 @@
 {
     "asciidoc.template.warn.default.locale": "Cette page est la <englishVersionLink>version en anglais</englishVersionLink> car elle n'existe pas dans votre langue. Aidez-nous à la traduire en français. Consultez notre <translationGuideLink>guide de traduction</translationGuideLink> pour plus d'informations.",
-    "asciidoc.template.warn.outdated": "Cette page est la <englishVersionLink>version en anglais</englishVersionLink> car elle n'existe pas dans votre langue. Aidez-nous à traduire la dernière <englishVersionLink>version en anglais</englishVersionLink>. Consultez notre <translationGuideLink>guide de traduction</translationGuideLink> pour plus d'informations."
+    "asciidoc.template.warn.outdated": "Cette page est la <englishVersionLink>version en anglais</englishVersionLink> car elle n'existe pas dans votre langue. Aidez-nous à traduire la dernière <englishVersionLink>version en anglais</englishVersionLink>. Consultez notre <translationGuideLink>guide de traduction</translationGuideLink> pour plus d'informations.",
+    "asciidoc.author.list.title": "Auteurs de la documentation",
+    "asciidoc.edit.link.title": "Aidez-nous à rendre ces documents géniaux !",
+    "asciidoc.edit.link.content": "Tous les documents Adoptium sont open source. Vous voyez quelque chose qui ne va pas ou qui n'est pas clair ?",
+    "asciidoc.edit.link.button": "Modifier cette page",
+    "asciidoc.table.of.contents": "Table des matières",
+    "asciidoc.random.contributor.text": "Merci <profileUri>{{login}}</profileUri> d'avoir faire <commitsListUri>{{contributionsCount}} contribution(s)</commitsListUri> dans <repoUri>{{repo}}</repoUri>"
 }

src/components/AuthorList/__tests__/__snapshots__/author-list.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AuthorsList component > renders correctly 1`] = `
   <div
     class="_authorList_b2bb3b"
   >
-    DOCUMENTATION AUTHORS
+    Text
     <ul>
       <li>
         <a

src/components/AuthorList/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Author from './Author';
 import styles from './index.module.scss';
+import { Trans } from 'gatsby-plugin-react-i18next';
 
 interface Props {
   authors: string[];
@@ -10,7 +11,10 @@ const AuthorList = ({ authors }: Props): JSX.Element => {
   if (authors.length) {
     return (
       <div className={styles.authorList}>
-        DOCUMENTATION AUTHORS
+        <Trans 
+          i18nKey='asciidoc.author.list.title' 
+          defaults='DOCUMENTATION AUTHORS'
+        />
         <ul>
           {authors.map(
             (author, i): JSX.Element => (

src/components/EditLink/__tests__/__snapshots__/EditLink.test.tsx.snap

@@ -10,11 +10,11 @@ exports[`EditLink component > renders correctly 1`] = `
     <span
       class="fw-bold"
     >
-      Help us make these docs great!
+      Text
     </span>
     <br />
     <span>
-      All Adoptium docs are open source. See something that's wrong or unclear?
+      Text
     </span>
     <br />
     <a
@@ -38,7 +38,7 @@ exports[`EditLink component > renders correctly 1`] = `
           d="M416 376.6V206.8c0-46.4-3.7-70.8-22.1-94C374 87.7 348.9 77 310 77h-22V16l-96 96 96 96v-65h22c24.6 0 29 3.6 33.8 9.6 5.5 6.9 8.2 19.1 8.2 54.2v169.8c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4zM384 472c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM128 48c-35.3 0-64 28.7-64 64 0 23.7 12.9 44.3 32 55.4v209.2c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4V167.4c19.1-11.1 32-31.7 32-55.4 0-35.3-28.7-64-64-64zm0 424c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm0-320c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"
         />
       </svg>
-      Edit this page
+      Text
     </a>
   </div>
 </div>

src/components/EditLink/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IoMdGitPullRequest } from 'react-icons/io';
+import { Trans } from 'gatsby-plugin-react-i18next';
 
 type Props = {
   relativePath?: string;
@@ -15,11 +16,24 @@ const EditLink = ({ relativePath }: Props) => {
 
   return (
     <div className='mx-auto pt-5'>
-      <span className='fw-bold'>Help us make these docs great!</span><br/>
-      <span>All Adoptium docs are open source. See something that's wrong or unclear?</span><br/>
+      <span className='fw-bold'>
+        <Trans 
+          i18nKey='asciidoc.edit.link.title' 
+          defaults='Help us make these docs great!'
+        />
+      </span><br/>
+      <span>
+        <Trans 
+          i18nKey='asciidoc.edit.link.content' 
+          defaults="All Adoptium docs are open source. See something that's wrong or unclear?"
+        />
+      </span><br/>
       <a href={href} className='btn btn-secondary mt-2' style={{borderColor: '#0869DA', backgroundColor: '#f6f8fa'}} target='_blank' rel='noopener noreferrer'>
         <IoMdGitPullRequest size={18} style={{ marginRight: '.3em' }} />
-        Edit this page
+        <Trans 
+          i18nKey='asciidoc.edit.link.button' 
+          defaults='Edit this page'
+        />
       </a>
     </div>
   );

src/components/RandomContributor/__tests__/__snapshots__/RandomContributor.test.tsx.snap

@@ -22,40 +22,7 @@ exports[`RandomContributor component > 1 contribution should render as contribut
     <div
       class="random-contributor__thank"
     >
-      Thank you
-
-      <a
-        href="profileUri_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        login_mock
-      </a>
-
-      for making
-
-      <a
-        href="commitsListUri_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        <span>
-          1
-           contribution
-        </span>
-      </a>
-
-      to
-
-      <a
-        href="https://github.com/adoptium/reponame_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        <span>
-          reponame_mock
-        </span>
-      </a>
+      Text
     </div>
   </div>
 </div>
@@ -83,40 +50,7 @@ exports[`RandomContributor component > should render correctly 1`] = `
     <div
       class="random-contributor__thank"
     >
-      Thank you
-
-      <a
-        href="profileUri_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        login_mock
-      </a>
-
-      for making
-
-      <a
-        href="commitsListUri_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        <span>
-          0
-           contributions
-        </span>
-      </a>
-
-      to
-
-      <a
-        href="https://github.com/adoptium/reponame_mock"
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-      >
-        <span>
-          reponame_mock
-        </span>
-      </a>
+      Text
     </div>
   </div>
 </div>

src/components/RandomContributor/index.tsx

@@ -2,6 +2,7 @@ import React, { MutableRefObject, useRef } from 'react';
 import { useAdoptiumContributorsApi, useOnScreen } from '../../hooks';
 import './RandomContributor.scss';
 import AnimatedPlaceholder from '../AnimatedPlaceholder';
+import { Trans, Link } from 'gatsby-plugin-react-i18next';
 
 const RandomContributor = (): JSX.Element => {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -26,32 +27,20 @@ const RandomContributor = (): JSX.Element => {
             </a>
           </div>
           <div className="random-contributor__thank">
-            Thank you{' '}
-            <a
-              href={contributor.profileUri}
-              target="_blank"
-              rel="nofollow noopener noreferrer"
-            >
-              {contributor.login}
-            </a>{' '}
-            for making{' '}
-            <a
-              href={contributor.commitsListUri}
-              target="_blank"
-              rel="nofollow noopener noreferrer"
-            >
-              <span>{contributor.contributionsCount}
-                {contributor.contributionsCount === 1 ? ' contribution' : ' contributions'}
-              </span>
-            </a>{' '}
-            to{' '}
-            <a
-              href={`https://github.com/adoptium/${contributor.repo}`}
-              target="_blank"
-              rel="nofollow noopener noreferrer"
-            >
-              <span>{contributor.repo}</span>
-            </a>
+            <Trans 
+              i18nKey="asciidoc.random.contributor.text" 
+              defaults='Thank you <profileUri>{{login}}</profileUri> for making <commitsListUri>{{contributionsCount}} contribution(s)</commitsListUri> to <repoUri>{{repo}}</repoUri>' 
+              components={{
+                profileUri: <Link to={contributor.profileUri} target="_blank" rel="nofollow noopener noreferrer" />, 
+                commitsListUri: <Link to={contributor.commitsListUri} target="_blank" rel="nofollow noopener noreferrer"/>,
+                repoUri: <Link to={`https://github.com/adoptium/${contributor.repo}`} target="_blank" rel="nofollow noopener noreferrer"/>,
+              }}
+              values={{
+                'login': contributor.login, 
+                'contributionsCount': contributor.contributionsCount,
+                'repo': contributor.repo
+              }}
+            />
           </div>
         </>
       )}

src/templates/__tests__/__snapshots__/asciidoc.test.tsx.snap

@@ -441,7 +441,7 @@ exports[`Asciidoc pages > renders correctly - installation slug 1`] = `
             <summary
               class="lead"
             >
-              Table of Contents
+              asciidoc.table.of.contents
             </summary>
             <ul
               class="sectlevel1"
@@ -468,7 +468,7 @@ exports[`Asciidoc pages > renders correctly - installation slug 1`] = `
         <div
           class="_authorList_b2bb3b"
         >
-          DOCUMENTATION AUTHORS
+          Text
           <ul>
             <li>
               <a
@@ -507,11 +507,11 @@ exports[`Asciidoc pages > renders correctly - installation slug 1`] = `
           <span
             class="fw-bold"
           >
-            Help us make these docs great!
+            Text
           </span>
           <br />
           <span>
-            All Adoptium docs are open source. See something that's wrong or unclear?
+            Text
           </span>
           <br />
           <a
@@ -535,7 +535,7 @@ exports[`Asciidoc pages > renders correctly - installation slug 1`] = `
                 d="M416 376.6V206.8c0-46.4-3.7-70.8-22.1-94C374 87.7 348.9 77 310 77h-22V16l-96 96 96 96v-65h22c24.6 0 29 3.6 33.8 9.6 5.5 6.9 8.2 19.1 8.2 54.2v169.8c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4zM384 472c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM128 48c-35.3 0-64 28.7-64 64 0 23.7 12.9 44.3 32 55.4v209.2c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4V167.4c19.1-11.1 32-31.7 32-55.4 0-35.3-28.7-64-64-64zm0 424c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm0-320c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"
               />
             </svg>
-            Edit this page
+            Text
           </a>
         </div>
       </div>
@@ -764,7 +764,7 @@ exports[`Asciidoc pages > renders correctly 1`] = `
             <summary
               class="lead"
             >
-              Table of Contents
+              asciidoc.table.of.contents
             </summary>
             <ul
               class="sectlevel1"
@@ -791,7 +791,7 @@ exports[`Asciidoc pages > renders correctly 1`] = `
         <div
           class="_authorList_b2bb3b"
         >
-          DOCUMENTATION AUTHORS
+          Text
           <ul>
             <li>
               <a
@@ -830,11 +830,11 @@ exports[`Asciidoc pages > renders correctly 1`] = `
           <span
             class="fw-bold"
           >
-            Help us make these docs great!
+            Text
           </span>
           <br />
           <span>
-            All Adoptium docs are open source. See something that's wrong or unclear?
+            Text
           </span>
           <br />
           <a
@@ -858,7 +858,7 @@ exports[`Asciidoc pages > renders correctly 1`] = `
                 d="M416 376.6V206.8c0-46.4-3.7-70.8-22.1-94C374 87.7 348.9 77 310 77h-22V16l-96 96 96 96v-65h22c24.6 0 29 3.6 33.8 9.6 5.5 6.9 8.2 19.1 8.2 54.2v169.8c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4zM384 472c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM128 48c-35.3 0-64 28.7-64 64 0 23.7 12.9 44.3 32 55.4v209.2c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-23.7-12.9-44.3-32-55.4V167.4c19.1-11.1 32-31.7 32-55.4 0-35.3-28.7-64-64-64zm0 424c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm0-320c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"
               />
             </svg>
-            Edit this page
+            Text
           </a>
         </div>
       </div>

src/templates/asciidocTemplate.tsx

@@ -9,17 +9,21 @@ import EditLink from '../components/EditLink'
 import AuthorsList from '../components/AuthorList'
 import InstallTabs from '../components/InstallTabs'
 import Seo from '../components/Seo'
-import { Trans } from 'gatsby-plugin-react-i18next';
+import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
 import LinkText from '../components/LinkText'
 
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import '@fortawesome/fontawesome-free/css/v4-shims.min.css'
 
 const AsciidocTemplate = ({ data, pageContext }) => {
+
+  const {t} = useTranslation();
+
   useEffect(() => {
-    asciidocFormatter()
+    asciidocFormatter(t)
     highlightCode()
   })
+
   const { asciidoc } = data // data.asciidoc holds our data
   const { document, fields, html, pageAttributes } = asciidoc
   const pageAuthorList = pageAttributes.authors || ''

src/util/asciidocFormatter.tsx

@@ -1,4 +1,4 @@
-export default function asciidocFormatter () {
+export default function asciidocFormatter (t /* 't' from useI18next to retrieve translations */) {
   const tables = document.querySelectorAll('table')
   tables.forEach(table => {
     table.className = 'table table-hover py-2'
@@ -48,7 +48,7 @@ export default function asciidocFormatter () {
       const tocDetails = document.createElement('details')
       tocDetails.className = 'p-3 my-3 bg-grey'
       const tocSummary = document.createElement('summary')
-      tocSummary.innerHTML = 'Table of Contents'
+      tocSummary.innerHTML = t('asciidoc.table.of.contents', 'Table of Contents')
       tocSummary.className = 'lead'
       tocDetails.appendChild(tocSummary)
       const tocList = div.getElementsByClassName('sectlevel1')[0]