mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2024-10-22 16:49:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

enhanced print view

Browse Source
This commit is contained in:
Rick van Lieshout 2022-09-17 20:02:58 +02:00
parent 3c010efb59
commit 63d010d04a
28 changed files with 2169 additions and 1979 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc
View File

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

12
README.md
View File

@ -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

4
content/config.json
View File

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

1
content/posts/2022/scala-day-4-a-challenge.md → content/posts/2017/scala-day-4-a-challenge.md
View File

@ -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:

14
src/assets/scss/_base.scss
View File

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

20
src/components/Pagination/Pagination.tsx
View File

@ -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 = ({
prevPagePath,
nextPagePath,
hasNextPage,
hasPrevPage,
}: Props) => {
const Pagination = ({ 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>

8
src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
View File

@ -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"
>

10
src/components/Post/Author/Author.tsx
View File

@ -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>
);

7
src/components/Post/Author/__snapshots__/Author.test.tsx.snap
View File

@ -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>
`;

21
src/components/Post/Content/__snapshots__/Content.test.tsx.snap
View File

@ -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>

2
src/components/Post/Post.tsx
View File

@ -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>

6
src/components/Post/Tags/Tags.tsx
View File

@ -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) => (

4
src/components/Post/Tags/__snapshots__/Tags.test.tsx.snap
View File

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

32
src/components/Post/__snapshots__/Post.test.tsx.snap
View File

@ -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>
`;

9
src/components/PostHeader/PostHeader.tsx
View File

@ -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>

6
src/components/Sidebar/Menu/Menu.tsx
View File

@ -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}>

4
src/components/Sidebar/Menu/__snapshots__/Menu.test.tsx.snap
View File

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

3
src/components/Sidebar/Sidebar.tsx
View File

@ -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>
);

16
src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
View File

@ -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>
`;

4
src/components/ThemeSwitcher/ThemeSwitcher.tsx
View File

@ -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>
);
};

16
src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap
View File

@ -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>

24
src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap
View File

@ -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"
>

24
src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap
View File

@ -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"
>

16
src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap
View File

@ -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>

16
src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap
View File

@ -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>

32
src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap
View File

@ -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"

24
src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap
View File

@ -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"
>

16
src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap
View File

@ -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>