Ready to be merged 🚀

chicio · chicio · commit 92bb811b2dd6 · 2021-04-30T16:36:35.000+02:00
diff --git a/.lighthouserc.json b/.lighthouserc.json
@@ -12,7 +12,6 @@
         "uses-rel-preconnect": "off",
         "link-name": "off",
         "aria-valid-attr-value": "off",
-        "unused-javascript": "off"
       }
     },
     "upload": {
diff --git a/__tests__/slug.test.js b/__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"
+    );
+  });
+});
diff --git a/__tests__/url.test.ts b/__tests__/url.test.ts
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -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) });
   }
 };
diff --git a/package.json b/package.json
@@ -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",
diff --git a/src/components/design-system/molecules/post-tags.tsx b/src/components/design-system/molecules/post-tags.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>
 );
diff --git a/src/components/design-system/organism/footer.tsx b/src/components/design-system/organism/footer.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,
diff --git a/src/components/design-system/organism/menu.tsx b/src/components/design-system/organism/menu.tsx
@@ -3,6 +3,7 @@ import { track, tracking } from "../../../logic/tracking";
 import { MenuItem } from "../molecules/menu-item";
 import styled, { css } from "styled-components";
 import { Container } from "../atoms/container";
+import { slugs } from "../../../logic/slug";
 
 const MenuContainer = styled.div`
   background-color: ${(props) => props.theme.light.primaryColor};
@@ -77,8 +78,8 @@ export const Menu: React.FC<MenuProps> = ({ trackingCategory, pathname }) => (
         {"Home"}
       </NavBarMenuItem>
       <NavBarMenuItem
-        selected={pathname !== "/2017/05/10/about-me/"}
-        to={"/blog/"}
+        selected={pathname !== slugs.aboutMe}
+        to={slugs.blog}
         onClick={() => {
           track(
             tracking.action.open_blog,
@@ -90,8 +91,8 @@ export const Menu: React.FC<MenuProps> = ({ trackingCategory, pathname }) => (
         {"Blog"}
       </NavBarMenuItem>
       <NavBarMenuItem
-        selected={pathname === "/2017/05/10/about-me/"}
-        to={"/2017/05/10/about-me/"}
+        selected={pathname === slugs.aboutMe}
+        to={slugs.aboutMe}
         onClick={() => {
           track(
             tracking.action.open_about_me,
diff --git a/src/components/design-system/organism/profile-presentation.tsx b/src/components/design-system/organism/profile-presentation.tsx
@@ -6,6 +6,7 @@ import { track, tracking } from "../../../logic/tracking";
 import styled from "styled-components";
 import { CallToActionInternal } from "../atoms/call-to-action-internal";
 import { Heading2 } from "../atoms/heading2";
+import { slugs } from "../../../logic/slug";
 
 const Author = styled(Heading2)`
   color: ${(props) => props.theme.light.textAbovePrimaryColor};
@@ -94,7 +95,7 @@ export const ProfilePresentation: React.FC<ProfilePresentationProps> = ({
           tracking.label.body
         )
       }
-      to="/blog/"
+      to={slugs.blog}
     >
       Blog
     </BlogCallToAction>
diff --git a/src/components/head.tsx b/src/components/head.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet";
 import { graphql, useStaticQuery } from "gatsby";
 import { HeadQuery } from "../../graphql-types";
 import { createJsonLD, createMetaAttributes, OgPageType } from "../logic/seo";
+import { primaryColorDark } from "./theme";
 
 const cookieConsetCss = `
        .cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
@@ -19,7 +20,7 @@ if (typeof window !== "undefined") {
        window.cookieconsent.initialise({
                       palette: {
                           popup: {
-                              background: '#303F9F',
+                              background: '${primaryColorDark}',
                               text: '#ffffff'
                           },
                           button: {
diff --git a/src/logic/current-location.ts b/src/logic/current-location.ts
@@ -1,8 +1,5 @@
 import { WindowLocation } from "@reach/router";
 
-export const generateTagUrl = (tag: string) =>
-  `/blog/tags/${tag!.split(" ").join("-")}/`;
-
 export interface CurrentLocation {
   url: string;
   pathname: string;
diff --git a/src/logic/slug.js b/src/logic/slug.js
@@ -0,0 +1,16 @@
+const allSlugs = {
+  blog: "/blog/",
+  tags: "/blog/tags/",
+  archive: "/blog/archive/",
+  aboutMe: "/2017/05/10/about-me/",
+};
+
+exports.slugs = allSlugs;
+
+exports.generateTagSlug = (tag) =>
+  `${allSlugs.tags}${tag.split(" ").join("-")}/`;
+
+exports.generatePostSlug = (filename) => {
+  const [year, month, day, ...title] = filename.substring(1).split("-");
+  return `/${year}/${month}/${day}/${title.join("-")}`;
+};
diff --git a/src/pages/blog/archive.tsx b/src/pages/blog/archive.tsx
@@ -4,7 +4,7 @@ import { ArchiveQuery } from "../../../graphql-types";
 import { tracking } from "../../logic/tracking";
 import { BlogGenericPostListPage } from "../../components/design-system/templates/blog-generic-post-list-page";
 import { OgPageType } from "../../logic/seo";
-import { getCurrentLocationFrom } from "../../logic/url";
+import { getCurrentLocationFrom } from "../../logic/current-location";
 
 const Archive: React.FC<PageProps<ArchiveQuery>> = ({ data, location }) => {
   const siteMetadata = data.site!.siteMetadata!;
diff --git a/src/pages/blog/tags.tsx b/src/pages/blog/tags.tsx
@@ -8,7 +8,8 @@ import { ContainerFluid } from "../../components/design-system/atoms/container-f
 import styled from "styled-components";
 import { PageTitle } from "../../components/design-system/molecules/page-title";
 import { OgPageType } from "../../logic/seo";
-import { getCurrentLocationFrom, generateTagUrl } from "../../logic/url";
+import { getCurrentLocationFrom } from "../../logic/current-location";
+import { generateTagSlug } from "../../logic/slug";
 
 const TagsContainer = styled(ContainerFluid)`
   padding: 0;
@@ -36,7 +37,7 @@ const TagsPage: React.FC<PageProps<PostsGroupByTagsQuery>> = ({
         {data.allMarkdownRemark.group.map((tag) => (
           <Tag
             big={true}
-            link={generateTagUrl(tag.fieldValue!)}
+            link={generateTagSlug(tag.fieldValue!)}
             tag={`${tag.fieldValue} (${tag.totalCount})`}
             key={tag.fieldValue}
           />
diff --git a/src/pages/cookie-policy.tsx b/src/pages/cookie-policy.tsx
@@ -10,7 +10,7 @@ import { List } from "../components/design-system/atoms/list";
 import { ContainerSection } from "../components/design-system/atoms/container-section";
 import { StandardExternalLink } from "../components/design-system/atoms/standard-external-link";
 import { OgPageType } from "../logic/seo";
-import { getCurrentLocationFrom } from "../logic/url";
+import { getCurrentLocationFrom } from "../logic/current-location";
 
 const CookiePolicy: React.FC<PageProps> = ({ location }) => {
   const data = useStaticQuery<CookiePolicyQuery>(
diff --git a/src/pages/privacy-policy.tsx b/src/pages/privacy-policy.tsx
@@ -10,7 +10,7 @@ import { ContainerSection } from "../components/design-system/atoms/container-se
 import { Paragraph } from "../components/design-system/atoms/paragraph";
 import { StandardExternalLink } from "../components/design-system/atoms/standard-external-link";
 import { OgPageType } from "../logic/seo";
-import { getCurrentLocationFrom } from "../logic/url";
+import { getCurrentLocationFrom } from "../logic/current-location";
 
 const PrivacyPolicy: React.FC<PageProps> = ({ location }) => {
   const data = useStaticQuery<PrivacyPolicyQuery>(
diff --git a/src/posts/2018-10-18-blender-tutorial-6-outliner-layers-groups-hierarchies-scenes.md b/src/posts/2018-10-18-blender-tutorial-6-outliner-layers-groups-hierarchies-scenes.md
@@ -4,7 +4,7 @@ description: "In this new post of the series Blender tutorial I will talk about
 and scenes."
 date: 2018-10-18
 image: ../images/posts/blender-outliner.jpg
-tags: [test driven development, agile, clean code]
+tags: [computer graphics, blender]
 comments: true
 math: false
 authors: [fabrizio_duroni]
diff --git a/src/templates/blog.tsx b/src/templates/blog.tsx
@@ -6,7 +6,8 @@ import { BlogPage } from "../components/design-system/templates/blog-page";
 import { PaginationNavigation } from "../components/design-system/molecules/pagination-navigation";
 import { PostCard } from "../components/design-system/molecules/post-card";
 import { OgPageType } from "../logic/seo";
-import { getCurrentLocationFrom } from "../logic/url";
+import { getCurrentLocationFrom } from "../logic/current-location";
+import { slugs } from "../logic/slug";
 
 interface BlogPageContext {
   limit: number;
@@ -24,10 +25,10 @@ const Blog: React.FC<PageProps<BlogListQuery, BlogPageContext>> = ({
   const { currentPage, numberOfPages } = pageContext;
   const isFirst = currentPage === 1;
   const isLast = currentPage === numberOfPages;
-  const prevPage = `/blog/${
+  const prevPage = `${slugs.blog}${
     currentPage - 1 === 1 ? "" : (currentPage - 1).toString()
   }`;
-  const nextPage = `/blog/${(currentPage + 1).toString()}`;
+  const nextPage = `${slugs.blog}${(currentPage + 1).toString()}`;
   const siteMetadata = data.site!.siteMetadata!;
   const author = siteMetadata.author!;
   const featuredImage = siteMetadata.featuredImage!;
diff --git a/src/templates/post.tsx b/src/templates/post.tsx
@@ -13,7 +13,7 @@ import { Heading2 } from "../components/design-system/atoms/heading2";
 import { PostContent } from "../components/post-content";
 import styled from "styled-components";
 import { OgPageType } from "../logic/seo";
-import { getCurrentLocationFrom } from "../logic/url";
+import { getCurrentLocationFrom } from "../logic/current-location";
 
 const PostTitle = styled(Heading2)`
   margin: 0;
diff --git a/src/templates/tag.tsx b/src/templates/tag.tsx
@@ -4,7 +4,7 @@ import { tracking } from "../logic/tracking";
 import { TagPostsQuery } from "../../graphql-types";
 import { BlogGenericPostListPage } from "../components/design-system/templates/blog-generic-post-list-page";
 import { OgPageType } from "../logic/seo";
-import { getCurrentLocationFrom } from "../logic/url";
+import { getCurrentLocationFrom } from "../logic/current-location";
 
 interface TagPageContext {
   tag: string;
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,6 +7,7 @@
     "strict": true,
     "noEmit": true,
     "isolatedModules": true,
+    "allowJs": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "noUnusedLocals": true,

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@`
`12`	`12`	`"uses-rel-preconnect": "off",`
`13`	`13`	`"link-name": "off",`
`14`	`14`	`"aria-valid-attr-value": "off",`
`15`		`- "unused-javascript": "off"`
`16`	`15`	`}`
`17`	`16`	`},`
`18`	`17`	`"upload": {`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ import { track, tracking } from "../../../logic/tracking";`
`6`	`6`	`import styled from "styled-components";`
`7`	`7`	`import { CallToActionInternal } from "../atoms/call-to-action-internal";`
`8`	`8`	`import { Heading2 } from "../atoms/heading2";`
	`9`	`+import { slugs } from "../../../logic/slug";`
`9`	`10`
`10`	`11`	const Author = styled(Heading2)`
`11`	`12`	`color: ${(props) => props.theme.light.textAbovePrimaryColor};`
`@@ -94,7 +95,7 @@ export const ProfilePresentation: React.FC<ProfilePresentationProps> = ({`
`94`	`95`	`tracking.label.body`
`95`	`96`	`)`
`96`	`97`	`}`
`97`		`- to="/blog/"`
	`98`	`+ to={slugs.blog}`
`98`	`99`	`>`
`99`	`100`	`Blog`
`100`	`101`	`</BlogCallToAction>`