diff --git a/src/cms-integration/markdown/private.ts b/src/cms-integration/markdown/private.ts index c5df924..901b63f 100644 --- a/src/cms-integration/markdown/private.ts +++ b/src/cms-integration/markdown/private.ts @@ -3,9 +3,11 @@ import fs from 'fs/promises'; import { marked } from 'marked'; import path from 'path'; import invariant from 'tiny-invariant'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; export interface PrivateInformationMarkdownAttributes { label: string; + icon: IconProp; } export interface CMSPrivateInformation { diff --git a/src/cms-integration/prismic/private.ts b/src/cms-integration/prismic/private.ts index df771d7..0ea4a4a 100644 --- a/src/cms-integration/prismic/private.ts +++ b/src/cms-integration/prismic/private.ts @@ -1,11 +1,20 @@ import { CMSPrivateInformation } from '../markdown/private'; import { cmsClient } from './common'; import { asHTML } from '@prismicio/helpers'; +import { + faEnvelopeSquare, + faPhoneAlt, +} from '@fortawesome/free-solid-svg-icons'; const stripParagraphHtmlSerializer = { paragraph: ({ children, key, type, node, text }) => `${children}`, }; +const iconNameToIcon = { + 'envelope-square': faEnvelopeSquare, + 'phone-alt': faPhoneAlt, +}; + export const prismicGetPrivateInformation = async (): Promise< CMSPrivateInformation[] > => { @@ -16,6 +25,7 @@ export const prismicGetPrivateInformation = async (): Promise< slug: id, attributes: { label: data.label, + icon: iconNameToIcon[data.icon_name], }, html: asHTML(data.content, null, stripParagraphHtmlSerializer), })); diff --git a/src/components/Articles/ContactInformation.tsx b/src/components/Articles/ContactInformation.tsx index e72a8dd..2fb063c 100644 --- a/src/components/Articles/ContactInformation.tsx +++ b/src/components/Articles/ContactInformation.tsx @@ -1,8 +1,9 @@ -import { faIdCard } from '@fortawesome/free-solid-svg-icons'; +import { faIdCard, faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons'; import React from 'react'; import { CMSPersonalInformation } from '../../cms-integration/markdown/personal'; import { CMSPrivateInformation } from '../../cms-integration/markdown/private'; import { SectionHeading } from '../SectionHeading/SectionHeading'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; interface ContactInformationProps { personalInformation: CMSPersonalInformation; @@ -13,20 +14,33 @@ export const ContactInformation: React.FC = ({ personalInformation, privateInformation, }) => { + const contactInfo: CMSPrivateInformation[] = [ + { + slug: 'location', + attributes: { + label: 'Location', + icon: faMapMarkerAlt, + }, + html: personalInformation.attributes.location, + }, + ...privateInformation, + ]; return (
    -
  • - Location: {personalInformation.attributes.location} -
  • - {/* private access required */} - {privateInformation?.map((privateField) => ( -
  • - {`${privateField.attributes.label}: `} - + {contactInfo?.map((infoField) => ( +
  • + + {`${infoField.attributes.label}: `} +
  • ))}