From bf584ef7bbe7f022610e8e0702124bf23108c942 Mon Sep 17 00:00:00 2001
From: Juan Valencia <juanvalencia@calvellido.es>
Date: Thu, 6 Apr 2023 09:04:52 +0200
Subject: [PATCH] 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:

https://github.com/arrow-kt/arrow-website/issues/147
https://github.com/arrow-kt/arrow-website/pull/158
https://github.com/facebook/docusaurus/issues/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)
---
 .../Blog/BlogListPage/BlogListPage.tsx          |  7 +++++++
 .../Blog/BlogListPage/blog-list-page.module.css |  9 +++++++++
 src/pages/community/support/support.module.css  | 13 +++++++++----
 src/pages/index.module.css                      | 17 ++++++++++-------
 src/pages/index.tsx                             |  4 ++--
 src/pages/libraries/libraries.module.css        | 17 ++++++++++-------
 src/pages/libraries/libraries.tsx               |  2 +-
 src/pages/training/training.module.css          | 17 ++++++++++-------
 src/pages/training/training.tsx                 |  2 +-
 9 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/components/Blog/BlogListPage/BlogListPage.tsx b/src/components/Blog/BlogListPage/BlogListPage.tsx
index ebd9147a..c56b43a9 100644
--- a/src/components/Blog/BlogListPage/BlogListPage.tsx
+++ b/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>
   );
diff --git a/src/components/Blog/BlogListPage/blog-list-page.module.css b/src/components/Blog/BlogListPage/blog-list-page.module.css
index 09366ba2..5e23d007 100644
--- a/src/components/Blog/BlogListPage/blog-list-page.module.css
+++ b/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;
diff --git a/src/pages/community/support/support.module.css b/src/pages/community/support/support.module.css
index dadda4c9..45bfe44b 100644
--- a/src/pages/community/support/support.module.css
+++ b/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 {
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index cc775dd2..655a00c5 100644
--- a/src/pages/index.module.css
+++ b/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);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 634eeeb8..35d92e6b 100644
--- a/src/pages/index.tsx
+++ b/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} />
           ))}
diff --git a/src/pages/libraries/libraries.module.css b/src/pages/libraries/libraries.module.css
index a6a977e7..fcff5840 100644
--- a/src/pages/libraries/libraries.module.css
+++ b/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);
diff --git a/src/pages/libraries/libraries.tsx b/src/pages/libraries/libraries.tsx
index 1f484eb0..e5339b67 100644
--- a/src/pages/libraries/libraries.tsx
+++ b/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} />
           ))}
diff --git a/src/pages/training/training.module.css b/src/pages/training/training.module.css
index 4880150d..6c094144 100644
--- a/src/pages/training/training.module.css
+++ b/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);
diff --git a/src/pages/training/training.tsx b/src/pages/training/training.tsx
index bc672af3..15b6543f 100644
--- a/src/pages/training/training.tsx
+++ b/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} />
           ))}