Merge pull request #66 from chicio/duplication-centralize-data 🚀

 Remove duplication and centralize data #60

Author: chicio

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    name: Build
+    name: Test
     runs-on: macos-latest
     steps:
       - name: Checkout

.lighthouserc.json

@@ -12,7 +12,6 @@
         "uses-rel-preconnect": "off",
         "link-name": "off",
         "aria-valid-attr-value": "off",
-        "unused-javascript": "off"
       }
     },
     "upload": {

__tests__/slug.test.js

@@ -0,0 +1,19 @@
+import { generateTagSlug, generatePostSlug } from "../src/logic/slug";
+
+describe("slug", () => {
+  describe("tag", () => {
+    it("generate slug for single word tag", () => {
+      expect(generateTagSlug("macos")).toEqual("/blog/tags/macos/");
+    });
+
+    it("generate slug for multiple word tag", () => {
+      expect(generateTagSlug("mobile app")).toEqual("/blog/tags/mobile-app/");
+    });
+  });
+
+  it("post", () => {
+    expect(generatePostSlug("/2017-05-10-about-me")).toEqual(
+      "/2017/05/10/about-me"
+    );
+  });
+});

__tests__/url.test.ts

@@ -1,4 +1,9 @@
 const path = require("path");
+const {
+  slugs,
+  generateTagSlug,
+  generatePostSlug,
+} = require("./src/logic/slug");
 const { createFilePath } = require("gatsby-source-filesystem");
 
 exports.createPages = async ({ graphql, actions, reporter }) => {
@@ -28,7 +33,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   );
 
   if (result.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`);
+    reporter.panicOnBuild(`Create Pages Error while running GraphQL query.`);
     return;
   }
 
@@ -50,7 +55,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const numberOfPages = Math.ceil(posts.length / postsPerPage);
   Array.from({ length: numberOfPages }).forEach((_, i) => {
     createPage({
-      path: i === 0 ? `/blog/` : `/blog/${i + 1}`,
+      path: i === 0 ? slugs.blog : `${slugs.blog}${i + 1}`,
       component: path.resolve("./src/templates/blog.tsx"),
       context: {
         limit: postsPerPage,
@@ -65,7 +70,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const tags = result.data.tagsGroup.group;
   tags.forEach((tag) => {
     createPage({
-      path: `/blog/tags/${tag.fieldValue.split(" ").join("-")}/`,
+      path: generateTagSlug(tag.fieldValue),
       component: path.resolve("./src/templates/tag.tsx"),
       context: {
         tag: tag.fieldValue,
@@ -78,8 +83,6 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
   if (node.internal.type === `MarkdownRemark`) {
     const filename = createFilePath({ node, getNode, basePath: `pages` });
-    const [year, month, day, ...title] = filename.substring(1).split("-");
-    const slug = `/${year}/${month}/${day}/${title.join("-")}`;
-    createNodeField({ node, name: `slug`, value: slug });
+    createNodeField({ node, name: `slug`, value: generatePostSlug(filename) });
   }
 };

gatsby-node.js

@@ -258,8 +258,6 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
-  port?: Maybe<Scalars['Int']>;
-  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1011,8 +1009,6 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2187,8 +2183,6 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
-  | 'port'
-  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2290,8 +2284,6 @@ export type SiteGroupConnection = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
-  port?: Maybe<IntQueryOperatorInput>;
-  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

graphql-types.ts

@@ -28,15 +28,15 @@
   },
   "homepage": "https://github.com/chicio/chicio.github.io#readme",
   "scripts": {
+    "start": "gatsby develop",
+    "clean": "gatsby clean",
+    "serve": "gatsby serve",
     "test": "jest",
     "test-ci": "./scripts/test-ci.sh",
-    "start": "gatsby develop",
     "prebuild": "npm run test",
     "build": "gatsby build",
     "postbuild": "npm run build-storybook",
     "build-ci": "./scripts/build-ci.sh",
-    "serve": "gatsby serve",
-    "clean": "gatsby clean",
     "predeploy": "npm run clean && npm run build",
     "deploy": "gh-pages -d public -b main",
     "storybook": "start-storybook -p 6006",

package.json

@@ -1,26 +1,19 @@
 import React from "react";
 import Particles from "react-tsparticles";
-import { useIsPowerfulMobileDevice } from "../logic/device";
-import { isDesktop } from "react-device-detect";
 import { useParticlesConfiguration } from "../logic/particles";
 
 export const BackgroundFullScreen: React.FC = () => {
-  const isPowerfulMobileDevice = useIsPowerfulMobileDevice();
   const particlesConfiguration = useParticlesConfiguration();
 
   return (
-    <div>
-      {(isDesktop || isPowerfulMobileDevice) && (
-        <Particles
-          id="tsparticles"
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-          }}
-          options={particlesConfiguration}
-        />
-      )}
-    </div>
+    <Particles
+      id="tsparticles"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+      }}
+      options={particlesConfiguration}
+    />
   );
 };

src/components/background-fullscreen.tsx

@@ -1,8 +1,8 @@
 import { Tag } from "./tag";
-import { generateTagUrl } from "../../../logic/url";
 import React from "react";
 import styled from "styled-components";
 import { Maybe } from "../../../../graphql-types";
+import { generateTagSlug } from "../../../logic/slug";
 
 export interface PostTagsProps {
   tags: Maybe<string>[];
@@ -15,7 +15,7 @@ const PostTagsContainer = styled.div`
 export const PostTags: React.FC<PostTagsProps> = ({ tags }) => (
   <PostTagsContainer>
     {tags!.map((tag) => (
-      <Tag tag={tag!} link={generateTagUrl(tag!)} big={false} key={tag} />
+      <Tag tag={tag!} link={generateTagSlug(tag!)} big={false} key={tag} />
     ))}
   </PostTagsContainer>
 );

src/components/design-system/molecules/post-tags.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { MenuItem } from "../molecules/menu-item";
 import { Paragraph } from "../atoms/paragraph";
 import { StandardExternalLink } from "../atoms/standard-external-link";
+import { slugs } from "../../../logic/slug";
 
 const FooterContainer = styled.footer`
   flex-shrink: 0;
@@ -83,7 +84,7 @@ export const Footer: React.FC<FooterProps> = ({ author, trackingCategory }) => (
         Home
       </FooterMenuItem>
       <FooterMenuItem
-        to="/blog/"
+        to={slugs.blog}
         onClick={() => {
           track(
             tracking.action.open_blog,
@@ -107,7 +108,7 @@ export const Footer: React.FC<FooterProps> = ({ author, trackingCategory }) => (
         About Me
       </FooterMenuItem>
       <FooterMenuItem
-        to="/blog/archive/"
+        to={slugs.archive}
         onClick={() => {
           track(
             tracking.action.open_blog_archive,
@@ -119,7 +120,7 @@ export const Footer: React.FC<FooterProps> = ({ author, trackingCategory }) => (
         Archive
       </FooterMenuItem>
       <FooterMenuItem
-        to="/blog/tags/"
+        to={slugs.tags}
         onClick={() => {
           track(
             tracking.action.open_blog_tags,