feat(client): Add news translation (#40577)

client/i18n/allLangs.js

@@ -8,7 +8,7 @@ const availableLangs = {
 
 // Each client language needs an entry in the rest of the variables below
 
-/* These strings set the i18next langauge. It needs to be the two character
+/* These strings set the i18next language. It needs to be the two character
  * string for the language to take advantage of available functionality.
  * Use a 639-1 code here https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
  */

client/i18n/config.js

@@ -12,10 +12,11 @@ i18n.use(initReactI18next).init({
   // we only load one language since each language will have it's own server
   resources: {
     [i18nextCode]: {
-      translations: require(`./locales/${clientLocale}/translations.json`)
+      translations: require(`./locales/${clientLocale}/translations.json`),
+      trending: require(`./locales/${clientLocale}/trending.json`)
     }
   },
-  ns: ['translations'],
+  ns: ['translations', 'trending'],
   defaultNS: 'translations',
   returnObjects: true,
   debug: environment === 'development',

client/i18n/locales.test.js

@@ -7,6 +7,7 @@ import {
   langDisplayNames,
   langCodes
 } from './allLangs';
+import { trendingSchema } from './trending-schema';
 
 const fs = require('fs');
 const { expectToMatchSchema, setup } = require('jest-json-schema-extended');
@@ -21,6 +22,10 @@ const filesThatShouldExist = [
   {
     name: 'motivation.json',
     schema: motivationSchema
+  },
+  {
+    name: 'trending.json',
+    schema: trendingSchema
   }
 ];
 

client/i18n/locales/chinese/trending.json

@@ -0,0 +1,62 @@
+{
+  "article1title": "Chinese: Git Clone",
+  "article1link": "https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/",
+  "article2title": "Chinese: Agile Methods",
+  "article2link": "https://www.freecodecamp.org/news/agile-methods-and-methodology-for-beginners/",
+  "article3title": "Chinese: Python Main",
+  "article3link": "https://www.freecodecamp.org/news/if-name-main-python-example/",
+  "article4title": "Chinese: Callback",
+  "article4link": "https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/",
+  "article5title": "Chinese: Debounce",
+  "article5link": "https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/",
+  "article6title": "Chinese: URL Encode",
+  "article6link": "https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/",
+  "article7title": "Chinese: Blink HTML",
+  "article7link": "https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/",
+  "article8title": "Chinese: Python Tuple",
+  "article8link": "https://www.freecodecamp.org/news/python-returns-multiple-values-how-to-return-a-tuple-list-dictionary/",
+  "article9title": "Chinese: JavaScript Push",
+  "article9link": "https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/",
+  "article10title": "Chinese: Java List",
+  "article10link": "https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/",
+  "article11title": "Chinese: UX",
+  "article11link": "https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/",
+  "article12title": "Chinese: Design Thinking",
+  "article12link": "https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/",
+  "article13title": "Chinese: Prime Number List",
+  "article13link": "https://www.freecodecamp.org/news/prime-numbers-list-chart-of-primes/",
+  "article14title": "Chinese: Product Design",
+  "article14link": "https://www.freecodecamp.org/news/product-design-explained-in-plain-english/",
+  "article15title": "Chinese: Digital Design",
+  "article15link": "https://www.freecodecamp.org/news/what-is-digital-design-and-why-does-it-matter/",
+  "article16title": "Chinese: Coding Games",
+  "article16link": "https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/",
+  "article17title": "Chinese: SVM",
+  "article17link": "https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/",
+  "article18title": "Chinese: JavaScript forEach",
+  "article18link": "https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/",
+  "article19title": "Chinese: Google BERT",
+  "article19link": "https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/",
+  "article20title": "Chinese: Create Table SQL",
+  "article20link": "https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/",
+  "article21title": "Chinese: Responsive Web Design",
+  "article21link": "https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/",
+  "article22title": "Chinese: What Is an SVG File?",
+  "article22link": "https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/",
+  "article23title": "Chinese: PDF Password Remover",
+  "article23link": "https://www.freecodecamp.org/news/pdf-password-remover-guide-how-to-remove-password-protection-from-a-pdf/",
+  "article24title": "Chinese: What Is a PDF?",
+  "article24link": "https://www.freecodecamp.org/news/what-is-a-pdf-file-and-how-do-you-open-it-solved/",
+  "article25title": "Chinese: What Is Python?",
+  "article25link": "https://www.freecodecamp.org/news/what-is-python-used-for-10-coding-uses-for-the-python-programming-language/",
+  "article26title": "Chinese: What Is TLS?",
+  "article26link": "https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/",
+  "article27title": "Chinese: What Is a LAN?",
+  "article27link": "https://www.freecodecamp.org/news/what-is-a-lan-local-area-network-explained-in-plain-english/",
+  "article28title": "Chinese: What Is npm?",
+  "article28link": "https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
+  "article29title": "Chinese: RSync Examples",
+  "article29link": "https://www.freecodecamp.org/news/rsync-examples-rsync-options-and-how-to-copy-files-over-ssh/",
+  "article30title": "Chinese: Random Forest",
+  "article30link": "https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/"
+}

client/i18n/locales/english/trending.json

@@ -0,0 +1,62 @@
+{
+  "article1title": "Git Clone",
+  "article1link": "https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/",
+  "article2title": "Agile Methods",
+  "article2link": "https://www.freecodecamp.org/news/agile-methods-and-methodology-for-beginners/",
+  "article3title": "Python Main",
+  "article3link": "https://www.freecodecamp.org/news/if-name-main-python-example/",
+  "article4title": "Callback",
+  "article4link": "https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/",
+  "article5title": "Debounce",
+  "article5link": "https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/",
+  "article6title": "URL Encode",
+  "article6link": "https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/",
+  "article7title": "Blink HTML",
+  "article7link": "https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/",
+  "article8title": "Python Tuple",
+  "article8link": "https://www.freecodecamp.org/news/python-returns-multiple-values-how-to-return-a-tuple-list-dictionary/",
+  "article9title": "JavaScript Push",
+  "article9link": "https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/",
+  "article10title": "Java List",
+  "article10link": "https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/",
+  "article11title": "UX",
+  "article11link": "https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/",
+  "article12title": "Design Thinking",
+  "article12link": "https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/",
+  "article13title": "Prime Number List",
+  "article13link": "https://www.freecodecamp.org/news/prime-numbers-list-chart-of-primes/",
+  "article14title": "Product Design",
+  "article14link": "https://www.freecodecamp.org/news/product-design-explained-in-plain-english/",
+  "article15title": "Digital Design",
+  "article15link": "https://www.freecodecamp.org/news/what-is-digital-design-and-why-does-it-matter/",
+  "article16title": "Coding Games",
+  "article16link": "https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/",
+  "article17title": "SVM",
+  "article17link": "https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/",
+  "article18title": "JavaScript forEach",
+  "article18link": "https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/",
+  "article19title": "Google BERT",
+  "article19link": "https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/",
+  "article20title": "Create Table SQL",
+  "article20link": "https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/",
+  "article21title": "Responsive Web Design",
+  "article21link": "https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/",
+  "article22title": "What Is an SVG File?",
+  "article22link": "https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/",
+  "article23title": "PDF Password Remover",
+  "article23link": "https://www.freecodecamp.org/news/pdf-password-remover-guide-how-to-remove-password-protection-from-a-pdf/",
+  "article24title": "What Is a PDF?",
+  "article24link": "https://www.freecodecamp.org/news/what-is-a-pdf-file-and-how-do-you-open-it-solved/",
+  "article25title": "What Is Python?",
+  "article25link": "https://www.freecodecamp.org/news/what-is-python-used-for-10-coding-uses-for-the-python-programming-language/",
+  "article26title": "What Is TLS?",
+  "article26link": "https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/",
+  "article27title": "What Is a LAN?",
+  "article27link": "https://www.freecodecamp.org/news/what-is-a-lan-local-area-network-explained-in-plain-english/",
+  "article28title": "What Is npm?",
+  "article28link": "https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
+  "article29title": "RSync Examples",
+  "article29link": "https://www.freecodecamp.org/news/rsync-examples-rsync-options-and-how-to-copy-files-over-ssh/",
+  "article30title": "Random Forest",
+  "article30link": "https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/"
+}

client/i18n/locales/espanol/trending.json

@@ -0,0 +1,62 @@
+{
+  "article1title": "Spanish: Git Clone",
+  "article1link": "https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/",
+  "article2title": "Spanish: Agile Methods",
+  "article2link": "https://www.freecodecamp.org/news/agile-methods-and-methodology-for-beginners/",
+  "article3title": "Spanish: Python Main",
+  "article3link": "https://www.freecodecamp.org/news/if-name-main-python-example/",
+  "article4title": "Spanish: Callback",
+  "article4link": "https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/",
+  "article5title": "Spanish: Debounce",
+  "article5link": "https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/",
+  "article6title": "Spanish: URL Encode",
+  "article6link": "https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/",
+  "article7title": "Spanish: Blink HTML",
+  "article7link": "https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/",
+  "article8title": "Spanish: Python Tuple",
+  "article8link": "https://www.freecodecamp.org/news/python-returns-multiple-values-how-to-return-a-tuple-list-dictionary/",
+  "article9title": "Spanish: JavaScript Push",
+  "article9link": "https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/",
+  "article10title": "Spanish: Java List",
+  "article10link": "https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/",
+  "article11title": "Spanish: UX",
+  "article11link": "https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/",
+  "article12title": "Spanish: Design Thinking",
+  "article12link": "https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/",
+  "article13title": "Spanish: Prime Number List",
+  "article13link": "https://www.freecodecamp.org/news/prime-numbers-list-chart-of-primes/",
+  "article14title": "Spanish: Product Design",
+  "article14link": "https://www.freecodecamp.org/news/product-design-explained-in-plain-english/",
+  "article15title": "Spanish: Digital Design",
+  "article15link": "https://www.freecodecamp.org/news/what-is-digital-design-and-why-does-it-matter/",
+  "article16title": "Spanish: Coding Games",
+  "article16link": "https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/",
+  "article17title": "Spanish: SVM",
+  "article17link": "https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/",
+  "article18title": "Spanish: JavaScript forEach",
+  "article18link": "https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/",
+  "article19title": "Spanish: Google BERT",
+  "article19link": "https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/",
+  "article20title": "Spanish: Create Table SQL",
+  "article20link": "https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/",
+  "article21title": "Spanish: Responsive Web Design",
+  "article21link": "https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/",
+  "article22title": "Spanish: What Is an SVG File?",
+  "article22link": "https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/",
+  "article23title": "Spanish: PDF Password Remover",
+  "article23link": "https://www.freecodecamp.org/news/pdf-password-remover-guide-how-to-remove-password-protection-from-a-pdf/",
+  "article24title": "Spanish: What Is a PDF?",
+  "article24link": "https://www.freecodecamp.org/news/what-is-a-pdf-file-and-how-do-you-open-it-solved/",
+  "article25title": "Spanish: What Is Python?",
+  "article25link": "https://www.freecodecamp.org/news/what-is-python-used-for-10-coding-uses-for-the-python-programming-language/",
+  "article26title": "Spanish: What Is TLS?",
+  "article26link": "https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/",
+  "article27title": "Spanish: What Is a LAN?",
+  "article27link": "https://www.freecodecamp.org/news/what-is-a-lan-local-area-network-explained-in-plain-english/",
+  "article28title": "Spanish: What Is npm?",
+  "article28link": "https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/",
+  "article29title": "Spanish: RSync Examples",
+  "article29link": "https://www.freecodecamp.org/news/rsync-examples-rsync-options-and-how-to-copy-files-over-ssh/",
+  "article30title": "Spanish: Random Forest",
+  "article30link": "https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/"
+}

client/i18n/trending-schema.js

@@ -0,0 +1,70 @@
+/* eslint-disable camelcase */
+/* This is used for testing. If a trending.json file doesn't match the
+ * structure here exactly, the tests will fail.
+ */
+const { strictObject, stringType } = require('jest-json-schema-extended');
+
+const trendingSchema = strictObject({
+  article1title: stringType,
+  article1link: stringType,
+  article2title: stringType,
+  article2link: stringType,
+  article3title: stringType,
+  article3link: stringType,
+  article4title: stringType,
+  article4link: stringType,
+  article5title: stringType,
+  article5link: stringType,
+  article6title: stringType,
+  article6link: stringType,
+  article7title: stringType,
+  article7link: stringType,
+  article8title: stringType,
+  article8link: stringType,
+  article9title: stringType,
+  article9link: stringType,
+  article10title: stringType,
+  article10link: stringType,
+  article11title: stringType,
+  article11link: stringType,
+  article12title: stringType,
+  article12link: stringType,
+  article13title: stringType,
+  article13link: stringType,
+  article14title: stringType,
+  article14link: stringType,
+  article15title: stringType,
+  article15link: stringType,
+  article16title: stringType,
+  article16link: stringType,
+  article17title: stringType,
+  article17link: stringType,
+  article18title: stringType,
+  article18link: stringType,
+  article19title: stringType,
+  article19link: stringType,
+  article20title: stringType,
+  article20link: stringType,
+  article21title: stringType,
+  article21link: stringType,
+  article22title: stringType,
+  article22link: stringType,
+  article23title: stringType,
+  article23link: stringType,
+  article24title: stringType,
+  article24link: stringType,
+  article25title: stringType,
+  article25link: stringType,
+  article26title: stringType,
+  article26link: stringType,
+  article27title: stringType,
+  article27link: stringType,
+  article28title: stringType,
+  article28link: stringType,
+  article29title: stringType,
+  article29link: stringType,
+  article30title: stringType,
+  article30link: stringType
+});
+
+exports.trendingSchema = trendingSchema;

client/src/components/Footer/__snapshots__/Footer.test.js.snap

@@ -77,148 +77,148 @@ exports[`<Footer /> matches snapshot 1`] = `
             className="footer-col footer-col-1"
           >
             <a
-              href="https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/"
+              href="trending:article1link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Git Clone
+              trending:article1title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/agile-methods-and-methodology-for-beginners/"
+              href="trending:article2link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Agile Methods
+              trending:article2title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/if-name-main-python-example/"
+              href="trending:article3link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Python Main
+              trending:article3title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/"
+              href="trending:article4link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Callback
+              trending:article4title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/"
+              href="trending:article5link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Debounce
+              trending:article5title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/"
+              href="trending:article6link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              URL Encode
+              trending:article6title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/"
+              href="trending:article7link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Blink HTML
+              trending:article7title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/python-returns-multiple-values-how-to-return-a-tuple-list-dictionary/"
+              href="trending:article8link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Python Tuple
+              trending:article8title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/"
+              href="trending:article9link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              JavaScript Push
+              trending:article9title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/"
+              href="trending:article10link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Java List
+              trending:article10title
             </a>
           </div>
           <div
             className="footer-col footer-col-2"
           >
             <a
-              href="https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/"
+              href="trending:article11link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              UX
+              trending:article11title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/"
+              href="trending:article12link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Design Thinking
+              trending:article12title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/prime-numbers-list-chart-of-primes/"
+              href="trending:article13link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Prime Number List
+              trending:article13title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/product-design-explained-in-plain-english/"
+              href="trending:article14link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Product Design
+              trending:article14title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/what-is-digital-design-and-why-does-it-matter/"
+              href="trending:article15link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Digital Design
+              trending:article15title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/"
+              href="trending:article16link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Coding Games
+              trending:article16title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/"
+              href="trending:article17link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              SVM
+              trending:article17title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/"
+              href="trending:article18link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              JavaScript forEach
+              trending:article18title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/"
+              href="trending:article19link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Google BERT
+              trending:article19title
             </a>
             <a
-              href="https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/"
+              href="trending:article20link"
               rel="noopener noreferrer"
               target="_blank"
             >
-              Create Table SQL
+              trending:article20title
             </a>
           </div>
           <div
@@ -228,78 +228,78 @@ exports[`<Footer /> matches snapshot 1`] = `
               className="footer-left"
             >
               <a
-                href="https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/"
+                href="trending:article21link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                Responsive Web Design
+                trending:article21title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/"
+                href="trending:article22link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is an SVG File?
+                trending:article22title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/pdf-password-remover-guide-how-to-remove-password-protection-from-a-pdf/"
+                href="trending:article23link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                PDF Password Remover
+                trending:article23title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/what-is-a-pdf-file-and-how-do-you-open-it-solved/"
+                href="trending:article24link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is a PDF?
+                trending:article24title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/what-is-python-used-for-10-coding-uses-for-the-python-programming-language/"
+                href="trending:article25link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is Python?
+                trending:article25title
               </a>
             </div>
             <div
               className="footer-right"
             >
               <a
-                href="https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/"
+                href="trending:article26link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is TLS?
+                trending:article26title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/what-is-a-lan-local-area-network-explained-in-plain-english/"
+                href="trending:article27link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is a LAN?
+                trending:article27title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/"
+                href="trending:article28link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                What Is npm?
+                trending:article28title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/rsync-examples-rsync-options-and-how-to-copy-files-over-ssh/"
+                href="trending:article29link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                RSync Examples
+                trending:article29title
               </a>
               <a
-                href="https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/"
+                href="trending:article30link"
                 rel="noopener noreferrer"
                 target="_blank"
               >
-                Random Forest
+                trending:article30title
               </a>
             </div>
           </div>
@@ -307,7 +307,7 @@ exports[`<Footer /> matches snapshot 1`] = `
       </div>
     </div>
     <div
-      className="footer-buttom"
+      className="footer-bottom"
     >
       <div
         className="col-header"

client/src/components/Footer/footer.css

@@ -115,14 +115,14 @@ p.footer-donation a:hover {
   margin: 0 0 3rem;
 }
 
-.footer-buttom .our-nonprofit {
+.footer-bottom .our-nonprofit {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-.footer-buttom .our-nonprofit a {
+.footer-bottom .our-nonprofit a {
   padding: 5px 10px;
 }
 
@@ -169,7 +169,7 @@ p.footer-donation a:hover {
   .footer-container .col-spacer {
     margin-top: 40px;
   }
-  .footer-buttom .our-nonprofit a {
+  .footer-bottom .our-nonprofit a {
     padding: 5px;
   }
 }
@@ -209,12 +209,12 @@ p.footer-donation a:hover {
     margin-top: 18px;
   }
 
-  .footer-buttom .our-nonprofit {
+  .footer-bottom .our-nonprofit {
     padding: 0 10px;
     justify-content: space-between;
   }
 
-  .footer-buttom .col-header {
+  .footer-bottom .col-header {
     display: none;
   }
   .our-nonprofit {

client/src/components/Footer/index.js

@@ -42,260 +42,110 @@ function Footer() {
             <div className='col-header'>{t('footer.trending-guides')}</div>
             <div className='trending-guides-row'>
               <div className='footer-col footer-col-1'>
-                <Link
+                <Link external={false} to={t('trending:article1link')}>
-                  external={false}
+                  {t('trending:article1title')}
-                  to={
-                    'https://www.freecodecamp.org/news/git-clone-branch-how-to-clone-a-specific-branch/'
-                  }
-                >
-                  Git Clone
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article2link')}>
-                  external={false}
+                  {t('trending:article2title')}
-                  to={
-                    'https://www.freecodecamp.org/news/agile-methods-and-methodology-for-beginners/'
-                  }
-                >
-                  Agile Methods
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article3link')}>
-                  external={false}
+                  {t('trending:article3title')}
-                  to={
-                    'https://www.freecodecamp.org/news/if-name-main-python-example/'
-                  }
-                >
-                  Python Main
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article4link')}>
-                  external={false}
+                  {t('trending:article4title')}
-                  to={
-                    'https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/'
-                  }
-                >
-                  Callback
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article5link')}>
-                  external={false}
+                  {t('trending:article5title')}
-                  to={
-                    'https://www.freecodecamp.org/news/debounce-javascript-tutorial-how-to-make-your-js-wait-up/'
-                  }
-                >
-                  Debounce
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article6link')}>
-                  external={false}
+                  {t('trending:article6title')}
-                  to={
-                    'https://www.freecodecamp.org/news/javascript-url-encode-example-how-to-use-encodeuricomponent-and-encodeuri/'
-                  }
-                >
-                  URL Encode
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article7link')}>
-                  external={false}
+                  {t('trending:article7title')}
-                  to={
-                    'https://www.freecodecamp.org/news/make-it-blink-html-tutorial-how-to-use-the-blink-tag-with-code-examples/'
-                  }
-                >
-                  Blink HTML
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article8link')}>
-                  external={false}
+                  {t('trending:article8title')}
-                  to={
-                    'https://www.freecodecamp.org/news/python-returns-multiple-values-how-to-return-a-tuple-list-dictionary/'
-                  }
-                >
-                  Python Tuple
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article9link')}>
-                  external={false}
+                  {t('trending:article9title')}
-                  to={
-                    'https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/'
-                  }
-                >
-                  JavaScript Push
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article10link')}>
-                  external={false}
+                  {t('trending:article10title')}
-                  to={
-                    'https://www.freecodecamp.org/news/java-list-tutorial-util-list-api-example/'
-                  }
-                >
-                  Java List
                 </Link>
               </div>
               <div className='footer-col footer-col-2'>
-                <Link
+                <Link external={false} to={t('trending:article11link')}>
-                  external={false}
+                  {t('trending:article11title')}
-                  to={
-                    'https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/'
-                  }
-                >
-                  UX
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article12link')}>
-                  external={false}
+                  {t('trending:article12title')}
-                  to={
-                    'https://www.freecodecamp.org/news/what-is-design-thinking-an-introduction-to-the-design-process-for-entrepreneurs-and-developers/'
-                  }
-                >
-                  Design Thinking
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article13link')}>
-                  external={false}
+                  {t('trending:article13title')}
-                  to={
-                    'https://www.freecodecamp.org/news/prime-numbers-list-chart-of-primes/'
-                  }
-                >
-                  Prime Number List
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article14link')}>
-                  external={false}
+                  {t('trending:article14title')}
-                  to={
-                    'https://www.freecodecamp.org/news/product-design-explained-in-plain-english/'
-                  }
-                >
-                  Product Design
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article15link')}>
-                  external={false}
+                  {t('trending:article15title')}
-                  to={
-                    'https://www.freecodecamp.org/news/what-is-digital-design-and-why-does-it-matter/'
-                  }
-                >
-                  Digital Design
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article16link')}>
-                  external={false}
+                  {t('trending:article16title')}
-                  to={
-                    'https://www.freecodecamp.org/news/best-coding-games-online-adults-learn-to-code/'
-                  }
-                >
-                  Coding Games
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article17link')}>
-                  external={false}
+                  {t('trending:article17title')}
-                  to={
-                    'https://www.freecodecamp.org/news/svm-machine-learning-tutorial-what-is-the-support-vector-machine-algorithm-explained-with-code-examples/'
-                  }
-                >
-                  SVM
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article18link')}>
-                  external={false}
+                  {t('trending:article18title')}
-                  to={
-                    'https://www.freecodecamp.org/news/javascript-foreach-how-to-loop-through-an-array-in-js/'
-                  }
-                >
-                  JavaScript forEach
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article19link')}>
-                  external={false}
+                  {t('trending:article19title')}
-                  to={
-                    'https://www.freecodecamp.org/news/google-bert-nlp-machine-learning-tutorial/'
-                  }
-                >
-                  Google BERT
                 </Link>
-                <Link
+                <Link external={false} to={t('trending:article20link')}>
-                  external={false}
+                  {t('trending:article20title')}
-                  to={
-                    'https://www.freecodecamp.org/news/sql-create-table-statement-with-example-syntax/'
-                  }
-                >
-                  Create Table SQL
                 </Link>
               </div>
               <div className='footer-col footer-col-3'>
                 <div className='footer-left'>
-                  <Link
+                  <Link external={false} to={t('trending:article21link')}>
-                    external={false}
+                    {t('trending:article21title')}
-                    to={
-                      'https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/'
-                    }
-                  >
-                    Responsive Web Design
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article22link')}>
-                    external={false}
+                    {t('trending:article22title')}
-                    to={
-                      'https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/'
-                    }
-                  >
-                    What Is an SVG File?
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article23link')}>
-                    external={false}
+                    {t('trending:article23title')}
-                    to={
-                      'https://www.freecodecamp.org/news/pdf-password-remover-guide-how-to-remove-password-protection-from-a-pdf/'
-                    }
-                  >
-                    PDF Password Remover
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article24link')}>
-                    external={false}
+                    {t('trending:article24title')}
-                    to={
-                      'https://www.freecodecamp.org/news/what-is-a-pdf-file-and-how-do-you-open-it-solved/'
-                    }
-                  >
-                    What Is a PDF?
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article25link')}>
-                    external={false}
+                    {t('trending:article25title')}
-                    to={
-                      'https://www.freecodecamp.org/news/what-is-python-used-for-10-coding-uses-for-the-python-programming-language/'
-                    }
-                  >
-                    What Is Python?
                   </Link>
                 </div>
 
                 <div className='footer-right'>
-                  <Link
+                  <Link external={false} to={t('trending:article26link')}>
-                    external={false}
+                    {t('trending:article26title')}
-                    to={
-                      'https://www.freecodecamp.org/news/what-is-tls-transport-layer-security-encryption-explained-in-plain-english/'
-                    }
-                  >
-                    What Is TLS?
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article27link')}>
-                    external={false}
+                    {t('trending:article27title')}
-                    to={
-                      'https://www.freecodecamp.org/news/what-is-a-lan-local-area-network-explained-in-plain-english/'
-                    }
-                  >
-                    What Is a LAN?
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article28link')}>
-                    external={false}
+                    {t('trending:article28title')}
-                    to={
-                      'https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/'
-                    }
-                  >
-                    What Is npm?
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article29link')}>
-                    external={false}
+                    {t('trending:article29title')}
-                    to={
-                      'https://www.freecodecamp.org/news/rsync-examples-rsync-options-and-how-to-copy-files-over-ssh/'
-                    }
-                  >
-                    RSync Examples
                   </Link>
-                  <Link
+                  <Link external={false} to={t('trending:article30link')}>
-                    external={false}
+                    {t('trending:article30title')}
-                    to={
-                      'https://www.freecodecamp.org/news/how-to-use-the-tree-based-algorithm-for-machine-learning/'
-                    }
-                  >
-                    Random Forest
                   </Link>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className='footer-buttom'>
+        <div className='footer-bottom'>
           <div className='col-header'>{t('footer.our-nonprofit')}</div>
           <div className='footer-divder' />
           <div className='our-nonprofit'>