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
- Add a dark mode
- custom blog header
- migrate resume
- migrate projects
- migrate some example blogs
- release to sftp or gh-pages
- "time to read"
- 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
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
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).
## 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 renderer from "react-test-renderer";
import { Content } from "@/components/Post/Content";
import * as mocks from "@/mocks";
const mockedStaticQuery = StaticQuery as jest.Mock;
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
describe("Content", () => {
beforeEach(() => {
mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
});
it("renders correctly", () => {
const props = {
title: mocks.markdownRemark.frontmatter.title,

View File

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

View File

@ -1,7 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Content renders correctly 1`] = `
<div>
Array [
<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>
<h1>
Perfecting the Art of Perfection
</h1>
@ -12,5 +40,6 @@ exports[`Content renders correctly 1`] = `
}
}
/>
</div>
</div>,
]
`;

View File

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

View File

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