+Add support for multiple Interests sections

including documentation update Fix konstantinmuenster#21
diiigle · Oct 26, 2023 · bd66e20 · bd66e20
1 parent 4211f14
commit bd66e20
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 35 deletions.
diff --git a/example-site/content/sections/interests/hobbies.json b/example-site/content/sections/interests/hobbies.json
@@ -0,0 +1,30 @@
+{
+    "interests": [
+        {
+            "label": "Gaming",
+            "image": {
+                "src": "../../images/joystick.png",
+                "alt": ""
+            }
+        },
+        {
+            "label": "Surfing the Web",
+            "image": {
+                "src": "../../images/notebook.png",
+                "alt": ""
+            }
+        },
+        {
+            "label": "Mobile Games",
+            "image": {
+                "src": "../../images/mobile-phone.png",
+                "alt": ""
+            }
+        }
+    ],
+    "button": {
+        "visible": false,
+        "label": "+ Load More",
+        "initiallyShownInterests": 5
+    }
+}
diff --git a/example-site/src/pages/index.js b/example-site/src/pages/index.js
@@ -21,6 +21,7 @@ export default function IndexPage() {
                 <InterestsSection sectionId="details" heading="Details" />
                 <ProjectsSection sectionId="features" heading="Built-in Features" />
                 <ProjectsSection sectionId="more-features" heading="Advanced Features" fileName="more_projects"/>
+                <InterestsSection sectionId="hobbies" heading="Hobbies" fileName='hobbies'/>
                 <ContactSection sectionId="github" heading="Issues?" />
             </Page>
         </>

diff --git a/gatsby-theme-portfolio-minimal/README.md b/gatsby-theme-portfolio-minimal/README.md
@@ -193,6 +193,7 @@ content
     │     └── hero.json # has to be JSON
     │ └── interests
     │     └── interests.json # has to be JSON
+    │     └── more_interests.json # has to be JSON
     │ └── legal
     │     └── imprint.md # has to be Markdown
     │ └── projects
@@ -271,14 +272,14 @@ 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`       |
-| `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)_                                                    | `*contentRootDir*/sections/interests/*yourFile*.json` |
-| `LegalSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                    | `*contentRootDir*/sections/legal/*yourFile*.md`       |
-| `ProjectsSection`  | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "projects")_ | `*contentRootDir*/sections/projects/*fileName*.json`  |
+| Section Component  | Available Props                                                                                           | Associated Content File                               |
+|--------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
+| `AboutSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/about/*yourFile*.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` |
+| `LegalSection`     | `sectionId` _(required)_ <br/> `heading` _(optional)_                                                     | `*contentRootDir*/sections/legal/*yourFile*.md`       |
+| `ProjectsSection`  | `sectionId` _(required)_ <br/> `heading` _(optional)_ <br/> `fileName` _(optional, default: "projects")_  | `*contentRootDir*/sections/projects/*fileName*.json`  |
 
 #### Utility Components
 

diff --git a/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx b/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx
@@ -2,32 +2,40 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { ImageObject } from '../../types';
 
 interface InterestsSectionQueryResult {
-    allInterestsJson: {
-        sections: {
-            button: {
-                initiallyShownInterests: number;
-                label: string;
-                visible: boolean;
-            };
-            interests: {
-                image: ImageObject;
-                label: string;
+    allFile: {
+        interestsFiles: {
+            name: string;
+            relativePath: string;
+            section: {
+                button: {
+                    initiallyShownInterests: number;
+                    label: string;
+                    visible: boolean;
+                };
+                interests: {
+                    image: ImageObject;
+                    label: string;
+                }[];
             }[];
         }[];
     };
 }
 
 export const useLocalDataSource = (): InterestsSectionQueryResult => {
     return useStaticQuery(graphql`
-        query InterestsSectionQuery {
-            allInterestsJson {
-                sections: nodes {
-                    button {
-                        initiallyShownInterests
-                        label
-                        visible
-                    }
-                    interests {
+    query InterestsByFilename {
+        allFile(filter: {childInterestsJson: {id: {ne: null}}}) {
+            interestsFiles: nodes {
+                name
+                relativePath
+                section: children {
+                    ... on InterestsJson {
+                        button {
+                            initiallyShownInterests
+                            label
+                            visible
+                        }
+                        interests {
                         image {
                             alt
                             src {
@@ -38,9 +46,11 @@ export const useLocalDataSource = (): InterestsSectionQueryResult => {
                             objectFit
                         }
                         label
+                        }
                     }
                 }
             }
         }
+    }
     `);
 };
diff --git a/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx b/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx
@@ -9,22 +9,25 @@ import * as classes from './style.module.css';
 
 export function InterestsSection(props: PageSection): React.ReactElement {
     const response = useLocalDataSource();
-    const data = response.allInterestsJson.sections[0];
-    const shouldShowButton = data.button.visible !== false;
-    const initiallyShownInterests = data.button.initiallyShownInterests ?? 5;
+    const allFiles = response.allFile.interestsFiles;
+    const fileNameNeedle = props.fileName ? props.fileName : "interests";
+    const result = allFiles.find((file) => { return file.name == fileNameNeedle;});
+    const section = result ? result.section[0] : allFiles[0].section[0];
+    const shouldShowButton = section.button.visible !== false;
+    const initiallyShownInterests = section.button.initiallyShownInterests ?? 5;
     const [shownInterests, setShownInterests] = React.useState<number>(
-        shouldShowButton ? initiallyShownInterests : data.interests.length,
+        shouldShowButton ? initiallyShownInterests : section.interests.length,
     );
 
     function loadMoreHandler() {
-        setShownInterests(data.interests.length);
+        setShownInterests(section.interests.length);
     }
 
     return (
         <Animation type="fadeUp">
             <Section anchor={props.sectionId} heading={props.heading}>
                 <div className={classes.Interests}>
-                    {data.interests.slice(0, shownInterests).map((interest, key) => {
+                    {section.interests.slice(0, shownInterests).map((interest, key) => {
                         return (
                             <Animation key={key} className={classes.Interest} type="scaleIn" delay={key * 100}>
                                 {interest.image.src && (
@@ -38,12 +41,12 @@ export function InterestsSection(props: PageSection): React.ReactElement {
                             </Animation>
                         );
                     })}
-                    {shouldShowButton && shownInterests < data.interests.length && (
+                    {shouldShowButton && shownInterests < section.interests.length && (
                         <Animation type="scaleIn" delay={(shownInterests + 1) * 100}>
                             <Button
                                 type={ButtonType.BUTTON}
                                 onClickHandler={loadMoreHandler}
-                                label={data.button.label}
+                                label={section.button.label}
                             />
                         </Animation>
                     )}