Feat/add logo data in cms footer collection

homepage/_footer/en/footer.json

@@ -13,6 +13,20 @@
         "display_text": "Play Online!",
         "url": "/resource/#play-online"
       }
+    ],
+    "logos": [
+      {
+        "alt_text": "open culture foundation",
+        "image_url": "/images/uploads/logo__ocf.svg",
+        "title": "Initiator",
+        "link_url": "https://ocf.tw/"
+      },
+      {
+        "alt_text": "Friedrich Naumann Foundation for Freedom",
+        "image_url": "/images/uploads/logo__fnf.png",
+        "title": "Sponsor",
+        "link_url": "https://www.freiheit.org/"
+      }
     ]
   }
-}
+}

homepage/_footer/zh-tw/footer.json

@@ -13,6 +13,20 @@
         "display_text": "來玩線上桌遊！",
         "url": "/resource/#線上桌遊一起玩"
       }
+    ],
+    "logos": [
+      {
+        "text": "open culture foundation",
+        "image_url": "/images/uploads/logo__ocf.svg",
+        "title": "Initiator",
+        "link_url": "https://ocf.tw/"
+      },
+      {
+        "text": "Friedrich Naumann Foundation for Freedom",
+        "image_url": "/images/uploads/logo__fnf.png",
+        "title": "Sponsor",
+        "link_url": "https://www.freiheit.org/"
+      }
     ]
   }
-}
+}

homepage/public/css/style.css

@@ -916,7 +916,7 @@ code {
   margin-left: 1rem;
 }
 .logo-margin {
-  margin: 0 15px;
+  margin: 0 1rem;
 }
 .avatar {
   margin: 0.5rem auto;
@@ -985,9 +985,6 @@ code {
   .logos {
     flex-wrap: wrap;
   }
-  .logo-margin {
-    margin: 10px auto;
-  }
 }
 @media only screen and (max-width: 568px) {
   .photos-page-list .item {
@@ -1021,6 +1018,9 @@ code {
   .blogs-list .item .inner .details .title {
     font-size: 20px;
   }
+  .logo-margin {
+    margin: 0.25rem auto;
+  }
 }
 @media only screen and (max-width: 480px) {
   /* .image-and-text-main .left img{height:400px} */

homepage/src/CMS/decap-cms.config.js

@@ -364,7 +364,7 @@ module.exports = {
               label: 'Links',
               label_singular: 'Link',
               widget: 'list',
-              summary: '{{fields.type} - {{fields.url}}',
+              summary: '{{fields.type}} - {{fields.url}}',
               fields: [
                 {
                   label: 'Type',
@@ -429,6 +429,36 @@ module.exports = {
                 },
               ],
             },
+            {
+              label: 'Logos',
+              name: 'logos',
+              label_singular: 'Logo',
+              widget: 'list',
+              i18n: true,
+              summary: '{{fields.title}} | {{fields.alt_text}}',
+              fields: [
+                {
+                  label: 'Title',
+                  name: 'title',
+                  widget: 'string',
+                },
+                {
+                  label: 'Alt Text',
+                  name: 'alt_text',
+                  widget: 'string',
+                },
+                {
+                  label: 'Image',
+                  name: 'image_url',
+                  widget: 'image',
+                },
+                {
+                  label: 'Link Url',
+                  name: 'link_url',
+                  widget: 'string',
+                },
+              ],
+            },
           ],
         },
       ],

homepage/src/components/logo.jsx

@@ -1,18 +1,21 @@
 import Image from 'next/image';
+import Link from 'next/link';
 
-const Logo = ({ text, src, dimension }) => (
-  <div className="flex flex-row flex-align-center logo-margin">
-    <span className="logo-title">{text}</span>
-    <Image
-      className="logo-image"
-      src={src}
-      alt={`${text}-logo`}
-      height={dimension.height}
-      width={dimension.width}
-      style={{
-        objectFit: 'cover',
-      }}
-    />
+const Logo = ({ title, altText, src, dimension, link }) => (
+  <div className="d-flex align-items-center logo-margin">
+    <span className="logo-title">{title}</span>
+    <Link href={link} target="_blank">
+      <Image
+        className="logo-image"
+        src={src}
+        alt={altText}
+        height={dimension.height}
+        width={dimension.width}
+        style={{
+          objectFit: 'cover',
+        }}
+      />
+    </Link>
   </div>
 );
 

homepage/src/layouts/contentMapper.jsx

@@ -10,19 +10,19 @@ import { componentTypes } from '../lib/componentMapper';
 const contentMapper = (component) => {
   switch (component.type) {
     case componentTypes.Banner:
-      return <Banner key={component.id} {...component.props} />;
+      return <Banner key={component.props.id} {...component.props} />;
     case componentTypes.Headline:
-      return <Headline key={component.id} {...component.props} />;
+      return <Headline key={component.props.id} {...component.props} />;
     case componentTypes.ImageAndText:
-      return <ImageAndText key={component.id} {...component.props} />;
+      return <ImageAndText key={component.props.id} {...component.props} />;
     case componentTypes.OneColumn:
-      return <Section key={component.id} {...component.props} />;
+      return <Section key={component.props.id} {...component.props} />;
     case componentTypes.TwoColumns:
-      return <TwoColumns key={component.id} {...component.props} />;
+      return <TwoColumns key={component.props.id} {...component.props} />;
     case componentTypes.ThreeColumns:
-      return <ThreeColumns key={component.id} {...component.props} />;
+      return <ThreeColumns key={component.props.id} {...component.props} />;
     case componentTypes.Cards:
-      return <Cards key={component.id} {...component.props} />;
+      return <Cards key={component.props.id} {...component.props} />;
     default:
       return null;
   }

homepage/src/layouts/footer/footer.jsx

@@ -1,36 +1,25 @@
-import { useRouter } from 'next/router';
 import SocialMedia from '../../components/socialMedia';
 import Logo from '../../components/logo';
-import footerZh from '../../../_footer/zh-tw/footer.json';
-import footerEn from '../../../_footer/en/footer.json';
 import FooterLinks from './footerLinks';
 
-const Footer = ({ siteData, footer }) => {
-  const router = useRouter();
-  const locale = router.locale;
-  const footerData = locale === 'en' ? footerEn : footerZh;
-  const footerLinks = footer?.links ?? footerData?.footer?.links ?? [];
-  const links = footerLinks.map((link) => ({
-    displayText: link.display_text,
-    url: link.url,
-  }));
+const Footer = ({ siteData, links = [], logos = [] }) => {
   return (
     <div className="site-footer" id="footer">
       <div className="container footer-main">
         <FooterLinks links={links} />
         <span>{siteData.title}</span>
         <SocialMedia />
-        <div className="d-flex flex-row flex-justify-center logos margin-2-percent">
-          <Logo
-            text="Initiator"
-            src="/images/campaignpage/logo__OCF.svg"
-            dimension={{ width: 170, height: 34 }}
-          />
-          <Logo
-            text="Sponsor"
-            src="/images/campaignpage/logo__FNF.png"
-            dimension={{ width: 163, height: 45 }}
-          />
+        <div className="d-flex justify-content-center logos margin-2-percent">
+          {logos.map((logo) => (
+            <Logo
+              key={logo.text}
+              title={logo.title}
+              altText={logo.altText}
+              src={logo.imageUrl}
+              dimension={{ width: 163, height: 45 }}
+              link={logo.linkUrl}
+            />
+          ))}
         </div>
       </div>
     </div>

homepage/src/layouts/footer/footerLinks.jsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 const FooterLinks = ({ links }) => (
-  <div className="flex flex-row gap">
+  <div className="d-flex gap">
     {links.map((link) => (
       <Link
         href={link.url}

homepage/src/layouts/header/header.jsx

@@ -1,9 +1,9 @@
 import Navigator from './navigator';
 
-const Header = ({ nav = [], siteData }) => (
+const Header = ({ siteData, navigation = [] }) => (
   <header className="site-header fixed-top">
     <div className="container">
-      <Navigator logo={siteData.logo} navigationItems={nav} />
+      <Navigator logo={siteData.logo} navigationItems={navigation} />
     </div>
   </header>
 );

homepage/src/layouts/siteLayout/siteLayout.jsx

@@ -1,11 +1,11 @@
 import Footer from '../footer/footer';
 import Header from '../header/header';
 
-const SiteLayout = ({ children, nav, siteData, pageProps }) => (
+const SiteLayout = ({ children, siteData, pageProps, header, footer }) => (
   <>
-    <Header nav={nav} siteData={siteData} />
+    <Header siteData={siteData} {...header} />
     <main>{children}</main>
-    <Footer siteData={siteData} />
+    <Footer siteData={siteData} {...footer} />
   </>
 );
 

homepage/src/lib/fetchFooter.js

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import { join } from 'path';
+
+const FOOTER_FOLDER = '_footer';
+
+export function fetchFooter(lang) {
+  const filePath = join(process.cwd(), FOOTER_FOLDER, lang, 'footer.json');
+
+  const file = fs.readFileSync(filePath, 'utf8');
+
+  const rawFooter = JSON.parse(file).footer;
+  const footer = {
+    links: rawFooter.links.map((link) => ({
+      displayText: link.display_text,
+      url: link.url,
+    })),
+    logos: rawFooter.logos.map((logo) => ({
+      title: logo.title,
+      imageUrl: logo.image_url,
+      altText: logo.alt_text,
+      linkUrl: logo.link_url,
+    })),
+  };
+  return footer;
+}

homepage/src/lib/getLayout.js

@@ -0,0 +1,16 @@
+import { getNavigationList } from './getNavigationList';
+import { fetchFooter } from './fetchFooter';
+
+export const getLayout = async (locale) => {
+  const navigation = await getNavigationList(locale);
+  const header = {
+    navigation,
+  };
+  const footer = fetchFooter(locale);
+  const layout = {
+    header,
+    footer,
+  };
+
+  return layout;
+};

homepage/src/lib/getNavigationList.js

@@ -38,7 +38,7 @@ export async function getNavigationList(lang) {
     .map((page) => {
       page.path = page.path.replace('index', '');
       return { link: `/${page.path}`, text: page.name };
-    })
+    });
 
   return navigationList;
 }

homepage/src/lib/getPage.js

@@ -0,0 +1,22 @@
+import { componentMapper } from './componentMapper';
+import { fetchCards } from './fetchCards';
+import { fetchPage } from './fetchPage';
+import { processCard } from './processCard';
+
+export const getPage = async (pageName, locale) => {
+  const rawCards = fetchCards(locale);
+  const cardTasks = rawCards.map(async (card) => {
+    return processCard(card, rawCards);
+  });
+  const cards = await Promise.all(cardTasks);
+
+  const page = fetchPage(locale, pageName);
+
+  const contentList = page.data['layout_list']?.map((layout) =>
+    componentMapper(layout, cards),
+  );
+
+  return {
+    contentList,
+  };
+};

homepage/src/pages/404.jsx

@@ -1,17 +1,11 @@
 import Head from 'next/head';
+import { getLayout } from '../lib/getLayout';
 
 /**
  *
  * @type {import('next').GetStaticProps}
  */
 export const getStaticProps = async ({ locale }) => {
-  const homepage = {
-    en: 'Home',
-    'zh-tw': '首頁',
-  };
-
-  const navigationList = [{ link: `/`, text: homepage[locale] }];
-
   const headInfo = {
     title: {
       en: `OpenStarTerVillage - Page Not Found`,
@@ -28,13 +22,16 @@ export const getStaticProps = async ({ locale }) => {
     `,
   };
 
+  const layout = await getLayout(locale);
+
   return {
     props: {
-      navigationList,
       headInfo: {
         title: headInfo.title[locale],
+        description: '',
       },
       desc: desc[locale],
+      layout,
     },
   };
 };
@@ -43,7 +40,7 @@ const NotFoundPage = ({ headInfo, desc }) => (
   <>
     <Head>
       <title>{headInfo.title}</title>
-      <meta name="description" content="" />
+      <meta name="description" content={headInfo.description} />
     </Head>
     <div className="site-container not-found-page">
       <div className="container text-center">

homepage/src/pages/_app.jsx

@@ -31,7 +31,7 @@ const siteDataDictionary = {
 
 const getDefaultLayout = (page, pageProps, siteData) => {
   return (
-    <SiteLayout nav={pageProps.navigationList} siteData={siteData} pageProps={pageProps}>
+    <SiteLayout siteData={siteData} pageProps={pageProps} {...pageProps.layout}>
       {page}
     </SiteLayout>
   );