custom post header

This commit is contained in:
Rick van Lieshout 2022-09-10 11:25:05 +02:00
parent 5277f19ca6
commit 109e47353f
10 changed files with 212 additions and 42 deletions

View File

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

View File

@ -23,9 +23,19 @@ include:
Cookies like these are stored for pretty much every website you Cookies like these are stored for pretty much every website you
visit and they make the World Wide Web what it is today. visit and they make the World Wide Web what it is today.
## The EU cookie law
Since mid 2015 every website which is either hosted in Europe or Since mid 2015 every website which is either hosted in Europe or
targets the European market is required to inform and get consent from 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 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 bottom of the page which can be dismissed with a simple button. More
information about the legislation around the cookie law can be found information about the legislation around the cookie law can be found
[here](https://wikis.ec.europa.eu/display/WEBGUIDE/04.+Cookies+and+similar+technologies). [here](https://wikis.ec.europa.eu/display/WEBGUIDE/04.+Cookies+and+similar+technologies).
## Revoking cookie access
All well known browser offer a way for you to revoke any cookie. Explore the links below to learn more.
- [Deleting cookies in Chrome](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en)
- [Deleting cookies in Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
- [Deleting cookies in Edge](https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy)

View File

@ -1,10 +1,17 @@
import { Content } from "@/components/Post/Content";
import * as mocks from "@/mocks";
import { StaticQuery, useStaticQuery } from "gatsby";
import React from "react"; import React from "react";
import renderer from "react-test-renderer"; import renderer from "react-test-renderer";
import { Content } from "@/components/Post/Content"; const mockedStaticQuery = StaticQuery as jest.Mock;
import * as mocks from "@/mocks"; const mockedUseStaticQuery = useStaticQuery as jest.Mock;
describe("Content", () => { describe("Content", () => {
beforeEach(() => {
mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
});
it("renders correctly", () => { it("renders correctly", () => {
const props = { const props = {
title: mocks.markdownRemark.frontmatter.title, title: mocks.markdownRemark.frontmatter.title,

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { useSiteMetadata } from "../../../hooks";
import { PostHeader } from "../../PostHeader/PostHeader";
import * as styles from "./Content.module.scss"; import * as styles from "./Content.module.scss";
interface Props { interface Props {
@ -7,11 +8,17 @@ interface Props {
body: string; body: string;
} }
const Content: React.FC<Props> = ({ body, title }: Props) => ( const Content: React.FC<Props> = ({ body, title }: Props) => {
<div className={styles.content}> const { author } = useSiteMetadata();
<h1 className={styles.title}>{title}</h1> return (
<div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} /> <>
</div> <PostHeader author={author} />
); <div className={styles.content}>
<h1 className={styles.title}>{title}</h1>
<div className={styles.body} dangerouslySetInnerHTML={{ __html: body }} />
</div>
</>
);
};
export default Content; export default Content;

View File

@ -1,16 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content renders correctly 1`] = ` exports[`Content renders correctly 1`] = `
<div> Array [
<h1> <div>
Perfecting the Art of Perfection <span>
</h1> <span>
<div <a
dangerouslySetInnerHTML={ href="/"
Object { >
"__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>", Rick
<span>
van Lieshout
</span>
</a>
</span>
</span>
<span>
<a
href="/"
style={
Object {
"lineHeight": "50px",
"marginRight": "10px",
}
}
>
↩ All articles
</a>
</span>
</div>,
<div>
<h1>
Perfecting the Art of Perfection
</h1>
<div
dangerouslySetInnerHTML={
Object {
"__html": "<p>An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.</p>",
}
} }
} />
/> </div>,
</div> ]
`; `;

View File

@ -1,16 +1,11 @@
import type { Node } from "@/types";
import React from "react"; import React from "react";
import { Link } from "gatsby";
import { Author } from "./Author"; import { Author } from "./Author";
import { Comments } from "./Comments"; import { Comments } from "./Comments";
import { Content } from "./Content"; import { Content } from "./Content";
import { Meta } from "./Meta"; import { Meta } from "./Meta";
import { Tags } from "./Tags";
import * as styles from "./Post.module.scss"; import * as styles from "./Post.module.scss";
import type { Node } from "@/types"; import { Tags } from "./Tags";
interface Props { interface Props {
post: Node; post: Node;
@ -23,10 +18,6 @@ const Post: React.FC<Props> = ({ post }: Props) => {
return ( return (
<div className={styles.post}> <div className={styles.post}>
<Link className={styles.button} to="/">
All Articles
</Link>
<div className={styles.content}> <div className={styles.content}>
<Content body={html} title={title} /> <Content body={html} title={title} />
</div> </div>

View File

@ -2,12 +2,34 @@
exports[`Post renders correctly 1`] = ` exports[`Post renders correctly 1`] = `
<div> <div>
<a
href="/"
>
All Articles
</a>
<div> <div>
<div>
<span>
<span>
<a
href="/"
>
Rick
<span>
van Lieshout
</span>
</a>
</span>
</span>
<span>
<a
href="/"
style={
Object {
"lineHeight": "50px",
"marginRight": "10px",
}
}
>
↩ All articles
</a>
</span>
</div>
<div> <div>
<h1> <h1>
Perfecting the Art of Perfection Perfecting the Art of Perfection

View File

@ -0,0 +1,54 @@
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.header {
align-items: baseline;
background: #fff;
border-bottom: 1px solid #808080;
color: #000;
display: flex;
height: 50px;
justify-content: space-between;
margin:auto;
max-width: $layout-post-width;
position: sticky;
top:0;
z-index: 999;
.title {
font-size: $typographic-base-font-size * 1.125 !important;
font-weight: 600;
line-height: 50px !important;
@include line-height(1.125);
@include margin(0.5, 0, 0.5, 0);
.link {
color: $color-base;
&:hover,
&:focus {
color: $color-base;
}
}
}
.name {
color: #000;
}
}
@media only screen and (max-device-width: 350px){
.surname{
display: none;
}
}
.photo {
background-clip: padding-box;
border-radius: 50%;
display: inline-block;
height: 40px;
margin-top: 5px;
width: 40px;
@include margin-bottom(0);
}

View File

@ -0,0 +1,27 @@
import { Image } from "@/components/Image";
import { Link } from "gatsby";
import React, { FunctionComponent } from "react";
import * as styles from "./PostHeader.module.scss";
type Props = { author: { name: string; photo: string } };
export const PostHeader: FunctionComponent<Props> = ({ author }) => {
return (
<div className={styles.header}>
<span>
<Image alt={author.name} path={author.photo} className={styles.photo} />
<span className={styles.title}>
<Link className={styles.name} to="/">
Rick <span className={styles.surname}>van Lieshout</span>
</Link>
</span>
</span>
<span>
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
All articles
</Link>
</span>
</div>
);
};

View File

@ -3,12 +3,34 @@
exports[`PostTemplate renders correctly 1`] = ` exports[`PostTemplate renders correctly 1`] = `
<div> <div>
<div> <div>
<a
href="/"
>
All Articles
</a>
<div> <div>
<div>
<span>
<span>
<a
href="/"
>
Rick
<span>
van Lieshout
</span>
</a>
</span>
</span>
<span>
<a
href="/"
style={
Object {
"lineHeight": "50px",
"marginRight": "10px",
}
}
>
↩ All articles
</a>
</span>
</div>
<div> <div>
<h1> <h1>
Perfecting the Art of Perfection Perfecting the Art of Perfection