Add syndication links to blog listing page (#159)

### Description

This PR adds a small section with syndication links to the blog posts
listing page.

It also removes some `TODO` code that has deemed to be not successful
for what we wanted to. Basically, after submitting an issue to one of
our library dependencies, I thought that by the uses of the CSS Modules
`composes` feature, we could avoid the CSS injection order problem
present in:

#147
#158
facebook/docusaurus#3678

But it doesn't seem to be the case, so we are in the need of the use of
the double selector trick to successfully override some Infima selectors
styling with our classes.

This closes #153

### Preview


![imagen](https://user-images.githubusercontent.com/7753447/230139114-f5ef7faa-5988-4871-8dd9-60b91caf2352.png)

src/components/Blog/BlogListPage/BlogListPage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {
   PageMetadata,
@@ -72,6 +73,12 @@ function BlogListPageContent(props: Props): JSX.Element {
         <section>
           <Banner title={data.banner.title} ctaList={data.banner.ctaList} />
         </section>
+        <section
+          className={`margin-top--md margin-bottom--md ${styles.linksContainer}`}>
+          <Link href="/community/blog/archive">Archive</Link>
+          <Link href="/community/blog/atom.xml">Atom feed</Link>
+          <Link href="/community/blog/rss.xml">RSS feed</Link>
+        </section>
       </main>
     </Layout>
   );

src/components/Blog/BlogListPage/blog-list-page.module.css

@@ -2,6 +2,15 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
+.linksContainer {
+  composes: container from global;
+  composes: text--center from global;
+  font-size: 0.8rem;
+  display: flex;
+  justify-content: center;
+  gap: var(--ifm-spacing-horizontal);
+}
+
 .projectsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;

src/pages/community/support/support.module.css

@@ -2,11 +2,16 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
+/*
+ * The .textContainer class duplication is a subtle trick to increase the specificity of
+ * this selector, as it would clash with an Infima styling otherwise. CSS injection
+ * order is affecting this. But it doesn't seem like an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
+.textContainer.textContainer {
   max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
 }
 
 .navigationContainer {

src/pages/index.module.css

@@ -2,18 +2,21 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
+/*
+ * The .textContainer class duplication is a subtle trick to increase the specificity of
+ * this selector, as it would clash with an Infima styling otherwise. CSS injection
+ * order is affecting this. But it doesn't seem like an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
+.textContainer.textContainer {
   max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
 }
 
 .featuresContainer,
 .quotesContainer {
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* https://github.com/css-modules/css-modules#composing-from-other-files */
-  /* composes: container from global; */
+  composes: container from global;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);

src/pages/index.tsx

@@ -33,7 +33,7 @@ export default function Home(): JSX.Element {
           </p>
         </section>
         <section
-          className={`container ${styles.featuresContainer} ${styles.verticalRhythm}`}>
+          className={`${styles.featuresContainer} ${styles.verticalRhythm}`}>
           {data.features.map((feature: LinkCardProps) => (
             <LinkCard key={feature.title} {...feature} />
           ))}
@@ -46,7 +46,7 @@ export default function Home(): JSX.Element {
           </p>
         </section>
         <section
-          className={`container ${styles.quotesContainer} ${styles.verticalRhythm}`}>
+          className={`${styles.quotesContainer} ${styles.verticalRhythm}`}>
           {data.quotes?.map((quote: QuoteCardProps) => (
             <QuoteCard key={quote.name} {...quote} />
           ))}

src/pages/libraries/libraries.module.css

@@ -2,18 +2,21 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
+/*
+ * The .textContainer class duplication is a subtle trick to increase the specificity of
+ * this selector, as it would clash with an Infima styling otherwise. CSS injection
+ * order is affecting this. But it doesn't seem like an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
+.textContainer.textContainer {
   max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
 }
 
 .featuresContainer,
 .quotesContainer {
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* https://github.com/css-modules/css-modules#composing-from-other-files */
-  /* composes: container from global; */
+  composes: container from global;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);

src/pages/libraries/libraries.tsx

@@ -28,7 +28,7 @@ export default function Libraries(): JSX.Element {
       />
       <main>
         <section
-          className={`container ${styles.featuresContainer} ${styles.verticalRhythm}`}>
+          className={`${styles.featuresContainer} ${styles.verticalRhythm}`}>
           {data.libraries.map((library: LinkCardProps) => (
             <LinkCard key={library.title} {...library} />
           ))}

src/pages/training/training.module.css

@@ -2,18 +2,21 @@
   margin-bottom: calc(2 * var(--ifm-spacing-vertical));
 }
 
-.textContainer {
+/*
+ * The .textContainer class duplication is a subtle trick to increase the specificity of
+ * this selector, as it would clash with an Infima styling otherwise. CSS injection
+ * order is affecting this. But it doesn't seem like an easy task to solve.
+ * More info:
+ *
+ * https://github.com/facebook/docusaurus/issues/3678
+ */
+.textContainer.textContainer {
   max-width: 480px;
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* composes: container from global;
-  composes: text--center from global; */
 }
 
 .featuresContainer,
 .quotesContainer {
-  /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */
-  /* https://github.com/css-modules/css-modules#composing-from-other-files */
-  /* composes: container from global; */
+  composes: container from global;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);

src/pages/training/training.tsx

@@ -67,7 +67,7 @@ export default function Training(): JSX.Element {
           </p>
         </section>
         <section
-          className={`container ${styles.quotesContainer} ${styles.verticalRhythm}`}>
+          className={`${styles.quotesContainer} ${styles.verticalRhythm}`}>
           {data.quotes.map((quote: QuoteCardProps) => (
             <QuoteCard key={quote.name} {...quote} />
           ))}