Merge pull request #237 from ocftw/feature/add-footer-in-cms

Feature/add footer collection in cms

homepage/_footer/en/footer.json

@@ -0,0 +1,22 @@
+{
+  "footer": {
+    "links": [
+      {
+        "display_text": "Rulebook",
+        "url": "/s/manual"
+      },
+      {
+        "display_text": "Admin",
+        "url": "/admin"
+      },
+      {
+        "display_text": "OCF.TW",
+        "url": "https://ocf.tw/"
+      },
+      {
+        "display_text": "Borrow Board Game",
+        "url": "mailto:[email protected]"
+      }
+    ]
+  }
+}

homepage/_footer/zh-tw/footer.json

@@ -0,0 +1,22 @@
+{
+  "footer": {
+    "links": [
+      {
+        "display_text": "遊戲規則書",
+        "url": "/s/manual"
+      },
+      {
+        "display_text": "後台管理",
+        "url": "/admin"
+      },
+      {
+        "display_text": "OCF.TW",
+        "url": "https://ocf.tw/"
+      },
+      {
+        "display_text": "借桌遊",
+        "url": "mailto:[email protected]"
+      }
+    ]
+  }
+}

homepage/src/layouts/footer/footer.jsx

@@ -0,0 +1,40 @@
+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,
+  }));
+  return (
+    <div className="site-footer" id="footer">
+      <div className="container footer-main">
+        <FooterLinks links={links} />
+        <span>{siteData.title}</span>
+        <SocialMedia />
+        <div className="flex flex-row flex-justify-center logos margin-2-percent">
+          <Logo
+            text="Initiator"
+            src="/images/campaignpage/logo__OCF.png"
+            dimension={{ width: 170, height: 34 }}
+          />
+          <Logo
+            text="Sponsor"
+            src="/images/campaignpage/logo__FNF.png"
+            dimension={{ width: 163, height: 45 }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

homepage/src/layouts/footer/footerLinks.jsx

@@ -0,0 +1,19 @@
+import Link from 'next/link';
+
+const FooterLinks = ({ links }) => (
+  <div className="flex flex-row gap">
+    {links.map((link) => (
+      <Link
+        href={link.url}
+        key={link.displayText}
+        target="_blank"
+        rel="noopener noreferrer"
+        locale={false}
+      >
+        {link.displayText}
+      </Link>
+    ))}
+  </div>
+);
+
+export default FooterLinks;

homepage/src/layouts/pageWrapper.jsx

@@ -1,4 +1,4 @@
-import Footer from './footer';
+import Footer from './footer/footer';
 import Header from './header';
 
 const PageWrapper = ({ children, nav, siteData }) => (

homepage/src/pages/_app.jsx

@@ -21,19 +21,11 @@ const siteDataDictionary = {
     title: `OpenStarTerVillage`,
     description: `How can technology change the world? Play this board game and discover the answer for yourself!`,
     logo: `/images/logo.png`,
-    footerLinks: [
-      { link: `/s/manual`, text: `Game Manual` },
-      { link: `/admin`, text: `Admin` },
-    ],
   },
   'zh-tw': {
     title: `開源星手村`,
     description: `科技怎麼改變世界？玩桌遊、就知道！`,
     logo: `/images/logo.png`,
-    footerLinks: [
-      { link: `/s/manual`, text: `遊戲規則書` },
-      { link: `/admin`, text: `管理後台` },
-    ],
   },
 };
 

homepage/src/pages/admin/config.json

@@ -1,5 +1,6 @@
 {
   "cms_manual_init": true,
+  "local_backend": true,
   "backend": {
     "name": "git-gateway",
     "branch": "main"
@@ -404,6 +405,47 @@
         }
       ]
     },
+    {
+      "name": "footer",
+      "label": "Footer",
+      "label_singular": "Footer",
+      "folder": "homepage/_footer",
+      "i18n": true,
+      "create": true,
+      "delete": false,
+      "slug": "footer",
+      "extension": "json",
+      "fields": [
+        {
+          "label": "Footer",
+          "name": "footer",
+          "widget": "object",
+          "i18n": true,
+          "fields": [
+            {
+              "label": "Links",
+              "name": "links",
+              "label_singular": "Link",
+              "widget": "list",
+              "i18n": true,
+              "fields": [
+                {
+                  "label": "Display Text",
+                  "name": "display_text",
+                  "widget": "string"
+                },
+                {
+                  "label": "Url",
+                  "name": "url",
+                  "widget": "string",
+                  "hint": "External link: `https://example.com/path/to/link`, Internal link: `/resouce`, Email: `mailto:[email protected]`"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "kitchenSink",
       "label": "Kitchen Sink",

homepage/src/pages/admin/index.jsx

@@ -9,6 +9,7 @@ import Headline from '../../components/headline';
 import Section from '../../components/section';
 import TwoColumns from '../../components/twoColumns';
 import ThreeColumns from '../../components/threeColumns';
+import FooterLinks from '../../layouts/footer/footerLinks';
 
 const PagePreview = ({ entry }) => {
   const layoutList = entry.getIn(['data', 'layout_list']);
@@ -115,6 +116,22 @@ const PagePreview = ({ entry }) => {
   return <div>{sections}</div>;
 };
 
+const FooterPreview = ({ entry }) => {
+  const footer = entry.getIn(['data', 'footer']);
+  const links = footer
+    ?.get('links')
+    .map((link) => {
+      return {
+        displayText: link.get('display_text')?.toString(),
+        url: link.get('url')?.toString(),
+      };
+    })
+    .toArray();
+  return (
+    <FooterLinks links={links} />
+  );
+};
+
 const CMS = dynamic(
   () =>
     import('decap-cms-app').then((cms) => {
@@ -134,6 +151,7 @@ const CMS = dynamic(
       cms.registerPreviewStyle('/css/style.css');
 
       cms.registerPreviewTemplate('pages', PagePreview);
+      cms.registerPreviewTemplate('footer', FooterPreview);
     }),
   { ssr: false, loading: () => <p>Loading...</p> },
 );