feat:

- update prettier
- update config
- add algolia for searching contents
- refactor duplicate components
- prettify component
- remove unused config
- update design
- remove redundant files
- rename files
- fix search by tags pagination

.prettierrc

@@ -3,5 +3,6 @@
   "semi": true,
   "singleQuote": false,
   "tabWidth": 2,
+  "printWidth": 120,
   "trailingComma": "es5"
 }

config.js

@@ -4,10 +4,9 @@ module.exports = {
   url: "https://ferry.now.sh",
   title: "MR Ferry",
   tagline: "An ISTJ, Type 5, Engineer, Gamer, and Thriller-movies-lover",
-  copyright: "© 2020 mrferry",
+  copyright: `© ${new Date().getFullYear()} Ferry Suhandri.`,
   author: {
     name: "Ferry S",
-    // bio: "An ISTJ, Type 5, Engineer, Gamer & Thriller-movies lover",
     contacts: {
       linkedin: "https://www.linkedin.com/in/7sferry/",
       github: "https://github.com/7sferry",

gatsby-config.js

@@ -1,18 +1,20 @@
 "use strict";
-require('dotenv').config();
+require("dotenv").config();
 const siteConfig = require("./config");
 const contentfulConfig = {
   spaceId: process.env.SPACEID,
   accessToken: process.env.TOKEN,
 };
+const queries = require("./src/utils/Algolia");
 
 module.exports = {
   siteMetadata: {
-    url: siteConfig.url,
+    siteUrl: siteConfig.url,
     title: siteConfig.title,
     tagline: siteConfig.tagline,
     description: `Blog Ferry Suhandri, IT specialist dari Solok, Sumatera Barat`,
     author: siteConfig.author.name,
+    copyright: siteConfig.copyright,
     contacts: {
       linkedin: siteConfig.author.contacts.linkedin,
       github: siteConfig.author.contacts.github,
@@ -21,15 +23,32 @@ module.exports = {
       resume: siteConfig.author.contacts.resume,
       facebook: siteConfig.author.contacts.facebook,
     },
-    labels: siteConfig.labels,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
+    `gatsby-transformer-remark-plaintext`,
+    `gatsby-transformer-sqip`,
     `gatsby-plugin-minify`,
     {
-      resolve: 'gatsby-source-contentful',
+      resolve: `gatsby-plugin-sitemap`,
+      options: {
+        sitemapSize: 5000,
+      },
+    },
+    {
+      resolve: "gatsby-plugin-algolia",
+      options: {
+        appId: process.env.GATSBY_ALGOLIA_APP_ID,
+        apiKey: process.env.GATSBY_ALGOLIA_ADMIN_KEY,
+        indexName: process.env.GATSBY_ALGOLIA_INDEX_NAME,
+        queries,
+        chunkSize: 10000,
+      },
+    },
+    {
+      resolve: "gatsby-source-contentful",
       options: contentfulConfig,
     },
     {
@@ -50,6 +69,7 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          `gatsby-remark-responsive-iframe`,
           {
             resolve: `gatsby-remark-prismjs`,
             options: {
@@ -60,14 +80,24 @@ module.exports = {
               noInlineHighlight: false,
             },
           },
-          `gatsby-remark-responsive-iframe`,
           {
-            resolve: `gatsby-remark-images`,
+            resolve: `gatsby-remark-images-medium-zoom`,
+            options: {
+              margin: 36,
+              scrollOffset: 0,
+              background: "transparent",
+            },
+          },
+          {
+            resolve: `gatsby-remark-images-contentful`,
             options: {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
-              maxWidth: 2000,
+              maxWidth: 1200,
+              linkImagesToOriginal: false,
+              withWebp: true,
+              backgroundColor: "transparent",
             },
           },
         ],
@@ -96,6 +126,6 @@ module.exports = {
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+    `gatsby-plugin-offline`,
   ],
 };

gatsby-node.js

@@ -1,6 +1,6 @@
 const path = require(`path`);
-const { createFilePath } = require(`gatsby-source-filesystem`);
 const _ = require("lodash");
+const siteConfig = require("./config");
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions;
@@ -28,8 +28,13 @@ exports.createPages = ({ graphql, actions }) => {
           reject(result.errors);
         }
 
+        const postSizeByTag = new Map();
         const posts = result.data.allContentfulBlogPost.edges;
         posts.forEach(post => {
+          post.node.tags.forEach(tag => {
+            let count = postSizeByTag.has(tag) ? postSizeByTag.get(tag) + 1 : 1;
+            postSizeByTag.set(tag, count);
+          });
           createPage({
             path: `/blog/${post.node.slug}/`,
             component: blogPost,
@@ -41,7 +46,7 @@ exports.createPages = ({ graphql, actions }) => {
 
         const postsPerPage = 2;
         const numPages = Math.ceil(posts.length / postsPerPage);
-        Array.from({ length: numPages }).forEach((_, i) => {
+        Array.from({ length: numPages }).forEach((value, i) => {
           createPage({
             path: i === 0 ? `/` : `/${i + 1}`,
             component: path.resolve("./src/pages/index.js"),
@@ -52,24 +57,25 @@ exports.createPages = ({ graphql, actions }) => {
           });
         });
 
-    let tags = new Set();
-    _.each(posts, edge => {
-      if (_.get(edge, "node.tags")) {
-        edge.node.tags.forEach(tag => {
-          tags.add(tag);
-        })
-      }
-    });
+        postSizeByTag.forEach((size, tag) => {
+          const numTags = Math.ceil(size / postsPerPage);
+          Array.from({ length: numTags }).forEach((value, i) => {
+            createPage({
+              path: `/tags/${_.kebabCase(tag)}/` + (i === 0 ? `` : `${i + 1}`),
+              component: path.resolve("./src/pages/index.js"),
+              context: {
+                tag: tag,
+                limit: postsPerPage,
+                skip: i * postsPerPage,
+              },
+            });
+          });
+        });
 
-    tags.forEach(tag => {
-      createPage({
-        path: `/tags/${_.kebabCase(tag)}/`,
-        component: path.resolve("src/pages/index.js"),
-        context: {
-          tag,
-        },
-      });
-    });
+        createPage({
+          path: `/search/`,
+          component: path.resolve("./src/templates/search-page.js"),
+        });
       })
     );
   });