+Add support for multiple Projects sections

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

Hide file tree

Showing 6 changed files with 88 additions and 46 deletions.
diff --git a/example-site/content/sections/projects/more_projects.json b/example-site/content/sections/projects/more_projects.json
@@ -0,0 +1,26 @@
+{
+    "projects": [
+        {
+            "visible": true,
+            "category": "🧰 EXTENDABLE LAYOUT",
+            "title": "Multiple Project sections!",
+            "description": "You can now use more than one projects/*.json file to define separate Projects sections. Photo by Kelly Sikkema on Unsplash.",
+            "tags": ["Custom Sections", "Easy-2-Use"],
+            "image": {
+                "src": "../../images/kelly-sikkema-Hl3LUdyKRic-unsplash.jpg",
+                "alt": "Extendable Layout"
+            },
+            "links": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal-theme"
+                }
+            ]
+        }
+    ],
+    "button": {
+        "visible": true,
+        "label": "Test it now",
+        "url": "https://github.com/konstantinmuenster/gatsby-theme-portfolio-minimal"
+    }
+}
diff --git a/example-site/src/pages/index.js b/example-site/src/pages/index.js
@@ -20,6 +20,7 @@ export default function IndexPage() {
                 <AboutSection sectionId="about" heading="About Portfolio Minimal" />
                 <InterestsSection sectionId="details" heading="Details" />
                 <ProjectsSection sectionId="features" heading="Built-in Features" />
+                <ProjectsSection sectionId="more-features" heading="Advanced Features" fileName="more_projects"/>
                 <ContactSection sectionId="github" heading="Issues?" />
             </Page>
         </>

diff --git a/gatsby-theme-portfolio-minimal/README.md b/gatsby-theme-portfolio-minimal/README.md
@@ -197,6 +197,7 @@ content
     │     └── imprint.md # has to be Markdown
     │ └── projects
     │     └── projects.json # has to be JSON
+    |     └── more_projects.json # has to be JSON
 ```
 
 #### `settings.json` File
@@ -270,14 +271,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)_ | `*contentRootDir*/sections/projects/*yourFile*.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)_                                                    | `*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`  |
 
 #### Utility Components
 

diff --git a/gatsby-theme-portfolio-minimal/src/sections/Projects/data.tsx b/gatsby-theme-portfolio-minimal/src/sections/Projects/data.tsx
@@ -2,51 +2,61 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { Project } from '../../components/Project';
 
 interface ProjectsSectionQueryResult {
-    allProjectsJson: {
-        sections: {
-            button: {
-                label: string;
-                url: string;
-                visible: boolean;
-            };
-            projects: Project[];
+    allFile: {
+        projectFiles: {
+            name: string;
+            relativePath: string;
+            section: {
+                button: {
+                    label: string;
+                    url: string;
+                    visible: boolean;
+                };
+                projects: Project[];
+            }[];
         }[];
     };
 }
 
 export const useLocalDataSource = (): ProjectsSectionQueryResult => {
     return useStaticQuery(graphql`
-        query ProjectsSectionQuery {
-            allProjectsJson {
-                sections: nodes {
-                    button {
-                        label
-                        url
-                        visible
-                    }
-                    projects {
-                        category
-                        description
-                        image {
-                            alt
-                            linkTo
-                            src {
-                                childImageSharp {
-                                    gatsbyImageData(width: 400)
+    query ProjectsByFilename {
+        allFile(filter: {childProjectsJson: {id: {ne: null}}}) {
+            projectFiles: nodes {
+                name
+                relativePath
+                section: children {
+                    ... on ProjectsJson {
+                        button {
+                            label
+                            url
+                            visible
+                        }
+                        projects {
+                            category
+                            description
+                            image {
+                                alt
+                                linkTo
+                                src {
+                                    childImageSharp {
+                                        gatsbyImageData(width: 400)
+                                    }
                                 }
+                                objectFit
                             }
-                            objectFit
-                        }
-                        links {
-                            type
-                            url
+                            links {
+                                type
+                                url
+                            }
+                            tags
+                            title
+                            visible
                         }
-                        tags
-                        title
-                        visible
                     }
                 }
             }
         }
+    }
     `);
 };
diff --git a/gatsby-theme-portfolio-minimal/src/sections/Projects/index.tsx b/gatsby-theme-portfolio-minimal/src/sections/Projects/index.tsx
@@ -10,23 +10,26 @@ import * as classes from './style.module.css';
 
 export function ProjectsSection(props: PageSection): React.ReactElement {
     const response = useLocalDataSource();
-    const data = response.allProjectsJson.sections[0];
+    const allFiles = response.allFile.projectFiles;
+    const fileNameNeedle = props.fileName ? props.fileName : "projects";
+    const result = allFiles.find((file) => { return file.name == fileNameNeedle;});
+    const section = result ? result.section[0] : allFiles[0].section[0];
 
     return (
         <Animation type="fadeIn">
             <Section anchor={props.sectionId} heading={props.heading}>
                 <Slider additionalClasses={[classes.Projects]}>
-                    {data.projects.map((project, key) => {
+                    {section.projects.map((project, key) => {
                         return project.visible ? <Project key={key} index={key} data={project} /> : null;
                     })}
                 </Slider>
-                {data.button !== undefined && data.button.visible !== false && (
+                {section.button !== undefined && section.button.visible !== false && (
                     <Animation className={classes.MoreProjects} type="fadeIn">
                         <Button
                             type={ButtonType.LINK}
                             externalLink={true}
-                            url={data.button.url}
-                            label={data.button.label}
+                            url={section.button.url}
+                            label={section.button.label}
                         />
                     </Animation>
                 )}

diff --git a/gatsby-theme-portfolio-minimal/src/types.d.ts b/gatsby-theme-portfolio-minimal/src/types.d.ts
@@ -20,6 +20,7 @@ interface ImageObject {
 interface PageSection {
     sectionId: string;
     heading?: string;
+    fileName?: string;
 }
 
 interface GatsbyNodeHelpers {