mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-09-14 12:10:49 +02:00
enhanced print view
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
exports[`Author renders correctly 1`] = `
|
||||
<div>
|
||||
<p>
|
||||
Written by:
|
||||
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>
|
||||
`;
|
||||
|
||||
@@ -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,94 +40,98 @@ Array [
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
<span
|
||||
className="hideInPrintView"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tags renders correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="undefined hideInPrintView"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
|
||||
@@ -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,94 +41,98 @@ exports[`Post renders correctly 1`] = `
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
<span
|
||||
className="hideInPrintView"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
@@ -141,7 +158,8 @@ exports[`Post renders correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Written by:
|
||||
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>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user