Merge pull request #210 from alxshelepenok/gatsby-v2.3.14

Gatsby v2.3.14

.circleci/config.yml

@@ -19,6 +19,22 @@ jobs:
             - node_modules
           key: dependencies-{{ checksum "yarn.lock" }}
 
+  flow-typed:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - dependencies-{{ checksum "yarn.lock" }}
+      - restore_cache:
+          keys:
+            - flow-typed-{{ checksum "yarn.lock" }}
+      - run: yarn flow-typed
+      - save_cache:
+          paths:
+            - flow-typed
+          key: flow-typed-{{ checksum "yarn.lock" }}
+
   lint:
     <<: *defaults
     steps:
@@ -26,6 +42,9 @@ jobs:
       - restore_cache:
           keys:
             - dependencies-{{ checksum "yarn.lock" }}
+      - restore_cache:
+          keys:
+            - flow-typed-{{ checksum "yarn.lock" }}
       - run: yarn lint
 
   test:
@@ -68,8 +87,12 @@ workflows:
   test:
     jobs:
       - install
+      - flow-typed:
+          requires:
+            - install
       - lint:
           requires:
+            - flow-typed
             - install
       - test:
           requires:

.eslintignore

@@ -0,0 +1,3 @@
+/flow-typed/*
+/public/*
+/node_modules/*

.flowconfig

@@ -3,11 +3,12 @@
 [include]
 
 [libs]
+flow-typed
 
 [lints]
 
 [options]
-module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/src/flow/CSSModuleStub.js'
+module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/css-module-stub.js'
 server.max_workers=4
 
 [strict]

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+flow-typed/
 .cache/
 public/
 npm-debug.log

.stylelintrc.json

@@ -14,7 +14,7 @@
     "no-duplicate-selectors": true,
     "font-family-no-missing-generic-family-keyword": null,
     "property-no-unknown": [true, {
-      ignoreProperties: ["/^lost-/"]
+      "ignoreProperties": ["/^lost-/"]
     }]
   },
   "ignoreFiles": [

.travis.yml

@@ -1,16 +1,16 @@
 language: node_js
 node_js:
-  - '8'
-  - '9'
   - '10'
 install:
   - npm install -g codecov
 script:
   - yarn install
+  - yarn flow-typed
   - yarn lint
   - yarn test:coverage --runInBand --no-cache
   - yarn test --runInBand --no-cache
   - codecov
 cache:
   directories:
-    - node_modules
+    - node_modules
+    - flow-typed

content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md

@@ -5,10 +5,6 @@ template: "post"
 draft: false
 slug: "/posts/the-origins-of-social-stationery-lettering"
 category: "Design Culture"
-tags:
-  - "Typefaces"
-  - "Lettering"
-  - "History"
 description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante."
 ---
 

flow/css-module-stub.js

@@ -2,5 +2,7 @@
 type CSSModule = {
   [key: string]: string,
 };
+
 const emptyCSSModule: CSSModule = {};
+
 export default emptyCSSModule;

gatsby-config.js

@@ -119,7 +119,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-netlify-cms',
       options: {
-        modulePath: `${__dirname}/src/cms/cms.js`,
+        modulePath: `${__dirname}/src/cms/index.js`,
       }
     },
     {
@@ -138,7 +138,7 @@ module.exports = {
           {
             site {
               siteMetadata {
-                url
+                siteUrl: url
               }
             }
             allSitePage(
@@ -156,7 +156,7 @@ module.exports = {
         `,
         output: '/sitemap.xml',
         serialize: ({ site, allSitePage }) => allSitePage.edges.map((edge) => ({
-          url: site.siteMetadata.url + edge.node.path,
+          url: site.siteMetadata.siteUrl + edge.node.path,
           changefreq: 'daily',
           priority: 0.7
         }))

jest/__fixtures__/all-markdown-remark.js

@@ -0,0 +1,46 @@
+'use strict';
+
+module.exports = {
+  allMarkdownRemark: {
+    group: [
+      {
+        fieldValue: 'test_0',
+        totalCount: 1
+      },
+      {
+        fieldValue: 'test_1',
+        totalCount: 2
+      }
+    ],
+    edges: [
+      {
+        node: {
+          fields: {
+            slug: '/test_0',
+            categorySlug: '/test'
+          },
+          frontmatter: {
+            date: '2016-09-01',
+            description: 'test_0',
+            category: 'test',
+            title: 'test_0'
+          }
+        }
+      },
+      {
+        node: {
+          fields: {
+            slug: '/test_1',
+            categorySlug: '/test'
+          },
+          frontmatter: {
+            date: '2016-09-01',
+            description: 'test_1',
+            category: 'test',
+            title: 'test_1'
+          }
+        }
+      }
+    ]
+  }
+};

jest/__fixtures__/markdown-remark.js

@@ -0,0 +1,23 @@
+'use strict';
+
+module.exports = {
+  markdownRemark: {
+    id: 'test-123',
+    html: '<p>test</p>',
+    fields: {
+      tagSlugs: [
+        '/test_0',
+        '/test_1'
+      ]
+    },
+    frontmatter: {
+      date: '2016-09-01',
+      description: 'test',
+      title: 'test',
+      tags: [
+        'test_0',
+        'test_1'
+      ]
+    }
+  }
+};

jest/__fixtures__/page-context.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  pageContext: {
+    tag: 'test',
+    category: 'test',
+    currentPage: 1,
+    prevPagePath: '/page/1',
+    nextPagePath: '/page/3',
+    hasNextPage: true,
+    hasPrevPage: true
+  }
+};

jest/__fixtures__/site-metadata.js

@@ -0,0 +1,41 @@
+'use strict';
+
+module.exports = {
+  site: {
+    siteMetadata: {
+      url: 'http://localhost',
+      title: 'Test title',
+      subtitle: 'Test subtitle',
+      copyright: 'Test copyright',
+      disqusShortname: '',
+      postsPerPage: 4,
+      menu: [
+        {
+          label: 'Test label 1',
+          path: '/test/1/'
+        },
+        {
+          label: 'Test label 2',
+          path: '/test/2/'
+        },
+        {
+          label: 'Test label 3',
+          path: '/test/3/'
+        }
+      ],
+      author: {
+        name: 'Test name',
+        photo: '/test.jpg',
+        bio: 'Test bio',
+        contacts: {
+          email: '#',
+          telegram: '#',
+          twitter: '#',
+          github: '#',
+          rss: '#',
+          vkontakte: '#'
+        }
+      }
+    }
+  }
+};

jest/__mocks__/gatsby.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const React = require('react');
+
+const gatsby = jest.requireActual('gatsby');
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) => (
+      React.createElement('a', {
+        ...rest,
+        href: to,
+      })
+    )
+  ),
+  StaticQuery: jest.fn(),
+  useStaticQuery: jest.fn()
+};

jest/jest-config.js

@@ -3,12 +3,12 @@
 module.exports = {
   rootDir: '../',
   transform: {
-    '^.+\\.js?$': '<rootDir>/tests/jest-preprocess.js'
+    '^.+\\.js?$': '<rootDir>/jest/jest-preprocess.js'
   },
   testMatch: ['**/__tests__/**/*.js', '**/?(*.)test.js'],
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
-    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/__mocks__/fileMock.js'
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/jest/__mocks__/file-mock.js'
   },
   testPathIgnorePatterns: ['node_modules', '.cache', 'public'],
   transformIgnorePatterns: [
@@ -17,5 +17,5 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ''
   },
-  testURL: 'http://localhost/'
+  setupFiles: ['<rootDir>/jest/loadershim.js']
 };

jest/jest-preprocess.js

@@ -1,7 +1,11 @@
 'use strict';
 
 const babelOptions = {
-  presets: ['@babel/react', '@babel/env'],
+  presets: [
+    '@babel/react',
+    '@babel/env',
+    'babel-preset-gatsby'
+  ],
   plugins: [
     '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-proposal-class-properties',

jest/loadershim.js

@@ -0,0 +1,5 @@
+'use strict';
+
+global.___loader = {
+  enqueue: jest.fn(),
+};

package.json

@@ -9,12 +9,14 @@
     "deploy": "yarn run clean && gatsby build --prefix-paths && gh-pages -d public",
     "clean": "rimraf .cache public",
     "flow": "flow",
-    "lint:js": "eslint --cache --ext .js,.jsx --ignore-pattern public .",
+    "flow-typed": "flow-typed install --overwrite",
+    "lint:js": "eslint --cache --ext .js,.jsx .",
     "lint:scss": "stylelint \"src/**/*.scss\"",
     "lint": "concurrently \"yarn run lint:js\" \"yarn run lint:scss\" \"yarn flow\"",
-    "test": "jest --config ./tests/jest-config.js",
+    "test": "jest --config ./jest/jest-config.js",
-    "test:coverage": "jest --coverage --config ./tests/jest-config.js",
+    "test:coverage": "jest --coverage --config ./jest/jest-config.js",
-    "test:watch": "jest --watch --config ./tests/jest-config.js"
+    "test:watch": "jest --watch --config ./jest/jest-config.js",
+    "release": "standard-version"
   },
   "repository": "https://github.com/alxshelepenok/gatsby-starter-lumen",
   "author": "Alexander Shelepenok <alxshelepenok@gmail.com>",
@@ -41,37 +43,37 @@
     "bluebird": "^3.5.4",
     "classnames": "^2.2.6",
     "codecov": "^3.3.0",
-    "gatsby": "^2.3.14",
+    "gatsby": "^2.4.2",
-    "gatsby-link": "^2.0.16",
+    "gatsby-link": "^2.1.1",
     "gatsby-plugin-catch-links": "^2.0.13",
-    "gatsby-plugin-feed": "^2.1.0",
+    "gatsby-plugin-feed": "^2.2.0",
-    "gatsby-plugin-flow": "^1.0.4",
+    "gatsby-plugin-flow": "^1.0.5",
-    "gatsby-plugin-google-gtag": "^1.0.16",
+    "gatsby-plugin-google-gtag": "^1.0.17",
-    "gatsby-plugin-manifest": "^2.0.26",
+    "gatsby-plugin-manifest": "^2.1.1",
-    "gatsby-plugin-netlify": "^2.0.13",
+    "gatsby-plugin-netlify": "^2.0.16",
-    "gatsby-plugin-netlify-cms": "^3.0.17",
+    "gatsby-plugin-netlify-cms": "^3.0.18",
-    "gatsby-plugin-offline": "^2.0.25",
+    "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-sass": "^2.0.11",
-    "gatsby-plugin-sharp": "^2.0.32",
+    "gatsby-plugin-sharp": "^2.0.36",
-    "gatsby-plugin-sitemap": "^2.0.11",
+    "gatsby-plugin-sitemap": "^2.1.0",
     "gatsby-remark-autolink-headers": "^2.0.16",
-    "gatsby-remark-copy-linked-files": "^2.0.11",
+    "gatsby-remark-copy-linked-files": "^2.0.12",
-    "gatsby-remark-images": "^3.0.10",
+    "gatsby-remark-images": "^3.0.11",
     "gatsby-remark-katex": "^3.0.4",
-    "gatsby-remark-prismjs": "^3.2.7",
+    "gatsby-remark-prismjs": "^3.2.9",
     "gatsby-remark-relative-images": "^0.2.2",
     "gatsby-remark-responsive-iframe": "^2.1.1",
     "gatsby-remark-smartypants": "^2.0.9",
-    "gatsby-source-filesystem": "^2.0.28",
+    "gatsby-source-filesystem": "^2.0.33",
-    "gatsby-transformer-remark": "^2.3.8",
+    "gatsby-transformer-remark": "^2.3.12",
-    "gatsby-transformer-sharp": "^2.1.17",
+    "gatsby-transformer-sharp": "^2.1.19",
     "invariant": "^2.2.4",
     "katex": "^0.10.1",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
     "netlify-cms": "^2.9.1",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "normalize-scss": "^7.0.1",
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
@@ -80,16 +82,17 @@
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
+    "@babel/core": "7.4.4",
-    "@babel/plugin-proposal-class-properties": "7.0.0",
+    "@babel/plugin-proposal-class-properties": "7.4.4",
-    "@babel/plugin-proposal-optional-chaining": "7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "7.2.0",
-    "@babel/plugin-transform-flow-strip-types": "^7.4.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
-    "@babel/preset-env": "7.0.0",
+    "@babel/preset-env": "7.4.4",
     "@babel/preset-react": "7.0.0",
+    "babel-preset-gatsby": "0.1.11",
     "autoprefixer": "9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
+    "babel-jest": "24.8.0",
     "browserslist": "4.5.6",
     "concurrently": "4.1.0",
     "eslint": "5.16.0",
@@ -99,15 +102,17 @@
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.13.0",
     "eslint-watch": "5.1.2",
+    "flow-typed": "^2.5.1",
     "flow-bin": "^0.98.1",
     "gh-pages": "2.0.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "23.6.0",
+    "jest": "24.8.0",
-    "jest-cli": "23.6.0",
+    "jest-cli": "24.8.0",
     "lost": "8.3.1",
     "postcss-pxtorem": "4.0.1",
     "react-test-renderer": "16.8.6",
     "rimraf": "2.6.3",
+    "standard-version": "6.0.1",
     "stylelint": "10.0.1",
     "stylelint-config-recommended-scss": "3.3.0",
     "stylelint-scss": "3.6.1"

scripts/update_changelog.sh

@@ -1,31 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-usage() {
-  echo "$0 <tag> <repo>" >&2;
-}
-
-if [ "$1" = "-h" -o "$1" = "--help" ]; then
-  usage
-  exit 1;
-fi
-
-if [ -z "$2" ]
-then
-  REPO=$(git ls-remote --get-url origin | \
-  sed -u 's/git@//g; s/https:\/\///g; s/github.com\///g; s/\.git//g')
-else
-  REPO=$2
-fi
-
-NEW_TAG=$1
-CURRENT_DATE=$(date +"%Y-%m-%d")
-
-LAST_TAG=$(git describe --tags $(git rev-list --tags --max-count=1))
-LAST_DATE=$(git log -1 --format=%ai $LAST_TAG)
-
-CHANGES=$(curl -s "https://api.github.com/repos/${REPO}/pulls?state=closed" | \
-jq --arg l "$LAST_DATE" -r '.[] | select((.merged_at != null) and (.closed_at > $l)) | "- [Pull #\(.number)](\(.html_url)): \(.title)"')
-
-sed -i "4i ## [$NEW_TAG] - $CURRENT_DATE\n### Added\n${CHANGES//$'\n'/\\$'\n'}\n" CHANGELOG.md

scripts/update_release_notes.sh

@@ -1,47 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-usage() {
-  echo "$0 <repo> <tag> [<release name>]" >&2;
-}
-
-if [ "$1" = "-h" -o "$1" = "--help" ]; then
-  usage
-  exit 1;
-fi
-
-if [ -z "$1" ]
-then
-  REPO=$(git ls-remote --get-url origin | \
-  sed -u 's/git@//g; s/https:\/\///g; s/github.com\///g; s/\.git//g')
-else
-  REPO=$1
-fi
-
-if [ -z "$2" ]
-then
-  TAG=$(git describe --tags $(git rev-list --tags --max-count=1))
-else
-  TAG=$2
-fi
-
-BODY=$(awk "/$TAG/ {print; exit}" RS="\n\n" ORS="\n\n" CHANGELOG.md | tail -n+2)
-
-PAYLOAD=$(
-  jq --null-input \
-     --arg t "$TAG" \
-     --arg n "$TAG" \
-     --arg b "$BODY" \
-     '{ tag_name: $t, name: $n, body: $b}'
-)
-
-TAG_ID=$(curl -s "https://api.github.com/repos/$REPO/releases/tags/$TAG" | jq -r '.id')
-
-curl --fail \
-     --netrc \
-     --silent \
-     --location \
-     --request PATCH \
-     --data "$PAYLOAD" \
-     "https://api.github.com/repos/${REPO}/releases/${TAG_ID}"

src/cms/index.js

@@ -1,3 +1,4 @@
+// @flow
 import CMS from 'netlify-cms';
 import PagePreview from './preview-templates/page-preview';
 import PostPreview from './preview-templates/post-preview';

src/cms/preview-templates/page-preview.js

@@ -1,6 +1,13 @@
+// @flow
 import React from 'react';
+import type { Entry, WidgetFor } from '../../types';
 
-const PagePreview = ({ entry, widgetFor }) => {
+type Props = {
+  entry: Entry,
+  widgetFor: WidgetFor
+};
+
+const PagePreview = ({ entry, widgetFor }: Props) => {
   const body = widgetFor('body');
   const title = entry.getIn(['data', 'title']);
 

src/cms/preview-templates/post-preview.js

@@ -1,6 +1,13 @@
+// @flow
 import React from 'react';
+import type { Entry, WidgetFor } from '../../types';
 
-const PostPreview = ({ entry, widgetFor }) => {
+type Props = {
+  entry: Entry,
+  widgetFor: WidgetFor
+};
+
+const PostPreview = ({ entry, widgetFor }: Props) => {
   const body = widgetFor('body');
   const title = entry.getIn(['data', 'title']);
 

src/components/Feed/Feed.js

@@ -1,9 +1,15 @@
+// @flow
 import React from 'react';
 import moment from 'moment';
 import { Link } from 'gatsby';
+import type { Edges } from '../../types';
 import styles from './Feed.module.scss';
 
-const Feed = ({ edges }) => (
+type Props = {
+  edges: Edges
+};
+
+const Feed = ({ edges }: Props) => (
   <div className={styles['feed']}>
     {edges.map((edge) => (
       <div className={styles['feed__item']} key={edge.node.fields.slug}>

src/components/Feed/Feed.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Feed from './Feed';
@@ -9,28 +10,50 @@ describe('Feed', () => {
         node: {
           fields: {
             slug: '/test_0',
-            categorySlug: '/test_0'
+            categorySlug: '/test_0',
+            tagSlugs: [
+              '/test-1',
+              '/test-2'
+            ]
           },
           frontmatter: {
             date: '2016-09-01',
             description: 'test_0',
             category: 'test_0',
+            tags: [
+              'test-1',
+              'test-2'
+            ],
             title: 'test_0'
-          }
+          },
+          id: 'test-123',
+          html: '<p>test</p>'
+
         }
       },
       {
         node: {
           fields: {
             slug: '/test_1',
-            categorySlug: '/test_1'
+            categorySlug: '/test_1',
+            tagSlugs: [
+              '/test-1',
+              '/test-2'
+            ]
           },
           frontmatter: {
             date: '2016-09-01',
             description: 'test_1',
             category: 'test_1',
+            tags: [
+              'test-1',
+              'test-2'
+            ],
             title: 'test_1'
-          }
+          },
+          id: 'test-321',
+          html: '<p>test</p>'
+
         }
       }
     ]

src/components/Feed/__snapshots__/Feed.test.js.snap

@@ -22,35 +22,35 @@ exports[`Feed renders correctly 1`] = `
       <span
         className="feed__item-meta-category"
       >
-        <Link
+        <a
           className="feed__item-meta-category-link"
-          to="/test_0"
+          href="/test_0"
         >
           test_0
-        </Link>
+        </a>
       </span>
     </div>
     <h2
       className="feed__item-title"
     >
-      <Link
+      <a
         className="feed__item-title-link"
-        to="/test_0"
+        href="/test_0"
       >
         test_0
-      </Link>
+      </a>
     </h2>
     <p
       className="feed__item-description"
     >
       test_0
     </p>
-    <Link
+    <a
       className="feed__item-readmore"
-      to="/test_0"
+      href="/test_0"
     >
       Read
-    </Link>
+    </a>
   </div>
   <div
     className="feed__item"
@@ -70,35 +70,35 @@ exports[`Feed renders correctly 1`] = `
       <span
         className="feed__item-meta-category"
       >
-        <Link
+        <a
           className="feed__item-meta-category-link"
-          to="/test_1"
+          href="/test_1"
         >
           test_1
-        </Link>
+        </a>
       </span>
     </div>
     <h2
       className="feed__item-title"
     >
-      <Link
+      <a
         className="feed__item-title-link"
-        to="/test_1"
+        href="/test_1"
       >
         test_1
-      </Link>
+      </a>
     </h2>
     <p
       className="feed__item-description"
     >
       test_1
     </p>
-    <Link
+    <a
       className="feed__item-readmore"
-      to="/test_1"
+      href="/test_1"
     >
       Read
-    </Link>
+    </a>
   </div>
 </div>
 `;

src/components/Feed/index.js

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

src/components/Icon/Icon.js

@@ -1,7 +1,15 @@
+// @flow
 import React from 'react';
 import styles from './Icon.module.scss';
 
-const Icon = ({ icon }) => (
+type Props = {
+  icon: {
+    viewBox?: string,
+    path?: string
+  }
+};
+
+const Icon = ({ icon }: Props) => (
   <svg className={styles['icon']} viewBox={icon.viewBox}>
     <path d={icon.path} />
   </svg>

src/components/Icon/Icon.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Icon from './Icon';

src/components/Icon/index.js

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

src/components/Layout/Layout.js

@@ -1,8 +1,16 @@
+// @flow
 import React from 'react';
 import Helmet from 'react-helmet';
+import type { Node as ReactNode } from 'react';
 import styles from './Layout.module.scss';
 
-const Layout = ({ children, title, description }) => (
+type Props = {
+  children: ReactNode,
+  title: string,
+  description?: string
+};
+
+const Layout = ({ children, title, description }: Props) => (
   <div className={styles.layout}>
     <Helmet>
       <html lang="en" />

src/components/Layout/Layout.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Layout from './Layout';

src/components/Layout/index.js

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

src/components/Page/Page.js

@@ -1,7 +1,12 @@
 import React, { useRef, useEffect } from 'react';
 import styles from './Page.module.scss';
 
-const Page = ({ title, children }) => {
+type Props = {
+  title?: string,
+  children: React.Node
+};
+
+const Page = ({ title, children }: Props) => {
   const pageRef = useRef();
 
   useEffect(() => {

src/components/Page/Page.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Page from './Page';

src/components/Page/index.js

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

src/components/Pagination/Pagination.js

@@ -1,9 +1,17 @@
+// @flow
 import React from 'react';
 import classNames from 'classnames/bind';
 import { Link } from 'gatsby';
 import { PAGINATION } from '../../constants';
 import styles from './Pagination.module.scss';
 
+type Props = {
+  prevPagePath: string,
+  nextPagePath: string,
+  hasNextPage: boolean,
+  hasPrevPage: boolean
+};
+
 const cx = classNames.bind(styles);
 
 const Pagination = ({
@@ -11,7 +19,7 @@ const Pagination = ({
   nextPagePath,
   hasNextPage,
   hasPrevPage
-}) => {
+}: Props) => {
   const prevClassName = cx({
     'pagination__prev-link': true,
     'pagination__prev-link--disable': !hasPrevPage

src/components/Pagination/Pagination.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Pagination from './Pagination';

src/components/Pagination/__snapshots__/Pagination.test.js.snap

@@ -7,24 +7,24 @@ exports[`Pagination renders correctly 1`] = `
   <div
     className="pagination__prev"
   >
-    <Link
+    <a
       className="pagination__prev-link"
+      href="/page/1"
       rel="prev"
-      to="/page/1"
     >
       ← PREV
-    </Link>
+    </a>
   </div>
   <div
     className="pagination__next"
   >
-    <Link
+    <a
       className="pagination__next-link"
+      href="/page/3"
       rel="next"
-      to="/page/3"
     >
       → NEXT
-    </Link>
+    </a>
   </div>
 </div>
 `;

src/components/Pagination/index.js

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

src/components/Post/Author/Author.js

@@ -1,11 +1,11 @@
 // @flow
 import React from 'react';
-import { graphql, StaticQuery } from 'gatsby';
 import { getContactHref } from '../../../utils';
 import styles from './Author.module.scss';
+import { useSiteMetadata } from '../../../hooks';
 
-export const PureAuthor = ({ data }: Object) => {
+const Author = () => {
-  const { author } = data.site.siteMetadata;
+  const { author } = useSiteMetadata();
 
   return (
     <div className={styles['author']}>
@@ -24,25 +24,4 @@ export const PureAuthor = ({ data }: Object) => {
   );
 };
 
-export const Author = () => (
-  <StaticQuery
-    query={graphql`
-      query AuthorQuery {
-        site {
-          siteMetadata {
-            author {
-              name
-              bio
-              contacts {
-                twitter
-              }
-            }
-          }
-        }
-      }
-    `}
-    render={(data) => <PureAuthor data={data} />}
-  />
-);
-
 export default Author;

src/components/Post/Author/Author.test.js

@@ -1,26 +1,23 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { PureAuthor as Author } from './Author';
+import { useStaticQuery, StaticQuery } from 'gatsby';
+import Author from './Author';
+import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Author', () => {
-  it('renders correctly', () => {
+  beforeEach(() => {
-    const props = {
+    StaticQuery.mockImplementationOnce(
-      data: {
+      ({ render }: RenderCallback) => (
-        site: {
+        render(siteMetadata)
-          siteMetadata: {
+      ),
-            author: {
+      useStaticQuery.mockReturnValue(siteMetadata)
-              name: 'test',
+    );
-              bio: 'test',
+  });
-              contacts: {
-                twitter: 'test'
-              }
-            }
-          }
-        }
-      }
-    };
 
-    const tree = renderer.create(<Author {...props} />).toJSON();
+  it('renders correctly', () => {
+    const tree = renderer.create(<Author />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/Post/Author/__snapshots__/Author.test.js.snap

@@ -7,15 +7,15 @@ exports[`Author renders correctly 1`] = `
   <p
     className="author__bio"
   >
-    test
+    Test bio
     <a
       className="author__bio-twitter"
-      href="https://www.twitter.com/test"
+      href="https://www.twitter.com/#"
       rel="noopener noreferrer"
       target="_blank"
     >
       <strong>
-        test
+        Test name
       </strong>
        on Twitter
     </a>

src/components/Post/Comments/Comments.js

@@ -1,12 +1,15 @@
+// @flow
 import React from 'react';
-import { graphql, StaticQuery } from 'gatsby';
 import ReactDisqusComments from 'react-disqus-comments';
+import { useSiteMetadata } from '../../../hooks';
 
-export const PureComments = ({ data, postTitle, postSlug }) => {
+type Props = {
-  const {
+  postTitle: string,
-    url,
+  postSlug: string
-    disqusShortname
+};
-  } = data.site.siteMetadata;
+
+const Comments = ({ postTitle, postSlug }: Props) => {
+  const { url, disqusShortname } = useSiteMetadata();
 
   if (!disqusShortname) {
     return null;
@@ -22,20 +25,4 @@ export const PureComments = ({ data, postTitle, postSlug }) => {
   );
 };
 
-export const Comments = (props) => (
-  <StaticQuery
-    query={graphql`
-      query CommentsQuery {
-        site {
-          siteMetadata {
-            disqusShortname
-            url
-          }
-        }
-      }
-    `}
-    render={(data) => <PureComments {...props} data={data}/>}
-  />
-);
-
 export default Comments;

src/components/Post/Comments/Comments.test.js

@@ -1,22 +1,27 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { PureComments as Comments } from './Comments';
+import { useStaticQuery, StaticQuery } from 'gatsby';
+import Comments from './Comments';
+import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Comments', () => {
-  it('renders correctly', () => {
+  beforeEach(() => {
-    const props = {
+    StaticQuery.mockImplementationOnce(
-      data: {
+      ({ render }: RenderCallback) => (
-        site: {
+        render(siteMetadata)
-          siteMetadata: {
+      ),
-            url: 'http://localhost',
+      useStaticQuery.mockReturnValue(siteMetadata)
-            disqusShortname: 'test'
+    );
-          }
+  });
-        }
-      },
-      postTitle: 'test',
-      postSlug: '/test'
-    };
 
+  const props = {
+    postTitle: 'test',
+    postSlug: '/test'
+  };
+
+  it('renders correctly', () => {
     const tree = renderer.create(<Comments {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Post/Comments/__snapshots__/Comments.test.js.snap

@@ -1,9 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Comments renders correctly 1`] = `
+exports[`Comments renders correctly 1`] = `null`;
-<div>
-  <div
-    id="disqus_thread"
-  />
-</div>
-`;

src/components/Post/Comments/index.js

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

src/components/Post/Content/Content.js

@@ -1,7 +1,13 @@
+// @flow
 import React from 'react';
 import styles from './Content.module.scss';
 
-const Content = ({ body, title }) => (
+type Props = {
+  body: string,
+  title: string
+};
+
+const Content = ({ body, title }: Props) => (
   <div className={styles['content']}>
     <h1 className={styles['content__title']}>{title}</h1>
     <div className={styles['content__body']} dangerouslySetInnerHTML={{ __html: body }} />

src/components/Post/Content/Content.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Content from './Content';

src/components/Post/Content/index.js

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

src/components/Post/Meta/Meta.js

@@ -1,8 +1,13 @@
+// @flow
 import React from 'react';
 import moment from 'moment';
 import styles from './Meta.module.scss';
 
-const Meta = ({ date }) => (
+type Props = {
+  date: string
+};
+
+const Meta = ({ date }: Props) => (
   <div className={styles['meta']}>
     <p className={styles['meta__date']}>Published {moment(date).format('D MMM YYYY')}</p>
   </div>

src/components/Post/Meta/Meta.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Meta from './Meta';

src/components/Post/Meta/index.js

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

src/components/Post/Post.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import Author from './Author';
@@ -6,16 +7,16 @@ import Content from './Content';
 import Meta from './Meta';
 import Tags from './Tags';
 import styles from './Post.module.scss';
+import type { Node } from '../../types';
 
-const Post = ({ post }) => {
+type Props = {
-  const {
+  post: Node
-    tags,
+};
-    title,
-    date
-  } = post.frontmatter;
 
+const Post = ({ post }: Props) => {
   const { html } = post;
-  const { tagSlugs } = post.fields;
+  const { tagSlugs, slug } = post.fields;
+  const { tags, title, date } = post.frontmatter;
 
   return (
     <div className={styles['post']}>
@@ -27,12 +28,12 @@ const Post = ({ post }) => {
 
       <div className={styles['post__footer']}>
         <Meta date={date} />
-        <Tags tags={tags} tagSlugs={tagSlugs} />
+        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
         <Author />
       </div>
 
       <div className={styles['post__comments']}>
-        <Comments postSlug={post.fields.slug} postTitle={post.frontmatter.title} />
+        <Comments postSlug={slug} postTitle={post.frontmatter.title} />
       </div>
     </div>
   );

src/components/Post/Post.test.js

@@ -1,12 +1,28 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { useStaticQuery, StaticQuery } from 'gatsby';
 import Post from './Post';
+import siteMetadata from '../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../types';
 
 describe('Post', () => {
+  beforeEach(() => {
+    StaticQuery.mockImplementationOnce(
+      ({ render }: RenderCallback) => (
+        render(siteMetadata)
+      ),
+      useStaticQuery.mockReturnValue(siteMetadata)
+    );
+  });
+
   const props = {
     post: {
+      id: 'test-123',
       html: '<p>test</p>',
       fields: {
+        slug: '/test',
+        categorySlug: '/test-category',
         tagSlugs: [
           '/test_0',
           '/test_1'

src/components/Post/Tags/Tags.js

@@ -1,11 +1,17 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './Tags.module.scss';
 
-const Tags = ({ tags, tagSlugs }) => (
+type Props = {
+  tags: string[],
+  tagSlugs: string[]
+};
+
+const Tags = ({ tags, tagSlugs }: Props) => (
   <div className={styles['tags']}>
     <ul className={styles['tags__list']}>
-      {tagSlugs.map((slug, i) => (
+      {tagSlugs && tagSlugs.map((slug, i) => (
         <li className={styles['tags__list-item']} key={tags[i]}>
           <Link to={slug} className={styles['tags__list-item-link']}>
             {tags[i]}

src/components/Post/Tags/Tags.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Tags from './Tags';

src/components/Post/Tags/__snapshots__/Tags.test.js.snap

@@ -10,22 +10,22 @@ exports[`Tags renders correctly 1`] = `
     <li
       className="tags__list-item"
     >
-      <Link
+      <a
         className="tags__list-item-link"
-        to="/test_0"
+        href="/test_0"
       >
         test_0
-      </Link>
+      </a>
     </li>
     <li
       className="tags__list-item"
     >
-      <Link
+      <a
         className="tags__list-item-link"
-        to="/test_1"
+        href="/test_1"
       >
         test_1
-      </Link>
+      </a>
     </li>
   </ul>
 </div>

src/components/Post/Tags/index.js

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

src/components/Post/__snapshots__/Post.test.js.snap

@@ -4,12 +4,12 @@ exports[`Post renders correctly 1`] = `
 <div
   className="post"
 >
-  <Link
+  <a
     className="post__home-button"
-    to="/"
+    href="/"
   >
     All Articles
-  </Link>
+  </a>
   <div
     className="post__content"
   >
@@ -53,35 +53,48 @@ exports[`Post renders correctly 1`] = `
         <li
           className="tags__list-item"
         >
-          <Link
+          <a
             className="tags__list-item-link"
-            to="/test_0"
+            href="/test_0"
           >
             test_0
-          </Link>
+          </a>
         </li>
         <li
           className="tags__list-item"
         >
-          <Link
+          <a
             className="tags__list-item-link"
-            to="/test_1"
+            href="/test_1"
           >
             test_1
-          </Link>
+          </a>
         </li>
       </ul>
     </div>
-    <StaticQuery
+    <div
-      render={[Function]}
+      className="author"
-    />
+    >
+      <p
+        className="author__bio"
+      >
+        Test bio
+        <a
+          className="author__bio-twitter"
+          href="https://www.twitter.com/#"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <strong>
+            Test name
+          </strong>
+           on Twitter
+        </a>
+      </p>
+    </div>
   </div>
   <div
     className="post__comments"
-  >
+  />
-    <StaticQuery
-      render={[Function]}
-    />
-  </div>
 </div>
 `;

src/components/Post/index.js

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

src/components/Sidebar/Author/Author.js

@@ -1,8 +1,18 @@
+// @flow
 import React from 'react';
 import { withPrefix, Link } from 'gatsby';
 import styles from './Author.module.scss';
 
-const Author = ({ author, isIndex }) => (
+type Props = {
+  author: {
+    name: string,
+    bio: string,
+    photo: string
+  },
+  isIndex: ?boolean
+};
+
+const Author = ({ author, isIndex }: Props) => (
   <div className={styles['author']}>
     <Link to="/">
       <img

src/components/Sidebar/Author/Author.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Author from './Author';
@@ -8,7 +9,8 @@ describe('Author', () => {
       name: 'test',
       photo: '/photo.jpg',
       bio: 'test'
-    }
+    },
+    isIndex: false
   };
 
   it('renders correctly', () => {

src/components/Sidebar/Author/__snapshots__/Author.test.js.snap

@@ -4,8 +4,8 @@ exports[`Author renders correctly 1`] = `
 <div
   className="author"
 >
-  <Link
+  <a
-    to="/"
+    href="/"
   >
     <img
       alt="test"
@@ -14,16 +14,16 @@ exports[`Author renders correctly 1`] = `
       src="/photo.jpg"
       width="75"
     />
-  </Link>
+  </a>
   <h2
     className="author__title"
   >
-    <Link
+    <a
       className="author__title-link"
-      to="/"
+      href="/"
     >
       test
-    </Link>
+    </a>
   </h2>
   <p
     className="author__subtitle"

src/components/Sidebar/Author/index.js

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

src/components/Sidebar/Contacts/Contacts.js

@@ -4,11 +4,11 @@ import { getContactHref, getIcon } from '../../../utils';
 import Icon from '../../Icon';
 import styles from './Contacts.module.scss';
 
-type Props = {|
+type Props = {
-  +contacts: {
+  contacts: {
     [string]: string,
   },
-|};
+};
 
 const Contacts = ({ contacts }: Props) => (
   <div className={styles['contacts']}>

src/components/Sidebar/Contacts/Contacts.test.js

@@ -1,3 +1,5 @@
+
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Contacts from './Contacts';

src/components/Sidebar/Contacts/index.js

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

src/components/Sidebar/Copyright/Copyright.js

@@ -1,7 +1,12 @@
+// @flow
 import React from 'react';
 import styles from './Copyright.module.scss';
 
-const Copyright = ({ copyright }) => (
+type Props = {
+  copyright: string
+};
+
+const Copyright = ({ copyright }: Props) => (
   <div className={styles['copyright']}>
     {copyright}
   </div>

src/components/Sidebar/Copyright/Copyright.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Copyright from './Copyright';

src/components/Sidebar/Copyright/index.js

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

src/components/Sidebar/Menu/Menu.js

@@ -1,8 +1,16 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './Menu.module.scss';
 
-const Menu = ({ menu }) => (
+type Props = {
+  menu: {
+    label: string,
+    path: string
+  }[]
+};
+
+const Menu = ({ menu }: Props) => (
   <nav className={styles['menu']}>
     <ul className={styles['menu__list']}>
       {menu.map((item) => (

src/components/Sidebar/Menu/Menu.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import Menu from './Menu';

src/components/Sidebar/Menu/__snapshots__/Menu.test.js.snap

@@ -10,24 +10,22 @@ exports[`Menu renders correctly 1`] = `
     <li
       className="menu__list-item"
     >
-      <Link
+      <a
-        activeClassName="menu__list-item-link--active"
         className="menu__list-item-link"
-        to="/#0/"
+        href="/#0/"
       >
         Item 0
-      </Link>
+      </a>
     </li>
     <li
       className="menu__list-item"
     >
-      <Link
+      <a
-        activeClassName="menu__list-item-link--active"
         className="menu__list-item-link"
-        to="/#1/"
+        href="/#1/"
       >
         Item 1
-      </Link>
+      </a>
     </li>
   </ul>
 </nav>

src/components/Sidebar/Menu/index.js

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

src/components/Sidebar/Sidebar.js

@@ -1,26 +1,18 @@
 // @flow
 import React from 'react';
-import { graphql, StaticQuery } from 'gatsby';
 import Author from './Author';
 import Contacts from './Contacts';
 import Copyright from './Copyright';
 import Menu from './Menu';
 import styles from './Sidebar.module.scss';
+import { useSiteMetadata } from '../../hooks';
 
 type Props = {
-  +isIndex: ?boolean,
+  isIndex?: boolean,
 };
 
-type PureProps = Props & {
+const Sidebar = ({ isIndex }: Props) => {
-  +data: Object,
+  const { author, copyright, menu } = useSiteMetadata();
-};
-
-export const PureSidebar = ({ data, isIndex }: PureProps) => {
-  const {
-    author,
-    copyright,
-    menu
-  } = data.site.siteMetadata;
 
   return (
     <div className={styles['sidebar']}>
@@ -34,38 +26,4 @@ export const PureSidebar = ({ data, isIndex }: PureProps) => {
   );
 };
 
-export const Sidebar = (props: Props) => (
-  <StaticQuery
-    query={graphql`
-      query SidebarQuery {
-        site {
-          siteMetadata {
-            title
-            subtitle
-            copyright
-            menu {
-              label
-              path
-            }
-            author {
-              name
-              photo
-              bio
-              contacts {
-                twitter
-                telegram
-                github
-                email
-                rss
-                vkontakte
-              }
-            }
-          }
-        }
-      }
-    `}
-    render={(data) => <PureSidebar {...props} data={data}/>}
-  />
-);
-
 export default Sidebar;

src/components/Sidebar/Sidebar.test.js

@@ -1,42 +1,26 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { PureSidebar as Sidebar } from './Sidebar';
+import { useStaticQuery, StaticQuery } from 'gatsby';
+import Sidebar from './Sidebar';
+import siteMetadata from '../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../types';
 
 describe('Sidebar', () => {
-  it('renders correctly', () => {
+  beforeEach(() => {
-    const props = {
+    StaticQuery.mockImplementationOnce(
-      data: {
+      ({ render }: RenderCallback) => (
-        site: {
+        render(siteMetadata)
-          siteMetadata: {
+      ),
-            author: {
+      useStaticQuery.mockReturnValue(siteMetadata)
-              name: 'name',
+    );
-              photo: '/photo.jpg',
+  });
-              bio: 'bio',
-              contacts: {
-                email: '#',
-                twitter: '#',
-                vkontakte: '#',
-                github: '#',
-                rss: '#',
-                telegram: '#'
-              }
-            },
-            copyright: 'copyright',
-            menu: [
-              {
-                label: 'Item 0',
-                path: '/#0/'
-              },
-              {
-                label: 'Item 1',
-                path: '/#1/'
-              }
-            ]
-          }
-        }
-      }
-    };
 
+  const props = {
+    isIndex: true
+  };
+
+  it('renders correctly', () => {
     const tree = renderer.create(<Sidebar {...props} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/components/Sidebar/__snapshots__/Sidebar.test.js.snap

@@ -10,31 +10,31 @@ exports[`Sidebar renders correctly 1`] = `
     <div
       className="author"
     >
-      <Link
+      <a
-        to="/"
+        href="/"
       >
         <img
-          alt="name"
+          alt="Test name"
           className="author__photo"
           height="75"
-          src="/photo.jpg"
+          src="/test.jpg"
           width="75"
         />
-      </Link>
+      </a>
-      <h2
+      <h1
         className="author__title"
       >
-        <Link
+        <a
           className="author__title-link"
-          to="/"
+          href="/"
         >
-          name
+          Test name
-        </Link>
+        </a>
-      </h2>
+      </h1>
       <p
         className="author__subtitle"
       >
-        bio
+        Test bio
       </p>
     </div>
     <nav
@@ -46,24 +46,32 @@ exports[`Sidebar renders correctly 1`] = `
         <li
           className="menu__list-item"
         >
-          <Link
+          <a
-            activeClassName="menu__list-item-link--active"
             className="menu__list-item-link"
-            to="/#0/"
+            href="/test/1/"
           >
-            Item 0
+            Test label 1
-          </Link>
+          </a>
         </li>
         <li
           className="menu__list-item"
         >
-          <Link
+          <a
-            activeClassName="menu__list-item-link--active"
             className="menu__list-item-link"
-            to="/#1/"
+            href="/test/2/"
           >
-            Item 1
+            Test label 2
-          </Link>
+          </a>
+        </li>
+        <li
+          className="menu__list-item"
+        >
+          <a
+            className="menu__list-item-link"
+            href="/test/3/"
+          >
+            Test label 3
+          </a>
         </li>
       </ul>
     </nav>
@@ -92,6 +100,25 @@ exports[`Sidebar renders correctly 1`] = `
             </svg>
           </a>
         </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="telegram:#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 28 28"
+            >
+              <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"
         >
@@ -111,25 +138,6 @@ exports[`Sidebar renders correctly 1`] = `
             </svg>
           </a>
         </li>
-        <li
-          className="contacts__list-item"
-        >
-          <a
-            className="contacts__list-item-link"
-            href="https://vk.com/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              className="icon"
-              viewBox="0 0 31 28"
-            >
-              <path
-                d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
-              />
-            </svg>
-          </a>
-        </li>
         <li
           className="contacts__list-item"
         >
@@ -173,16 +181,16 @@ exports[`Sidebar renders correctly 1`] = `
         >
           <a
             className="contacts__list-item-link"
-            href="telegram:#"
+            href="https://vk.com/#"
             rel="noopener noreferrer"
             target="_blank"
           >
             <svg
               className="icon"
-              viewBox="0 0 28 28"
+              viewBox="0 0 31 28"
             >
               <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"
+                d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
               />
             </svg>
           </a>
@@ -192,7 +200,7 @@ exports[`Sidebar renders correctly 1`] = `
     <div
       className="copyright"
     >
-      copyright
+      Test copyright
     </div>
   </div>
 </div>

src/components/Sidebar/index.js

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

src/hooks/index.js

@@ -0,0 +1,4 @@
+// @flow
+export { default as useSiteMetadata } from './use-site-metadata';
+export { default as useCategoriesList } from './use-categories-list';
+export { default as useTagsList } from './use-tags-list';

src/hooks/use-categories-list.js

@@ -0,0 +1,23 @@
+// @flow
+import { useStaticQuery, graphql } from 'gatsby';
+
+const useCategoriesList = () => {
+  const { allMarkdownRemark } = useStaticQuery(
+    graphql`
+      query CategoriesListQuery {
+        allMarkdownRemark(
+          filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
+        ) {
+          group(field: frontmatter___category) {
+            fieldValue
+            totalCount
+          }
+        }
+      }
+    `
+  );
+
+  return allMarkdownRemark.group;
+};
+
+export default useCategoriesList;

src/hooks/use-site-metadata.js

@@ -0,0 +1,41 @@
+// @flow
+import { useStaticQuery, graphql } from 'gatsby';
+
+const useSiteMetadata = () => {
+  const { site } = useStaticQuery(
+    graphql`
+      query SiteMetaData {
+        site {
+          siteMetadata {
+            author {
+              name
+              bio
+              photo
+              contacts {
+                email
+                telegram
+                twitter
+                github
+                rss
+                vkontakte
+              }
+            }
+            menu {
+              label
+              path
+            }
+            url
+            title
+            subtitle
+            copyright
+            disqusShortname
+          }
+        }
+      }
+    `
+  );
+
+  return site.siteMetadata;
+};
+
+export default useSiteMetadata;

src/hooks/use-tags-list.js

@@ -0,0 +1,23 @@
+// @flow
+import { useStaticQuery, graphql } from 'gatsby';
+
+const useTagsList = () => {
+  const { allMarkdownRemark } = useStaticQuery(
+    graphql`
+      query TagsListQuery {
+        allMarkdownRemark(
+          filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
+        ) {
+          group(field: frontmatter___tags) {
+            fieldValue
+            totalCount
+          }
+        }
+      }
+    `
+  );
+
+  return allMarkdownRemark.group;
+};
+
+export default useTagsList;

src/templates/__snapshots__/categories-list-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >
@@ -23,24 +223,24 @@ exports[`CategoriesListTemplate renders correctly 1`] = `
       >
         <ul>
           <li>
-            <Link
+            <a
-              to="/category/test-0/"
+              href="/category/test-0/"
             >
               test_0
                (
               1
               )
-            </Link>
+            </a>
           </li>
           <li>
-            <Link
+            <a
-              to="/category/test-1/"
+              href="/category/test-1/"
             >
               test_1
                (
               2
               )
-            </Link>
+            </a>
           </li>
         </ul>
       </div>

src/templates/__snapshots__/category-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`CategoryTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >
@@ -42,35 +242,35 @@ exports[`CategoryTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test"
+                  href="/test"
                 >
                   test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_0"
+                href="/test_0"
               >
                 test_0
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_0
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_0"
+              href="/test_0"
             >
               Read
-            </Link>
+            </a>
           </div>
           <div
             className="feed__item"
@@ -90,35 +290,35 @@ exports[`CategoryTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test"
+                  href="/test"
                 >
                   test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_1"
+                href="/test_1"
               >
                 test_1
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_1
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_1"
+              href="/test_1"
             >
               Read
-            </Link>
+            </a>
           </div>
         </div>
         <div
@@ -127,24 +327,24 @@ exports[`CategoryTemplate renders correctly 1`] = `
           <div
             className="pagination__prev"
           >
-            <Link
+            <a
               className="pagination__prev-link"
+              href="/page/1"
               rel="prev"
-              to="/page/1"
             >
               ← PREV
-            </Link>
+            </a>
           </div>
           <div
             className="pagination__next"
           >
-            <Link
+            <a
               className="pagination__next-link"
+              href="/page/3"
               rel="next"
-              to="/page/3"
             >
               → NEXT
-            </Link>
+            </a>
           </div>
         </div>
       </div>

src/templates/__snapshots__/index-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`IndexTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h1
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h1>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >
@@ -37,35 +237,35 @@ exports[`IndexTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test_0"
+                  href="/test"
                 >
-                  test_0
+                  test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_0"
+                href="/test_0"
               >
                 test_0
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_0
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_0"
+              href="/test_0"
             >
               Read
-            </Link>
+            </a>
           </div>
           <div
             className="feed__item"
@@ -85,35 +285,35 @@ exports[`IndexTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test_1"
+                  href="/test"
                 >
-                  test_1
+                  test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_1"
+                href="/test_1"
               >
                 test_1
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_1
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_1"
+              href="/test_1"
             >
               Read
-            </Link>
+            </a>
           </div>
         </div>
         <div
@@ -122,24 +322,24 @@ exports[`IndexTemplate renders correctly 1`] = `
           <div
             className="pagination__prev"
           >
-            <Link
+            <a
               className="pagination__prev-link"
+              href="/page/1"
               rel="prev"
-              to="/page/1"
             >
               ← PREV
-            </Link>
+            </a>
           </div>
           <div
             className="pagination__next"
           >
-            <Link
+            <a
               className="pagination__next-link"
+              href="/page/3"
               rel="next"
-              to="/page/3"
             >
               → NEXT
-            </Link>
+            </a>
           </div>
         </div>
       </div>

src/templates/__snapshots__/not-found-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`NotFoundTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >

src/templates/__snapshots__/page-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`PageTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >

src/templates/__snapshots__/post-template.test.js.snap

@@ -7,12 +7,12 @@ exports[`PostTemplate renders correctly 1`] = `
   <div
     className="post"
   >
-    <Link
+    <a
       className="post__home-button"
-      to="/"
+      href="/"
     >
       All Articles
-    </Link>
+    </a>
     <div
       className="post__content"
     >
@@ -56,36 +56,49 @@ exports[`PostTemplate renders correctly 1`] = `
           <li
             className="tags__list-item"
           >
-            <Link
+            <a
               className="tags__list-item-link"
-              to="/test_0"
+              href="/test_0"
             >
               test_0
-            </Link>
+            </a>
           </li>
           <li
             className="tags__list-item"
           >
-            <Link
+            <a
               className="tags__list-item-link"
-              to="/test_1"
+              href="/test_1"
             >
               test_1
-            </Link>
+            </a>
           </li>
         </ul>
       </div>
-      <StaticQuery
+      <div
-        render={[Function]}
+        className="author"
-      />
+      >
+        <p
+          className="author__bio"
+        >
+          Test bio
+          <a
+            className="author__bio-twitter"
+            href="https://www.twitter.com/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <strong>
+              Test name
+            </strong>
+             on Twitter
+          </a>
+        </p>
+      </div>
     </div>
     <div
       className="post__comments"
-    >
+    />
-      <StaticQuery
-        render={[Function]}
-      />
-    </div>
   </div>
 </div>
 `;

src/templates/__snapshots__/tag-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`TagTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >
@@ -42,35 +242,35 @@ exports[`TagTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test"
+                  href="/test"
                 >
                   test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_0"
+                href="/test_0"
               >
                 test_0
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_0
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_0"
+              href="/test_0"
             >
               Read
-            </Link>
+            </a>
           </div>
           <div
             className="feed__item"
@@ -90,35 +290,35 @@ exports[`TagTemplate renders correctly 1`] = `
               <span
                 className="feed__item-meta-category"
               >
-                <Link
+                <a
                   className="feed__item-meta-category-link"
-                  to="/test"
+                  href="/test"
                 >
                   test
-                </Link>
+                </a>
               </span>
             </div>
             <h2
               className="feed__item-title"
             >
-              <Link
+              <a
                 className="feed__item-title-link"
-                to="/test_1"
+                href="/test_1"
               >
                 test_1
-              </Link>
+              </a>
             </h2>
             <p
               className="feed__item-description"
             >
               test_1
             </p>
-            <Link
+            <a
               className="feed__item-readmore"
-              to="/test_1"
+              href="/test_1"
             >
               Read
-            </Link>
+            </a>
           </div>
         </div>
         <div
@@ -127,24 +327,24 @@ exports[`TagTemplate renders correctly 1`] = `
           <div
             className="pagination__prev"
           >
-            <Link
+            <a
               className="pagination__prev-link"
+              href="/page/1"
               rel="prev"
-              to="/page/1"
             >
               ← PREV
-            </Link>
+            </a>
           </div>
           <div
             className="pagination__next"
           >
-            <Link
+            <a
               className="pagination__next-link"
+              href="/page/3"
               rel="next"
-              to="/page/3"
             >
               → NEXT
-            </Link>
+            </a>
           </div>
         </div>
       </div>

src/templates/__snapshots__/tags-list-template.test.js.snap

@@ -4,9 +4,209 @@ exports[`TagsListTemplate renders correctly 1`] = `
 <div
   className="layout"
 >
-  <StaticQuery
+  <div
-    render={[Function]}
+    className="sidebar"
-  />
+  >
+    <div
+      className="sidebar__inner"
+    >
+      <div
+        className="author"
+      >
+        <a
+          href="/"
+        >
+          <img
+            alt="Test name"
+            className="author__photo"
+            height="75"
+            src="/test.jpg"
+            width="75"
+          />
+        </a>
+        <h2
+          className="author__title"
+        >
+          <a
+            className="author__title-link"
+            href="/"
+          >
+            Test name
+          </a>
+        </h2>
+        <p
+          className="author__subtitle"
+        >
+          Test bio
+        </p>
+      </div>
+      <nav
+        className="menu"
+      >
+        <ul
+          className="menu__list"
+        >
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/1/"
+            >
+              Test label 1
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/2/"
+            >
+              Test label 2
+            </a>
+          </li>
+          <li
+            className="menu__list-item"
+          >
+            <a
+              className="menu__list-item-link"
+              href="/test/3/"
+            >
+              Test label 3
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div
+        className="contacts"
+      >
+        <ul
+          className="contacts__list"
+        >
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li
+            className="contacts__list-item"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="telegram:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 28 28"
+              >
+                <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 26 28"
+              >
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <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"
+              >
+                <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"
+          >
+            <a
+              className="contacts__list-item-link"
+              href="https://vk.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                className="icon"
+                viewBox="0 0 31 28"
+              >
+                <path
+                  d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div
+        className="copyright"
+      >
+        Test copyright
+      </div>
+    </div>
+  </div>
   <div
     className="page"
   >
@@ -23,24 +223,24 @@ exports[`TagsListTemplate renders correctly 1`] = `
       >
         <ul>
           <li>
-            <Link
+            <a
-              to="/tag/test-0/"
+              href="/tag/test-0/"
             >
               test_0
                (
               1
               )
-            </Link>
+            </a>
           </li>
           <li>
-            <Link
+            <a
-              to="/tag/test-1/"
+              href="/tag/test-1/"
             >
               test_1
                (
               2
               )
-            </Link>
+            </a>
           </li>
         </ul>
       </div>

src/templates/categories-list-template.js

@@ -1,24 +1,22 @@
+// @flow
 import React from 'react';
-import { Link, graphql } from 'gatsby';
+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';
 
-const CategoriesListTemplate = ({ data }) => {
+const CategoriesListTemplate = () => {
-  const {
+  const { title, subtitle } = useSiteMetadata();
-    title,
+  const categories = useCategoriesList();
-    subtitle
-  } = data.site.siteMetadata;
-
-  const { group } = data.allMarkdownRemark;
 
   return (
     <Layout title={`Categories - ${title}`} description={subtitle}>
       <Sidebar />
       <Page title="Categories">
         <ul>
-          {group.map((category) => (
+          {categories.map((category) => (
             <li key={category.fieldValue}>
               <Link to={`/category/${kebabCase(category.fieldValue)}/`}>
                 {category.fieldValue} ({category.totalCount})
@@ -31,23 +29,4 @@ const CategoriesListTemplate = ({ data }) => {
   );
 };
 
-export const query = graphql`
+export default CategoriesListTemplate;
-  query CategoriesListQuery {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
-    allMarkdownRemark(
-      filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
-    ) {
-      group(field: frontmatter___category) {
-        fieldValue
-        totalCount
-      }
-    }
-  }
-`;
-
-export default CategoriesListTemplate;

src/templates/categories-list-template.test.js

@@ -1,33 +1,29 @@
+// @flow
 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 = {
-    data: {
+    ...siteMetadata,
-      allMarkdownRemark: {
+    ...allMarkdownRemark
-        group: [
-          {
-            fieldValue: 'test_0',
-            totalCount: 1
-          },
-          {
-            fieldValue: 'test_1',
-            totalCount: 2
-          }
-        ]
-      },
-      site: {
-        siteMetadata: {
-          title: 'test',
-          subtitle: 'test'
-        }
-      }
-    }
   };
 
+  beforeEach(() => {
+    StaticQuery.mockImplementationOnce(
+      ({ render }: RenderCallback) => (
+        render(props)
+      ),
+      useStaticQuery.mockReturnValue(props)
+    );
+  });
+
   it('renders correctly', () => {
-    const tree = renderer.create(<CategoriesListTemplate {...props} />).toJSON();
+    const tree = renderer.create(<CategoriesListTemplate />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/templates/category-template.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
@@ -5,12 +6,16 @@ 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';
 
-const CategoryTemplate = ({ data, pageContext }) => {
+type Props = {
-  const {
+  data: AllMarkdownRemark,
-    title: siteTitle,
+  pageContext: PageContext
-    subtitle: siteSubtitle
+};
-  } = data.site.siteMetadata;
+
+const CategoryTemplate = ({ data, pageContext }: Props) => {
+  const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
 
   const {
     category,
@@ -42,12 +47,6 @@ const CategoryTemplate = ({ data, pageContext }) => {
 
 export const query = graphql`
   query CategoryPage($category: String, $postsLimit: Int!, $postsOffset: Int!) {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
     allMarkdownRemark(
         limit: $postsLimit,
         skip: $postsOffset,

src/templates/category-template.test.js

@@ -1,69 +1,30 @@
+// @flow
 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: {
+      ...allMarkdownRemark
-        group: [
-          {
-            fieldValue: 'test_0',
-            totalCount: 1
-          },
-          {
-            fieldValue: 'test_1',
-            totalCount: 2
-          }
-        ],
-        edges: [
-          {
-            node: {
-              fields: {
-                slug: '/test_0',
-                categorySlug: '/test'
-              },
-              frontmatter: {
-                date: '2016-09-01',
-                description: 'test_0',
-                category: 'test',
-                title: 'test_0'
-              }
-            }
-          },
-          {
-            node: {
-              fields: {
-                slug: '/test_1',
-                categorySlug: '/test'
-              },
-              frontmatter: {
-                date: '2016-09-01',
-                description: 'test_1',
-                category: 'test',
-                title: 'test_1'
-              }
-            }
-          }
-        ]
-      },
-      site: {
-        siteMetadata: {
-          title: 'test',
-          subtitle: 'test'
-        }
-      }
     },
-    pageContext: {
+    ...pageContext
-      category: 'test',
-      currentPage: 1,
-      prevPagePath: '/page/1',
-      nextPagePath: '/page/3',
-      hasNextPage: true,
-      hasPrevPage: true
-    }
   };
 
+  beforeEach(() => {
+    StaticQuery.mockImplementationOnce(
+      ({ render }: RenderCallback) => (
+        render(siteMetadata)
+      ),
+      useStaticQuery.mockReturnValue(siteMetadata)
+    );
+  });
+
   it('renders correctly', () => {
     const tree = renderer.create(<CategoryTemplate {...props} />).toJSON();
     expect(tree).toMatchSnapshot();

src/templates/index-template.js

@@ -6,17 +6,16 @@ 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: Object,
+  data: AllMarkdownRemark,
-  +pageContext: Object,
+  pageContext: PageContext
 };
 
 const IndexTemplate = ({ data, pageContext }: Props) => {
-  const {
+  const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
-    title: siteTitle,
-    subtitle: siteSubtitle
-  } = data.site.siteMetadata;
 
   const {
     currentPage,
@@ -26,6 +25,7 @@ const IndexTemplate = ({ data, pageContext }: Props) => {
     nextPagePath
   } = pageContext;
 
+
   const { edges } = data.allMarkdownRemark;
   const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
 
@@ -47,12 +47,6 @@ const IndexTemplate = ({ data, pageContext }: Props) => {
 
 export const query = graphql`
   query IndexTemplate($postsLimit: Int!, $postsOffset: Int!) {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
     allMarkdownRemark(
         limit: $postsLimit,
         skip: $postsOffset,

src/templates/index-template.test.js

@@ -1,58 +1,30 @@
+// @flow
 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: {
+      ...allMarkdownRemark
-        edges: [
-          {
-            node: {
-              fields: {
-                slug: '/test_0',
-                categorySlug: '/test_0'
-              },
-              frontmatter: {
-                date: '2016-09-01',
-                description: 'test_0',
-                category: 'test_0',
-                title: 'test_0'
-              }
-            }
-          },
-          {
-            node: {
-              fields: {
-                slug: '/test_1',
-                categorySlug: '/test_1'
-              },
-              frontmatter: {
-                date: '2016-09-01',
-                description: 'test_1',
-                category: 'test_1',
-                title: 'test_1'
-              }
-            }
-          }
-        ]
-      },
-      site: {
-        siteMetadata: {
-          title: 'test',
-          subtitle: 'test'
-        }
-      }
     },
-    pageContext: {
+    ...pageContext
-      currentPage: 1,
-      prevPagePath: '/page/1',
-      nextPagePath: '/page/3',
-      hasNextPage: true,
-      hasPrevPage: true
-    }
   };
 
+  beforeEach(() => {
+    StaticQuery.mockImplementationOnce(
+      ({ render }: RenderCallback) => (
+        render(siteMetadata)
+      ),
+      useStaticQuery.mockReturnValue(siteMetadata)
+    );
+  });
+
   it('renders correctly', () => {
     const tree = renderer.create(<IndexTemplate {...props} />).toJSON();
     expect(tree).toMatchSnapshot();

src/templates/not-found-template.js

@@ -1,14 +1,12 @@
+// @flow
 import React from 'react';
-import { graphql } from 'gatsby';
 import Sidebar from '../components/Sidebar';
 import Layout from '../components/Layout';
 import Page from '../components/Page';
+import { useSiteMetadata } from '../hooks';
 
-const NotFoundTemplate = ({ data }) => {
+const NotFoundTemplate = () => {
-  const {
+  const { title, subtitle } = useSiteMetadata();
-    title,
-    subtitle
-  } = data.site.siteMetadata;
 
   return (
     <Layout title={`Not Found - ${title}`} description={subtitle}>
@@ -20,15 +18,4 @@ const NotFoundTemplate = ({ data }) => {
   );
 };
 
-export const query = graphql`
-  query NotFoundQuery {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
-  }
-`;
-
 export default NotFoundTemplate;