enhanced print view

.eslintrc

@@ -1,4 +1,7 @@
 {
+  "env": {
+    "browser": true
+  },
 
   "extends": [
     "plugin:import/typescript",

README.md

@@ -4,16 +4,11 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 
 ## Todo
 
-- print view
-
-  - hide mode toggler
-  - hide "all articles" link in posts
-  - hide menu
-  - hide social buttons
-  - change "header title"
-
 - "time to read" (https://www.gatsbyjs.com/plugins/gatsby-remark-reading-time/)
+- quote needs a visual indicator (like a line or quote mark) in front to show it's a quote
+
 <!-- migrations -->
+
 - migrate resume
 - migrate projects
 - migrate blogs
@@ -22,3 +17,4 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 
 - release to sftp or gh-pages
 - lighthouse doesn't like the blue... :)
+- url, id, title disqus

content/config.json

@@ -4,8 +4,8 @@
   "subtitle": "The thoughts, discoveries and murmurings of a Software enthusiast",
   "copyright": "© All rights reserved.",
   "googleAnalyticsId": "",
-  "disqusShortname": "",
+  "disqusShortname": "rickvanlieshoutcom",
-  "postsLimit": 7,
+  "postsLimit": 5,
   "pathPrefix": "/",
   "menu": [
     {

content/posts/2017/scala-day-4-a-challenge.md

@@ -9,7 +9,6 @@ tags:
   - "Development"
   - "slsw"
 description: "The last day of my journey with Scala is said to be a challenge"
-# socialImage: "/media/42-line-bible.jpg"
 ---
 
 The book doesn't offer a day 4, my school, however, does. Or rather, it wants us to "create" a day 4. The main objective of day 4 is to "create a [smart](https://en.wikipedia.org/wiki/SMART_criteria) goal which fits the language and challenges you". For this purpose I came up with the following goal:

src/assets/scss/_base.scss

@@ -1,3 +1,17 @@
 @charset "UTF-8";
 
 @import "base/generic";
+
+.showInPrintView {
+  display: none;
+}
+
+@media print {
+  .hideInPrintView {
+    display:none;
+  }
+
+  .showInPrintView {
+    display: initial;
+  }
+}

src/components/Pagination/Pagination.tsx

@@ -1,11 +1,8 @@
-import React from "react";
+import { PAGINATION } from "@/constants";
-
 import classNames from "classnames";
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Pagination.module.scss";
-import { PAGINATION } from "@/constants";
-
 
 type Props = {
   prevPagePath: string;
@@ -14,12 +11,7 @@ type Props = {
   hasPrevPage: boolean;
 };
 
-const Pagination = ({
+const Pagination = ({ prevPagePath, nextPagePath, hasNextPage, hasPrevPage }: Props) => {
-  prevPagePath,
-  nextPagePath,
-  hasNextPage,
-  hasPrevPage,
-}: Props) => {
   const prevClassName = classNames(styles.previousLink, {
     [styles.disable]: !hasPrevPage,
   });
@@ -29,12 +21,12 @@ const Pagination = ({
   });
 
   return (
-    <div className={styles.pagination}>
+    <div className={`${styles.pagination}`}>
       <div className={styles.previous}>
         <Link
           rel="prev"
           to={hasPrevPage ? prevPagePath : "/"}
-          className={prevClassName}
+          className={`${prevClassName} hideInPrintView`}
         >
           {PAGINATION.PREV_PAGE}
         </Link>
@@ -43,7 +35,7 @@ const Pagination = ({
         <Link
           rel="next"
           to={hasNextPage ? nextPagePath : "/"}
-          className={nextClassName}
+          className={`${nextClassName} hideInPrintView`}
         >
           {PAGINATION.NEXT_PAGE}
         </Link>

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

@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pagination renders correctly 1`] = `
-<div>
+<div
+  className="undefined"
+>
   <div>
     <a
-      className=""
+      className=" hideInPrintView"
       href="/typography/page/1"
       rel="prev"
     >
@@ -13,7 +15,7 @@ exports[`Pagination renders correctly 1`] = `
   </div>
   <div>
     <a
-      className=""
+      className=" hideInPrintView"
       href="/typography/page/3"
       rel="next"
     >

src/components/Post/Author/Author.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
-import * as styles from "./Author.module.scss";
 import { useSiteMetadata } from "@/hooks";
-
+import React from "react";
+import * as styles from "./Author.module.scss";
 
 const Author = () => {
   const { author } = useSiteMetadata();
@@ -10,9 +8,11 @@ const Author = () => {
   return (
     <div className={styles.author}>
       <p className={styles.bio}>
-        Written by: <a href="/pages/about">
+        Written by:{" "}
+        <a href="/pages/about">
           <strong>{author.name}</strong>
         </a>
+        <span className="showInPrintView"> {`@ ${window.location}`}</span>
       </p>
     </div>
   );

src/components/Post/Author/__snapshots__/Author.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Author renders correctly 1`] = `
 <div>
   <p>
     Written by:
+     
     <a
       href="/pages/about"
     >
@@ -11,6 +12,12 @@ exports[`Author renders correctly 1`] = `
         Rick van Lieshout
       </strong>
     </a>
+    <span
+      className="showInPrintView"
+    >
+       
+      @ http://localhost/
+    </span>
   </p>
 </div>
 `;

src/components/Post/Content/__snapshots__/Content.test.tsx.snap

@@ -4,7 +4,9 @@ exports[`Content renders correctly 1`] = `
 Array [
   <div>
     <span>
-      <span>
+      <span
+        className="undefined hideInPrintView"
+      >
         <a
           href="/"
         >
@@ -14,8 +16,19 @@ Array [
           </span>
         </a>
       </span>
+      <span
+        className="undefined showInPrintView"
+      >
+        <a
+          href="/"
+        >
+          rickvanLieshout.com
+        </a>
       </span>
-    <span>
+    </span>
+    <span
+      className="hideInPrintView"
+    >
       <a
         href="/"
         style={
@@ -27,6 +40,9 @@ Array [
       >
         ↩ All articles
       </a>
+      <span
+        className="hideInPrintView"
+      >
         <div
           className="react-toggle"
           onClick={[Function]}
@@ -116,6 +132,7 @@ Array [
           />
         </div>
       </span>
+    </span>
   </div>,
   <div>
     <h1>

src/components/Post/Post.tsx

@@ -28,7 +28,7 @@ const Post: React.FC<Props> = ({ post }: Props) => {
         <Author />
       </div>
 
-      <div className={styles.comments}>
+      <div className={`${styles.comments} hideInPrintView`}>
         <Comments postSlug={slug} postTitle={post.frontmatter.title} />
       </div>
     </div>

src/components/Post/Tags/Tags.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Tags.module.scss";
 
 type Props = {
@@ -10,7 +8,7 @@ type Props = {
 };
 
 const Tags = ({ tags, tagSlugs }: Props) => (
-  <div className={styles.tags}>
+  <div className={`${styles.tags} hideInPrintView`}>
     <ul className={styles.list}>
       {tagSlugs
         ? tagSlugs.map((slug, i) => (

src/components/Post/Tags/__snapshots__/Tags.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tags renders correctly 1`] = `
-<div>
+<div
+  className="undefined hideInPrintView"
+>
   <ul>
     <li>
       <a

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

@@ -5,7 +5,9 @@ exports[`Post renders correctly 1`] = `
   <div>
     <div>
       <span>
-        <span>
+        <span
+          className="undefined hideInPrintView"
+        >
           <a
             href="/"
           >
@@ -15,8 +17,19 @@ exports[`Post renders correctly 1`] = `
             </span>
           </a>
         </span>
+        <span
+          className="undefined showInPrintView"
+        >
+          <a
+            href="/"
+          >
+            rickvanLieshout.com
+          </a>
         </span>
-      <span>
+      </span>
+      <span
+        className="hideInPrintView"
+      >
         <a
           href="/"
           style={
@@ -28,6 +41,9 @@ exports[`Post renders correctly 1`] = `
         >
           ↩ All articles
         </a>
+        <span
+          className="hideInPrintView"
+        >
           <div
             className="react-toggle"
             onClick={[Function]}
@@ -117,6 +133,7 @@ exports[`Post renders correctly 1`] = `
             />
           </div>
         </span>
+      </span>
     </div>
     <div>
       <h1>
@@ -142,6 +159,7 @@ exports[`Post renders correctly 1`] = `
     <div>
       <p>
         Written by:
+         
         <a
           href="/pages/about"
         >
@@ -149,9 +167,17 @@ exports[`Post renders correctly 1`] = `
             Rick van Lieshout
           </strong>
         </a>
+        <span
+          className="showInPrintView"
+        >
+           
+          @ http://localhost/
+        </span>
       </p>
     </div>
   </div>
-  <div />
+  <div
+    className="undefined hideInPrintView"
+  />
 </div>
 `;

src/components/PostHeader/PostHeader.tsx

@@ -11,14 +11,19 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
     <div className={styles.header}>
       <span>
         <Image alt={author.name} path={author.photo} className={styles.photo} />
-        <span className={styles.title}>
+        <span className={`${styles.title} hideInPrintView`}>
           <Link className={styles.name} to="/">
             Rick <span className={styles.surname}>van Lieshout</span>
           </Link>
         </span>
+        <span className={`${styles.title} showInPrintView`}>
+          <Link className={styles.name} to="/">
+            rickvanLieshout.com
+          </Link>
+        </span>
       </span>
 
-      <span>
+      <span className="hideInPrintView">
         <Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
           ↩ All articles
         </Link>

src/components/Sidebar/Menu/Menu.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Menu.module.scss";
 
 type Props = {
@@ -12,7 +10,7 @@ type Props = {
 };
 
 const Menu: React.FC<Props> = ({ menu }: Props) => (
-  <nav className={styles.menu}>
+  <nav className={`${styles.menu} hideInPrintView`}>
     <ul className={styles.list}>
       {menu?.map((item) => (
         <li className={styles.item} key={item.path}>

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

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu renders correctly 1`] = `
-<nav>
+<nav
+  className="undefined hideInPrintView"
+>
   <ul>
     <li>
       <a

src/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,6 @@
 import { useSiteMetadata } from "@/hooks";
 import React from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
-
 import { Author } from "./Author";
 import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
@@ -19,11 +18,13 @@ const Sidebar = ({ isIndex }: Props) => {
     <div className={styles.sidebar}>
       <div className={styles.inner}>
         <Author author={author} isIndex={isIndex} />
+        <span className="hideInPrintView">
           <Menu menu={menu} />
           <Contacts contacts={author.contacts} />
           <Copyright copyright={copyright} />
           <Menu menu={legalMenu} />
           <ThemeSwitcher showLabel />
+        </span>
       </div>
     </div>
   );

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

@@ -16,7 +16,12 @@ exports[`Sidebar renders correctly 1`] = `
       </h1>
       <p />
     </div>
-    <nav>
+    <span
+      className="hideInPrintView"
+    >
+      <nav
+        className="undefined hideInPrintView"
+      >
         <ul>
           <li>
             <a
@@ -138,9 +143,14 @@ exports[`Sidebar renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
-    <nav>
+      <nav
+        className="undefined hideInPrintView"
+      >
         <ul />
       </nav>
+      <span
+        className="hideInPrintView"
+      >
         Switch color mode:
         <br />
         <div
@@ -231,6 +241,8 @@ exports[`Sidebar renders correctly 1`] = `
             type="checkbox"
           />
         </div>
+      </span>
+    </span>
   </div>
 </div>
 `;

src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -23,7 +23,7 @@ export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
   }
 
   return (
-    <>
+    <span className="hideInPrintView">
       {showLabel && "Switch color mode:"}
       {showLabel && <br />}
       <Toggle
@@ -34,6 +34,6 @@ export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
         }}
         onChange={toggleTheme}
       />
-    </>
+    </span>
   );
 };

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

@@ -17,7 +17,12 @@ exports[`CategoriesTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`CategoriesTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`CategoriesTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

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

@@ -17,7 +17,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`CategoryTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`CategoryTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -306,10 +318,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -318,7 +332,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

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

@@ -17,7 +17,12 @@ exports[`IndexTemplate renders correctly 1`] = `
         </h1>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`IndexTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`IndexTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -303,10 +315,12 @@ exports[`IndexTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -315,7 +329,7 @@ exports[`IndexTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

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

@@ -17,7 +17,12 @@ exports[`NotFoundTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`NotFoundTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`NotFoundTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

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

@@ -17,7 +17,12 @@ exports[`PageTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`PageTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`PageTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

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

@@ -6,7 +6,9 @@ exports[`PostTemplate renders correctly 1`] = `
     <div>
       <div>
         <span>
-          <span>
+          <span
+            className="undefined hideInPrintView"
+          >
             <a
               href="/"
             >
@@ -16,8 +18,19 @@ exports[`PostTemplate renders correctly 1`] = `
               </span>
             </a>
           </span>
+          <span
+            className="undefined showInPrintView"
+          >
+            <a
+              href="/"
+            >
+              rickvanLieshout.com
+            </a>
           </span>
-        <span>
+        </span>
+        <span
+          className="hideInPrintView"
+        >
           <a
             href="/"
             style={
@@ -29,6 +42,9 @@ exports[`PostTemplate renders correctly 1`] = `
           >
             ↩ All articles
           </a>
+          <span
+            className="hideInPrintView"
+          >
             <div
               className="react-toggle"
               onClick={[Function]}
@@ -118,6 +134,7 @@ exports[`PostTemplate renders correctly 1`] = `
               />
             </div>
           </span>
+        </span>
       </div>
       <div>
         <h1>
@@ -143,6 +160,7 @@ exports[`PostTemplate renders correctly 1`] = `
       <div>
         <p>
           Written by:
+           
           <a
             href="/pages/about"
           >
@@ -150,10 +168,18 @@ exports[`PostTemplate renders correctly 1`] = `
               Rick van Lieshout
             </strong>
           </a>
+          <span
+            className="showInPrintView"
+          >
+             
+            @ http://localhost/
+          </span>
         </p>
       </div>
     </div>
-    <div />
+    <div
+      className="undefined hideInPrintView"
+    />
   </div>
   <div
     className="CookieConsent"

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

@@ -17,7 +17,12 @@ exports[`TagTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`TagTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`TagTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -306,10 +318,12 @@ exports[`TagTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -318,7 +332,7 @@ exports[`TagTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

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

@@ -17,7 +17,12 @@ exports[`TagsTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
+        className="hideInPrintView"
+      >
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul>
             <li>
               <a
@@ -139,9 +144,14 @@ exports[`TagsTemplate renders correctly 1`] = `
         <div>
           All rights reserved.
         </div>
-      <nav>
+        <nav
+          className="undefined hideInPrintView"
+        >
           <ul />
         </nav>
+        <span
+          className="hideInPrintView"
+        >
           Switch color mode:
           <br />
           <div
@@ -232,6 +242,8 @@ exports[`TagsTemplate renders correctly 1`] = `
               type="checkbox"
             />
           </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>