feat: add /news page (#2387)

* add news cover images

* exptract pill filter component

* extract roadmap base card

* news page cards; news have images

* /news page

* update CI with API key

* add share image

* fix build warning

.github/workflows/cd.yml

@@ -68,6 +68,7 @@ jobs:
           CONTENTFUL_HOST: ${{ secrets.CONTENTFUL_HOST }}
           CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
           AIRTABLE_KEY: ${{ secrets.AIRTABLE_SA_PORTAL_SERVICE_ACCOUNT }}
+          YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
 
       - name: Get URL
         id: get-url

.github/workflows/preview-deployment.yml

@@ -78,6 +78,7 @@ jobs:
           CONTENTFUL_HOST: ${{ secrets.CONTENTFUL_HOST }}
           CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
           AIRTABLE_KEY: ${{ secrets.AIRTABLE_SA_PORTAL_SERVICE_ACCOUNT }}
+          YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
           SLACK_TOKEN: ${{ secrets.SLACK_TOKEN }}
 
       - name: Report build error

.github/workflows/update-search.yml

@@ -29,6 +29,7 @@ jobs:
           CONTENTFUL_HOST: ${{ secrets.CONTENTFUL_HOST }}
           CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }}
           AIRTABLE_KEY: ${{ secrets.AIRTABLE_SA_PORTAL_SERVICE_ACCOUNT }}
+          YOUTUBE_API_KEY: ${{ secrets.YOUTUBE_API_KEY }}
 
       - name: Update search index
         run: |

app.env.d.ts

@@ -3,43 +3,13 @@ import {
   NavbarItem,
 } from "@docusaurus/theme-common/src/utils/useThemeConfig";
 import { LinkLikeNavbarItemProps } from "@theme/NavbarItem";
-import { Press } from "./src/components/LandingPage/Hero/News";
 
 declare module "*.png";
 declare module "*.webp";
 declare module "*.svg";
 declare module "*.jpeg";
 declare module "*.jpg";
 
-declare module "@site/.docusaurus/contentful/default/press.json" {
-  const press: Press[];
-  export default press;
-}
-
-declare module "@site/.docusaurus/howitworks-cards/default/howitworks-cards.json" {
-  import { HowItWorksPageData } from "@site/src/components/HowItWorksPage/HowItWorksData";
-  const data: HowItWorksPageData;
-  export default data;
-}
-
-declare module "@site/.docusaurus/roadmap-data/default/roadmap-data.json" {
-  import { RoadmapDomain } from "@site/src/components/RoadmapPage/RoadmapTypes";
-  const data: RoadmapDomain[];
-  export default data;
-}
-
-declare module "@site/.docusaurus/what-is-the-ic-data/default/what-is-the-ic.json" {
-  import { WhatIsIcpTopic } from "./src/components/HowItWorksPage/WhatIsIcpData";
-  const data: WhatIsIcpTopic[];
-  export default data;
-}
-
-declare module "@site/.docusaurus/home-showcase/default/home-showcase.json" {
-  import { ShowcaseProject } from "./src/components/ShowcasePage/ShowcaseProject";
-  const data: ShowcaseProject[];
-  export default data;
-}
-
 declare module "@docusaurus/theme-common" {
   interface ThemeConfig {
     subnav: Omit<Navbar, "items" | "type"> & {

docusaurus.config.js

@@ -36,6 +36,7 @@ const validateShowcasePlugin = require("./plugins/validate-showcase.js");
 const contentfulPlugin = require("./plugins/contentful");
 const snsDataPlugin = require("./plugins/sns-data");
 const airtablePlugin = require("./plugins/airtable");
+const youtubePlugin = require("./plugins/youtube");
 
 const isDeployPreview = !!process.env.PREVIEW_CANISTER_ID;
 
@@ -426,6 +427,11 @@ const marketingNav = {
               href: "/events",
               description: "Meet fellow Web3 enthusiasts",
             },
+            {
+              name: "News",
+              href: "/news",
+              description: "Stay up to date",
+            },
             {
               name: "Community Blog",
               href: "https://medium.com/dfinity",
@@ -506,6 +512,7 @@ const config = {
     contentfulPlugin,
     snsDataPlugin,
     airtablePlugin,
+    youtubePlugin,
     validateShowcasePlugin,
     externalRedirectsPlugin({
       redirects: [...getExternalRedirects(), ...getExactUrlRedirects()],

plugins/airtable.js

@@ -10,7 +10,7 @@ const sharp = require("sharp");
 const downloadFile = require("./utils/download-file");
 
 // const dotenv = require("dotenv");
-// const isDev = process.env.NODE_ENV === "development";
+const isDev = (process.env.NODE_ENV || "development") === "development";
 // dotenv.config({ path: path.join(__dirname, "..", ".env.local") });
 
 const { AIRTABLE_KEY } = process.env;
@@ -228,11 +228,13 @@ const airtablePlugin = async function () {
       const { createData } = actions;
       createData("airtable-events.json", JSON.stringify(content, null, 2));
 
-      // save mock file
-      fs.writeFileSync(
-        path.join(__dirname, "data", "airtable-mock.json"),
-        JSON.stringify(content, null, 2)
-      );
+      if (isDev) {
+        // save mock file
+        fs.writeFileSync(
+          path.join(__dirname, "data", "airtable-mock.json"),
+          JSON.stringify(content, null, 2)
+        );
+      }
     },
 
     async postBuild({ outDir }) {

plugins/contentful.js

@@ -65,7 +65,26 @@ const contentfulPlugin = async function () {
           tags: item.fields.tags || [],
         };
       });
-      press.sort((a, b) => b.date.localeCompare(a.date));
+
+      // from oldest to newest
+      press.sort((a, b) => a.date.localeCompare(b.date));
+
+      // enumerate images in ../static/img/news, with pattern press-*.webp
+      const pressImageUrls = fs
+        .readdirSync(path.join(__dirname, "..", "static", "img", "news"))
+        .filter(
+          (filename) =>
+            filename.startsWith("press-") && filename.endsWith(".webp")
+        )
+        .map((filename) => `/img/news/${filename}`);
+
+      // assign images to press articles, old articles keep their images, new articles get new images
+      press.forEach((news, i) => {
+        news.imageUrl = pressImageUrls[i % pressImageUrls.length];
+      });
+
+      // reverse the order, so that newest articles get the newest images
+      press.reverse();
 
       const data = {
         press,