mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-08-06 01:18:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(starter): upgrade to new version of gatsby

Browse Source
This commit is contained in:
Alexander Shelepenok
2022-01-09 20:12:31 +00:00
parent 84bdc5899d
commit 67ebabbaac
397 changed files with 26665 additions and 34984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Feed/Feed.js
View File

@@ -1,34 +0,0 @@
// @flow strict
import React from 'react';
import { Link } from 'gatsby';
import type { Edges } from '../../types';
import styles from './Feed.module.scss';
type Props = {
edges: Edges
};
const Feed = ({ edges }: Props) => (
<div className={styles['feed']}>
{edges.map((edge) => (
<div className={styles['feed__item']} key={edge.node.fields.slug}>
<div className={styles['feed__item-meta']}>
<time className={styles['feed__item-meta-time']} dateTime={ new Date(edge.node.frontmatter.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}>
{ new Date(edge.node.frontmatter.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long' })}
</time>
<span className={styles['feed__item-meta-divider']} />
<span className={styles['feed__item-meta-category']}>
<Link to={edge.node.fields.categorySlug} className={styles['feed__item-meta-category-link']}>{edge.node.frontmatter.category}</Link>
</span>
</div>
<h2 className={styles['feed__item-title']}>
<Link className={styles['feed__item-title-link']} to={edge.node.fields.slug}>{edge.node.frontmatter.title}</Link>
</h2>
<p className={styles['feed__item-description']}>{edge.node.frontmatter.description}</p>
<Link className={styles['feed__item-readmore']} to={edge.node.fields.slug}>Read</Link>
</div>
))}
</div>
);
export default Feed;

32
src/components/Feed/Feed.module.scss
View File

@@ -1,43 +1,41 @@
@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.feed {
&__item {
@include margin-bottom(1.25);
&:last-child {
@include margin-bottom(.5);
@include margin-bottom(0.5);
}
&-title {
font-size: $typographic-base-font-size * 1.6875;
@include line-height(1.5);
@include margin-top(0);
@include margin-bottom(.5);
@include margin-bottom(0.5);
&-link {
color: $color-base;
&:hover,
&:focus {
color: $color-base;
border-bottom: 1px solid $color-base;
color: $color-base;
}
}
}
&-description {
font-size: $typographic-base-font-size;
@include line-height(1);
@include margin-bottom(.75);
@include margin-bottom(0.75);
}
&-meta {
&-time {
font-size: $typographic-small-font-size;
color: $color-base;
font-size: $typographic-small-font-size;
font-weight: 600;
text-transform: uppercase;
}
@@ -48,8 +46,8 @@
&-category {
&-link {
font-size: $typographic-small-font-size;
color: $color-secondary;
font-size: $typographic-small-font-size;
font-weight: 600;
text-transform: uppercase;
@@ -57,25 +55,19 @@
&:focus {
color: $color-primary;
}
}
}
}
&-readmore {
font-size: $typographic-base-font-size;
&-more {
color: $color-primary;
font-size: $typographic-base-font-size;
&:hover,
&:focus {
color: $color-primary;
border-bottom: 1px solid $color-primary;
color: $color-primary;
}
}
}
}
}

66
src/components/Feed/Feed.test.js
View File

@@ -1,66 +0,0 @@
// @flow strict
import React from 'react';
import renderer from 'react-test-renderer';
import Feed from './Feed';
describe('Feed', () => {
const props = {
edges: [
{
node: {
fields: {
slug: '/test_0',
categorySlug: '/test_0',
tagSlugs: [
'/test-1',
'/test-2'
]
},
frontmatter: {
date: '2016-09-01',
description: 'test_0',
category: 'test_0',
tags: [
'test-1',
'test-2'
],
title: 'test_0'
},
id: 'test-123',
html: '<p>test</p>'
}
},
{
node: {
fields: {
slug: '/test_1',
categorySlug: '/test_1',
tagSlugs: [
'/test-1',
'/test-2'
]
},
frontmatter: {
date: '2016-09-01',
description: 'test_1',
category: 'test_1',
tags: [
'test-1',
'test-2'
],
title: 'test_1'
},
id: 'test-321',
html: '<p>test</p>'
}
}
]
};
it('renders correctly', () => {
const tree = renderer.create(<Feed {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

54
src/components/Feed/Feed.test.tsx Normal file
View File

@@ -0,0 +1,54 @@
import React from "react";
import renderer from "react-test-renderer";
import { Feed } from "@/components/Feed";
describe("Feed", () => {
const props = {
edges: [
{
node: {
fields: {
slug: "/test_0",
categorySlug: "/test_0",
tagSlugs: ["/test-1", "/test-2"],
},
frontmatter: {
template: "post",
date: "2016-09-01",
description: "test_0",
category: "test_0",
tags: ["test-1", "test-2"],
title: "test_0",
},
id: "test-123",
html: "<p>test</p>",
},
},
{
node: {
fields: {
slug: "/test_1",
categorySlug: "/test_1",
tagSlugs: ["/test-1", "/test-2"],
},
frontmatter: {
template: "post",
date: "2016-09-01",
description: "test_1",
category: "test_1",
tags: ["test-1", "test-2"],
title: "test_1",
},
id: "test-321",
html: "<p>test</p>",
},
},
],
};
it("renders correctly", () => {
const tree = renderer.create(<Feed {...props} />).toJSON();
expect(tree).toMatchSnapshot();
});
});

59
src/components/Feed/Feed.tsx Normal file
View File

@@ -0,0 +1,59 @@
import React from "react";
import { Link } from "gatsby";
import { Edge } from "@/types";
import styles from "./Feed.module.scss";
type Props = {
edges: Array<Edge>;
};
const Feed: React.FC<Props> = ({ edges }: Props) => (
<div className={styles.feed}>
{edges.map(edge => (
<div className={styles.feed__item} key={edge.node.fields.slug}>
<div className={styles["feed__item-meta"]}>
<time
className={styles["feed__item-meta-time"]}
dateTime={new Date(edge.node.frontmatter.date).toLocaleDateString(
"en-US",
{ year: "numeric", month: "long", day: "numeric" },
)}
>
{new Date(edge.node.frontmatter.date).toLocaleDateString("en-US", {
year: "numeric",
month: "long",
})}
</time>
<span className={styles["feed__item-meta-divider"]} />
<span className={styles["feed__item-meta-category"]}>
<Link
to={edge.node.fields.categorySlug}
className={styles["feed__item-meta-category-link"]}
>
{edge.node.frontmatter.category}
</Link>
</span>
</div>
<h2 className={styles["feed__item-title"]}>
<Link
className={styles["feed__item-title-link"]}
to={edge.node.fields.slug}
>
{edge.node.frontmatter.title}
</Link>
</h2>
<p className={styles["feed__item-description"]}>
{edge.node.frontmatter.description}
</p>
<Link className={styles["feed__item-more"]} to={edge.node.fields.slug}>
Read
</Link>
</div>
))}
</div>
);
export default Feed;

4
src/components/Feed/__snapshots__/Feed.test.js.snap → src/components/Feed/__snapshots__/Feed.test.tsx.snap
View File

@@ -46,7 +46,7 @@ exports[`Feed renders correctly 1`] = `
test_0
</p>
<a
className="feed__item-readmore"
className="feed__item-more"
href="/test_0"
>
Read
@@ -94,7 +94,7 @@ exports[`Feed renders correctly 1`] = `
test_1
</p>
<a
className="feed__item-readmore"
className="feed__item-more"
href="/test_1"
>
Read

2
src/components/Feed/index.js
View File

@@ -1,2 +0,0 @@
// @flow strict
export { default } from './Feed';

1
src/components/Feed/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default as Feed } from "./Feed";