diff --git a/jest/__fixtures__/markdown-remark.js b/jest/__fixtures__/markdown-remark.js
index 96ddd5f..07b3752 100644
--- a/jest/__fixtures__/markdown-remark.js
+++ b/jest/__fixtures__/markdown-remark.js
@@ -2,6 +2,7 @@
 
 module.exports = {
   markdownRemark: {
+    id: 'test-123',
     html: '<p>test</p>',
     fields: {
       tagSlugs: [
diff --git a/src/cms/preview-templates/page-preview.js b/src/cms/preview-templates/page-preview.js
index ee537dd..416984e 100644
--- a/src/cms/preview-templates/page-preview.js
+++ b/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']);
 
diff --git a/src/cms/preview-templates/post-preview.js b/src/cms/preview-templates/post-preview.js
index 82a12fb..63aa5e9 100644
--- a/src/cms/preview-templates/post-preview.js
+++ b/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']);
 
diff --git a/src/components/Feed/Feed.js b/src/components/Feed/Feed.js
index 84e1f30..fda311d 100644
--- a/src/components/Feed/Feed.js
+++ b/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}>
diff --git a/src/components/Feed/Feed.test.js b/src/components/Feed/Feed.test.js
index 59b55f5..e08b188 100644
--- a/src/components/Feed/Feed.test.js
+++ b/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>'
+
         }
       }
     ]
diff --git a/src/components/Feed/index.js b/src/components/Feed/index.js
index 5beb2fc..b00dadd 100644
--- a/src/components/Feed/index.js
+++ b/src/components/Feed/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Feed';
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
index aaf84ed..a6e759b 100644
--- a/src/components/Icon/Icon.js
+++ b/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>
diff --git a/src/components/Icon/Icon.test.js b/src/components/Icon/Icon.test.js
index cd1ff3c..69beefa 100644
--- a/src/components/Icon/Icon.test.js
+++ b/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';
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index dc6b45c..9457c7b 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Icon';
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 793fff3..6cf2014 100644
--- a/src/components/Layout/Layout.js
+++ b/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" />
diff --git a/src/components/Layout/Layout.test.js b/src/components/Layout/Layout.test.js
index 8873ba8..1e20a8b 100644
--- a/src/components/Layout/Layout.test.js
+++ b/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';
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 9592f29..9fd3d43 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Layout';
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index d7ce8c0..feab837 100644
--- a/src/components/Page/Page.js
+++ b/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(() => {
diff --git a/src/components/Page/Page.test.js b/src/components/Page/Page.test.js
index c990568..c224288 100644
--- a/src/components/Page/Page.test.js
+++ b/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';
diff --git a/src/components/Page/index.js b/src/components/Page/index.js
index 9a968b3..73f2ad5 100644
--- a/src/components/Page/index.js
+++ b/src/components/Page/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Page';
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index 9b88ae3..0b6e564 100644
--- a/src/components/Pagination/Pagination.js
+++ b/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
diff --git a/src/components/Pagination/Pagination.test.js b/src/components/Pagination/Pagination.test.js
index 334d1f8..377f065 100644
--- a/src/components/Pagination/Pagination.test.js
+++ b/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';
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
index eaef04e..cf8613c 100644
--- a/src/components/Pagination/index.js
+++ b/src/components/Pagination/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Pagination';
diff --git a/src/components/Post/Author/Author.test.js b/src/components/Post/Author/Author.test.js
index 1c06dcc..95f0b02 100644
--- a/src/components/Post/Author/Author.test.js
+++ b/src/components/Post/Author/Author.test.js
@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Author from './Author';
 import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Author', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/components/Post/Comments/Comments.js b/src/components/Post/Comments/Comments.js
index 44f51de..7a48b10 100644
--- a/src/components/Post/Comments/Comments.js
+++ b/src/components/Post/Comments/Comments.js
@@ -1,8 +1,14 @@
+// @flow
 import React from 'react';
 import ReactDisqusComments from 'react-disqus-comments';
 import { useSiteMetadata } from '../../../hooks';
 
-const Comments = ({ postTitle, postSlug }) => {
+type Props = {
+  postTitle: string,
+  postSlug: string
+};
+
+const Comments = ({ postTitle, postSlug }: Props) => {
   const { url, disqusShortname } = useSiteMetadata();
 
   if (!disqusShortname) {
diff --git a/src/components/Post/Comments/Comments.test.js b/src/components/Post/Comments/Comments.test.js
index 70ba4aa..d1abcb0 100644
--- a/src/components/Post/Comments/Comments.test.js
+++ b/src/components/Post/Comments/Comments.test.js
@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Comments from './Comments';
 import siteMetadata from '../../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../../types';
 
 describe('Comments', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/components/Post/Comments/index.js b/src/components/Post/Comments/index.js
index fff6329..4dc4f74 100644
--- a/src/components/Post/Comments/index.js
+++ b/src/components/Post/Comments/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Comments';
diff --git a/src/components/Post/Content/Content.js b/src/components/Post/Content/Content.js
index 2f580bf..bd8e55e 100644
--- a/src/components/Post/Content/Content.js
+++ b/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 }} />
diff --git a/src/components/Post/Content/Content.test.js b/src/components/Post/Content/Content.test.js
index 05eab60..158f752 100644
--- a/src/components/Post/Content/Content.test.js
+++ b/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';
diff --git a/src/components/Post/Content/index.js b/src/components/Post/Content/index.js
index b840314..c12a20b 100644
--- a/src/components/Post/Content/index.js
+++ b/src/components/Post/Content/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Content';
diff --git a/src/components/Post/Meta/Meta.js b/src/components/Post/Meta/Meta.js
index 478d405..6595cb9 100644
--- a/src/components/Post/Meta/Meta.js
+++ b/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>
diff --git a/src/components/Post/Meta/Meta.test.js b/src/components/Post/Meta/Meta.test.js
index a26251f..d108cd8 100644
--- a/src/components/Post/Meta/Meta.test.js
+++ b/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';
diff --git a/src/components/Post/Meta/index.js b/src/components/Post/Meta/index.js
index 257ed50..411ed6c 100644
--- a/src/components/Post/Meta/index.js
+++ b/src/components/Post/Meta/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Meta';
diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js
index 6dbf491..f4dea4e 100644
--- a/src/components/Post/Post.js
+++ b/src/components/Post/Post.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import Author from './Author';
@@ -6,8 +7,13 @@ 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 = {
+  post: Node
+};
+
+const Post = ({ post }: Props) => {
   const { html } = post;
   const { tagSlugs, slug } = post.fields;
   const { tags, title, date } = post.frontmatter;
@@ -22,7 +28,7 @@ const Post = ({ post }) => {
 
       <div className={styles['post__footer']}>
         <Meta date={date} />
-        {tags && <Tags tags={tags} tagSlugs={tagSlugs} />}
+        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
         <Author />
       </div>
 
diff --git a/src/components/Post/Post.test.js b/src/components/Post/Post.test.js
index b70faff..919b744 100644
--- a/src/components/Post/Post.test.js
+++ b/src/components/Post/Post.test.js
@@ -1,13 +1,15 @@
+// @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 }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
@@ -16,8 +18,11 @@ describe('Post', () => {
 
   const props = {
     post: {
+      id: 'test-123',
       html: '<p>test</p>',
       fields: {
+        slug: '/test',
+        categorySlug: '/test-category',
         tagSlugs: [
           '/test_0',
           '/test_1'
diff --git a/src/components/Post/Tags/Tags.js b/src/components/Post/Tags/Tags.js
index 4d450c2..e43a374 100644
--- a/src/components/Post/Tags/Tags.js
+++ b/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]}
diff --git a/src/components/Post/Tags/Tags.test.js b/src/components/Post/Tags/Tags.test.js
index 0e00d82..9d87415 100644
--- a/src/components/Post/Tags/Tags.test.js
+++ b/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';
diff --git a/src/components/Post/Tags/index.js b/src/components/Post/Tags/index.js
index 1051072..35f5dca 100644
--- a/src/components/Post/Tags/index.js
+++ b/src/components/Post/Tags/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Tags';
diff --git a/src/components/Post/index.js b/src/components/Post/index.js
index 3e17ebe..a0bb2aa 100644
--- a/src/components/Post/index.js
+++ b/src/components/Post/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Post';
diff --git a/src/components/Sidebar/Author/Author.js b/src/components/Sidebar/Author/Author.js
index 9a65078..506d20d 100644
--- a/src/components/Sidebar/Author/Author.js
+++ b/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
diff --git a/src/components/Sidebar/Author/Author.test.js b/src/components/Sidebar/Author/Author.test.js
index 8f8e0d3..e5eb527 100644
--- a/src/components/Sidebar/Author/Author.test.js
+++ b/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', () => {
diff --git a/src/components/Sidebar/Author/index.js b/src/components/Sidebar/Author/index.js
index 975986f..7fe4910 100644
--- a/src/components/Sidebar/Author/index.js
+++ b/src/components/Sidebar/Author/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Author';
diff --git a/src/components/Sidebar/Contacts/Contacts.js b/src/components/Sidebar/Contacts/Contacts.js
index 32b76f4..a90e0e7 100644
--- a/src/components/Sidebar/Contacts/Contacts.js
+++ b/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 = {|
-  +contacts: {
+type Props = {
+  contacts: {
     [string]: string,
   },
-|};
+};
 
 const Contacts = ({ contacts }: Props) => (
   <div className={styles['contacts']}>
diff --git a/src/components/Sidebar/Contacts/Contacts.test.js b/src/components/Sidebar/Contacts/Contacts.test.js
index 37d46e7..ce7df32 100644
--- a/src/components/Sidebar/Contacts/Contacts.test.js
+++ b/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';
diff --git a/src/components/Sidebar/Contacts/index.js b/src/components/Sidebar/Contacts/index.js
index 784477c..e964206 100644
--- a/src/components/Sidebar/Contacts/index.js
+++ b/src/components/Sidebar/Contacts/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Contacts';
diff --git a/src/components/Sidebar/Copyright/Copyright.js b/src/components/Sidebar/Copyright/Copyright.js
index 5ee3a42..60996ef 100644
--- a/src/components/Sidebar/Copyright/Copyright.js
+++ b/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>
diff --git a/src/components/Sidebar/Copyright/Copyright.test.js b/src/components/Sidebar/Copyright/Copyright.test.js
index fc2efd7..dbc8fea 100644
--- a/src/components/Sidebar/Copyright/Copyright.test.js
+++ b/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';
diff --git a/src/components/Sidebar/Copyright/index.js b/src/components/Sidebar/Copyright/index.js
index d58c9e8..08dbf90 100644
--- a/src/components/Sidebar/Copyright/index.js
+++ b/src/components/Sidebar/Copyright/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Copyright';
diff --git a/src/components/Sidebar/Menu/Menu.js b/src/components/Sidebar/Menu/Menu.js
index 4c7d9dd..474f6ba 100644
--- a/src/components/Sidebar/Menu/Menu.js
+++ b/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) => (
diff --git a/src/components/Sidebar/Menu/Menu.test.js b/src/components/Sidebar/Menu/Menu.test.js
index d424fa6..b00ecd0 100644
--- a/src/components/Sidebar/Menu/Menu.test.js
+++ b/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';
diff --git a/src/components/Sidebar/Menu/index.js b/src/components/Sidebar/Menu/index.js
index a6de24c..af74c8e 100644
--- a/src/components/Sidebar/Menu/index.js
+++ b/src/components/Sidebar/Menu/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Menu';
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 8f89ba5..d4d4cd9 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -8,7 +8,7 @@ import styles from './Sidebar.module.scss';
 import { useSiteMetadata } from '../../hooks';
 
 type Props = {
-  +isIndex: ?boolean,
+  isIndex?: boolean,
 };
 
 const Sidebar = ({ isIndex }: Props) => {
diff --git a/src/components/Sidebar/Sidebar.test.js b/src/components/Sidebar/Sidebar.test.js
index e589d66..3fd7fa2 100644
--- a/src/components/Sidebar/Sidebar.test.js
+++ b/src/components/Sidebar/Sidebar.test.js
@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import Sidebar from './Sidebar';
 import siteMetadata from '../../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../../types';
 
 describe('Sidebar', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index e842a85..b0619ed 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -1 +1,2 @@
+// @flow
 export { default } from './Sidebar';
diff --git a/src/templates/categories-list-template.js b/src/templates/categories-list-template.js
index 5fdcc37..1ec71a1 100644
--- a/src/templates/categories-list-template.js
+++ b/src/templates/categories-list-template.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import kebabCase from 'lodash/kebabCase';
diff --git a/src/templates/categories-list-template.test.js b/src/templates/categories-list-template.test.js
index d9dcbeb..995a288 100644
--- a/src/templates/categories-list-template.test.js
+++ b/src/templates/categories-list-template.test.js
@@ -1,9 +1,11 @@
+// @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 = {
@@ -13,7 +15,7 @@ describe('CategoriesListTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(props)
       ),
       useStaticQuery.mockReturnValue(props)
diff --git a/src/templates/category-template.js b/src/templates/category-template.js
index 8b20296..bc0ddd0 100644
--- a/src/templates/category-template.js
+++ b/src/templates/category-template.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
@@ -6,8 +7,14 @@ 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 = {
+  data: AllMarkdownRemark,
+  pageContext: PageContext
+};
+
+const CategoryTemplate = ({ data, pageContext }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
 
   const {
diff --git a/src/templates/category-template.test.js b/src/templates/category-template.test.js
index c25627d..121965e 100644
--- a/src/templates/category-template.test.js
+++ b/src/templates/category-template.test.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
@@ -5,6 +6,7 @@ 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 = {
@@ -16,7 +18,7 @@ describe('CategoryTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/index-template.js b/src/templates/index-template.js
index 898b8ca..1d81311 100644
--- a/src/templates/index-template.js
+++ b/src/templates/index-template.js
@@ -7,10 +7,11 @@ 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,
-  +pageContext: Object,
+  data: AllMarkdownRemark,
+  pageContext: PageContext
 };
 
 const IndexTemplate = ({ data, pageContext }: Props) => {
@@ -46,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,
diff --git a/src/templates/index-template.test.js b/src/templates/index-template.test.js
index 3b2d0fc..7473818 100644
--- a/src/templates/index-template.test.js
+++ b/src/templates/index-template.test.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { StaticQuery, useStaticQuery } from 'gatsby';
@@ -5,6 +6,7 @@ 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 = {
@@ -16,7 +18,7 @@ describe('IndexTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/not-found-template.js b/src/templates/not-found-template.js
index c83c32c..48fe87f 100644
--- a/src/templates/not-found-template.js
+++ b/src/templates/not-found-template.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Sidebar from '../components/Sidebar';
 import Layout from '../components/Layout';
diff --git a/src/templates/not-found-template.test.js b/src/templates/not-found-template.test.js
index 5f54a5a..6e0e0ec 100644
--- a/src/templates/not-found-template.test.js
+++ b/src/templates/not-found-template.test.js
@@ -1,13 +1,15 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import NotFoundTemplate from './not-found-template';
 import siteMetadata from '../../jest/__fixtures__/site-metadata';
+import type { RenderCallback } from '../types';
 
 describe('NotFoundTemplate', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/page-template.js b/src/templates/page-template.js
index d935196..a5f6b1f 100644
--- a/src/templates/page-template.js
+++ b/src/templates/page-template.js
@@ -1,11 +1,19 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import Page from '../components/Page';
 import { useSiteMetadata } from '../hooks';
+import type { MarkdownRemark } from '../types';
 
-const PageTemplate = ({ data }) => {
+type Props = {
+  data: {
+    markdownRemark: MarkdownRemark
+  }
+};
+
+const PageTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
   const { html: pageBody } = data.markdownRemark;
   const { title: pageTitle, description: pageDescription } = data.markdownRemark.frontmatter;
@@ -23,12 +31,6 @@ const PageTemplate = ({ data }) => {
 
 export const query = graphql`
   query PageBySlug($slug: String!) {
-    site {
-      siteMetadata {
-        title
-        subtitle
-      }
-    }
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
diff --git a/src/templates/page-template.test.js b/src/templates/page-template.test.js
index 27866a7..63523ff 100644
--- a/src/templates/page-template.test.js
+++ b/src/templates/page-template.test.js
@@ -1,9 +1,11 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import PageTemplate from './page-template';
 import siteMetadata from '../../jest/__fixtures__/site-metadata';
 import markdownRemark from '../../jest/__fixtures__/markdown-remark';
+import type { RenderCallback } from '../types';
 
 describe('PageTemplate', () => {
   const props = {
@@ -14,7 +16,7 @@ describe('PageTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/post-template.js b/src/templates/post-template.js
index 7abbce1..67aafc9 100644
--- a/src/templates/post-template.js
+++ b/src/templates/post-template.js
@@ -3,8 +3,13 @@ import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
 import Post from '../components/Post';
 import { useSiteMetadata } from '../hooks';
+import type { MarkdownRemark } from '../types';
 
-const PostTemplate = ({ data }) => {
+type Props = {
+  data: MarkdownRemark
+};
+
+const PostTemplate = ({ data }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
   const { title: postTitle, description: postDescription } = data.markdownRemark.frontmatter;
   const metaDescription = postDescription !== null ? postDescription : siteSubtitle;
diff --git a/src/templates/post-template.test.js b/src/templates/post-template.test.js
index ae20e3a..9bd8d54 100644
--- a/src/templates/post-template.test.js
+++ b/src/templates/post-template.test.js
@@ -1,9 +1,11 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import PostTemplate from './post-template';
 import siteMetadata from '../../jest/__fixtures__/site-metadata';
 import markdownRemark from '../../jest/__fixtures__/markdown-remark';
+import type { RenderCallback } from '../types';
 
 describe('PostTemplate', () => {
   const props = {
@@ -14,7 +16,7 @@ describe('PostTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/tag-template.js b/src/templates/tag-template.js
index c4d5a06..6decf30 100644
--- a/src/templates/tag-template.js
+++ b/src/templates/tag-template.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { graphql } from 'gatsby';
 import Layout from '../components/Layout';
@@ -6,8 +7,14 @@ import Feed from '../components/Feed';
 import Page from '../components/Page';
 import Pagination from '../components/Pagination';
 import { useSiteMetadata } from '../hooks';
+import type { AllMarkdownRemark, PageContext } from '../types';
 
-const TagTemplate = ({ data, pageContext }) => {
+type Props = {
+  data: AllMarkdownRemark,
+  pageContext: PageContext
+};
+
+const TagTemplate = ({ data, pageContext }: Props) => {
   const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
 
   const {
diff --git a/src/templates/tag-template.test.js b/src/templates/tag-template.test.js
index cbe6aa0..fecd56e 100644
--- a/src/templates/tag-template.test.js
+++ b/src/templates/tag-template.test.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
@@ -5,11 +6,12 @@ import TagTemplate from './tag-template';
 import siteMetadata from '../../jest/__fixtures__/site-metadata';
 import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
 import pageContext from '../../jest/__fixtures__/page-context';
+import type { RenderCallback } from '../types';
 
 describe('TagTemplate', () => {
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(siteMetadata)
       ),
       useStaticQuery.mockReturnValue(siteMetadata)
diff --git a/src/templates/tags-list-template.js b/src/templates/tags-list-template.js
index 5a05b15..409312e 100644
--- a/src/templates/tags-list-template.js
+++ b/src/templates/tags-list-template.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { Link } from 'gatsby';
 import kebabCase from 'lodash/kebabCase';
diff --git a/src/templates/tags-list-template.test.js b/src/templates/tags-list-template.test.js
index 45121a0..d697644 100644
--- a/src/templates/tags-list-template.test.js
+++ b/src/templates/tags-list-template.test.js
@@ -1,9 +1,11 @@
+// @flow
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { useStaticQuery, StaticQuery } from 'gatsby';
 import TagsListTemplate from './tags-list-template';
 import siteMetadata from '../../jest/__fixtures__/site-metadata';
 import allMarkdownRemark from '../../jest/__fixtures__/all-markdown-remark';
+import type { RenderCallback } from '../types';
 
 describe('TagsListTemplate', () => {
   const props = {
@@ -13,7 +15,7 @@ describe('TagsListTemplate', () => {
 
   beforeEach(() => {
     StaticQuery.mockImplementationOnce(
-      ({ render }) => (
+      ({ render }: RenderCallback) => (
         render(props)
       ),
       useStaticQuery.mockReturnValue(props)
diff --git a/src/types/index.js b/src/types/index.js
new file mode 100644
index 0000000..da5e2f7
--- /dev/null
+++ b/src/types/index.js
@@ -0,0 +1,53 @@
+// @flow
+import type { Node as ReactNode } from 'react';
+
+export type RenderCallback = (data: any) => ReactNode;
+
+export type Entry = (string[]) => string;
+
+export type WidgetFor = (string) => string;
+
+export type PageContext = {
+  tag: string,
+  category: string,
+  currentPage: number,
+  prevPagePath: string,
+  nextPagePath: string,
+  hasPrevPage: boolean,
+  hasNextPage: boolean
+};
+
+export type Node = {
+  fields: {
+    slug: string,
+    categorySlug?: string,
+    tagSlugs?: string[]
+  },
+  frontmatter: {
+    date: string,
+    description?: string,
+    category?: string,
+    tags?: string[],
+    title: string,
+  },
+  html: string,
+  id: string
+};
+
+export type Edge = {
+  node: Node
+};
+
+export type Edges = Array<Edge>;
+
+export type AllMarkdownRemark = {
+  allMarkdownRemark: {
+    edges: Edges,
+  },
+  group: {
+    fieldValue: string,
+    totalCount: number
+  }[]
+};
+
+export type MarkdownRemark = Node;