feat(navigation): better navigation components (nodejs#2910)

Author: ovflowd

content/blog/vulnerabilities/2022-01-11-jan-2022-security-releases.md renamed to content/blog/vulnerability/2022-01-11-jan-2022-security-releases.md

@@ -1,7 +1,7 @@
 ---
 title: January 10th 2022 Security Releases
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## _(Update 10-Jan-2022)_ Security releases available

content/blog/vulnerabilities/2022-03-18-mar-2022-security-releases.md renamed to content/blog/vulnerability/2022-03-18-mar-2022-security-releases.md

@@ -1,7 +1,7 @@
 ---
 title: OpenSSL security releases require Node.js security releases
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 # _(Update 18-Mar-2022)_ Security releases available

content/blog/vulnerabilities/2022-05-05-openssl-fixes-in-regular-releases-may2022.md renamed to content/blog/vulnerability/2022-05-05-openssl-fixes-in-regular-releases-may2022.md

@@ -1,7 +1,7 @@
 ---
 title: OpenSSL update assessment, and Node.js project plans
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## Summary

content/blog/vulnerabilities/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md renamed to content/blog/vulnerability/2022-06-21-openssl-fixes-in-regular-releases-jun2022.md

@@ -1,7 +1,7 @@
 ---
 title: OpenSSL update assessment, and Node.js project plans
 blogAuthors: ['node-js-website']
-category: 'vulnerabilities'
+category: vulnerability
 ---
 
 ## Summary

gatsby-config.js

@@ -24,7 +24,6 @@ const gatsbyFsMarkdownSources = markdownSources.map(name => ({
 }));
 
 const gatsbyConfig = {
-  flags: { FAST_DEV: true },
   pathPrefix: process.env.PATH_PREFIX,
   siteMetadata: {
     title: config.title,

gatsby-node.js

@@ -8,9 +8,9 @@ const createSlug = require('./util-node/createSlug');
 const getNodeReleasesData = require('./util-node/getNodeReleasesData');
 const getBannersData = require('./util-node/getBannersData');
 const getNvmData = require('./util-node/getNvmData');
-const createBlogQuery = require('./util-node/createBlogQuery');
-const createLearnQuery = require('./util-node/createLearnQuery');
-const createApiQuery = require('./util-node/createApiQuery');
+const createBlogQuery = require('./util-node/queries/createBlogQuery');
+const createLearnQuery = require('./util-node/queries/createLearnQuery');
+const createApiQuery = require('./util-node/queries/createApiQuery');
 const createBlogPages = require('./util-node/createBlogPages');
 const createLearnPages = require('./util-node/createLearnPages');
 const createApiPages = require('./util-node/createApiPages');
@@ -47,12 +47,27 @@ const getMessagesForLocale = locale =>
 const getRedirectForLocale = (locale, url) =>
   /^\/\/|https?:\/\//.test(url) ? url : `/${locale}${url}`;
 
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ plugins, actions, stage, getConfig }) => {
   actions.setWebpackConfig({
     plugins: [
       plugins.ignore({ resourceRegExp: /canvas/, contextRegExp: /jsdom$/ }),
     ],
   });
+
+  if (stage === 'develop' || stage === 'build-javascript') {
+    const config = getConfig();
+
+    const miniCssExtractPlugin = config.plugins.find(
+      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
+    );
+
+    if (miniCssExtractPlugin) {
+      // We don't care about the order of CSS imports as we use CSS Modules
+      miniCssExtractPlugin.options.ignoreOrder = true;
+    }
+
+    actions.replaceWebpackConfig(config);
+  }
 };
 
 exports.createSchemaCustomization = ({ actions }) => {
@@ -103,7 +118,8 @@ exports.createPages = async ({ graphql, actions }) => {
     nodeReleases: { nodeReleasesData, apiAvailableVersions },
   } = apiResult.data;
 
-  const { blogPages } = createBlogPages(blogEdges);
+  const { blogPages, blogPosts, getPaginatedPosts } =
+    createBlogPages(blogEdges);
 
   const { learnPages, navigationData: learnNavigationData } = createLearnPages(
     learnEdges,
@@ -123,12 +139,6 @@ exports.createPages = async ({ graphql, actions }) => {
     context: { ...learnPages[0], navigationData: learnNavigationData },
   });
 
-  createPage({
-    path: blogPath,
-    component: blogTemplate,
-    context: { categories: categoryEdges, posts: blogEdges },
-  });
-
   learnPages.forEach(page => {
     createPage({
       path: page.slug,
@@ -141,20 +151,40 @@ exports.createPages = async ({ graphql, actions }) => {
     createPage({
       path: page.slug,
       component: postTemplate,
-      // Get the latest 10 blog posts
-      context: { ...page, recent: blogEdges.slice(0, 10) },
+      // Get the latest 10 blog posts for the Recent Posts section
+      context: { ...page, recent: blogPosts.slice(0, 10) },
     });
   });
 
-  categoryEdges.forEach(({ node }) => {
-    const posts = blogEdges.filter(
-      ({ node: item }) => item.fields.categoryName === node.name
-    );
+  // This default category acts as a "hack" for creating the default
+  // `/blog` page (aka the "Everything" category)
+  const defaultCategory = { node: { name: null } };
 
-    createPage({
-      path: `${blogPath}${node.name}/`,
-      component: blogTemplate,
-      context: { categories: categoryEdges, category: node, posts },
+  [defaultCategory, ...categoryEdges].forEach(({ node }) => {
+    const paginatedPosts = getPaginatedPosts(node.name);
+
+    const getPaginationData = current => ({
+      current: current + 1,
+      total: paginatedPosts.length,
+    });
+
+    const getBlogPagePath = index => {
+      const categoryPath = node.name ? `${blogPath}${node.name}/` : blogPath;
+
+      return index === 0 ? categoryPath : `${categoryPath}page/${index + 1}/`;
+    };
+
+    paginatedPosts.forEach((currentPagePosts, index) => {
+      createPage({
+        path: getBlogPagePath(index),
+        component: blogTemplate,
+        context: {
+          category: node.name ? node : null,
+          categories: categoryEdges,
+          posts: currentPagePosts,
+          pagination: getPaginationData(index),
+        },
+      });
     });
   });
 

package-lock.json

@@ -55,6 +55,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.4.0",
     "react-intl": "^6.1.1",
+    "react-scroll": "^1.8.7",
     "react-tabs": "5.1.0",
     "reading-time": "^1.5.0",
     "string-similarity": "^4.0.4",
@@ -106,6 +107,7 @@
     "@types/react-click-outside-hook": "^1.0.0",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
+    "@types/react-scroll": "^1.8.4",
     "@types/string-similarity": "^4.0.0",
     "@types/throttle-debounce": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",

package.json

@@ -1,7 +1,7 @@
 import {
   PaginationInfo,
   LearnTemplateContext,
-  NavigationSectionData,
+  NavigationData,
   PostTemplateData,
   PostTemplateContext,
   NodeReleaseData,
@@ -25,39 +25,29 @@ export const createPaginationInfo = (): PaginationInfo =>
     title: 'test-title',
   } as PaginationInfo);
 
-export const createNavigationSectionData = (): NavigationSectionData =>
+export const createNavigationSectionData = (): NavigationData =>
   ({
-    'test-section': {
-      data: [
-        {
-          slug: 'test-slug-1',
-          title: 'test-title-1',
-          category: 'test1',
-        },
-        {
-          title: 'test-title-2',
-          slug: 'test-slug-2',
-          category: 'test1',
-        },
-      ],
-      category: 'test1',
-    },
-    'test-section2': {
-      data: [
-        {
-          slug: 'test-slug-3',
-          title: 'test-title-3',
-          category: 'test2',
-        },
-        {
-          title: 'test-title-4',
-          slug: 'test-slug-4',
-          category: 'test2',
-        },
-      ],
-      category: 'test2',
-    },
-  } as NavigationSectionData);
+    'test-section': [
+      {
+        slug: 'test-slug-1',
+        title: 'test-title-1',
+      },
+      {
+        title: 'test-title-2',
+        slug: 'test-slug-2',
+      },
+    ],
+    'test-section2': [
+      {
+        slug: 'test-slug-3',
+        title: 'test-title-3',
+      },
+      {
+        title: 'test-title-4',
+        slug: 'test-slug-4',
+      },
+    ],
+  } as NavigationData);
 
 export const createLearnPageData = () => ({
   data: {
@@ -134,7 +124,7 @@ export const createBlogPageContext = (): PostTemplateContext => ({
           title: 'title-mock',
           category: {
             name: 'category-mock',
-            slug: 'category-mock-slug',
+            slug: 'blog.title',
           },
           blogAuthors: [
             {