refactor(starter): upgrade to new version of gatsby

src/components/Sidebar/Author/Author.js

@@ -1,40 +0,0 @@
-// @flow strict
-import React from 'react';
-import { withPrefix, Link } from 'gatsby';
-import styles from './Author.module.scss';
-
-type Props = {
-  author: {
-    name: string,
-    bio: string,
-    photo: string
-  },
-  isIndex: ?boolean
-};
-
-const Author = ({ author, isIndex }: Props) => (
-  <div className={styles['author']}>
-    <Link to="/">
-      <img
-        src={withPrefix(author.photo)}
-        className={styles['author__photo']}
-        width="75"
-        height="75"
-        alt={author.name}
-      />
-    </Link>
-
-    { isIndex === true ? (
-      <h1 className={styles['author__title']}>
-        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
-      </h1>
-    ) : (
-      <h2 className={styles['author__title']}>
-        <Link className={styles['author__title-link']} to="/">{author.name}</Link>
-      </h2>
-    )}
-    <p className={styles['author__subtitle']}>{author.bio}</p>
-  </div>
-);
-
-export default Author;

src/components/Sidebar/Author/Author.module.scss

@@ -1,36 +1,33 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .author {
   &__photo {
+    background-clip: padding-box;
+    border-radius: 50%;
     display: inline-block;
     margin-bottom: 0;
-    border-radius: 50%;
-    background-clip: padding-box
   }
 
   &__title {
     font-size: $typographic-base-font-size * 1.125;
     font-weight: 600;
     @include line-height(1.125);
-    @include margin(.5, 0, .5, 0);
+    @include margin(0.5, 0, 0.5, 0);
 
     &-link {
       color: $color-base;
 
       &:hover,
       &:focus {
-        color: $color-base
+        color: $color-base;
       }
-
     }
-
   }
 
   &__subtitle {
     color: $color-gray;
     @include line-height(1);
-    @include margin-bottom(1)
+    @include margin-bottom(1);
   }
-
-}
+}

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

@@ -1,20 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Author from './Author';
-
-describe('Author', () => {
-  const props = {
-    author: {
-      name: 'test',
-      photo: '/photo.jpg',
-      bio: 'test'
-    },
-    isIndex: false
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Author {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Author/Author.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Author } from "@/components/Sidebar/Author";
+import * as mocks from "@/mocks";
+
+describe("Author", () => {
+  const props = { isIndex: false, author: mocks.author };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Author {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Author/Author.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import { Link, withPrefix } from "gatsby";
+
+import styles from "./Author.module.scss";
+
+type Props = {
+  author: {
+    name: string;
+    bio: string;
+    photo: string;
+  };
+  isIndex?: boolean;
+};
+
+const Author = ({ author, isIndex }: Props) => (
+  <div className={styles.author}>
+    <Link to="/">
+      <img
+        src={withPrefix(author.photo)}
+        className={styles.author__photo}
+        width="75"
+        height="75"
+        alt={author.name}
+      />
+    </Link>
+
+    {isIndex === true ? (
+      <h1 className={styles.author__title}>
+        <Link className={styles["author__title-link"]} to="/">
+          {author.name}
+        </Link>
+      </h1>
+    ) : (
+      <h2 className={styles.author__title}>
+        <Link className={styles["author__title-link"]} to="/">
+          {author.name}
+        </Link>
+      </h2>
+    )}
+    <p className={styles.author__subtitle}>{author.bio}</p>
+  </div>
+);
+
+export default Author;

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

@@ -8,10 +8,10 @@ exports[`Author renders correctly 1`] = `
     href="/"
   >
     <img
-      alt="test"
+      alt="John Doe"
       className="author__photo"
       height="75"
-      src="/photo.jpg"
+      src="/static/photo.jpg"
       width="75"
     />
   </a>
@@ -22,13 +22,13 @@ exports[`Author renders correctly 1`] = `
       className="author__title-link"
       href="/"
     >
-      test
+      John Doe
     </a>
   </h2>
   <p
     className="author__subtitle"
   >
-    test
+    Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
   </p>
 </div>
 `;

src/components/Sidebar/Author/index.js

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

src/components/Sidebar/Author/index.ts

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

src/components/Sidebar/Contacts/Contacts.js

@@ -1,32 +0,0 @@
-// @flow strict
-import React from 'react';
-import { getContactHref, getIcon } from '../../../utils';
-import Icon from '../../Icon';
-import styles from './Contacts.module.scss';
-
-type Props = {
-  contacts: {
-    [string]: string,
-  },
-};
-
-const Contacts = ({ contacts }: Props) => (
-  <div className={styles['contacts']}>
-    <ul className={styles['contacts__list']}>
-      {Object.keys(contacts).map((name) => (!contacts[name] ? null : (
-        <li className={styles['contacts__list-item']} key={name}>
-          <a
-            className={styles['contacts__list-item-link']}
-            href={getContactHref(name, contacts[name])}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <Icon name={name} icon={getIcon(name)} />
-          </a>
-        </li>
-      )))}
-    </ul>
-  </div>
-);
-
-export default Contacts;

src/components/Sidebar/Contacts/Contacts.module.scss

@@ -1,5 +1,5 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .contacts {
   @include margin-bottom(1);
@@ -10,38 +10,34 @@
     flex-grow: 0;
     flex-shrink: 0;
     list-style: none;
-    padding: 0;
     margin: 10px -3px;
+    padding: 0;
     width: 140px;
 
     &-item {
-      padding: 0;
-      margin: 4px;
-      display: flex;
       align-content: center;
       align-items: center;
-      justify-content: center;
-      height: $button-height;
-      width: $button-height;
-      line-height: $button-height;
-      border-radius: 50%;
-      text-align: center;
       border: 1px solid $color-gray-bg;
+      border-radius: 50%;
+      display: flex;
+      height: $button-height;
+      justify-content: center;
+      line-height: $button-height;
+      margin: 4px;
+      padding: 0;
+      text-align: center;
+      width: $button-height;
 
       &-link {
         border: 0;
-        display: flex;
         color: $color-base;
-  
+        display: flex;
+
         &:hover,
         &:focus {
           color: $color-primary;
         }
-
       }
-
     }
-
   }
-
-}
+}

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

@@ -1,22 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Contacts from './Contacts';
-
-describe('Contacts', () => {
-  const props = {
-    contacts: {
-      email: '#',
-      twitter: '#',
-      vkontakte: '#',
-      github: '#',
-      rss: '#',
-      telegram: '#'
-    }
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Contacts {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Contacts/Contacts.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Contacts } from "@/components/Sidebar/Contacts";
+import * as mocks from "@/mocks";
+
+describe("Contacts", () => {
+  const props = { contacts: mocks.contacts };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Contacts {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Contacts/Contacts.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Icon } from "@/components/Icon";
+import { Dictionary } from "@/types";
+import { getContactHref, getIcon } from "@/utils";
+
+import styles from "./Contacts.module.scss";
+
+type Props = {
+  contacts: Dictionary<string>;
+};
+
+const Contacts: React.FC<Props> = ({ contacts }: Props) => (
+  <div className={styles.contacts}>
+    <ul className={styles.contacts__list}>
+      {Object.keys(contacts).map(name => (
+        <li className={styles["contacts__list-item"]} key={name}>
+          <a
+            className={styles["contacts__list-item-link"]}
+            href={getContactHref(name, contacts[name])}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Icon name={name} icon={getIcon(name)} />
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default Contacts;

src/components/Sidebar/Contacts/__snapshots__/Contacts.test.tsx.snap

@@ -7,6 +7,28 @@ exports[`Contacts renders correctly 1`] = `
   <ul
     className="contacts__list"
   >
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 22 28"
+        >
+          <title>
+            rss
+          </title>
+          <path
+            d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+          />
+        </svg>
+      </a>
+    </li>
     <li
       className="contacts__list-item"
     >
@@ -29,50 +51,6 @@ exports[`Contacts renders correctly 1`] = `
         </svg>
       </a>
     </li>
-    <li
-      className="contacts__list-item"
-    >
-      <a
-        className="contacts__list-item-link"
-        href="https://www.twitter.com/#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <svg
-          className="icon"
-          viewBox="0 0 26 28"
-        >
-          <title>
-            twitter
-          </title>
-          <path
-            d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-          />
-        </svg>
-      </a>
-    </li>
-    <li
-      className="contacts__list-item"
-    >
-      <a
-        className="contacts__list-item-link"
-        href="https://vk.com/#"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <svg
-          className="icon"
-          viewBox="0 0 31 28"
-        >
-          <title>
-            vkontakte
-          </title>
-          <path
-            d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
-          />
-        </svg>
-      </a>
-    </li>
     <li
       className="contacts__list-item"
     >
@@ -100,19 +78,19 @@ exports[`Contacts renders correctly 1`] = `
     >
       <a
         className="contacts__list-item-link"
-        href="#"
+        href="https://www.twitter.com/#"
         rel="noopener noreferrer"
         target="_blank"
       >
         <svg
           className="icon"
-          viewBox="0 0 22 28"
+          viewBox="0 0 26 28"
         >
           <title>
-            rss
+            twitter
           </title>
           <path
-            d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+            d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
           />
         </svg>
       </a>
@@ -139,6 +117,28 @@ exports[`Contacts renders correctly 1`] = `
         </svg>
       </a>
     </li>
+    <li
+      className="contacts__list-item"
+    >
+      <a
+        className="contacts__list-item-link"
+        href="https://vk.com/#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <svg
+          className="icon"
+          viewBox="0 0 31 28"
+        >
+          <title>
+            vkontakte
+          </title>
+          <path
+            d="M29.953 8.125c0.234 0.641-0.5 2.141-2.344 4.594-3.031 4.031-3.359 3.656-0.859 5.984 2.406 2.234 2.906 3.313 2.984 3.453 0 0 1 1.75-1.109 1.766l-4 0.063c-0.859 0.172-2-0.609-2-0.609-1.5-1.031-2.906-3.703-4-3.359 0 0-1.125 0.359-1.094 2.766 0.016 0.516-0.234 0.797-0.234 0.797s-0.281 0.297-0.828 0.344h-1.797c-3.953 0.25-7.438-3.391-7.438-3.391s-3.813-3.938-7.156-11.797c-0.219-0.516 0.016-0.766 0.016-0.766s0.234-0.297 0.891-0.297l4.281-0.031c0.406 0.063 0.688 0.281 0.688 0.281s0.25 0.172 0.375 0.5c0.703 1.75 1.609 3.344 1.609 3.344 1.563 3.219 2.625 3.766 3.234 3.437 0 0 0.797-0.484 0.625-4.375-0.063-1.406-0.453-2.047-0.453-2.047-0.359-0.484-1.031-0.625-1.328-0.672-0.234-0.031 0.156-0.594 0.672-0.844 0.766-0.375 2.125-0.391 3.734-0.375 1.266 0.016 1.625 0.094 2.109 0.203 1.484 0.359 0.984 1.734 0.984 5.047 0 1.062-0.203 2.547 0.562 3.031 0.328 0.219 1.141 0.031 3.141-3.375 0 0 0.938-1.625 1.672-3.516 0.125-0.344 0.391-0.484 0.391-0.484s0.25-0.141 0.594-0.094l4.5-0.031c1.359-0.172 1.578 0.453 1.578 0.453z"
+          />
+        </svg>
+      </a>
+    </li>
   </ul>
 </div>
 `;

src/components/Sidebar/Contacts/index.js

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

src/components/Sidebar/Contacts/index.ts

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

src/components/Sidebar/Copyright/Copyright.js

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

src/components/Sidebar/Copyright/Copyright.module.scss

@@ -1,7 +1,9 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@use "sass:color";
+
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .copyright {
-  color: lighten($color-gray, 18%);
+  color: color.adjust($color-gray, 18%);
   font-size: $typographic-small-font-size;
-}
+}

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

@@ -1,15 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Copyright from './Copyright';
-
-describe('Copyright', () => {
-  it('renders correctly', () => {
-    const props = {
-      copyright: 'copyright'
-    };
-
-    const tree = renderer.create(<Copyright {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Copyright/Copyright.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Copyright } from "@/components/Sidebar/Copyright";
+
+describe("Copyright", () => {
+  it("renders correctly", () => {
+    const props = { copyright: "copyright" };
+    const tree = renderer.create(<Copyright {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Copyright/Copyright.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import styles from "./Copyright.module.scss";
+
+type Props = {
+  copyright: string;
+};
+
+const Copyright = ({ copyright }: Props) => (
+  <div className={styles.copyright}>{copyright}</div>
+);
+
+export default Copyright;

src/components/Sidebar/Copyright/index.js

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

src/components/Sidebar/Copyright/index.ts

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

src/components/Sidebar/Menu/Menu.js

@@ -1,31 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Link } from 'gatsby';
-import styles from './Menu.module.scss';
-
-type Props = {
-  menu: {
-    label: string,
-    path: string
-  }[]
-};
-
-const Menu = ({ menu }: Props) => (
-  <nav className={styles['menu']}>
-    <ul className={styles['menu__list']}>
-      {menu.map((item) => (
-        <li className={styles['menu__list-item']} key={item.path}>
-          <Link
-            to={item.path}
-            className={styles['menu__list-item-link']}
-            activeClassName={styles['menu__list-item-link--active']}
-          >
-            {item.label}
-          </Link>
-        </li>
-      ))}
-    </ul>
-  </nav>
-);
-
-export default Menu;

src/components/Sidebar/Menu/Menu.module.scss

@@ -1,39 +1,35 @@
-@import '../../../assets/scss/variables';
-@import '../../../assets/scss/mixins';
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/mixins";
 
 .menu {
   @include margin-bottom(1);
 
   &__list {
     list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
 
     &-item {
-      padding: 0;
       margin: 10px 0;
+      padding: 0;
 
       &-link {
-        font-size: $typographic-base-font-size;
-        color: $typographic-base-font-color;
-        font-weight: normal;
         border: 0;
+        color: $typographic-base-font-color;
+        font-size: $typographic-base-font-size;
+        font-weight: normal;
 
         &:hover,
         &:focus {
-          color: $color-primary;
           border-bottom: 1px solid $color-primary;
+          color: $color-primary;
         }
 
         &--active {
-          color: $color-base;
           border-bottom: 1px solid $color-base;
+          color: $color-base;
         }
-
       }
-
     }
-
   }
-
-}
+}

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

@@ -1,24 +0,0 @@
-// @flow strict
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Menu from './Menu';
-
-describe('Menu', () => {
-  const props = {
-    menu: [
-      {
-        label: 'Item 0',
-        path: '/#0/'
-      },
-      {
-        label: 'Item 1',
-        path: '/#1/'
-      }
-    ]
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Menu {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Menu/Menu.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { Menu } from "@/components/Sidebar/Menu";
+import * as mocks from "@/mocks";
+
+describe("Menu", () => {
+  const props = {
+    menu: mocks.menu,
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Menu {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Menu/Menu.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Link } from "gatsby";
+
+import styles from "./Menu.module.scss";
+
+type Props = {
+  menu: {
+    label: string;
+    path: string;
+  }[];
+};
+
+const Menu: React.FC<Props> = ({ menu }: Props) => (
+  <nav className={styles.menu}>
+    <ul className={styles.menu__list}>
+      {menu.map(item => (
+        <li className={styles["menu__list-item"]} key={item.path}>
+          <Link
+            to={item.path}
+            className={styles["menu__list-item-link"]}
+            activeClassName={styles["menu__list-item-link--active"]}
+          >
+            {item.label}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </nav>
+);
+
+export default Menu;

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

@@ -12,9 +12,9 @@ exports[`Menu renders correctly 1`] = `
     >
       <a
         className="menu__list-item-link"
-        href="/#0/"
+        href="/"
       >
-        Item 0
+        Articles
       </a>
     </li>
     <li
@@ -22,9 +22,19 @@ exports[`Menu renders correctly 1`] = `
     >
       <a
         className="menu__list-item-link"
-        href="/#1/"
+        href="/pages/about"
       >
-        Item 1
+        About Me
+      </a>
+    </li>
+    <li
+      className="menu__list-item"
+    >
+      <a
+        className="menu__list-item-link"
+        href="/pages/contacts"
+      >
+        Contact Me
       </a>
     </li>
   </ul>

src/components/Sidebar/Menu/index.js

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

src/components/Sidebar/Menu/index.ts

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

src/components/Sidebar/Sidebar.js

@@ -1,29 +0,0 @@
-// @flow strict
-import React from 'react';
-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,
-};
-
-const Sidebar = ({ isIndex }: Props) => {
-  const { author, copyright, menu } = useSiteMetadata();
-
-  return (
-    <div className={styles['sidebar']}>
-      <div className={styles['sidebar__inner']}>
-        <Author author={author} isIndex={isIndex} />
-        <Menu menu={menu} />
-        <Contacts contacts={author.contacts} />
-        <Copyright copyright={copyright} />
-      </div>
-    </div>
-  );
-};
-
-export default Sidebar;

src/components/Sidebar/Sidebar.module.scss

@@ -1,39 +1,44 @@
-@import '../../assets/scss/variables';
-@import '../../assets/scss/mixins';
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
 
 .sidebar {
-    width: 100%;
-    &__inner {
-        position: relative;
-        padding: 25px 20px 0;
-    }
+  width: 100%;
+  &__inner {
+    padding: 25px 20px 0;
+    position: relative;
+  }
 }
 
 @include breakpoint-sm {
-    .sidebar {
-        lost-column: 5/12;
-        &__inner {
-            padding: 30px 20px 0;
-            &:after {
-                background: $color-gray-border;
-                background: linear-gradient(to bottom, $color-gray-border 0%, $color-gray-border 48%, $color-white 100%);
-                position: absolute;
-                content: '';
-                width: 1px;
-                height: 540px;
-                top: 30px;
-                right: -10px;
-                bottom: 0;
-            }
-        }
+  .sidebar {
+    lost-column: 5/12;
+    &__inner {
+      padding: 30px 20px 0;
+      &:after {
+        background: $color-gray-border;
+        background: linear-gradient(
+          to bottom,
+          $color-gray-border 0%,
+          $color-gray-border 48%,
+          $color-white 100%
+        );
+        bottom: 0;
+        content: "";
+        height: 540px;
+        position: absolute;
+        right: -10px;
+        top: 30px;
+        width: 1px;
+      }
     }
+  }
 }
 
 @include breakpoint-md {
-    .sidebar {
-        lost-column: 1/3;
-        &__inner {
-            padding: 40px;
-        }
+  .sidebar {
+    lost-column: 1/3;
+    &__inner {
+      padding: 40px;
     }
+  }
 }

src/components/Sidebar/Sidebar.test.js

@@ -1,27 +0,0 @@
-// @flow strict
-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 }: RenderCallback) => (
-        render(siteMetadata)
-      ),
-      useStaticQuery.mockReturnValue(siteMetadata)
-    );
-  });
-
-  const props = {
-    isIndex: true
-  };
-
-  it('renders correctly', () => {
-    const tree = renderer.create(<Sidebar {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import { StaticQuery, useStaticQuery } from "gatsby";
+
+import { Sidebar } from "@/components/Sidebar";
+import * as mocks from "@/mocks";
+
+const mockedStaticQuery = StaticQuery as jest.Mock;
+const mockedUseStaticQuery = useStaticQuery as jest.Mock;
+
+describe("Sidebar", () => {
+  beforeEach(() => {
+    mockedStaticQuery.mockImplementationOnce(({ render }) =>
+      render(mocks.siteMetadata),
+    );
+    mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
+  });
+
+  const props = {
+    isIndex: true,
+  };
+
+  it("renders correctly", () => {
+    const tree = renderer.create(<Sidebar {...props} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { useSiteMetadata } from "@/hooks";
+
+import { Author } from "./Author";
+import { Contacts } from "./Contacts";
+import { Copyright } from "./Copyright";
+import { Menu } from "./Menu";
+
+import styles from "./Sidebar.module.scss";
+
+type Props = {
+  isIndex?: boolean;
+};
+
+const Sidebar = ({ isIndex }: Props) => {
+  const { author, copyright, menu } = useSiteMetadata();
+
+  return (
+    <div className={styles.sidebar}>
+      <div className={styles.sidebar__inner}>
+        <Author author={author} isIndex={isIndex} />
+        <Menu menu={menu} />
+        <Contacts contacts={author.contacts} />
+        <Copyright copyright={copyright} />
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

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

@@ -14,10 +14,10 @@ exports[`Sidebar renders correctly 1`] = `
         href="/"
       >
         <img
-          alt="Test name"
+          alt="John Doe"
           className="author__photo"
           height="75"
-          src="/test.jpg"
+          src="/static/photo.jpg"
           width="75"
         />
       </a>
@@ -28,13 +28,13 @@ exports[`Sidebar renders correctly 1`] = `
           className="author__title-link"
           href="/"
         >
-          Test name
+          John Doe
         </a>
       </h1>
       <p
         className="author__subtitle"
       >
-        Test bio
+        Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.
       </p>
     </div>
     <nav
@@ -48,9 +48,9 @@ exports[`Sidebar renders correctly 1`] = `
         >
           <a
             className="menu__list-item-link"
-            href="/test/1/"
+            href="/"
           >
-            Test label 1
+            Articles
           </a>
         </li>
         <li
@@ -58,9 +58,9 @@ exports[`Sidebar renders correctly 1`] = `
         >
           <a
             className="menu__list-item-link"
-            href="/test/2/"
+            href="/pages/about"
           >
-            Test label 2
+            About Me
           </a>
         </li>
         <li
@@ -68,9 +68,9 @@ exports[`Sidebar renders correctly 1`] = `
         >
           <a
             className="menu__list-item-link"
-            href="/test/3/"
+            href="/pages/contacts"
           >
-            Test label 3
+            Contact Me
           </a>
         </li>
       </ul>
@@ -81,6 +81,28 @@ exports[`Sidebar renders correctly 1`] = `
       <ul
         className="contacts__list"
       >
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 22 28"
+            >
+              <title>
+                rss
+              </title>
+              <path
+                d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+              />
+            </svg>
+          </a>
+        </li>
         <li
           className="contacts__list-item"
         >
@@ -103,50 +125,6 @@ exports[`Sidebar renders correctly 1`] = `
             </svg>
           </a>
         </li>
-        <li
-          className="contacts__list-item"
-        >
-          <a
-            className="contacts__list-item-link"
-            href="https://t.me/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              className="icon"
-              viewBox="0 0 28 28"
-            >
-              <title>
-                telegram
-              </title>
-              <path
-                d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li
-          className="contacts__list-item"
-        >
-          <a
-            className="contacts__list-item-link"
-            href="https://www.twitter.com/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              className="icon"
-              viewBox="0 0 26 28"
-            >
-              <title>
-                twitter
-              </title>
-              <path
-                d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-              />
-            </svg>
-          </a>
-        </li>
         <li
           className="contacts__list-item"
         >
@@ -174,19 +152,41 @@ exports[`Sidebar renders correctly 1`] = `
         >
           <a
             className="contacts__list-item-link"
-            href="#"
+            href="https://www.twitter.com/#"
             rel="noopener noreferrer"
             target="_blank"
           >
             <svg
               className="icon"
-              viewBox="0 0 22 28"
+              viewBox="0 0 26 28"
             >
               <title>
-                rss
+                twitter
               </title>
               <path
-                d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+              />
+            </svg>
+          </a>
+        </li>
+        <li
+          className="contacts__list-item"
+        >
+          <a
+            className="contacts__list-item-link"
+            href="https://t.me/#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <svg
+              className="icon"
+              viewBox="0 0 28 28"
+            >
+              <title>
+                telegram
+              </title>
+              <path
+                d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
               />
             </svg>
           </a>
@@ -218,7 +218,7 @@ exports[`Sidebar renders correctly 1`] = `
     <div
       className="copyright"
     >
-      Test copyright
+      All rights reserved.
     </div>
   </div>
 </div>

src/components/Sidebar/index.js

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

src/components/Sidebar/index.ts

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