mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-27 04:32:32 +02:00
refactor(starter): upgrade and move to typescript
This commit is contained in:
Alexander Shelepenok
@@ -1 +0,0 @@
|
||||
export { default } from "./CategoriesListTemplate";
|
||||
@@ -5,24 +5,24 @@ import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import CategoriesListTemplate from "./CategoriesListTemplate";
|
||||
import CategoriesTemplate from "./CategoriesTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("CategoriesListTemplate", () => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
...mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
describe("CategoriesTemplate", () => {
|
||||
beforeEach(() => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
allMarkdownRemark: mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
|
||||
mockedUseStaticQuery.mockReturnValue(props);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<CategoriesListTemplate />).toJSON();
|
||||
const tree = renderer.create(<CategoriesTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -8,7 +8,7 @@ import { Sidebar } from "@/components/Sidebar";
|
||||
import { useCategoriesList, useSiteMetadata } from "@/hooks";
|
||||
import { toKebabCase } from "@/utils";
|
||||
|
||||
const CategoriesListTemplate: React.FC = () => {
|
||||
const CategoriesTemplate: React.FC = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
const categories = useCategoriesList();
|
||||
|
||||
@@ -30,4 +30,4 @@ const CategoriesListTemplate: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CategoriesListTemplate;
|
||||
export default CategoriesTemplate;
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
exports[`CategoriesTemplate renders correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,51 +136,19 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
Categories
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
@@ -11,13 +11,6 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("CategoryTemplate", () => {
|
||||
const props = {
|
||||
data: {
|
||||
...mocks.allMarkdownRemark,
|
||||
},
|
||||
...mocks.pageContext,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
@@ -26,6 +19,13 @@ describe("CategoryTemplate", () => {
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props = {
|
||||
data: {
|
||||
allMarkdownRemark: mocks.allMarkdownRemark,
|
||||
},
|
||||
pageContext: mocks.pageContext,
|
||||
};
|
||||
|
||||
const tree = renderer.create(<CategoryTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -47,13 +47,13 @@ const CategoryTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
query CategoryTemplate($group: String, $limit: Int!, $offset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
limit: $limit
|
||||
skip: $offset
|
||||
filter: {
|
||||
frontmatter: {
|
||||
category: { eq: $category }
|
||||
category: { eq: $group }
|
||||
template: { eq: "post" }
|
||||
draft: { ne: true }
|
||||
}
|
||||
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,170 +136,98 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
typography
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div
|
||||
className="feed"
|
||||
>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/typography"
|
||||
>
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<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>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<p>
|
||||
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
|
||||
</p>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pagination"
|
||||
>
|
||||
<div
|
||||
className="pagination__prev"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
className=""
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="pagination__next"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
className=""
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as CategoryTemplate } from "./CategoryTemplate";
|
||||
@@ -11,21 +11,19 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("IndexTemplate", () => {
|
||||
const props = {
|
||||
data: {
|
||||
...mocks.allMarkdownRemark,
|
||||
},
|
||||
...mocks.pageContext,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
);
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props = {
|
||||
data: {
|
||||
allMarkdownRemark: mocks.allMarkdownRemark,
|
||||
},
|
||||
pageContext: mocks.pageContext,
|
||||
};
|
||||
|
||||
const tree = renderer.create(<IndexTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -45,10 +45,10 @@ const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
|
||||
query IndexTemplate($limit: Int!, $offset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
limit: $limit
|
||||
skip: $offset
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
|
||||
) {
|
||||
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`IndexTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h1
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h1>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h1>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,165 +136,95 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div
|
||||
className="feed"
|
||||
>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/typography"
|
||||
>
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<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>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<p>
|
||||
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
|
||||
</p>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pagination"
|
||||
>
|
||||
<div
|
||||
className="pagination__prev"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
className=""
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="pagination__next"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
className=""
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as IndexTemplate } from "./IndexTemplate";
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,51 +136,19 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
NOT FOUND
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
You just hit a route that doesn't exist... the sadness.
|
||||
</p>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from "./NotFoundTemplate";
|
||||
@@ -25,7 +25,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
<Layout
|
||||
title={`${title} - ${siteTitle}`}
|
||||
description={metaDescription}
|
||||
socialImage={socialImage?.publicURL}
|
||||
socialImage={socialImage}
|
||||
>
|
||||
<Sidebar />
|
||||
<Page title={title}>
|
||||
@@ -36,7 +36,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PageBySlug($slug: String!) {
|
||||
query PageTemplate($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
@@ -44,9 +44,7 @@ export const query = graphql`
|
||||
title
|
||||
date
|
||||
description
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
socialImage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PageTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,55 +136,23 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
Perfecting the Art of Perfection
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "",
|
||||
"__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>",
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as PageTemplate } from "./PageTemplate";
|
||||
@@ -18,7 +18,9 @@ describe("PostTemplate", () => {
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
<Layout
|
||||
title={`${title} - ${siteTitle}`}
|
||||
description={metaDescription}
|
||||
socialImage={socialImage?.publicURL}
|
||||
socialImage={socialImage}
|
||||
>
|
||||
<Post post={data.markdownRemark} />
|
||||
</Layout>
|
||||
@@ -31,7 +31,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PostBySlug($slug: String!) {
|
||||
query PostTemplate($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
@@ -44,9 +44,7 @@ export const query = graphql`
|
||||
description
|
||||
tags
|
||||
title
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
socialImage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,62 +1,39 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PostTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="post"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
className="post__home-button"
|
||||
href="/"
|
||||
>
|
||||
All Articles
|
||||
</a>
|
||||
<div
|
||||
className="post__content"
|
||||
>
|
||||
<div
|
||||
className="content"
|
||||
>
|
||||
<h1
|
||||
className="content__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
Perfecting the Art of Perfection
|
||||
</h1>
|
||||
<div
|
||||
className="content__body"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "",
|
||||
"__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>
|
||||
<div
|
||||
className="post__footer"
|
||||
>
|
||||
<div
|
||||
className="meta"
|
||||
>
|
||||
<p
|
||||
className="meta__date"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<p>
|
||||
Published
|
||||
|
||||
Sep 1, 2016
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<p
|
||||
className="author__bio"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
<a
|
||||
className="author__bio-twitter"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
@@ -69,9 +46,7 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="post__comments"
|
||||
/>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as PostTemplate } from "./PostTemplate";
|
||||
@@ -11,13 +11,6 @@ const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("TagTemplate", () => {
|
||||
const props = {
|
||||
data: {
|
||||
...mocks.allMarkdownRemark,
|
||||
},
|
||||
...mocks.pageContext,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
@@ -26,6 +19,13 @@ describe("TagTemplate", () => {
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props = {
|
||||
data: {
|
||||
allMarkdownRemark: mocks.allMarkdownRemark,
|
||||
},
|
||||
pageContext: mocks.pageContext,
|
||||
};
|
||||
|
||||
const tree = renderer.create(<TagTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -47,7 +47,7 @@ const TagTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query TagPage($tag: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
query TagTemplate($group: String, $limit: Int!, $offset: Int!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
@@ -55,11 +55,11 @@ export const query = graphql`
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
limit: $limit
|
||||
skip: $offset
|
||||
filter: {
|
||||
frontmatter: {
|
||||
tags: { in: [$tag] }
|
||||
tags: { in: [$group] }
|
||||
template: { eq: "post" }
|
||||
draft: { ne: true }
|
||||
}
|
||||
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TagTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,170 +136,98 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
typography
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div
|
||||
className="feed"
|
||||
>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/typography"
|
||||
>
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<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>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="feed__item"
|
||||
>
|
||||
<div
|
||||
className="feed__item-meta"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<time
|
||||
className="feed__item-meta-time"
|
||||
dateTime="September 1, 2016"
|
||||
>
|
||||
September 2016
|
||||
</time>
|
||||
<span
|
||||
className="feed__item-meta-divider"
|
||||
/>
|
||||
<span
|
||||
className="feed__item-meta-category"
|
||||
>
|
||||
<span />
|
||||
<span>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h2
|
||||
className="feed__item-title"
|
||||
>
|
||||
<h2>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
<p>
|
||||
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
|
||||
</p>
|
||||
<a
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pagination"
|
||||
>
|
||||
<div
|
||||
className="pagination__prev"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
className=""
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="pagination__next"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
className=""
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as TagTemplate } from "./TagTemplate";
|
||||
@@ -1 +0,0 @@
|
||||
export { default as TagsListTemplate } from "./TagsListTemplate";
|
||||
@@ -5,24 +5,24 @@ import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import TagsListTemplate from "./TagsListTemplate";
|
||||
import TagsTemplate from "./TagsTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("TagsListTemplate", () => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
...mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
describe("TagsTemplate", () => {
|
||||
beforeEach(() => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
allMarkdownRemark: mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
|
||||
mockedUseStaticQuery.mockReturnValue(props);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<TagsListTemplate />).toJSON();
|
||||
const tree = renderer.create(<TagsTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -8,7 +8,7 @@ import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata, useTagsList } from "@/hooks";
|
||||
import { toKebabCase } from "@/utils";
|
||||
|
||||
const TagsListTemplate: React.FC = () => {
|
||||
const TagsTemplate: React.FC = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
const tags = useTagsList();
|
||||
|
||||
@@ -17,7 +17,7 @@ const TagsListTemplate: React.FC = () => {
|
||||
<Sidebar />
|
||||
<Page title="Tags">
|
||||
<ul>
|
||||
{tags.map((tag) => (
|
||||
{tags.map(tag => (
|
||||
<li key={tag.fieldValue}>
|
||||
<Link to={`/tag/${toKebabCase(tag.fieldValue)}/`}>
|
||||
{tag.fieldValue} ({tag.totalCount})
|
||||
@@ -30,4 +30,4 @@ const TagsListTemplate: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default TagsListTemplate;
|
||||
export default TagsTemplate;
|
||||
@@ -1,76 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TagsListTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="layout"
|
||||
>
|
||||
<div
|
||||
className="sidebar"
|
||||
>
|
||||
<div
|
||||
className="sidebar__inner"
|
||||
>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
exports[`TagsTemplate renders correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
<h2
|
||||
className="author__title"
|
||||
>
|
||||
/>
|
||||
<h2>
|
||||
<a
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
<p>
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
className="menu"
|
||||
>
|
||||
<ul
|
||||
className="menu__list"
|
||||
>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/about"
|
||||
>
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="menu__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Contact Me
|
||||
@@ -78,23 +44,15 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div
|
||||
className="contacts"
|
||||
>
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
@@ -106,17 +64,13 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="mailto:#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -128,17 +82,13 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://github.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -150,17 +100,13 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
@@ -172,17 +118,13 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
@@ -194,51 +136,19 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://vk.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 31 28"
|
||||
>
|
||||
<title>
|
||||
vkontakte
|
||||
</title>
|
||||
<path
|
||||
d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
<div>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="page"
|
||||
>
|
||||
<div
|
||||
className="page__inner"
|
||||
>
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
Tags
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
Reference in New Issue
Block a user