From 386234f684f10875e11b9bfe74b531475c9d9843 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Wed, 5 Apr 2023 18:04:56 +0200 Subject: [PATCH 1/3] Add Atom and RSS links in blog listing page --- src/components/Blog/BlogListPage/BlogListPage.tsx | 11 +++++++++++ .../Blog/BlogListPage/blog-list-page.module.css | 9 +++++++++ 2 files changed, 20 insertions(+) diff --git a/src/components/Blog/BlogListPage/BlogListPage.tsx b/src/components/Blog/BlogListPage/BlogListPage.tsx index ebd9147a..2919fd77 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,16 @@ function BlogListPageContent(props: Props): JSX.Element {
+
+ Archive + + Atom feed + + + RSS feed + +
); 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; From 87a5ed2355b31b3f999096dd0f354f97a4bb8477 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Wed, 5 Apr 2023 18:05:23 +0200 Subject: [PATCH 2/3] Remove unsuccesful composes tryouts --- 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 +- 7 files changed, 43 insertions(+), 29 deletions(-) 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 {

+ className={`${styles.featuresContainer} ${styles.verticalRhythm}`}> {data.features.map((feature: LinkCardProps) => ( ))} @@ -46,7 +46,7 @@ export default function Home(): JSX.Element {

+ className={`${styles.quotesContainer} ${styles.verticalRhythm}`}> {data.quotes?.map((quote: QuoteCardProps) => ( ))} 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 { />
+ className={`${styles.featuresContainer} ${styles.verticalRhythm}`}> {data.libraries.map((library: LinkCardProps) => ( ))} 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 {

+ className={`${styles.quotesContainer} ${styles.verticalRhythm}`}> {data.quotes.map((quote: QuoteCardProps) => ( ))} From a0690ebcb8b64165f2d48ead789323fa02c66945 Mon Sep 17 00:00:00 2001 From: Juan Valencia Calvellido Date: Wed, 5 Apr 2023 18:12:21 +0200 Subject: [PATCH 3/3] Fix absolute links URLs --- src/components/Blog/BlogListPage/BlogListPage.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Blog/BlogListPage/BlogListPage.tsx b/src/components/Blog/BlogListPage/BlogListPage.tsx index 2919fd77..c56b43a9 100644 --- a/src/components/Blog/BlogListPage/BlogListPage.tsx +++ b/src/components/Blog/BlogListPage/BlogListPage.tsx @@ -76,12 +76,8 @@ function BlogListPageContent(props: Props): JSX.Element {
Archive - - Atom feed - - - RSS feed - + Atom feed + RSS feed