refactor: remove tags and update categories

gatsby-config.js

@@ -158,7 +158,6 @@ module.exports = {
                         date
                         path
                         title
-                        tags
                       }
                     }
                   }

gatsby-node.js

@@ -107,7 +107,6 @@ exports.createPages = ({ actions, graphql }) => {
               externalUrl
               path
               title
-              tags
             }
           }
         }
@@ -125,6 +124,7 @@ exports.createPages = ({ actions, graphql }) => {
       "engineering",
       "security",
       "community",
+      "external"
     ];
 
     edges.forEach(({ node }) => {
@@ -160,24 +160,26 @@ exports.createPages = ({ actions, graphql }) => {
       });
     });
 
-    const tags = _(edges)
-      .map((item) => _.get(item, ["node", "frontmatter", "tags"], []))
+    const categories = _(edges)
+      .map((item) => _.get(item, ["node", "frontmatter", "categories"], []))
       .flatten()
       .map((item) => createTags(item))
       .uniq()
       .value();
 
-    tags.forEach((tag) => {
+    categories.forEach((category) => {
       const filteredEdges = edges.filter(({ node }) =>
-        node.frontmatter.tags.map((tag) => createTags(tag)).includes(tag)
+        node.frontmatter.categories
+          .map((category) => createTags(category))
+          .includes(category)
       );
 
       createPaginatedPages({
         createPage,
         edges: filteredEdges,
         pageTemplate: path.resolve(`src/templates/blog.js`),
-        paginatePost: `/blog/tags/${tag}`, // old field. not remove
-        pathPrefix: `/blog/tags/${tag}`, // new field. not remove
+        paginatePost: `/blog/categories/${category}`, // old field. not remove
+        pathPrefix: `/blog/categories/${category}`, // new field. not remove
         pageLength: 8,
       });
     });

src/common/blog-post/Post.js

@@ -27,6 +27,7 @@ const TableOfContents = () => {
       });
     setToc(toc);
   });
+  console.log(toc);
 
   return (
     <Fragment>
@@ -50,7 +51,7 @@ const TableOfContents = () => {
 };
 
 const Post = ({ post, full }) => {
-  const tags = post.frontmatter.tags || [];
+  const categories = post.frontmatter.categories || [];
   const { hasPreview, previewHtml, mainHtml, previewDescription } =
     parseHtml(post);
 
@@ -60,20 +61,20 @@ const Post = ({ post, full }) => {
     <div className='blog-post' key={post.id}>
       <header className='blog-header'>
         <h1 className='blog-title'>{post.frontmatter.title}</h1>
-        <div className='blog-tags-and-date'>
+        <div className='blog-categories-and-date'>
           <span className='blog-date'>{formatPostDate(post)}</span>
-          {tags.length > 0 && (
-            <div className='blog-post-tags'>
-              {tags.map(
-                (tag, i) =>
-                  tag !== "_" && (
-                    <span className='blog-post-tag' key={tag}>
+          {categories.length > 0 && (
+            <div className='blog-post-categories'>
+              {categories.map(
+                (category, i) =>
+                  category !== "_" && (
+                    <span className='blog-post-category' key={category}>
                       <a
-                        href={`/blog/tags/${tag
+                        href={`/blog/categories/${category
                           .toLowerCase()
                           .replace(" ", "-")}`}
                       >
-                        {tag}
+                        {category}
                       </a>
                     </span>
                   )

src/common/blog-post/PostCard.js

@@ -8,7 +8,7 @@ const formatPostDate = (post) =>
   format(parseISO(post.frontmatter.date), "MMMM d, yyyy");
 
 const PostCard = ({ post, full }) => {
-  const tags = post.frontmatter.tags || [];
+  const categories = post.frontmatter.categories || [];
   const { hasPreview, previewHtml, mainHtml, previewDescription } =
     parseHtml(post);
 
@@ -36,18 +36,25 @@ const PostCard = ({ post, full }) => {
           Read more
           <span className='link-triangle' />
         </a>
-        <div className='blog-tags-and-date'>
+        <div className='blog-categories-and-date'>
           <span className='blog-date'>{formatPostDate(post)}</span>
-          {tags.length > 0 && (
-            <div className='blog-post-tags'>
-              {tags.map(
-                (tag, i) =>
-                  tag !== "_" && (
-                    <span className='blog-post-tag' key={tag}>
-                      <a href={`/blog/tags/${createTags(tag)}`}>{tag}</a>
+          {categories.length > 0 && (
+            <div className='blog-post-categories'>
+              {categories.map(
+                (category, i) =>
+                  category !== "_" && (
+                    <span className='blog-post-category' key={category}>
+                      <a href={`/blog/categories/${createTags(category)}`}>
+                        {category}
+                      </a>
                     </span>
                   )
               )}
+              {url && (
+                <span className='blog-post-category'>
+                  External
+                </span>
+              )}
             </div>
           )}
         </div>

src/pages/index.en.js

@@ -211,7 +211,6 @@ export const pageQuery = graphql`
             date
             path
             title
-            tags
           }
         }
       }

src/pages/index.fr-fr.js

@@ -204,7 +204,6 @@ export const pageQuery = graphql`
             date
             path
             title
-            tags
           }
         }
       }

src/pages/index.zh-cn.js

@@ -178,7 +178,6 @@ export const pageQuery = graphql`
             date
             path
             title
-            tags
           }
         }
       }

src/posts/2020-11-20-ebpf-updates/index.md

@@ -2,8 +2,6 @@
 path: "/blog/ebpf-updates-intro"
 date: "2020-11-20T10:00:00.000Z"
 title: "eBPF Updates #1: eBPF Summit Coverage, libbpf 0.2, BTF Developments, Bulk API for XDP, Local Task Storage for eBPF LSM"
-tags:
-  - Update
 categories:
   - Update
 ---

src/posts/2020-12-21-ebpf-updates/index.md

@@ -2,8 +2,6 @@
 path: "/blog/ebpf-updates-2020-12"
 date: "2020-12-18T10:00:00.000Z"
 title: "eBPF Updates #2: eBPF with Zig, libbpf-bootstrap, Rust Linker, BTF in Kernel Modules, Cgroup-Based Memory Accounting"
-tags:
-  - Update
 categories:
   - Update
 ---

src/posts/2021-01-22-ebpf-updates/index.md

@@ -2,8 +2,6 @@
 path: "/blog/ebpf-updates-2021-01"
 date: "2021-01-22T10:00:00.000Z"
 title: "eBPF Updates #3: Atomics Operations, Socket Options Retrieval, Syscall Tracing Benchmarks, eBPF in the Supply Chain"
-tags:
-  - Update
 categories:
   - Update
 ---

src/posts/2021-02-23-ebpf-updates/index.md

@@ -3,8 +3,6 @@ path: "/blog/ebpf-updates-2021-02"
 date: "2021-02-23T10:00:00.000Z"
 title: "eBPF Updates #4: In-Memory Loads Detection, Debugging QUIC, Local CI Runs, MTU Checks, but No Pancakes"
 toc: true
-tags:
-  - Update
 categories:
   - Update
 ---

src/posts/2021-05-04/index.md

@@ -3,8 +3,6 @@ path: "/blog/ebpf-updates-2021-05"
 date: "2021-05-04T10:00:00.000Z"
 title: "eBPF Updates #5: CNCF Proposals, Kinvolk Acquired, eCHO, the Cost of Tail Calls, Systemd Features, Reverse Debugging, Static Linking"
 toc: true
-tags:
-  - Update
 categories:
   - Update
 ---

src/posts/2022-08-22-journey/index.md

@@ -2,8 +2,6 @@
 date: "2022-08-22T17:00:00.000Z"
 title: "Journey to libbpf 1.0"
 externalUrl: "https://nakryiko.com/posts/libbpf-v1/"
-tags:
-  - External
 categories:
   - Technology
 ---

src/stylesheets/blog.scss

@@ -71,7 +71,7 @@ $tablet: "screen and (max-width : 900px)";
     }
   }
 
-  .blog-tags-and-date {
+  .blog-categories-and-date {
     display: flex;
     align-items: center;
 
@@ -86,7 +86,7 @@ $tablet: "screen and (max-width : 900px)";
       align-items: flex-end;
     }
 
-    .blog-post-tags {
+    .blog-post-categories {
       margin-left: 20px;
       display: flex;
       align-items: center;
@@ -95,7 +95,7 @@ $tablet: "screen and (max-width : 900px)";
         margin-top: 12px;
       }
 
-      .blog-post-tag {
+      .blog-post-category {
         margin-right: 10px;
         font-size: 15px;
         line-height: 15px;
@@ -257,38 +257,6 @@ $tablet: "screen and (max-width : 900px)";
       transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
     }
   }
-
-  .blog-post-categories {
-    font-size: 11px;
-    line-height: 20px;
-    font-weight: 700;
-
-    a {
-      display: inline-block;
-      padding: 0 7px;
-      border-radius: 3px;
-      color: #8d8d8d;
-      background-color: #eaeaea;
-      text-decoration: none;
-
-      &:hover {
-        color: #9c9c9c;
-        background-color: rgb(231, 231, 231);
-      }
-    }
-  }
-
-  .blog-post-categories {
-    margin-bottom: 25px;
-
-    .blog-post-category {
-      margin-right: 10px;
-      text-transform: uppercase;
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
 }
 
 .blog-toc {
@@ -425,7 +393,7 @@ $tablet: "screen and (max-width : 900px)";
   }
 }
 
-.tags-list {
+.categories-list {
   max-width: 800px;
   padding: 0 40px !important;
   margin-top: 39px !important;
@@ -436,7 +404,7 @@ $tablet: "screen and (max-width : 900px)";
     margin-bottom: 30px;
   }
 
-  .tags-list-title {
+  .categories-list-title {
     margin-bottom: 25px;
     font-size: 14px;
     line-height: 24px;
@@ -454,14 +422,14 @@ $tablet: "screen and (max-width : 900px)";
     }
   }
 
-  .tags-post-date {
+  .categories-post-date {
     font-size: 12px;
     line-height: 24px;
     font-weight: 700;
     color: #8d8d8d;
   }
 
-  .tags-post-title {
+  .categories-post-title {
     font-size: 16px;
     line-height: 36px;
     font-weight: 700;

src/templates/post.js

@@ -49,7 +49,6 @@ export const pageQuery = graphql`
       html
       frontmatter {
         categories
-        tags
         date
         path
         title

src/utils/createTags.js

@@ -1,5 +1,5 @@
-function createTags(tags) {
-  return tags.toLowerCase().replace(" ", "-");
+function createTags(categories) {
+  return categories.toLowerCase().replace(" ", "-");
 }
 
 module.exports.createTags = createTags;