Merge branch 'main' into feat/add-logo-data-in-cms-footer-collection

homepage/_cards/en/公務員.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - civil servants
 ---
-Public Servant

homepage/_cards/en/工程師.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - engineer
 ---
-Engineer

homepage/_cards/en/文字工作者.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - writer
 ---
-Copywriter

homepage/_cards/en/法務人員.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - legal
 ---
-Legal Personnel

homepage/_cards/en/美術設計.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - designer
 ---
-AD

homepage/_cards/en/行銷公關.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - marketing
 ---
-Marketing PR

homepage/_cards/en/議題工作者.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - advocator
 ---
-Advocator

homepage/_cards/zh-tw/公務員.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - civil servants
 ---
-公務

homepage/_cards/zh-tw/工程師.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - engineer
 ---
-工程

homepage/_cards/zh-tw/文字工作者.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - writer
 ---
-文字

homepage/_cards/zh-tw/法務人員.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - legal
 ---
-法務

homepage/_cards/zh-tw/美術設計.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - designer
 ---
-美術

homepage/_cards/zh-tw/行銷公關.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - marketing
 ---
-行銷

homepage/_cards/zh-tw/議題工作者.md

@@ -7,4 +7,3 @@ type: job
 tags:
   - advocator
 ---
-議題

homepage/_pages/zh-tw/index.md

@@ -44,22 +44,13 @@ layout_list:
     title: 桌遊用途
     columns:
       - title: 教學教材
-        text: |-
-          ###  
-
-          無論大學、高中課程，教學簡報配合桌遊，輕鬆認識開源觀念，提升公民行動力！
+        text: 無論大學、高中課程，教學簡報配合桌遊，輕鬆認識開源觀念，提升公民行動力！
         image: /images/uploads/pxl_20230508_052023298.jpg
       - title: 社群推坑
-        text: |-
-          ###  
-
-          已是開源老手、社群活躍成員的你，想要不費吹灰之力吸收新血？揪團玩就對了！
+        text: 已是開源老手、社群活躍成員的你，想要不費吹灰之力吸收新血？揪團玩就對了！
         image: /images/uploads/pxl_20230730_051310179.jpeg
       - title: 破冰團康
-        text: |-
-          ###  
-
-          社團活動怎麼帶？利用星手村桌遊，輕鬆達到破冰與理念推廣。學弟學妹揪起來！
+        text: 社團活動怎麼帶？利用星手村桌遊，輕鬆達到破冰與理念推廣。學弟學妹揪起來！
         image: /images/uploads/img_3763.jpeg
   - type: layout_section
     title: 桌遊背後的故事

homepage/public/css/style.css

@@ -963,9 +963,6 @@ code {
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
-  .avatar-tablet {
-    transform: translate(-13%);
-  }
 }
 @media only screen and (max-width: 767px) {
   .container {

homepage/src/CMS/DecapCms.jsx

@@ -0,0 +1,51 @@
+import dynamic from 'next/dynamic';
+import PagePreview from './preview/PagePreview';
+import FooterPreview from './preview/FooterPreview';
+import CardPreview from './preview/CardPreview';
+
+import config from './config.json';
+
+const withAssetsByLocale = (Component, assetsByLocale) => {
+  const WrappedComponent = (props) => (
+    <Component {...props} assetsByLocale={assetsByLocale} />
+  );
+  WrappedComponent.displayName = `withAssetsByLocale(${Component.displayName})`;
+  return WrappedComponent;
+};
+
+const DecapCms = (assetsByLocale) =>
+  dynamic(
+    () =>
+      import('decap-cms-app').then((cms) => {
+        cms.init({ config });
+        cms.registerPreviewStyle(
+          'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
+        );
+        cms.registerPreviewStyle(
+          'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css',
+        );
+        cms.registerPreviewStyle(
+          'https://fonts.googleapis.com/css?family=Montserrat:400,700',
+        );
+        cms.registerPreviewStyle(
+          'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700',
+        );
+        cms.registerPreviewStyle('/css/style.css');
+
+        cms.registerPreviewTemplate(
+          'pages',
+          withAssetsByLocale(PagePreview, assetsByLocale),
+        );
+        cms.registerPreviewTemplate(
+          'footer',
+          withAssetsByLocale(FooterPreview, assetsByLocale),
+        );
+        cms.registerPreviewTemplate(
+          'cards',
+          withAssetsByLocale(CardPreview, assetsByLocale),
+        );
+      }),
+    { ssr: false, loading: () => <p>Loading...</p> },
+  );
+
+export default DecapCms;

homepage/src/pages/admin/config.json → homepage/src/CMS/config.json

@@ -36,7 +36,11 @@
         },
         { "label": "Name", "name": "name", "widget": "string", "i18n": true },
         {
-          "label": "Page order", "name": "page_order", "widget": "number", "value_type": "int", "i18n": "duplicate"
+          "label": "Page order",
+          "name": "page_order",
+          "widget": "number",
+          "value_type": "int",
+          "i18n": "duplicate"
         },
         {
           "label": "Layout & Content",
@@ -294,6 +298,7 @@
           "label": "Content",
           "name": "body",
           "widget": "markdown",
+          "required": false,
           "i18n": true
         }
       ]

homepage/src/CMS/preview/CardPreview.jsx

@@ -0,0 +1,18 @@
+import Card from '../../components/cards/card';
+import { processCard } from '../../lib/processCard';
+
+const CardPreview = ({ entry, getAsset, assetsByLocale }) => {
+  const locale = 'en';
+  const assets = assetsByLocale[locale];
+
+  const data = entry.getIn(['data']).toJS();
+  const content = data.body;
+
+  const card = processCard({ data, content }, assets.cards);
+
+  card.data.image = getAsset(card.data.image).toString();
+
+  return <Card card={card} />;
+};
+
+export default CardPreview;

homepage/src/CMS/preview/FooterPreview.jsx

@@ -0,0 +1,17 @@
+import FooterLinks from '../../layouts/footer/footerLinks';
+
+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} />;
+};
+
+export default FooterPreview;

homepage/src/CMS/preview/PagePreview.jsx

@@ -0,0 +1,16 @@
+import { componentMapper } from '../../lib/componentMapper';
+import contentMapper from '../../layouts/contentMapper';
+
+const PagePreview = ({ entry, assetsByLocale }) => {
+  const locale = 'en';
+  const assets = assetsByLocale[locale];
+
+  const layoutList = entry.getIn(['data', 'layout_list']);
+  const sections = layoutList?.map((layout) => {
+    const component = componentMapper(layout.toJS(), assets.cards);
+    return contentMapper(component);
+  });
+  return <div>{sections}</div>;
+};
+
+export default PagePreview;

homepage/src/components/cards/defaultCard.jsx

@@ -15,7 +15,7 @@ const DefaultCard = ({ card }) => (
       <h3>{card.data.title}</h3>
       <div className="d-flex flex-column">
         <div
-          className="avatar avatar-tablet"
+          className="avatar"
           style={{ backgroundColor: card.data.color.avatar }}
         >
           <div className="image-container">

homepage/src/pages/admin.jsx

@@ -0,0 +1,57 @@
+import Head from 'next/head';
+import Script from 'next/script';
+
+import { fetchCards } from '../lib/fetchCards';
+import { processCard } from '../lib/processCard';
+import DecapCms from '../CMS/DecapCms';
+
+/**
+ *
+ * @type {import('next').GetStaticProps}
+ */
+export const getStaticProps = async ({ locales }) => {
+  const assetsTasks = locales.map(async (locale) => {
+    const rawCards = fetchCards(locale);
+    const cardTasks = rawCards.map(async (card) => {
+      return processCard(card, rawCards);
+    });
+    const cards = await Promise.all(cardTasks);
+
+    return {
+      locale,
+      cards,
+    };
+  });
+
+  const assets = await Promise.all(assetsTasks);
+  const assetsByLocale = assets.reduce((assets, asset) => {
+    assets[asset.locale] = asset;
+    return assets;
+  }, {});
+
+  return {
+    props: {
+      assetsByLocale,
+    },
+  };
+};
+
+const Admin = ({ assetsByLocale }) => {
+  const Cms = DecapCms(assetsByLocale);
+  return (
+    <>
+      <Head>
+        <title>Content Manager</title>
+      </Head>
+      <Script
+        id="netlify-identity-widget"
+        src="https://identity.netlify.com/v1/netlify-identity-widget.js"
+      />
+      <Cms />
+    </>
+  );
+};
+
+export default Admin;
+
+Admin.getLayout = (page) => page;