Introduce News page

gatsby-config.js

@@ -11,6 +11,17 @@ module.exports = {
     "gatsby-plugin-catch-links",
     "gatsby-plugin-netlify",
     "gatsby-plugin-nprogress",
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        base64Width: 20,
+        forceBase64Format: `png`,
+        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
+        stripMetadata: true,
+        defaultQuality: 50,
+        failOnError: true,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

gatsby-node.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const createPaginatedPages = require("gatsby-paginate");
+const _ = require('lodash');
 
 const createMetaPage = ({
   type,
@@ -10,7 +11,7 @@ const createMetaPage = ({
   pathPrefix
 }) => {
   const itemTemplate = path.resolve(itemPageTemplate);
-  const listTamplate = path.resolve(listPageTemplate);
+  const listTemplate = path.resolve(listPageTemplate);
 
   const map = {};
   const items = [];
@@ -29,7 +30,7 @@ const createMetaPage = ({
 
   createPage({
     path: `${pathPrefix}/`,
-    component: listTamplate,
+    component: listTemplate,
     context: { type, items }
   });
 
@@ -61,7 +62,7 @@ exports.createSchemaCustomization = ({ actions }) => {
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions;
 
-  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
+  const postTemplate = path.resolve(`src/templates/post.js`);
 
   return graphql(`
     {
@@ -90,42 +91,53 @@ exports.createPages = ({ actions, graphql }) => {
       return Promise.reject(result.errors);
     }
     const { edges } = result.data.allMarkdownRemark;
+    const allowedCategories = ['update', 'blog post']
+
+    edges.forEach(({ node }) => {
+      node.frontmatter.categories.forEach(category => {
+        if(!allowedCategories.includes(category.toLowerCase())) {
+          return Promise.reject(`Category - ${category} is not allowed in the posts`);
+        }
+      })
+    })
 
     createPaginatedPages({
       createPage,
       edges,
-      pageTemplate: path.resolve(`src/templates/blog.js`),
-      paginatePost: "/blog", // old field. not remove
-      pathPrefix: "/blog", // new field. not remove
+      pageTemplate: path.resolve(`src/templates/news.js`),
+      paginatePost: "/news", // old field. not remove
+      pathPrefix: "/news", // new field. not remove
       pageLength: 8
     });
 
-    createMetaPage({
-      createPage,
-      edges,
-      type: "tags",
-      listPageTemplate: path.resolve(`src/templates/categories.js`),
-      itemPageTemplate: path.resolve(`src/templates/category.js`),
-      pathPrefix: "/blog/tags"
-    });
-
-    createMetaPage({
-      createPage,
-      edges,
-      type: "categories",
-      listPageTemplate: path.resolve(`src/templates/categories.js`),
-      itemPageTemplate: path.resolve(`src/templates/category.js`),
-      pathPrefix: "/blog/categories"
-    });
-
     edges.forEach(({ node }) => {
       createPage({
         path: node.frontmatter.path,
-        component: blogPostTemplate,
+        component: postTemplate,
         context: {}
       });
     });
 
+    const tags = _(edges)
+      .map((item) => _.get(item, ['node', 'frontmatter', 'tags'], []))
+      .flatten()
+      .map((item) => item.toLowerCase().replace(' ', '-'))
+      .uniq()
+      .value();
+
+    tags.forEach(tag => {
+      const filteredEdges = edges.filter(({ node }) => node.frontmatter.tags.map(tag => tag.toLowerCase().replace(' ', '-')).includes(tag))
+
+      createPaginatedPages({
+        createPage,
+        edges: filteredEdges,
+        pageTemplate: path.resolve(`src/templates/news.js`),
+        paginatePost: `/news/tags/${tag}`, // old field. not remove
+        pathPrefix: `/news/tags/${tag}`, // new field. not remove
+        pageLength: 8
+      });
+    });
+
     return Promise.resolve();
   });
 };

package.json

@@ -28,6 +28,7 @@
     "gatsby-transformer-remark": "^2.8.28",
     "infinite-react-carousel": "^1.2.11",
     "lodash": "^4.17.20",
+    "node-html-parser": "^2.0.0",
     "nuka-carousel": "^4.7.1",
     "prismjs": "^1.21.0",
     "react": "^16.13.1",

scripts/parse-html.js

@@ -1,23 +1,53 @@
 module.exports = post => {
+  const nhp = require('node-html-parser')
   const { html } = post;
   const normalizedHtml = html.trim();
   const regex = /<p>{{\s*preview\s*}}<\/p>([\s\S]*)<p>{{\s*\/\s*preview\s*}}<\/p>([\s\S]*)/gi;
   const matches = regex.exec(normalizedHtml);
 
+  const parsedToPreviewImageHtml = (parsed) => {
+    const firstImageHtml = parsed.querySelector('.gatsby-resp-image-link');
+    const firstManualLinkImageHtml = parsed.querySelector('a img.gatsby-resp-image-image');
+    const firstManualOgLinkImageHtml = parsed.querySelector('a.ogpreview img.gatsby-resp-image-image');
+
+    if (firstManualOgLinkImageHtml) {
+      return firstManualOgLinkImageHtml.parentNode.parentNode.outerHTML;
+    } else if(firstManualLinkImageHtml) {
+      return firstManualLinkImageHtml.parentNode.parentNode.outerHTML;
+    }
+
+    return firstImageHtml ? firstImageHtml.outerHTML : null;
+  }
+
+  const parsedToPreviewDescription = (parsed) => {
+    const textNode = Array
+      .from(parsed.querySelectorAll('p'))
+      .find((elem) => (elem.textContent || elem.text).trim().length > 0);
+
+    return (textNode.textContent || textNode.text).slice(0, 133) + '...';
+  }
+
   if (!matches || matches.index > 0) {
+    const parsed = nhp.parse(normalizedHtml);
+
     return {
       hasPreview: false,
       previewHtml: normalizedHtml,
-      mainHtml: normalizedHtml
+      mainHtml: normalizedHtml,
+      previewImageHtml: parsedToPreviewImageHtml(parsed),
+      previewDescription: parsedToPreviewDescription(parsed),
     };
   }
 
   const previewHtmlMatch = matches[1];
   const mainHtmlMatch = matches[2];
+  const parsed = nhp.parse(previewHtmlMatch);
 
   return {
     hasPreview: true,
     previewHtml: previewHtmlMatch,
-    mainHtml: mainHtmlMatch
+    mainHtml: mainHtmlMatch,
+    previewImageHtml: parsedToPreviewImageHtml(parsed),
+    previewDescription: parsedToPreviewDescription(parsed),
   };
 };

src/layouts/index.js

@@ -17,15 +17,16 @@ const InfoDisclaimer = () => (
 const HeaderDesktop = () => (
   <div className="header desktop">
     <Link to="/" className="headerLogoLink">
-      <img className="headerLogo" src={require("../assets/logo.png")} />
+      <img className="headerLogo" src={require("../assets/logo.png")} width="109px" height="38px" />
     </Link>
     <nav className="headerNav">
+      <Link to="/news">News</Link>
       <Link to="/what-is-ebpf">What is eBPF?</Link>
       <Link to="/projects">Projects</Link>
       <a href="/slack">Slack</a>
       <Link to="/contribute">Contribute</Link>
       <a href="https://www.cilium.io">
-        <img src={require("../assets/cilium_logo.png")} height="50px" />
+        <img src={require("../assets/cilium_logo.png")} width="46px" height="50px" />
       </a>
     </nav>
   </div>
@@ -47,7 +48,7 @@ class HeaderMobile extends React.Component {
       <div className="header mobile">
         <div className="row">
           <Link to="/" className="headerLogoLink">
-            <img className="headerLogo" src={require("../assets/logo.png")} />
+            <img className="headerLogo" src={require("../assets/logo.png")} width="109px" height="38px" />
           </Link>
           <div
             className={`menu-icon ${opened && "open"}`}
@@ -60,6 +61,7 @@ class HeaderMobile extends React.Component {
         </div>
         {opened && (
           <nav className="headerNav">
+            <Link to="/news">News</Link>
             <Link to="/what-is-ebpf">What is eBPF?</Link>
             <Link to="/projects">Projects</Link>
             <a href="/slack">Slack</a>
@@ -78,6 +80,9 @@ const FooterDesktop = () => (
   <div className="footer desktop">
     <div className="section">
       <div className="items">
+        <Link to="/news" className="item">
+          News
+        </Link>
         <Link to="/what-is-ebpf" className="item">
           What is eBPF?
         </Link>

src/posts/2020-10-09-cilium-in-alibaba-cloud/index.md

@@ -0,0 +1,30 @@
+---
+path: "/blog/2020/10/09/cilium-in-alibaba-cloud"
+date: "2020-10-09T09:00:00.000Z"
+isPopular: true
+title: "The very first blog post"
+categories:
+  - Blog post
+tags:
+  - Kubernetes
+  - eBPF
+  - BPF
+---
+
+{{preview}}
+
+![](ebpf_service_performance.png)
+
+We will not attempt to close the gap with the former series, the eBPF community
+has been way too active. We will instead focus on the latest news over October,
+November 2020, there is plenty to list. From new tutorials to academic research
+and kernel discussions, everyone should find a good read or two!
+
+{{/preview}}
+
+[_Fuzzing for eBPF JIT bugs in the Linux kernel_](https://scannell.me/fuzzing-for-ebpf-jit-bugs-in-the-linux-kernel/),
+from Simon Scannell.
+Fuzzing tools are very helpful to discover bugs in software, and the eBPF
+subsystem is no exception. This write-up details the architecture and the
+generator used to build such a fuzzer, and explains how it let to the
+discovery of a kernel vulnerability. The kernel has been patched since then.