From 81982df8c6212e2af9e55e26a9710dd84c5a688f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= Date: Tue, 9 Aug 2022 14:19:52 -0300 Subject: [PATCH 1/2] Rendering supporters page with API data using a subproject, clean template, markdown and CMS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tomás Castillo --- gatsby-node.js | 1 + netlify.toml | 1 + .../SupportersPagePreview.js | 16 -- src/pages/supporters/index.md | 113 ------------ src/style/modules/_supporters.scss | 91 ++++++---- src/templates/supporters-page.js | 164 ++++-------------- src/utils/envVariables.js | 3 + src/utils/sponsoredProjects.js | 6 + static/admin/config.yml | 19 -- yarn.lock | 5 + 10 files changed, 107 insertions(+), 312 deletions(-) create mode 100644 src/utils/sponsoredProjects.js diff --git a/gatsby-node.js b/gatsby-node.js index 14fd15f..44a7464 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -25,6 +25,7 @@ const SSR_getSponsoredProjects = async (baseUrl) => { order: 'name', per_page: 100, page: 1, + expand: 'sponsorship_types,sponsorship_types.supporting_companies,sponsorship_types.supporting_companies.company,subprojects,subprojects.sponsorship_types,subprojects.sponsorship_types.supporting_companies,subprojects.sponsorship_types.supporting_companies.company' } }).then((response) => response.data.data) .catch(e => console.log('ERROR: ', e)); diff --git a/netlify.toml b/netlify.toml index 0b1d821..6955087 100644 --- a/netlify.toml +++ b/netlify.toml @@ -9,6 +9,7 @@ [context.deploy-preview.environment] GATSBY_API_BASE_URL = "https://testresource-server.openstack.org" GATSBY_SPONSORED_PROJECT_ID = "3" + GATSBY_SPONSORED_SUPPORTERS_ID = "37" [[redirects]] from = "/baidu" to = "/collateral/ApplicationOfKataContainersInBaiduAICloud.pdf" diff --git a/src/cms/preview-templates/SupportersPagePreview.js b/src/cms/preview-templates/SupportersPagePreview.js index b3f4d30..9e45a4b 100644 --- a/src/cms/preview-templates/SupportersPagePreview.js +++ b/src/cms/preview-templates/SupportersPagePreview.js @@ -8,29 +8,13 @@ const SupportersPagePreview = ({ entry, getAsset, widgetFor }) => { const entryButtons = entry.getIn(['data', 'buttons']) const buttons = entryButtons ? entryButtons.toJS() : [] - const entryDonors = entry.getIn(['data', 'donors', 'list']) - const donorsList = entryDonors ? entryDonors.toJS() : [] - - const entryCompanies = entry.getIn(['data', 'companies', 'list']) - const companiesList = entryCompanies ? entryCompanies.toJS() : [] - const entrySupport = entry.getIn(['data', 'support', 'list']) const supportList = entrySupport ? entrySupport.toJS() : [] if (data) { return( { - const PageContent = contentComponent || Content - - let perChunk = 3 // items per chunk - let inputArray = donors.list; - let donorsList = inputArray.reduce((resultArray, item, index) => { - const chunkIndex = Math.floor(index / perChunk) - - if (!resultArray[chunkIndex]) { - resultArray[chunkIndex] = [] // start a new chunk - } - - resultArray[chunkIndex].push(item) - - return resultArray - }, []) - - perChunk = 4; - inputArray = companies.list; - let supportList = inputArray.reduce((resultArray, item, index) => { - const chunkIndex = Math.floor(index / perChunk) +import sponsoredProjects from "../content/sponsored-projects.json"; +import { getSubProjectById } from '../utils/sponsoredProjects' +import { getEnvVariable, SPONSORED_SUPPORTERS_ID } from '../utils/envVariables' - if (!resultArray[chunkIndex]) { - resultArray[chunkIndex] = [] // start a new chunk - } +export const SupportersPageTemplate = ({ seo, content, buttons, support, contentComponent }) => { + const PageContent = contentComponent || Content - resultArray[chunkIndex].push(item) + const subProject = getSubProjectById(sponsoredProjects, parseInt(getEnvVariable(SPONSORED_SUPPORTERS_ID))); - return resultArray - }, []) + const supporters = subProject.sponsorship_types; return ( @@ -69,8 +49,8 @@ export const SupportersPageTemplate = ({ seo, title, subTitle, content, buttons,
-

{title}

-

{subTitle}

+

{subProject.name}

+

@@ -90,70 +70,29 @@ export const SupportersPageTemplate = ({ seo, title, subTitle, content, buttons, ) })}

-

{donors.title}

-
- { - donorsList.map((d, index) => { - return ( -
- {d.map((i, index) => { - return ( -
- - {i.image ? - i.image.extension === 'svg' && !i.image.childImageSharp ? - {i.alt} - : - {i.alt} - : - null} - -
- ) - })} + + {supporters.map((s, index) => { + return ( + <> +

{s.name}

- ) - }) - } -
-

- Companies Supporting Kata Containers -

-
- { - supportList.map((d, index) => { - return ( -
- {d.map((i, index) => { - return ( -
- {i.image ? - i.image.extension === 'svg' && !i.image.childImageSharp ? - {i.alt} - : - {i.alt} - : - null - } -
- ) - })} +
+ { + s.supporting_companies.map(({ company }, index) => { + return ( +
+ + {company.name} + +
+ ) + }) + }
- ) - }) - } + + ) + })} +

{support.text}

{support.text2}

@@ -182,12 +121,8 @@ export const SupportersPageTemplate = ({ seo, title, subTitle, content, buttons, SupportersPageTemplate.propTypes = { seo: PropTypes.object, - title: PropTypes.string.isRequired, - subTitle: PropTypes.string.isRequired, buttons: PropTypes.object, donors: PropTypes.object, - support: PropTypes.object, - companies: PropTypes.object, content: PropTypes.string, contentComponent: PropTypes.func, } @@ -200,11 +135,7 @@ const SupportersPage = ({ data }) => { @@ -237,45 +168,10 @@ export const supportersPageQuery = graphql` } twitterUsername } - title - subTitle buttons { text link } - donors { - title - list { - image { - childImageSharp { - fluid(maxWidth: 240, quality: 64) { - ...GatsbyImageSharpFluid - } - } - extension - publicURL - } - alt - link - class - } - } - companies { - title - list { - image { - childImageSharp { - fluid(maxWidth: 240, quality: 64) { - ...GatsbyImageSharpFluid - } - } - extension - publicURL - } - alt - class - } - } support { text text2 diff --git a/src/utils/envVariables.js b/src/utils/envVariables.js index bff3fbe..2911b6c 100644 --- a/src/utils/envVariables.js +++ b/src/utils/envVariables.js @@ -1,9 +1,11 @@ export const API_BASE_URL = 'API_BASE_URL'; export const SPONSORED_PROJECT_ID = 'SPONSORED_PROJECT_ID'; +export const SPONSORED_SUPPORTERS_ID = 'SPONSORED_SUPPORTERS_ID'; const processEnv = { API_BASE_URL: process.env.GATSBY_SUMMIT_API_BASE_URL, SPONSORED_PROJECT_ID: process.env.GATSBY_SPONSORED_PROJECT_ID, + SPONSORED_SUPPORTERS_ID: process.env.GATSBY_SPONSORED_SUPPORTERS_ID } export const getEnvVariable = (name) => { @@ -17,4 +19,5 @@ export const getEnvVariable = (name) => { if (typeof window === 'object') { window.API_BASE_URL = processEnv[API_BASE_URL]; window.SPONSORED_PROJECT_ID = processEnv[SPONSORED_PROJECT_ID]; + window.SPONSORED_SUPPORTERS_ID = processEnv[SPONSORED_SUPPORTERS_ID]; } \ No newline at end of file diff --git a/src/utils/sponsoredProjects.js b/src/utils/sponsoredProjects.js new file mode 100644 index 0000000..d7358e2 --- /dev/null +++ b/src/utils/sponsoredProjects.js @@ -0,0 +1,6 @@ +import { getEnvVariable, SPONSORED_PROJECT_ID } from "./envVariables"; + +export const getSubProjectById = (projects, id) => { + const subProjects = projects.find(project => project.id === parseInt(getEnvVariable(SPONSORED_PROJECT_ID))).subprojects; + return subProjects.find(project => project.id === id); +} \ No newline at end of file diff --git a/static/admin/config.yml b/static/admin/config.yml index 188bab9..b4808e3 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -277,29 +277,10 @@ collections: {label: "Image", name: "image", widget: image}, {label: "Twitter Username", name: "twitterUsername", widget: string}, ]} - - {label: "Title", name: title, widget: string} - - {label: "Sub Title", name: subTitle, widget: string} - {label: "Buttons", name: buttons, widget: list, fields: [ {label: Text, name: text, widget: string}, {label: Link, name: link, widget: string} ]} - - {label: "Donors", name: donors, widget: object, fields: [ - {label: "Title", name: title, widget: string}, - {label: "Companies", name: list, widget: list, fields: [ - {label: "Image", name: image, widget: image}, - {label: "Alt", name: alt, widget: string}, - {label: "Link", name: link, widget: string}, - {label: "CSS Class", name: class, widget: string}, - ]} - ]} - - {label: "Supporters", name: companies, widget: object, fields: [ - {label: "Title", name: title, widget: string}, - {label: "Companies", name: list, widget: list, fields: [ - {label: "Image", name: image, widget: image}, - {label: "Alt", name: alt, widget: string}, - {label: "CSS Class", name: class, widget: string}, - ]} - ]} - {label: "End Text", name: support, widget: object, fields: [ {label: "Text", name: text, widget: text}, {label: "Text", name: text2, widget: text}, diff --git a/yarn.lock b/yarn.lock index 4c27322..7f54955 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10291,6 +10291,11 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= +navigation-widget@^1.0.16: + version "1.0.16" + resolved "https://registry.yarnpkg.com/navigation-widget/-/navigation-widget-1.0.16.tgz#a86a2dc1a6e5232b6893e7dfc479ff5f6ffb6dc8" + integrity sha512-qQLvhKgGMBfZTTLrmVtSlHqWWXI0H1iCBd2R5lSSgqbwX4x83pZ/E2FXlsT1j4jj2XqW3NEWafsfer02yg1aFA== + negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" From c279e9e1b615cd4590eb03995a91d56a36db8aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= Date: Mon, 15 Aug 2022 11:26:54 -0300 Subject: [PATCH 2/2] Fix bug with missing description MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tomás Castillo --- src/templates/supporters-page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/supporters-page.js b/src/templates/supporters-page.js index ea32fc3..125c46a 100644 --- a/src/templates/supporters-page.js +++ b/src/templates/supporters-page.js @@ -50,7 +50,7 @@ export const SupportersPageTemplate = ({ seo, content, buttons, support, content

{subProject.name}

-

+