feat: read HomePage content from Strapi

martapanc · Aug 30, 2023 · 867aa32 · 867aa32
1 parent b711566
commit 867aa32
Show file tree

Hide file tree

Showing 8 changed files with 385 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -44,8 +44,10 @@
     "react-i18next": "^13.2.0",
     "react-icons": "^4.10.1",
     "react-markdown": "^8.0.7",
+    "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-tippy": "^1.4.0",
+    "rehype-raw": "^7.0.0",
     "strapi-flatten-graphql": "^0.1.0",
     "styled-components": "^6.0.7",
     "tailwind-merge": "^1.12.0",

diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
@@ -4,30 +4,35 @@ import Intro from '@/components/organisms/home/Intro';
 import Summary from '@/components/organisms/home/Summary';
 import Seo from '@/components/Seo';
 
-import { queryCodeSnippets } from '@/queries/codeSnippets';
+import { queryCodeSnippets } from '@/queries/code-snippets';
+import { queryHomePage } from '@/queries/home-page';
 
 import { CodeSnippet } from '@/types/CodeSnippet';
+import { HomePage } from '@/types/HomePage';
 
 const queryData = async () => {
   const codeSnippets: CodeSnippet[] = await queryCodeSnippets();
 
+  const homePage: HomePage = await queryHomePage();
+
   return {
     codeSnippets,
+    homePage,
   };
 };
 
 const HomePage = async () => {
-  const { codeSnippets } = await queryData();
+  const { codeSnippets, homePage } = await queryData();
 
   return (
     <main className='min-h-main'>
       <Seo templateTitle='Home' />
 
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-16 md:py-24'>
-          <Intro codeSnippets={codeSnippets} />
+          <Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />
 
-          <Summary />
+          <Summary homePage={homePage} />
         </div>
       </section>
     </main>

diff --git a/src/components/organisms/home/Intro.tsx b/src/components/organisms/home/Intro.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
 
 import { shuffleArray } from '@/lib/helper';
 
-import Code, { CodeSnippetsProps } from '@/components/organisms/home/Code';
+import Code from '@/components/organisms/home/Code';
 import Photo from '@/components/organisms/home/Photo';
 
-const Intro = ({ codeSnippets }: CodeSnippetsProps) => {
+import { CodeSnippet } from '@/types/CodeSnippet';
+
+export interface IntroProps {
+  codeSnippets: CodeSnippet[];
+  greeting: string;
+}
+
+const Intro = ({ greeting, codeSnippets }: IntroProps) => {
   return (
     <div className='mb-6 flex h-fit flex-col pb-6 md:h-96'>
-      <h1 className='pb-4 text-5xl antialiased'>Hey there, I'm Marta 👋🏻</h1>
+      <h1 className='pb-4 text-5xl antialiased'>
+        <ReactMarkdown>{greeting}</ReactMarkdown>
+      </h1>
 
       <div className='mt-8 flex flex-col md:flex-row'>
         <Code codeSnippets={shuffleArray(codeSnippets)} />

diff --git a/src/components/organisms/home/Summary.tsx b/src/components/organisms/home/Summary.tsx
@@ -1,73 +1,100 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import reactStringReplace from 'react-string-replace';
 
-const Summary = () => {
+import { HomePage } from '@/types/HomePage';
+
+export interface SummaryProps {
+  homePage: HomePage;
+}
+
+interface LinkProps {
+  url: string;
+  classes: string;
+  image: string;
+  alt: string;
+  width: number;
+  height: number;
+}
+
+function _buildLink(link: LinkProps) {
   return (
-    <>
-      <div className='pb-4 text-base antialiased'>
-        I'm a software engineer based in Turin, Italy, and I am currently
-        working at
-        <a
-          href='https://resourcify.com/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            className='ms-2 inline'
-            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1693067033/resourcify_69f3b5b70d.webp'
-            alt='Resourcify'
-            width='110'
-            height='25'
-          />
-        </a>
-        .
-      </div>
+    <Link href={link.url} target='_blank' rel='noopener noreferrer'>
+      <Image
+        className={link.classes}
+        src={link.image}
+        alt={link.alt}
+        width={link.width}
+        height={link.height}
+      />
+    </Link>
+  );
+}
+
+const Summary = ({ homePage }: SummaryProps) => {
+  const resourcifyLogo = (
+    <Link
+      href='https://resourcify.com/'
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      <Image
+        className='ms-1 inline'
+        src='https://res.cloudinary.com/dwrurydlt/image/upload/v1693067033/resourcify_69f3b5b70d.webp'
+        alt='Resourcify'
+        width='106'
+        height='21'
+      />
+    </Link>
+  );
 
-      <p className='pb-4 text-base antialiased'>
-        I hold a MSc in Advanced Computer Science from the University of
-        Manchester, and have four years of experience at
-        <a href='https://bjss.com/' target='_blank' rel='noopener noreferrer'>
-          <Image
-            className='mx-2 inline'
-            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1692645367/bjss_180dc7fdd7.webp'
-            alt='BJSS'
-            width='45'
-            height='25'
-          />
-        </a>
-        and
-        <a
-          href='https://booking.com/'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          <Image
-            className='ms-2 inline'
-            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1693067075/bookingcom_91b7aa2e36.svg'
-            alt='Booking.com'
-            width='115'
-            height='25'
-          />
-        </a>
-        .
-      </p>
+  const bjssLogo = (
+    <Link href='https://bjss.com/' target='_blank' rel='noopener noreferrer'>
+      <Image
+        className='mx-1 inline'
+        src='https://res.cloudinary.com/dwrurydlt/image/upload/v1692645367/bjss_180dc7fdd7.webp'
+        alt='BJSS'
+        width='45'
+        height='25'
+      />
+    </Link>
+  );
+
+  const bookingLogo = (
+    <Link href='https://booking.com/' target='_blank' rel='noopener noreferrer'>
+      <Image
+        className='ms-1 inline'
+        src='https://res.cloudinary.com/dwrurydlt/image/upload/v1693067075/bookingcom_91b7aa2e36.svg'
+        alt='Booking.com'
+        width='115'
+        height='25'
+      />
+    </Link>
+  );
 
-      <p className='pb-4 text-base antialiased'>
-        My skill set embraces a range of programming languages, including Java,
-        Kotlin, Python, C# and TypeScript, as well as frontend frameworks such
-        as React and Angular.
-      </p>
+  const part1 = reactStringReplace(
+    homePage.introduction_1,
+    '{Resourcify}',
+    () => resourcifyLogo,
+  );
 
-      <p className='pb-4 text-base antialiased'>
-        While I have a solid foundation in backend development, my heart truly
-        lies in the exciting realm of full-stack engineering.
-      </p>
+  let part2 = reactStringReplace(
+    homePage.introduction_2,
+    '{BJSS}',
+    () => bjssLogo,
+  );
+  part2 = reactStringReplace(part2, '{Booking}', () => bookingLogo);
 
-      <p className='pb-4 text-base antialiased'>
-        In my free time, I’m a fiction writer, an avid bookworm, an oboist and
-        alto singer, and a travel photographer.
-      </p>
-    </>
+  return (
+    <div className='text-base antialiased'>
+      <p className='mb-4 md:mb-1'>{part1}</p>
+      <p className='mb-4'>{part2}</p>
+      <ReactMarkdown className='mb-4'>{homePage.introduction_3}</ReactMarkdown>
+      <ReactMarkdown className='mb-4'>{homePage.introduction_4}</ReactMarkdown>
+      <ReactMarkdown className='mb-4'>{homePage.introduction_5}</ReactMarkdown>
+    </div>
   );
 };
 

diff --git a/src/queries/codeSnippets.ts → src/queries/code-snippets.ts b/src/queries/codeSnippets.ts → src/queries/code-snippets.ts
diff --git a/src/queries/home-page.ts b/src/queries/home-page.ts
@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+import { flattenToObject } from '@/lib/graphqlUtils';
+
+import apolloClient from '../../apollo/apollo-client';
+
+import { HomePage } from '@/types/HomePage';
+
+export async function queryHomePage() {
+  const { data } = await apolloClient.query({ query: homePageQuery });
+
+  return flattenToObject<HomePage>(data.homePage);
+}
+
+export const homePageQuery = gql`
+  query {
+    homePage(locale: "en") {
+      data {
+        id
+        attributes {
+          greeting
+          introduction_1
+          introduction_2
+          introduction_3
+          introduction_4
+          introduction_5
+        }
+      }
+    }
+  }
+`;
diff --git a/src/types/HomePage.ts b/src/types/HomePage.ts
@@ -0,0 +1,8 @@
+export interface HomePage {
+  greeting: string;
+  introduction_1: string;
+  introduction_2: string;
+  introduction_3: string;
+  introduction_4: string;
+  introduction_5: string;
+}