+Add support for multiple About sections

including documentation update Fix konstantinmuenster#21
diiigle · Oct 30, 2023 · 19d24af · 19d24af
1 parent 0957a49
commit 19d24af
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/gatsby-theme-portfolio-minimal/README.md b/gatsby-theme-portfolio-minimal/README.md
@@ -273,8 +273,8 @@ Most section components work the following way: You import and configure the com
 The following table shows which section components are available and how they can be configured.
 
 | Section Component  | Available Props                                                                                           | Associated Content File                               |
-|--------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
-| `AboutSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/about/*yourFile*.md`       |
+| ------------------ | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| `AboutSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "about")_     | `*contentRootDir*/sections/about/*fileName*.md`       |
 | `ContactSection`   | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/contact/*yourFile*.json`   |
 | `HeroSection`      | `sectionId` _(required)_                                                                                  | `*contentRootDir*/sections/hero/*yourFile*.json`      |
 | `InterestsSection` | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "interests")_ | `*contentRootDir*/sections/interests/*fileName*.json` |

diff --git a/gatsby-theme-portfolio-minimal/src/sections/About/data.tsx b/gatsby-theme-portfolio-minimal/src/sections/About/data.tsx
@@ -2,35 +2,47 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { IGatsbyImageData } from 'gatsby-plugin-image';
 
 interface AboutSectionQueryResult {
-    allAboutMarkdown: {
-        sections: {
-            frontmatter: {
-                imageAlt?: string;
-                imageSrc?: {
-                    childImageSharp: {
-                        gatsbyImageData: IGatsbyImageData;
+    allFile: {
+        aboutFiles: {
+            name: string;
+            relativePath: string;
+            section: {
+                frontmatter: {
+                    imageAlt?: string;
+                    imageSrc?: {
+                        childImageSharp: {
+                            gatsbyImageData: IGatsbyImageData;
+                        };
                     };
                 };
-            };
-            html: string;
+                html: string;
+            }[];
         }[];
     };
 }
 
 export const useLocalDataSource = (): AboutSectionQueryResult => {
     return useStaticQuery(graphql`
-        query AboutSectionQuery {
-            allAboutMarkdown: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/sections/about/" } }) {
-                sections: nodes {
-                    frontmatter {
-                        imageAlt
-                        imageSrc {
-                            childImageSharp {
-                                gatsbyImageData(width: 400)
+        query AboutByFilename {
+            allFile(
+                filter: { childMarkdownRemark: { id: { ne: null } }, relativePath: { regex: "/sections/about/" } }
+            ) {
+                aboutFiles: nodes {
+                    name
+                    relativePath
+                    section: children {
+                        ... on MarkdownRemark {
+                            frontmatter {
+                                imageAlt
+                                imageSrc {
+                                    childImageSharp {
+                                        gatsbyImageData(width: 400)
+                                    }
+                                }
                             }
+                            html
                         }
                     }
-                    html
                 }
             }
         }

diff --git a/gatsby-theme-portfolio-minimal/src/sections/About/index.tsx b/gatsby-theme-portfolio-minimal/src/sections/About/index.tsx
@@ -8,20 +8,25 @@ import * as classes from './style.module.css';
 
 export function AboutSection(props: PageSection): React.ReactElement {
     const response = useLocalDataSource();
-    const data = response.allAboutMarkdown.sections[0];
+    const allFiles = response.allFile.aboutFiles;
+    const fileNameNeedle = props.fileName ? props.fileName : 'about';
+    const result = allFiles.find((file) => {
+        return file.name == fileNameNeedle;
+    });
+    const section = result ? result.section[0] : allFiles[0].section[0];
 
     return (
         <Animation type="fadeUp">
             <Section anchor={props.sectionId} heading={props.heading}>
                 <div className={classes.About}>
-                    <div className={classes.Description} dangerouslySetInnerHTML={{ __html: data.html }} />
-                    {data.frontmatter.imageSrc && (
+                    <div className={classes.Description} dangerouslySetInnerHTML={{ __html: section.html }} />
+                    {section.frontmatter.imageSrc && (
                         <Animation type="fadeLeft" delay={200}>
                             <div className={classes.ImageWrapper}>
                                 <GatsbyImage
-                                    image={data.frontmatter.imageSrc.childImageSharp.gatsbyImageData}
+                                    image={section.frontmatter.imageSrc.childImageSharp.gatsbyImageData}
                                     className={classes.Image}
-                                    alt={data.frontmatter.imageAlt || `About Image`}
+                                    alt={section.frontmatter.imageAlt || `About Image`}
                                 />
                             </div>
                         </Animation>