added legal pages, resized tablet view, fixed prettier

.eslintrc

@@ -15,7 +15,8 @@
     "react",
     "jest",
     "@typescript-eslint",
-    "simple-import-sort"
+    "simple-import-sort",
+    "prettier"
   ],
   "rules": {
     "import/no-extraneous-dependencies": [

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require("@mastermindzh/prettier-config")
+};

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

README.md

@@ -5,10 +5,10 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 ## Todo
 
 - Add a dark mode
-- width customizations (variables + sidebar.module.scss)
 - custom blog header
 - migrate resume
 - migrate projects
 - migrate some example blogs
-- set up cookie page
 - release to sftp or gh-pages
+- "time to read"
+- Maybe improve the cookie page with actual cookie data?

content/config.json

@@ -5,7 +5,7 @@
   "copyright": "© All rights reserved.",
   "googleAnalyticsId": "",
   "disqusShortname": "",
-  "postsLimit": 10,
+  "postsLimit": 7,
   "pathPrefix": "/",
   "menu": [
     {
@@ -29,6 +29,16 @@
       "path": "/pages/contacts"
     }
   ],
+  "legalMenu": [
+    {
+      "label": "Cookies",
+      "path": "/pages/legal/cookies"
+    },
+    {
+      "label": "Disclaimer",
+      "path": "/pages/legal/disclaimer"
+    }
+  ],
   "author": {
     "name": "Rick van Lieshout",
     "photo": "/me.png",
@@ -36,7 +46,7 @@
     "contacts": {
       "email": "info@rickvanlieshout.com",
       "github": "mastermindzh",
-      "facebook": "",
+      "facebook": "mastermindzh",
       "rss": "",
       "twitter": "mastermindzh",
       "linkedin": "rickvanlieshout",

content/pages/about/index.md

@@ -2,6 +2,7 @@
 title: "Hello, I am Rick van Lieshout!"
 template: "page"
 ---
+
 Some people are bookworms, I am a bitworm.
 I fell in love with computing a long time ago and the virus could, fortunately, never be cured.
 Little by little, I gained experience in Computer Technology, Programming and IT design.
@@ -17,4 +18,4 @@ I've made a habit of openly challenging assumptions / solutions (even though peo
 This mentality drives me to not only get the best out of myself but others too, I like to cooperate with fellow developers to work towards a common goal.
 
 Even though software development is my main area of interest I am also passionate about Linux and DevOps.
-Besides the two major interests I also love to dabble in hardware, hi-fi and home automation.
+Besides the two major interests I also love to dabble in hardware, Hi-Fi and home automation.

content/pages/legal/cookies/index.md

@@ -0,0 +1,31 @@
+---
+title: "Cookies"
+template: "page"
+---
+
+A cookie is a small text file that a website saves on the client
+computer (your computer) to make the website function better. Some
+examples of what cookies are used for:
+
+- Remembering what language the website should be in
+- Storing your cart when shopping online
+- Keeping you logged in
+
+There are also cookies that are not explicitly set by the website
+owner themselves. These are often introduced when websites include
+projects which have been made by other people. Some of these
+include:
+
+- Disqus - A comment system for your website
+- Google analytics - To track info about the website (i.e how many times each page has been seen)
+- Social media (twitter, facebook, etc) - To add in those shiny "like" or "tweet" buttons.
+
+Cookies like these are stored for pretty much every website you
+visit and they make the World Wide Web what it is today.
+
+Since mid 2015 every website which is either hosted in Europe or
+targets the European market is required to inform and get consent from
+users about using cookies. This is usually done with a bar at the
+bottom of the page which can be dismissed with a simple button. More
+information about the legislation around the cookie law can be found
+[here](https://wikis.ec.europa.eu/display/WEBGUIDE/04.+Cookies+and+similar+technologies).

content/pages/legal/disclaimer/index.md

@@ -0,0 +1,35 @@
+---
+title: "Disclaimer"
+template: "page"
+---
+
+All content provided on this website is for informational purposes
+only. Rick van Lieshout can not be held responsible in any way. The
+content on this blog represents the personal views of the individual
+author and do not necessarily represent the views of organizations
+that the author is affiliated with or with the views of any other
+author whom might post on this blog. The owner of this blog makes no
+representations as to the accuracy or completeness of any information
+on this site or found by following any link on this site. The owner
+will not be liable for any errors or omissions in this information nor
+for the availability of this information. The owner will not be liable
+for any losses, injuries, or damages from the display or use of this
+information. The owner of this blog reserves the right to edit or
+delete any comments submitted to this blog without notice due to
+offensive comments or language. Please do not send any confidential or
+privileged information.
+
+I do not share(nor collect) personal information with third-parties or
+store information collected about your visit to this blog for use
+other than to analyze content performance through the use of cookies,
+which you can turn off at anytime by modifying your Internet browser’s
+settings. Please refer to the [cookies](/pages/legal/cookies)
+page for more information about cookies. I am not responsible for the
+republishing of the content found on this blog on other Web sites or
+media without our permission. Lastly, this site contains links to
+other websites. If you choose to visit other websites, we have no
+control over the privacy practices or content of those other websites,
+and it is your responsibility to review the privacy policies at those
+websites to confirm that you understand and agree with their policies.
+These terms and conditions of use are subject to change at anytime and
+without notice.

gatsby-config.ts

@@ -8,6 +8,7 @@ export default {
   siteMetadata: {
     url: config.url,
     menu: config.menu,
+    legalMenu: config.legalMenu,
     title: config.title,
     author: config.author,
     subtitle: config.subtitle,
@@ -171,8 +172,7 @@ export default {
               handler: "StaleWhileRevalidate",
             },
             {
-              urlPattern:
-                /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
+              urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
               handler: "StaleWhileRevalidate",
             },
             {

internal/testing/__mocks__/group.ts

@@ -1,10 +1,10 @@
 export default [
   {
-    fieldValue: "typography",
+    fieldValue: "technology",
     totalCount: 1,
   },
   {
-    fieldValue: "design inspiration",
+    fieldValue: "coding",
     totalCount: 1,
   },
 ];

internal/testing/__mocks__/index.ts

@@ -6,3 +6,4 @@ export { default as contacts } from "./contacts";
 export { default as author } from "./author";
 export { default as menu } from "./menu";
 export { default as edges } from "./edges";
+export { default as legalMenu } from "./legalMenu";

internal/testing/__mocks__/legalMenu.ts

@@ -0,0 +1,5 @@
+export default [
+  { label: "Articles", path: "/" },
+  { label: "About Me", path: "/pages/about" },
+  { label: "Contact Me", path: "/pages/contacts" },
+];

internal/testing/__mocks__/site-metadata.ts

@@ -4,12 +4,11 @@ import menu from "./menu";
 export default {
   site: {
     siteMetadata: {
-      url: "https://www.lumen.local",
-      title: "Blog by John Doe",
-      subtitle:
-        "Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.",
+      url: "https://rickvanlieshout.com",
+      title: "Rick van Lieshout ~ Mastermindzh",
+      subtitle: "The thoughts, discoveries and murmurings of a Software enthusiast",
       copyright: "All rights reserved.",
-      postsPerPage: 4,
+      postsPerPage: 7,
       author,
       menu,
     },

package.json

@@ -78,6 +78,7 @@
   "devDependencies": {
     "@jest/globals": "^27.5.1",
     "@mastermindzh/eslint-config": "^1.0.1",
+    "@mastermindzh/prettier-config": "^1.0.0",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@swc/core": "^1.2.247",
@@ -106,6 +107,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.5",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -131,6 +133,5 @@
     "stylelint-scss": "^4.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.2"
-  },
-  "prettier": "@mastermindzh/prettier-config"
+  }
 }

src/assets/scss/_variables.scss

@@ -27,11 +27,11 @@ $typographic-leading: math.round(16 * math.div($typographic-root-font-size, 100)
 $button-height: 35px;
 $button-border-radius: 20px;
 
-$layout-post-single-width: 1100px;
+$layout-post-single-width: 1200px;
 $layout-post-width: $layout-post-single-width - 305px;
 
 // $layout-width: 1070px;
 $layout-width: 1300px;
 $layout-breakpoint-sm: 685px;
 $layout-breakpoint-md: 960px;
-$layout-breakpoint-lg: 1100px;
+$layout-breakpoint-lg: 1300px;

src/components/Feed/Feed.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { Link } from "gatsby";
 
+import * as styles from "./Feed.module.scss";
 import { Edge } from "@/types";
 
-import * as styles from "./Feed.module.scss";
 
 type Props = {
   edges: Array<Edge>;

src/components/Icon/Icon.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
+import * as styles from "./Icon.module.scss";
 import { ICONS } from "@/constants";
 
-import * as styles from "./Icon.module.scss";
 
 interface Props {
   name: keyof typeof ICONS;

src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Helmet from "react-helmet";
 
-import { useSiteMetadata } from "@/hooks";
 
 import { CookieBar } from "../Cookiebar/CookieBar";
 import * as styles from "./Layout.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 interface Props {
   title: string;

src/components/Page/Page.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
+import * as styles from "./Page.module.scss";
 import type { Nullable } from "@/types";
 
-import * as styles from "./Page.module.scss";
 
 interface Props {
   title?: string;

src/components/Pagination/Pagination.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import classNames from "classnames";
 import { Link } from "gatsby";
 
+import * as styles from "./Pagination.module.scss";
 import { PAGINATION } from "@/constants";
 
-import * as styles from "./Pagination.module.scss";
 
 type Props = {
   prevPagePath: string;

src/components/Post/Author/Author.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
+import * as styles from "./Author.module.scss";
 import { useSiteMetadata } from "@/hooks";
 
-import * as styles from "./Author.module.scss";
 
 const Author = () => {
   const { author } = useSiteMetadata();

src/components/Post/Post.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import { Link } from "gatsby";
 
-import type { Node } from "@/types";
 
 import { Author } from "./Author";
 import { Comments } from "./Comments";
@@ -11,6 +10,7 @@ import { Meta } from "./Meta";
 import { Tags } from "./Tags";
 
 import * as styles from "./Post.module.scss";
+import type { Node } from "@/types";
 
 interface Props {
   post: Node;

src/components/Sidebar/Author/Author.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { Link } from "gatsby";
 
+import * as styles from "./Author.module.scss";
 import { Image } from "@/components/Image";
 
-import * as styles from "./Author.module.scss";
 
 type Props = {
   author: {

src/components/Sidebar/Contacts/Contacts.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
+import * as styles from "./Contacts.module.scss";
 import { Icon } from "@/components/Icon";
 import { ICONS } from "@/constants";
 import { Dictionary } from "@/types";
 import { getContactHref, getIcon } from "@/utils";
 
-import * as styles from "./Contacts.module.scss";
 
 type Props = {
   contacts: Dictionary<string>;

src/components/Sidebar/Menu/Menu.tsx

@@ -14,13 +14,9 @@ type Props = {
 const Menu: React.FC<Props> = ({ menu }: Props) => (
   <nav className={styles.menu}>
     <ul className={styles.list}>
-      {menu.map((item) => (
+      {menu?.map((item) => (
         <li className={styles.item} key={item.path}>
-          <Link
-            to={item.path}
-            className={styles.link}
-            activeClassName={styles.active}
-          >
+          <Link to={item.path} className={styles.link} activeClassName={styles.active}>
             {item.label}
           </Link>
         </li>

src/components/Sidebar/Sidebar.module.scss

@@ -12,7 +12,7 @@
 
 @include breakpoint-sm {
   .sidebar {
-    lost-column: 5/12;
+    lost-column: 3/12;
 
     .inner {
       @include padding(1.25, 0.75, 0);
@@ -40,8 +40,6 @@
 @include breakpoint-md {
   .sidebar {
     lost-column: 1/4;
-    // TODO: column to 1/4?
-    // lost-column: 1/3;?
 
     .inner {
       @include padding-equal(1.5);

src/components/Sidebar/Sidebar.tsx

@@ -1,20 +1,19 @@
 import React from "react";
 
-import { useSiteMetadata } from "@/hooks";
-
 import { Author } from "./Author";
 import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
 import { Menu } from "./Menu";
 
 import * as styles from "./Sidebar.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 type Props = {
   isIndex?: boolean;
 };
 
 const Sidebar = ({ isIndex }: Props) => {
-  const { author, copyright, menu } = useSiteMetadata();
+  const { author, copyright, menu, legalMenu } = useSiteMetadata();
 
   return (
     <div className={styles.sidebar}>
@@ -23,6 +22,7 @@ const Sidebar = ({ isIndex }: Props) => {
         <Menu menu={menu} />
         <Contacts contacts={author.contacts} />
         <Copyright copyright={copyright} />
+        <Menu menu={legalMenu} />
       </div>
     </div>
   );

src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -138,6 +138,9 @@ exports[`Sidebar renders correctly 1`] = `
     <div>
       All rights reserved.
     </div>
+    <nav>
+      <ul />
+    </nav>
   </div>
 </div>
 `;

src/hooks/use-site-metadata.ts

@@ -32,6 +32,10 @@ const useSiteMetadata = () => {
               path
               label
             }
+            legalMenu {
+              path
+              label
+            }
             url
             title
             subtitle
@@ -40,7 +44,7 @@ const useSiteMetadata = () => {
           }
         }
       }
-    `,
+    `
   );
 
   return site.siteMetadata;

src/templates/CategoriesTemplate/CategoriesTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import CategoriesTemplate from "./CategoriesTemplate";
 import * as mocks from "@/mocks";
 
-import CategoriesTemplate from "./CategoriesTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`CategoriesTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/CategoryTemplate/CategoryTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import CategoryTemplate from "./CategoryTemplate";
 import * as mocks from "@/mocks";
 
-import CategoryTemplate from "./CategoryTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/IndexTemplate/IndexTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import IndexTemplate from "./IndexTemplate";
 import * as mocks from "@/mocks";
 
-import IndexTemplate from "./IndexTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`IndexTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/NotFoundTemplate/NotFoundTemplate.test.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import NotFoundTemplate from "./NotFoundTemplate";
 
 import * as mocks from "@/mocks";
 
-import NotFoundTemplate from "./NotFoundTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`NotFoundTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/PageTemplate/PageTemplate.test.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import PageTemplate from "./PageTemplate";
 
 import * as mocks from "@/mocks";
 
-import PageTemplate from "./PageTemplate";
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
@@ -18,9 +17,7 @@ describe("PageTemplate", () => {
   };
 
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`PageTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/PostTemplate/PostTemplate.test.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import PostTemplate from "./PostTemplate";
 
 import * as mocks from "@/mocks";
 
-import PostTemplate from "./PostTemplate";
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 

src/templates/TagTemplate/TagTemplate.test.tsx

@@ -1,11 +1,8 @@
+import { StaticQuery, useStaticQuery } from "gatsby";
 import React from "react";
 import renderer from "react-test-renderer";
-
-import { StaticQuery, useStaticQuery } from "gatsby";
-
-import * as mocks from "@/mocks";
-
 import TagTemplate from "./TagTemplate";
+import * as mocks from "@/mocks";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`TagTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/TagsTemplate/TagsTemplate.test.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import TagsTemplate from "./TagsTemplate";
 
 import * as mocks from "@/mocks";
 
-import TagsTemplate from "./TagsTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`TagsTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>