mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-27 04:32:32 +02:00
refactor(starter): upgrade to new version of gatsby
This commit is contained in:
Alexander Shelepenok
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import CategoriesListTemplate from "./CategoriesListTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("CategoriesListTemplate", () => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
...mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
|
||||
mockedUseStaticQuery.mockReturnValue(props);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<CategoriesListTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,13 +1,14 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import kebabCase from 'lodash/kebabCase';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Layout from '../components/Layout';
|
||||
import Page from '../components/Page';
|
||||
import { useSiteMetadata, useCategoriesList } from '../hooks';
|
||||
import React from "react";
|
||||
|
||||
const CategoriesListTemplate = () => {
|
||||
import { Link } from "gatsby";
|
||||
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useCategoriesList, useSiteMetadata } from "@/hooks";
|
||||
import { toKebabCase } from "@/utils";
|
||||
|
||||
const CategoriesListTemplate: React.FC = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
const categories = useCategoriesList();
|
||||
|
||||
@@ -16,9 +17,9 @@ const CategoriesListTemplate = () => {
|
||||
<Sidebar />
|
||||
<Page title="Categories">
|
||||
<ul>
|
||||
{categories.map((category) => (
|
||||
{categories.map(category => (
|
||||
<li key={category.fieldValue}>
|
||||
<Link to={`/category/${kebabCase(category.fieldValue)}/`}>
|
||||
<Link to={`/category/${toKebabCase(category.fieldValue)}/`}>
|
||||
{category.fieldValue} ({category.totalCount})
|
||||
</Link>
|
||||
</li>
|
||||
@@ -17,10 +17,10 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -242,9 +242,9 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="/category/test-0/"
|
||||
href="/category/typography/"
|
||||
>
|
||||
test_0
|
||||
typography
|
||||
(
|
||||
1
|
||||
)
|
||||
@@ -252,11 +252,11 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/category/test-1/"
|
||||
href="/category/design-inspiration/"
|
||||
>
|
||||
test_1
|
||||
design inspiration
|
||||
(
|
||||
2
|
||||
1
|
||||
)
|
||||
</a>
|
||||
</li>
|
||||
1
src/templates/CategoriesListTemplate/index.ts
Normal file
1
src/templates/CategoriesListTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from "./CategoriesListTemplate";
|
||||
32
src/templates/CategoryTemplate/CategoryTemplate.test.tsx
Normal file
32
src/templates/CategoryTemplate/CategoryTemplate.test.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import CategoryTemplate from "./CategoryTemplate";
|
||||
|
||||
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),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<CategoryTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
81
src/templates/CategoryTemplate/CategoryTemplate.tsx
Normal file
81
src/templates/CategoryTemplate/CategoryTemplate.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import { Feed } from "@/components/Feed";
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Pagination } from "@/components/Pagination";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import { AllMarkdownRemark, PageContext } from "@/types";
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
allMarkdownRemark: AllMarkdownRemark;
|
||||
};
|
||||
pageContext: PageContext;
|
||||
}
|
||||
|
||||
const CategoryTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const { group, pagination } = pageContext;
|
||||
const { currentPage, prevPagePath, nextPagePath, hasPrevPage, hasNextPage } =
|
||||
pagination;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle =
|
||||
currentPage > 0
|
||||
? `${group} - Page ${currentPage} - ${siteTitle}`
|
||||
: `${group} - ${siteTitle}`;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar />
|
||||
<Page title={group}>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
filter: {
|
||||
frontmatter: {
|
||||
category: { eq: $category }
|
||||
template: { eq: "post" }
|
||||
draft: { ne: true }
|
||||
}
|
||||
}
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
description
|
||||
category
|
||||
title
|
||||
date
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default CategoryTemplate;
|
||||
@@ -17,10 +17,10 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
test
|
||||
typography
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
@@ -262,9 +262,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/typography"
|
||||
>
|
||||
test
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -273,19 +273,19 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_0"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
test_0
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_0
|
||||
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-readmore"
|
||||
href="/test_0"
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -310,9 +310,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
test
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -321,19 +321,19 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_1"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
test_1
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_1
|
||||
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-readmore"
|
||||
href="/test_1"
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -347,7 +347,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
href="/page/1"
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
@@ -358,7 +358,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
href="/page/3"
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
1
src/templates/CategoryTemplate/index.ts
Normal file
1
src/templates/CategoryTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as CategoryTemplate } from "./CategoryTemplate";
|
||||
32
src/templates/IndexTemplate/IndexTemplate.test.tsx
Normal file
32
src/templates/IndexTemplate/IndexTemplate.test.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import IndexTemplate from "./IndexTemplate";
|
||||
|
||||
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),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<IndexTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
73
src/templates/IndexTemplate/IndexTemplate.tsx
Normal file
73
src/templates/IndexTemplate/IndexTemplate.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import { Feed } from "@/components/Feed";
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Pagination } from "@/components/Pagination";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import { AllMarkdownRemark, PageContext } from "@/types";
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
allMarkdownRemark: AllMarkdownRemark;
|
||||
};
|
||||
pageContext: PageContext;
|
||||
}
|
||||
|
||||
const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const { pagination } = pageContext;
|
||||
const { currentPage, hasNextPage, hasPrevPage, prevPagePath, nextPagePath } =
|
||||
pagination;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle =
|
||||
currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar isIndex />
|
||||
<Page>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
categorySlug
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
description
|
||||
category
|
||||
title
|
||||
date
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default IndexTemplate;
|
||||
@@ -17,10 +17,10 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h1>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -257,9 +257,9 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/typography"
|
||||
>
|
||||
test
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -268,19 +268,19 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_0"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
test_0
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_0
|
||||
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-readmore"
|
||||
href="/test_0"
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -305,9 +305,9 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
test
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -316,19 +316,19 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_1"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
test_1
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_1
|
||||
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-readmore"
|
||||
href="/test_1"
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -342,7 +342,7 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
href="/page/1"
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
@@ -353,7 +353,7 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
href="/page/3"
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
1
src/templates/IndexTemplate/index.ts
Normal file
1
src/templates/IndexTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as IndexTemplate } from "./IndexTemplate";
|
||||
25
src/templates/NotFoundTemplate/NotFoundTemplate.test.tsx
Normal file
25
src/templates/NotFoundTemplate/NotFoundTemplate.test.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import NotFoundTemplate from "./NotFoundTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("NotFoundTemplate", () => {
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<NotFoundTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
21
src/templates/NotFoundTemplate/NotFoundTemplate.tsx
Normal file
21
src/templates/NotFoundTemplate/NotFoundTemplate.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
|
||||
const NotFoundTemplate: React.FC = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
|
||||
return (
|
||||
<Layout title={`Not Found - ${title}`} description={subtitle}>
|
||||
<Sidebar />
|
||||
<Page title="NOT FOUND">
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundTemplate;
|
||||
@@ -17,10 +17,10 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
1
src/templates/NotFoundTemplate/index.ts
Normal file
1
src/templates/NotFoundTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from "./NotFoundTemplate";
|
||||
31
src/templates/PageTemplate/PageTemplate.test.tsx
Normal file
31
src/templates/PageTemplate/PageTemplate.test.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import PageTemplate from "./PageTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("PageTemplate", () => {
|
||||
const props = {
|
||||
data: {
|
||||
markdownRemark: mocks.markdownRemark,
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) =>
|
||||
render(mocks.siteMetadata),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<PageTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
55
src/templates/PageTemplate/PageTemplate.tsx
Normal file
55
src/templates/PageTemplate/PageTemplate.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import { Node } from "@/types";
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
markdownRemark: Node;
|
||||
};
|
||||
}
|
||||
|
||||
const PageTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
const { html: body } = data.markdownRemark;
|
||||
const { frontmatter } = data.markdownRemark;
|
||||
const { title, description = "", socialImage } = frontmatter;
|
||||
const metaDescription = description || siteSubtitle;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`${title} - ${siteTitle}`}
|
||||
description={metaDescription}
|
||||
socialImage={socialImage?.publicURL}
|
||||
>
|
||||
<Sidebar />
|
||||
<Page title={title}>
|
||||
<div dangerouslySetInnerHTML={{ __html: body }} />
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PageBySlug($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
description
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default PageTemplate;
|
||||
@@ -17,10 +17,10 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
test
|
||||
Perfecting the Art of Perfection
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
@@ -242,7 +242,7 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<div
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<p>test</p>",
|
||||
"__html": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
1
src/templates/PageTemplate/index.ts
Normal file
1
src/templates/PageTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as PageTemplate } from "./PageTemplate";
|
||||
29
src/templates/PostTemplate/PostTemplate.test.tsx
Normal file
29
src/templates/PostTemplate/PostTemplate.test.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import PostTemplate from "./PostTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("PostTemplate", () => {
|
||||
const props = {
|
||||
data: {
|
||||
markdownRemark: mocks.markdownRemark,
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<PostTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
55
src/templates/PostTemplate/PostTemplate.tsx
Normal file
55
src/templates/PostTemplate/PostTemplate.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Post } from "@/components/Post";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import { Node } from "@/types";
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
markdownRemark: Node;
|
||||
};
|
||||
}
|
||||
|
||||
const PostTemplate: React.FC<Props> = ({ data }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
const { frontmatter } = data.markdownRemark;
|
||||
const { title, description = "", socialImage } = frontmatter;
|
||||
const metaDescription = description || siteSubtitle;
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`${title} - ${siteTitle}`}
|
||||
description={metaDescription}
|
||||
socialImage={socialImage?.publicURL}
|
||||
>
|
||||
<Post post={data.markdownRemark} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PostBySlug($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
fields {
|
||||
slug
|
||||
tagSlugs
|
||||
}
|
||||
frontmatter {
|
||||
date
|
||||
description
|
||||
tags
|
||||
title
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default PostTemplate;
|
||||
@@ -22,13 +22,13 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
<h1
|
||||
className="content__title"
|
||||
>
|
||||
test
|
||||
Perfecting the Art of Perfection
|
||||
</h1>
|
||||
<div
|
||||
className="content__body"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "<p>test</p>",
|
||||
"__html": "",
|
||||
}
|
||||
}
|
||||
/>
|
||||
@@ -43,45 +43,18 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
<p
|
||||
className="meta__date"
|
||||
>
|
||||
Published
|
||||
Published
|
||||
|
||||
Sep 1, 2016
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="tags"
|
||||
>
|
||||
<ul
|
||||
className="tags__list"
|
||||
>
|
||||
<li
|
||||
className="tags__list-item"
|
||||
>
|
||||
<a
|
||||
className="tags__list-item-link"
|
||||
href="/test_0"
|
||||
>
|
||||
test_0
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="tags__list-item"
|
||||
>
|
||||
<a
|
||||
className="tags__list-item-link"
|
||||
href="/test_1"
|
||||
>
|
||||
test_1
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="author"
|
||||
>
|
||||
<p
|
||||
className="author__bio"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
<a
|
||||
className="author__bio-twitter"
|
||||
href="https://www.twitter.com/#"
|
||||
@@ -89,7 +62,7 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
target="_blank"
|
||||
>
|
||||
<strong>
|
||||
Test name
|
||||
John Doe
|
||||
</strong>
|
||||
on Twitter
|
||||
</a>
|
||||
1
src/templates/PostTemplate/index.ts
Normal file
1
src/templates/PostTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as PostTemplate } from "./PostTemplate";
|
||||
32
src/templates/TagTemplate/TagTemplate.test.tsx
Normal file
32
src/templates/TagTemplate/TagTemplate.test.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import TagTemplate from "./TagTemplate";
|
||||
|
||||
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),
|
||||
);
|
||||
mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<TagTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
87
src/templates/TagTemplate/TagTemplate.tsx
Normal file
87
src/templates/TagTemplate/TagTemplate.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import { Feed } from "@/components/Feed";
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Pagination } from "@/components/Pagination";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import { AllMarkdownRemark, PageContext } from "@/types";
|
||||
|
||||
interface Props {
|
||||
data: {
|
||||
allMarkdownRemark: AllMarkdownRemark;
|
||||
};
|
||||
pageContext: PageContext;
|
||||
}
|
||||
|
||||
const TagTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const { group, pagination } = pageContext;
|
||||
const { currentPage, prevPagePath, nextPagePath, hasPrevPage, hasNextPage } =
|
||||
pagination;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle =
|
||||
currentPage > 0
|
||||
? `${group} - Page ${currentPage} - ${siteTitle}`
|
||||
: `${group} - ${siteTitle}`;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar />
|
||||
<Page title={group}>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query TagPage($tag: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit
|
||||
skip: $postsOffset
|
||||
filter: {
|
||||
frontmatter: {
|
||||
tags: { in: [$tag] }
|
||||
template: { eq: "post" }
|
||||
draft: { ne: true }
|
||||
}
|
||||
}
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
category
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default TagTemplate;
|
||||
@@ -17,10 +17,10 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -234,7 +234,7 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
<h1
|
||||
className="page__title"
|
||||
>
|
||||
test
|
||||
typography
|
||||
</h1>
|
||||
<div
|
||||
className="page__body"
|
||||
@@ -262,9 +262,9 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/typography"
|
||||
>
|
||||
test
|
||||
typography
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -273,19 +273,19 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_0"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
test_0
|
||||
Perfecting the Art of Perfection
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_0
|
||||
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-readmore"
|
||||
href="/test_0"
|
||||
className="feed__item-more"
|
||||
href="/posts/perfecting-the-art-of-perfection"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -310,9 +310,9 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-meta-category-link"
|
||||
href="/test"
|
||||
href="/design-inspiration"
|
||||
>
|
||||
test
|
||||
design inspiration
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
@@ -321,19 +321,19 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="feed__item-title-link"
|
||||
href="/test_1"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
test_1
|
||||
Johannes Gutenberg: The Birth of Movable Type
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="feed__item-description"
|
||||
>
|
||||
test_1
|
||||
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-readmore"
|
||||
href="/test_1"
|
||||
className="feed__item-more"
|
||||
href="/posts/the-birth-of-movable-type"
|
||||
>
|
||||
Read
|
||||
</a>
|
||||
@@ -347,7 +347,7 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__prev-link"
|
||||
href="/page/1"
|
||||
href="/typography/page/1"
|
||||
rel="prev"
|
||||
>
|
||||
← PREV
|
||||
@@ -358,7 +358,7 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="pagination__next-link"
|
||||
href="/page/3"
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
1
src/templates/TagTemplate/index.ts
Normal file
1
src/templates/TagTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as TagTemplate } from "./TagTemplate";
|
||||
28
src/templates/TagsListTemplate/TagsListTemplate.test.tsx
Normal file
28
src/templates/TagsListTemplate/TagsListTemplate.test.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import renderer from "react-test-renderer";
|
||||
|
||||
import { StaticQuery, useStaticQuery } from "gatsby";
|
||||
|
||||
import * as mocks from "@/mocks";
|
||||
|
||||
import TagsListTemplate from "./TagsListTemplate";
|
||||
|
||||
const mockedStaticQuery = StaticQuery as jest.Mock;
|
||||
const mockedUseStaticQuery = useStaticQuery as jest.Mock;
|
||||
|
||||
describe("TagsListTemplate", () => {
|
||||
const props = {
|
||||
...mocks.siteMetadata,
|
||||
...mocks.allMarkdownRemark,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
mockedStaticQuery.mockImplementationOnce(({ render }) => render(props));
|
||||
mockedUseStaticQuery.mockReturnValue(props);
|
||||
});
|
||||
|
||||
it("renders correctly", () => {
|
||||
const tree = renderer.create(<TagsListTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,13 +1,14 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import kebabCase from 'lodash/kebabCase';
|
||||
import Layout from '../components/Layout';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Page from '../components/Page';
|
||||
import { useSiteMetadata, useTagsList } from '../hooks';
|
||||
import React from "react";
|
||||
|
||||
const TagsListTemplate = () => {
|
||||
import { Link } from "gatsby";
|
||||
|
||||
import { Layout } from "@/components/Layout";
|
||||
import { Page } from "@/components/Page";
|
||||
import { Sidebar } from "@/components/Sidebar";
|
||||
import { useSiteMetadata, useTagsList } from "@/hooks";
|
||||
import { toKebabCase } from "@/utils";
|
||||
|
||||
const TagsListTemplate: React.FC = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
const tags = useTagsList();
|
||||
|
||||
@@ -18,7 +19,7 @@ const TagsListTemplate = () => {
|
||||
<ul>
|
||||
{tags.map((tag) => (
|
||||
<li key={tag.fieldValue}>
|
||||
<Link to={`/tag/${kebabCase(tag.fieldValue)}/`}>
|
||||
<Link to={`/tag/${toKebabCase(tag.fieldValue)}/`}>
|
||||
{tag.fieldValue} ({tag.totalCount})
|
||||
</Link>
|
||||
</li>
|
||||
@@ -17,10 +17,10 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
href="/"
|
||||
>
|
||||
<img
|
||||
alt="Test name"
|
||||
alt="John Doe"
|
||||
className="author__photo"
|
||||
height="75"
|
||||
src="/test.jpg"
|
||||
src="/static/photo.jpg"
|
||||
width="75"
|
||||
/>
|
||||
</a>
|
||||
@@ -31,13 +31,13 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
className="author__title-link"
|
||||
href="/"
|
||||
>
|
||||
Test name
|
||||
John Doe
|
||||
</a>
|
||||
</h2>
|
||||
<p
|
||||
className="author__subtitle"
|
||||
>
|
||||
Test bio
|
||||
Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
@@ -51,9 +51,9 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/1/"
|
||||
href="/"
|
||||
>
|
||||
Test label 1
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -61,9 +61,9 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/2/"
|
||||
href="/pages/about"
|
||||
>
|
||||
Test label 2
|
||||
About Me
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
@@ -71,9 +71,9 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="menu__list-item-link"
|
||||
href="/test/3/"
|
||||
href="/pages/contacts"
|
||||
>
|
||||
Test label 3
|
||||
Contact Me
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -84,6 +84,28 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
<ul
|
||||
className="contacts__list"
|
||||
>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -106,50 +128,6 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<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>
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
@@ -177,19 +155,41 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="#"
|
||||
href="https://www.twitter.com/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 22 28"
|
||||
viewBox="0 0 26 28"
|
||||
>
|
||||
<title>
|
||||
rss
|
||||
twitter
|
||||
</title>
|
||||
<path
|
||||
d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
|
||||
d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="contacts__list-item"
|
||||
>
|
||||
<a
|
||||
className="contacts__list-item-link"
|
||||
href="https://t.me/#"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<title>
|
||||
telegram
|
||||
</title>
|
||||
<path
|
||||
d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
@@ -221,7 +221,7 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
<div
|
||||
className="copyright"
|
||||
>
|
||||
Test copyright
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -242,9 +242,9 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="/tag/test-0/"
|
||||
href="/tag/typography/"
|
||||
>
|
||||
test_0
|
||||
typography
|
||||
(
|
||||
1
|
||||
)
|
||||
@@ -252,11 +252,11 @@ exports[`TagsListTemplate renders correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/tag/test-1/"
|
||||
href="/tag/design-inspiration/"
|
||||
>
|
||||
test_1
|
||||
design inspiration
|
||||
(
|
||||
2
|
||||
1
|
||||
)
|
||||
</a>
|
||||
</li>
|
||||
1
src/templates/TagsListTemplate/index.ts
Normal file
1
src/templates/TagsListTemplate/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as TagsListTemplate } from "./TagsListTemplate";
|
||||
@@ -1,29 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import CategoriesListTemplate from './categories-list-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('CategoriesListTemplate', () => {
|
||||
const props = {
|
||||
...siteMetadata,
|
||||
...allMarkdownRemark
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(props)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(props)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<CategoriesListTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,74 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import Layout from '../components/Layout';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Feed from '../components/Feed';
|
||||
import Page from '../components/Page';
|
||||
import Pagination from '../components/Pagination';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
import type { PageContext, AllMarkdownRemark } from '../types';
|
||||
|
||||
type Props = {
|
||||
data: AllMarkdownRemark,
|
||||
pageContext: PageContext
|
||||
};
|
||||
|
||||
const CategoryTemplate = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const {
|
||||
category,
|
||||
currentPage,
|
||||
prevPagePath,
|
||||
nextPagePath,
|
||||
hasPrevPage,
|
||||
hasNextPage,
|
||||
} = pageContext;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle = currentPage > 0 ? `${category} - Page ${currentPage} - ${siteTitle}` : `${category} - ${siteTitle}`;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar />
|
||||
<Page title={category}>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit,
|
||||
skip: $postsOffset,
|
||||
filter: { frontmatter: { category: { eq: $category }, template: { eq: "post" }, draft: { ne: true } } },
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
){
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
categorySlug
|
||||
slug
|
||||
}
|
||||
frontmatter {
|
||||
date
|
||||
description
|
||||
category
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default CategoryTemplate;
|
||||
@@ -1,32 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import CategoryTemplate from './category-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
|
||||
import pageContext from '../../jest/__fixtures__/page-context';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('CategoryTemplate', () => {
|
||||
const props = {
|
||||
data: {
|
||||
...allMarkdownRemark
|
||||
},
|
||||
...pageContext
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<CategoryTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,73 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import Layout from '../components/Layout';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Feed from '../components/Feed';
|
||||
import Page from '../components/Page';
|
||||
import Pagination from '../components/Pagination';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
import type { PageContext, AllMarkdownRemark } from '../types';
|
||||
|
||||
type Props = {
|
||||
data: AllMarkdownRemark,
|
||||
pageContext: PageContext
|
||||
};
|
||||
|
||||
const IndexTemplate = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const {
|
||||
currentPage,
|
||||
hasNextPage,
|
||||
hasPrevPage,
|
||||
prevPagePath,
|
||||
nextPagePath
|
||||
} = pageContext;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar isIndex />
|
||||
<Page>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit,
|
||||
skip: $postsOffset,
|
||||
filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } },
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
){
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
category
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default IndexTemplate;
|
||||
@@ -1,32 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { StaticQuery, useStaticQuery } from 'gatsby';
|
||||
import IndexTemplate from './index-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
|
||||
import pageContext from '../../jest/__fixtures__/page-context';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('IndexTemplate', () => {
|
||||
const props = {
|
||||
data: {
|
||||
...allMarkdownRemark
|
||||
},
|
||||
...pageContext
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<IndexTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Layout from '../components/Layout';
|
||||
import Page from '../components/Page';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
|
||||
const NotFoundTemplate = () => {
|
||||
const { title, subtitle } = useSiteMetadata();
|
||||
|
||||
return (
|
||||
<Layout title={`Not Found - ${title}`} description={subtitle}>
|
||||
<Sidebar />
|
||||
<Page title="NOT FOUND">
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundTemplate;
|
||||
@@ -1,23 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import NotFoundTemplate from './not-found-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('NotFoundTemplate', () => {
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<NotFoundTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,51 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import Layout from '../components/Layout';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Page from '../components/Page';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
import type { MarkdownRemark } from '../types';
|
||||
|
||||
type Props = {
|
||||
data: {
|
||||
markdownRemark: MarkdownRemark
|
||||
}
|
||||
};
|
||||
|
||||
const PageTemplate = ({ data }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
const { html: pageBody } = data.markdownRemark;
|
||||
const { frontmatter } = data.markdownRemark;
|
||||
const { title: pageTitle, description: pageDescription = '', socialImage } = frontmatter;
|
||||
const metaDescription = pageDescription || siteSubtitle;
|
||||
const socialImageUrl = socialImage?.publicURL;
|
||||
|
||||
return (
|
||||
<Layout title={`${pageTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImageUrl} >
|
||||
<Sidebar />
|
||||
<Page title={pageTitle}>
|
||||
<div dangerouslySetInnerHTML={{ __html: pageBody }} />
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PageBySlug($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
description
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default PageTemplate;
|
||||
@@ -1,30 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import PageTemplate from './page-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import markdownRemark from '../../jest/__fixtures__/markdown-remark';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('PageTemplate', () => {
|
||||
const props = {
|
||||
data: {
|
||||
...markdownRemark
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<PageTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,51 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import Layout from '../components/Layout';
|
||||
import Post from '../components/Post';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
import type { MarkdownRemark } from '../types';
|
||||
|
||||
type Props = {
|
||||
data: {
|
||||
markdownRemark: MarkdownRemark
|
||||
}
|
||||
};
|
||||
|
||||
const PostTemplate = ({ data }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
const { frontmatter } = data.markdownRemark;
|
||||
const { title: postTitle, description: postDescription = '', socialImage } = frontmatter;
|
||||
const metaDescription = postDescription || siteSubtitle;
|
||||
const socialImageUrl = socialImage?.publicURL;
|
||||
|
||||
return (
|
||||
<Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription} socialImage={socialImageUrl} >
|
||||
<Post post={data.markdownRemark} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query PostBySlug($slug: String!) {
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
id
|
||||
html
|
||||
fields {
|
||||
slug
|
||||
tagSlugs
|
||||
}
|
||||
frontmatter {
|
||||
date
|
||||
description
|
||||
tags
|
||||
title
|
||||
socialImage {
|
||||
publicURL
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default PostTemplate;
|
||||
@@ -1,30 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import PostTemplate from './post-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import markdownRemark from '../../jest/__fixtures__/markdown-remark';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('PostTemplate', () => {
|
||||
const props = {
|
||||
data: {
|
||||
...markdownRemark
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<PostTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,80 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import { graphql } from 'gatsby';
|
||||
import Layout from '../components/Layout';
|
||||
import Sidebar from '../components/Sidebar';
|
||||
import Feed from '../components/Feed';
|
||||
import Page from '../components/Page';
|
||||
import Pagination from '../components/Pagination';
|
||||
import { useSiteMetadata } from '../hooks';
|
||||
import type { AllMarkdownRemark, PageContext } from '../types';
|
||||
|
||||
type Props = {
|
||||
data: AllMarkdownRemark,
|
||||
pageContext: PageContext
|
||||
};
|
||||
|
||||
const TagTemplate = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const {
|
||||
tag,
|
||||
currentPage,
|
||||
prevPagePath,
|
||||
nextPagePath,
|
||||
hasPrevPage,
|
||||
hasNextPage
|
||||
} = pageContext;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle = currentPage > 0 ? `All Posts tagged as "${tag}" - Page ${currentPage} - ${siteTitle}` : `All Posts tagged as "${tag}" - ${siteTitle}`;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
<Sidebar />
|
||||
<Page title={tag}>
|
||||
<Feed edges={edges} />
|
||||
<Pagination
|
||||
prevPagePath={prevPagePath}
|
||||
nextPagePath={nextPagePath}
|
||||
hasPrevPage={hasPrevPage}
|
||||
hasNextPage={hasNextPage}
|
||||
/>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query TagPage($tag: String, $postsLimit: Int!, $postsOffset: Int!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
subtitle
|
||||
}
|
||||
}
|
||||
allMarkdownRemark(
|
||||
limit: $postsLimit,
|
||||
skip: $postsOffset,
|
||||
filter: { frontmatter: { tags: { in: [$tag] }, template: { eq: "post" }, draft: { ne: true } } },
|
||||
sort: { order: DESC, fields: [frontmatter___date] }
|
||||
){
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
categorySlug
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
date
|
||||
category
|
||||
description
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default TagTemplate;
|
||||
@@ -1,32 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import TagTemplate from './tag-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
|
||||
import pageContext from '../../jest/__fixtures__/page-context';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('TagTemplate', () => {
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(siteMetadata)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(siteMetadata)
|
||||
);
|
||||
});
|
||||
|
||||
const props = {
|
||||
data: {
|
||||
...allMarkdownRemark
|
||||
},
|
||||
...pageContext
|
||||
};
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<TagTemplate {...props} />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,29 +0,0 @@
|
||||
// @flow strict
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { useStaticQuery, StaticQuery } from 'gatsby';
|
||||
import TagsListTemplate from './tags-list-template';
|
||||
import siteMetadata from '../../jest/__fixtures__/site-metadata';
|
||||
import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
|
||||
import type { RenderCallback } from '../types';
|
||||
|
||||
describe('TagsListTemplate', () => {
|
||||
const props = {
|
||||
...siteMetadata,
|
||||
...allMarkdownRemark
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
StaticQuery.mockImplementationOnce(
|
||||
({ render }: RenderCallback) => (
|
||||
render(props)
|
||||
),
|
||||
useStaticQuery.mockReturnValue(props)
|
||||
);
|
||||
});
|
||||
|
||||
it('renders correctly', () => {
|
||||
const tree = renderer.create(<TagsListTemplate />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user