Finish setting up learn hub with translations, and fix a couple console errors

Author: corwintines

src/components/Nav/index.tsx

@@ -178,7 +178,7 @@ const Nav: React.FC<IProps> = ({ path }) => {
           items: [
             {
               // @ts-ignore: until we add the translations
-              text: "Learn hub",
+              text: "hero-title",
               to: "/learn/",
             },
           ],

src/intl/en/page-learn.json

@@ -100,20 +100,35 @@
   "online-communities-card-description": "Online communities provide a great opportunity to ask more specific questions or get involved.",
   "online-communities-card-button": "Explore communities",
   "books-about-ethereum": "Books about Ethereum and Cryptocurrencies",
+  "cryptopians-title": "The Cryptopians",
   "cryptopians-description": "February 22, 2022 - Laura Shin",
+  "out-of-the-ether-title": "Out of the Ether",
   "out-of-the-ether-description": "September 29, 2020 - Matthew Leising",
+  "the-infinite-machine-title": "The Infinite Machine",
   "the-infinite-machine-description": "July 14, 2020 - Camila Russo",
+  "the-age-of-cryptocurrency-title": "The Age of Cryptocurrency",
   "the-age-of-cryptocurrency-description": "January 12, 2016 - Paul Vigna, Michael J. Casey",
+  "the-truth-machine-title": "The Truth Machine",
   "the-truth-machine-description": "February 27, 2018 - Paul Vigna, Michael J. Casey",
+  "digital-gold-title": "Digital Gold",
   "digital-gold-description": "May 24, 2021 - Nathaniel Popper",
+  "kings-of-crypto-title": "Kings of Crypto",
   "kings-of-crypto-description": "December 15, 2020 - Jeff John Roberts",
+  "mastering-ethereum-title": "Mastering Ethereum",
   "mastering-ethereum-description": "December 23, 2018 – Andreas M. Antonopoulos, Gavin Wood Ph.D.",
   "podcasts-about-ethereum": "Podcasts about Ethereum and Cryptocurrencies",
+  "into-the-ether-title": "Into the Ether",
   "ethhub-description": "A podcast focusing on all things Ethereum and DeFi",
+  "bankless-title": "Bankless",
   "bankless-description": "A guide to Crypto finance",
+  "uncommon-core-title": "Uncommon Core",
   "uncommon-core-description": "Explores the transformative nature of trust-minimized currency and financial services",
+  "zeroknowledge-title": "Zero Knowledge",
   "zeroknowledge-description": "Goes deep into the tech that will power the emerging decentralized web and the community building this",
+  "epicenter-title": "Epicenter",
   "epicenter-description": "Explores the technical, economic, and social implications of the Crypto industry",
+  "unchained-title": "Unchained",
   "unchained-description": "Dives deep into the people building the decentralized internet, the details of this technology that could underpin our future, and some of the thorniest topics in crypto, such as regulation, security and privacy",
+  "into-the-bytecode-title": "Into the Bytecode",
   "into-the-bytecode-description": "A podcast about the ideas shaping crypto"
 }

src/pages/learn/index.tsx

@@ -180,7 +180,7 @@ const BannerImage = styled.div`
 
 const Section = styled.section`
   margin-top: 6rem;
-  &:first-child {
+  &:first-of-type {
     margin-top: 0;
   }
 `
@@ -242,7 +242,7 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
     <Container>
       <PageMetadata
         title={translateMessageId("hero-title", intl)}
-        description={""}
+        description={translateMessageId("hero-subtitle", intl)}
       />
 
       <HeroBackground>
@@ -801,63 +801,63 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
               <ul>
                 <li>
                   <Link to="https://www.goodreads.com/book/show/57356067-the-cryptopians">
-                    The Cryptopians
+                    <Translation id="cryptopians-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="cryptopians-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/book/show/55360267-out-of-the-ether">
-                    Out of the Ether
+                    <Translation id="out-of-the-ether-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="out-of-the-ether-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/en/book/show/50175330-the-infinite-machine">
-                    The Infinite Machine
+                    <Translation id="the-infinite-machine-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="the-infinite-machine-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/en/book/show/22174460-the-age-of-cryptocurrency">
-                    The Age of Cryptocurrency
+                    <Translation id="the-age-of-cryptocurrency-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="the-age-of-cryptocurrency-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/en/book/show/34964890-the-truth-machine">
-                    The Truth Machine
+                    <Translation id="the-truth-machine-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="the-truth-machine-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/book/show/23546676-digital-gold">
-                    Digital Gold
+                    <Translation id="digital-gold-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="digital-gold-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.goodreads.com/en/book/show/56274031-kings-of-crypto">
-                    Kings of Crypto
+                    <Translation id="kings-of-crypto-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="kings-of-crypto-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://github.com/ethereumbook/ethereumbook">
-                    Mastering Ethereum
+                    <Translation id="mastering-ethereum-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="mastering-ethereum-description" />{" "}
@@ -869,46 +869,56 @@ const LearnPage = ({ data }: PageProps<Queries.LearnPageQuery, Context>) => {
               </h3>
               <ul>
                 <li>
-                  <Link to="https://podcast.ethhub.io/">Into the Ether</Link>{" "}
+                  <Link to="https://podcast.ethhub.io/">
+                    <Translation id="into-the-ether-title" />
+                  </Link>{" "}
                   <i>
                     <Translation id="ethhub-description" />
                   </i>
                 </li>
                 <li>
-                  <Link to="http://podcast.banklesshq.com/">Bankless</Link>{" "}
+                  <Link to="http://podcast.banklesshq.com/">
+                    <Translation id="bankless-title" />
+                  </Link>{" "}
                   <i>
                     <Translation id="bankless-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://uncommoncore.co/podcast/">
-                    Uncommon Core
+                    <Translation id="uncommon-core-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="uncommon-core-description" />
                   </i>
                 </li>
                 <li>
-                  <Link to="https://www.zeroknowledge.fm/">Zero Knowledge</Link>{" "}
+                  <Link to="https://www.zeroknowledge.fm/">
+                    <Translation id="zeroknowledge-title" />
+                  </Link>{" "}
                   <i>
                     <Translation id="zeroknowledge-description" />
                   </i>
                 </li>
                 <li>
-                  <Link to="https://epicenter.tv/">Epicenter</Link>{" "}
+                  <Link to="https://epicenter.tv/">
+                    <Translation id="epicenter-title" />
+                  </Link>{" "}
                   <i>
                     <Translation id="epicenter-description" />
                   </i>
                 </li>
                 <li>
-                  <Link to="https://unchainedpodcast.com/">Unchained</Link>{" "}
+                  <Link to="https://unchainedpodcast.com/">
+                    <Translation id="unchained-title" />
+                  </Link>{" "}
                   <i>
                     <Translation id="unchained-description" />
                   </i>
                 </li>
                 <li>
                   <Link to="https://www.intothebytecode.xyz/">
-                    Into the Bytecode
+                    <Translation id="into-the-bytecode-title" />
                   </Link>{" "}
                   <i>
                     <Translation id="into-the-bytecode-description" />