diff --git a/backend/src/api/boardmember/content-types/boardmember/schema.json b/backend/src/api/boardmember/content-types/boardmember/schema.json new file mode 100644 index 0000000..9e34a3d --- /dev/null +++ b/backend/src/api/boardmember/content-types/boardmember/schema.json @@ -0,0 +1,42 @@ +{ + "kind": "collectionType", + "collectionName": "boardmembers", + "info": { + "singularName": "boardmember", + "pluralName": "boardmembers", + "displayName": "Bestuurslid", + "description": "" + }, + "options": { + "draftAndPublish": true + }, + "pluginOptions": {}, + "attributes": { + "name": { + "type": "string", + "required": true + }, + "role": { + "type": "string", + "required": false + }, + "email": { + "type": "email", + "required": false + }, + "extra": { + "type": "richtext" + }, + "photo": { + "type": "media", + "multiple": false, + "required": false, + "allowedTypes": ["images"] + }, + "order": { + "type": "integer", + "required": true, + "default": 10 + } + } +} diff --git a/backend/src/api/boardmember/controllers/boardmember.js b/backend/src/api/boardmember/controllers/boardmember.js new file mode 100644 index 0000000..ea4bb3d --- /dev/null +++ b/backend/src/api/boardmember/controllers/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember controller + */ + +const { createCoreController } = require("@strapi/strapi").factories; + +module.exports = createCoreController("api::boardmember.boardmember"); diff --git a/backend/src/api/boardmember/routes/boardmember.js b/backend/src/api/boardmember/routes/boardmember.js new file mode 100644 index 0000000..7b54663 --- /dev/null +++ b/backend/src/api/boardmember/routes/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember router + */ + +const { createCoreRouter } = require("@strapi/strapi").factories; + +module.exports = createCoreRouter("api::boardmember.boardmember"); diff --git a/backend/src/api/boardmember/services/boardmember.js b/backend/src/api/boardmember/services/boardmember.js new file mode 100644 index 0000000..9be9e7a --- /dev/null +++ b/backend/src/api/boardmember/services/boardmember.js @@ -0,0 +1,9 @@ +"use strict"; + +/** + * boardmember service + */ + +const { createCoreService } = require("@strapi/strapi").factories; + +module.exports = createCoreService("api::boardmember.boardmember"); diff --git a/frontend/src/components/BoardmemberCard.tsx b/frontend/src/components/BoardmemberCard.tsx new file mode 100644 index 0000000..453ef50 --- /dev/null +++ b/frontend/src/components/BoardmemberCard.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; +import imageLoader from "../utils/image-loader"; +import { Boardmember } from "../models/Boardmember"; +import Subheader from "./Subheader"; +import { IconContext } from "react-icons"; +import { FaEnvelope, FaPhone } from "react-icons/fa"; +import Markdown from "./Markdown"; + +interface Props { + boardmember: Boardmember; +} + +export default function BoardmemberCard(props: Props) { + const boardmember = props.boardmember; + return ( +
+
+ {boardmember.photo && ( + {`Foto + )} +
+
+ {boardmember.name} +

{boardmember.role}

+
+ +

+ + {boardmember.email && } + {boardmember.email} + +

+ +
+ +
+
+ ); +} diff --git a/frontend/src/models/Boardmember.ts b/frontend/src/models/Boardmember.ts new file mode 100644 index 0000000..d28c425 --- /dev/null +++ b/frontend/src/models/Boardmember.ts @@ -0,0 +1,7 @@ +export interface Boardmember { + name: string; + role: string; + email: string; + extra: string; + photo: string; +} diff --git a/frontend/src/pages/over-ons.tsx b/frontend/src/pages/over-ons.tsx index 46eec7b..32af34d 100644 --- a/frontend/src/pages/over-ons.tsx +++ b/frontend/src/pages/over-ons.tsx @@ -1,4 +1,4 @@ -import { fetchAboutUs } from "../utils/backend"; +import { fetchAboutUs, fetchBoardmembers } from "../utils/backend"; import AboutUsContent from "../models/AboutUsContent"; import Markdown from "../components/Markdown"; import Banner from "../components/Banner"; @@ -6,9 +6,12 @@ import Main from "../components/Main"; import { GetStaticPropsResult } from "next"; import { revalidate } from "../utils/revalidate"; import HeadPage from "../components/HeadPage"; +import BoardmemberCard from "../components/BoardmemberCard"; +import { Boardmember } from "../models/Boardmember"; interface Props { content: AboutUsContent; + boardmembers: Boardmember[]; } export default function OverOnsPage(props: Props) { @@ -21,17 +24,25 @@ export default function OverOnsPage(props: Props) { />
- +
+ +
+ {props.boardmembers.map((boardmember) => ( + + ))}
); } export async function getStaticProps(): Promise> { + const [content, boardmembers] = await Promise.all([ + fetchAboutUs(), + fetchBoardmembers(), + ]); + return { - props: { - content: await fetchAboutUs(), - }, + props: { content, boardmembers }, revalidate, }; } diff --git a/frontend/src/utils/backend.ts b/frontend/src/utils/backend.ts index 7f6581d..6be3160 100644 --- a/frontend/src/utils/backend.ts +++ b/frontend/src/utils/backend.ts @@ -17,6 +17,7 @@ import ProgramContent from "../models/ProgramContent"; import Fallback from "../models/Fallback"; import { PetitionDetail } from "../models/Petition"; import WorkgroupPageContent from "../models/WorkgroupPageContent"; +import { Boardmember } from "../models/Boardmember"; export const backendBaseUrl = process.env.BACKEND_URL ?? process.env.NEXT_PUBLIC_BACKEND_URL ?? ""; @@ -84,6 +85,26 @@ export async function fetchAboutUs(): Promise { return sanitise(response.data.data.attributes); } +export async function fetchBoardmembers(): Promise { + const response = await backend.get>("/boardmembers", { + params: { + sort: "order", + populate: { + photo: { + fields: ["url"], + }, + }, + }, + }); + + function sanitise(boardmember: any): Boardmember { + boardmember.photo = boardmember.photo.data?.attributes?.url ?? null; + return boardmember; + } + + return response.data.data.map((it) => sanitise(it.attributes)); +} + export async function fetchProgram(): Promise { const response = await backend.get>("/program", { params: {