added legal pages, resized tablet view, fixed prettier

src/assets/scss/_variables.scss

@@ -27,11 +27,11 @@ $typographic-leading: math.round(16 * math.div($typographic-root-font-size, 100)
 $button-height: 35px;
 $button-border-radius: 20px;
 
-$layout-post-single-width: 1100px;
+$layout-post-single-width: 1200px;
 $layout-post-width: $layout-post-single-width - 305px;
 
 // $layout-width: 1070px;
 $layout-width: 1300px;
 $layout-breakpoint-sm: 685px;
 $layout-breakpoint-md: 960px;
-$layout-breakpoint-lg: 1100px;
+$layout-breakpoint-lg: 1300px;

src/components/Feed/Feed.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { Link } from "gatsby";
 
+import * as styles from "./Feed.module.scss";
 import { Edge } from "@/types";
 
-import * as styles from "./Feed.module.scss";
 
 type Props = {
   edges: Array<Edge>;

src/components/Icon/Icon.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
+import * as styles from "./Icon.module.scss";
 import { ICONS } from "@/constants";
 
-import * as styles from "./Icon.module.scss";
 
 interface Props {
   name: keyof typeof ICONS;

src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Helmet from "react-helmet";
 
-import { useSiteMetadata } from "@/hooks";
 
 import { CookieBar } from "../Cookiebar/CookieBar";
 import * as styles from "./Layout.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 interface Props {
   title: string;

src/components/Page/Page.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
+import * as styles from "./Page.module.scss";
 import type { Nullable } from "@/types";
 
-import * as styles from "./Page.module.scss";
 
 interface Props {
   title?: string;

src/components/Pagination/Pagination.tsx

@@ -3,9 +3,9 @@ import React from "react";
 import classNames from "classnames";
 import { Link } from "gatsby";
 
+import * as styles from "./Pagination.module.scss";
 import { PAGINATION } from "@/constants";
 
-import * as styles from "./Pagination.module.scss";
 
 type Props = {
   prevPagePath: string;

src/components/Post/Author/Author.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
+import * as styles from "./Author.module.scss";
 import { useSiteMetadata } from "@/hooks";
 
-import * as styles from "./Author.module.scss";
 
 const Author = () => {
   const { author } = useSiteMetadata();
@@ -10,7 +10,7 @@ const Author = () => {
   return (
     <div className={styles.author}>
       <p className={styles.bio}>
-        Written by: <a href ="/pages/about">
+        Written by: <a href="/pages/about">
           <strong>{author.name}</strong>
         </a>
       </p>

src/components/Post/Post.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import { Link } from "gatsby";
 
-import type { Node } from "@/types";
 
 import { Author } from "./Author";
 import { Comments } from "./Comments";
@@ -11,6 +10,7 @@ import { Meta } from "./Meta";
 import { Tags } from "./Tags";
 
 import * as styles from "./Post.module.scss";
+import type { Node } from "@/types";
 
 interface Props {
   post: Node;

src/components/Sidebar/Author/Author.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { Link } from "gatsby";
 
+import * as styles from "./Author.module.scss";
 import { Image } from "@/components/Image";
 
-import * as styles from "./Author.module.scss";
 
 type Props = {
   author: {

src/components/Sidebar/Contacts/Contacts.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
+import * as styles from "./Contacts.module.scss";
 import { Icon } from "@/components/Icon";
 import { ICONS } from "@/constants";
 import { Dictionary } from "@/types";
 import { getContactHref, getIcon } from "@/utils";
 
-import * as styles from "./Contacts.module.scss";
 
 type Props = {
   contacts: Dictionary<string>;

src/components/Sidebar/Menu/Menu.tsx

@@ -14,13 +14,9 @@ type Props = {
 const Menu: React.FC<Props> = ({ menu }: Props) => (
   <nav className={styles.menu}>
     <ul className={styles.list}>
-      {menu.map((item) => (
+      {menu?.map((item) => (
         <li className={styles.item} key={item.path}>
-          <Link
-            to={item.path}
-            className={styles.link}
-            activeClassName={styles.active}
-          >
+          <Link to={item.path} className={styles.link} activeClassName={styles.active}>
             {item.label}
           </Link>
         </li>

src/components/Sidebar/Sidebar.module.scss

@@ -12,7 +12,7 @@
 
 @include breakpoint-sm {
   .sidebar {
-    lost-column: 5/12;
+    lost-column: 3/12;
 
     .inner {
       @include padding(1.25, 0.75, 0);
@@ -40,8 +40,6 @@
 @include breakpoint-md {
   .sidebar {
     lost-column: 1/4;
-    // TODO: column to 1/4?
-    // lost-column: 1/3;?
 
     .inner {
       @include padding-equal(1.5);

src/components/Sidebar/Sidebar.tsx

@@ -1,20 +1,19 @@
 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 * as styles from "./Sidebar.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 type Props = {
   isIndex?: boolean;
 };
 
 const Sidebar = ({ isIndex }: Props) => {
-  const { author, copyright, menu } = useSiteMetadata();
+  const { author, copyright, menu, legalMenu } = useSiteMetadata();
 
   return (
     <div className={styles.sidebar}>
@@ -23,6 +22,7 @@ const Sidebar = ({ isIndex }: Props) => {
         <Menu menu={menu} />
         <Contacts contacts={author.contacts} />
         <Copyright copyright={copyright} />
+        <Menu menu={legalMenu} />
       </div>
     </div>
   );

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

@@ -138,6 +138,9 @@ exports[`Sidebar renders correctly 1`] = `
     <div>
       All rights reserved.
     </div>
+    <nav>
+      <ul />
+    </nav>
   </div>
 </div>
 `;

src/hooks/use-site-metadata.ts

@@ -32,6 +32,10 @@ const useSiteMetadata = () => {
               path
               label
             }
+            legalMenu {
+              path
+              label
+            }
             url
             title
             subtitle
@@ -40,7 +44,7 @@ const useSiteMetadata = () => {
           }
         }
       }
-    `,
+    `
   );
 
   return site.siteMetadata;

src/templates/CategoriesTemplate/CategoriesTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import CategoriesTemplate from "./CategoriesTemplate";
 import * as mocks from "@/mocks";
 
-import CategoriesTemplate from "./CategoriesTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`CategoriesTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/CategoryTemplate/CategoryTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import CategoryTemplate from "./CategoryTemplate";
 import * as mocks from "@/mocks";
 
-import CategoryTemplate from "./CategoryTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`CategoryTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/IndexTemplate/IndexTemplate.test.tsx

@@ -3,9 +3,9 @@ import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
 
+import IndexTemplate from "./IndexTemplate";
 import * as mocks from "@/mocks";
 
-import IndexTemplate from "./IndexTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`IndexTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/NotFoundTemplate/NotFoundTemplate.test.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import NotFoundTemplate from "./NotFoundTemplate";
 
 import * as mocks from "@/mocks";
 
-import NotFoundTemplate from "./NotFoundTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`NotFoundTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/PageTemplate/PageTemplate.test.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import PageTemplate from "./PageTemplate";
 
 import * as mocks from "@/mocks";
 
-import PageTemplate from "./PageTemplate";
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
@@ -18,9 +17,7 @@ describe("PageTemplate", () => {
   };
 
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`PageTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/PostTemplate/PostTemplate.test.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import PostTemplate from "./PostTemplate";
 
 import * as mocks from "@/mocks";
 
-import PostTemplate from "./PostTemplate";
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 

src/templates/TagTemplate/TagTemplate.test.tsx

@@ -1,11 +1,8 @@
+import { StaticQuery, useStaticQuery } from "gatsby";
 import React from "react";
 import renderer from "react-test-renderer";
-
-import { StaticQuery, useStaticQuery } from "gatsby";
-
-import * as mocks from "@/mocks";
-
 import TagTemplate from "./TagTemplate";
+import * as mocks from "@/mocks";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`TagTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>

src/templates/TagsTemplate/TagsTemplate.test.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import { StaticQuery, useStaticQuery } from "gatsby";
+import TagsTemplate from "./TagsTemplate";
 
 import * as mocks from "@/mocks";
 
-import TagsTemplate from "./TagsTemplate";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap

@@ -177,6 +177,9 @@ exports[`TagsTemplate renders correctly 1`] = `
       <div>
         All rights reserved.
       </div>
+      <nav>
+        <ul />
+      </nav>
     </div>
   </div>
   <div>