Add syndication links to blog listing page

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} />
           ))}