From 0957a49298e52101904dd39edcc7ae8d0b88aff4 Mon Sep 17 00:00:00 2001 From: diiigle Date: Thu, 26 Oct 2023 18:02:30 +0200 Subject: [PATCH] +Add support for multiple `Interests` sections including documentation update Fix #21 --- .../content/sections/interests/hobbies.json | 30 +++++++++ example-site/src/pages/index.js | 1 + gatsby-theme-portfolio-minimal/README.md | 17 ++--- .../src/sections/Interests/data.tsx | 62 +++++++++++-------- .../src/sections/Interests/index.tsx | 21 ++++--- 5 files changed, 89 insertions(+), 42 deletions(-) create mode 100644 example-site/content/sections/interests/hobbies.json diff --git a/example-site/content/sections/interests/hobbies.json b/example-site/content/sections/interests/hobbies.json new file mode 100644 index 0000000..4f81aee --- /dev/null +++ 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 index 49fe864..ff27723 100644 --- a/example-site/src/pages/index.js +++ b/example-site/src/pages/index.js @@ -21,6 +21,7 @@ export default function IndexPage() { + diff --git a/gatsby-theme-portfolio-minimal/README.md b/gatsby-theme-portfolio-minimal/README.md index 8d3e604..1c630c0 100644 --- 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)_
`heading` _(optional)_ | `*contentRootDir*/sections/about/*yourFile*.md` | -| `ContactSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/contact/*yourFile*.json` | -| `HeroSection` | `sectionId` _(required)_ | `*contentRootDir*/sections/hero/*yourFile*.json` | -| `InterestsSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/interests/*yourFile*.json` | -| `LegalSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/legal/*yourFile*.md` | -| `ProjectsSection` | `sectionId` _(required)_
`heading` _(optional)_
`fileName` _(optional, default: "projects")_ | `*contentRootDir*/sections/projects/*fileName*.json` | +| Section Component | Available Props | Associated Content File | +|--------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------| +| `AboutSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/about/*yourFile*.md` | +| `ContactSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/contact/*yourFile*.json` | +| `HeroSection` | `sectionId` _(required)_ | `*contentRootDir*/sections/hero/*yourFile*.json` | +| `InterestsSection` | `sectionId` _(required)_
`heading` _(optional)_
`fileName` _(optional, default: "interests")_ | `*contentRootDir*/sections/interests/*fileName*.json` | +| `LegalSection` | `sectionId` _(required)_
`heading` _(optional)_ | `*contentRootDir*/sections/legal/*yourFile*.md` | +| `ProjectsSection` | `sectionId` _(required)_
`heading` _(optional)_
`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 index 8138afc..dc65d09 100644 --- a/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx +++ b/gatsby-theme-portfolio-minimal/src/sections/Interests/data.tsx @@ -2,16 +2,20 @@ 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; + }[]; }[]; }[]; }; @@ -19,25 +23,31 @@ interface InterestsSectionQueryResult { export const useLocalDataSource = (): InterestsSectionQueryResult => { return useStaticQuery(graphql` - query InterestsSectionQuery { - allInterestsJson { - sections: nodes { - button { - initiallyShownInterests - label - visible - } - interests { - image { - alt - src { - childImageSharp { - gatsbyImageData(width: 20, height: 20) + query InterestsByFilename { + allFile(filter: { childInterestsJson: { id: { ne: null } } }) { + interestsFiles: nodes { + name + relativePath + section: children { + ... on InterestsJson { + button { + initiallyShownInterests + label + visible + } + interests { + image { + alt + src { + childImageSharp { + gatsbyImageData(width: 20, height: 20) + } + } + objectFit } + label } - objectFit } - label } } } diff --git a/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx b/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx index 7a34fd5..90da127 100644 --- a/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx +++ b/gatsby-theme-portfolio-minimal/src/sections/Interests/index.tsx @@ -9,22 +9,27 @@ 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( - shouldShowButton ? initiallyShownInterests : data.interests.length, + shouldShowButton ? initiallyShownInterests : section.interests.length, ); function loadMoreHandler() { - setShownInterests(data.interests.length); + setShownInterests(section.interests.length); } return (
- {data.interests.slice(0, shownInterests).map((interest, key) => { + {section.interests.slice(0, shownInterests).map((interest, key) => { return ( {interest.image.src && ( @@ -38,12 +43,12 @@ export function InterestsSection(props: PageSection): React.ReactElement { ); })} - {shouldShowButton && shownInterests < data.interests.length && ( + {shouldShowButton && shownInterests < section.interests.length && (