feat: add foundational work

refs #21
mezeitamas · Jun 1, 2023 · 5c96d57 · 5c96d57
1 parent 4eedad2
commit 5c96d57
Show file tree

Hide file tree

Showing 34 changed files with 286 additions and 96 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -6,7 +6,7 @@ module.exports = {
 
     // Coverage
     collectCoverage: true,
-    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.test.{ts,tsx}', '!src/gatsby-types.d.ts'],
+    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/**/*.types.{ts,tsx}', '!src/**/*.test.{ts,tsx}', '!src/gatsby-types.d.ts'],
     coverageDirectory: 'reports/coverage',
     coveragePathIgnorePatterns: ['/node_modules/'],
     coverageProvider: 'babel',

diff --git a/src/components/dark-mode-switch/dark-mode-switch.tsx b/src/components/dark-mode-switch/dark-mode-switch.tsx
@@ -0,0 +1,31 @@
+import React, { useCallback, useState } from 'react';
+import type { FunctionComponent, ReactElement } from 'react';
+
+import { FiSun, FiMoon } from 'react-icons/fi';
+
+const DarkModeSwitch: FunctionComponent = (): ReactElement => {
+    const [darkMode, setDarkMode] = useState<boolean>(false);
+
+    const toggleDarkMode = useCallback(() => {
+        setDarkMode(!darkMode);
+        document.documentElement.classList.toggle('dark');
+    }, [darkMode]);
+
+    return (
+        <>
+            {darkMode === true ? (
+                <FiMoon
+                    size="28"
+                    onClick={toggleDarkMode}
+                />
+            ) : (
+                <FiSun
+                    size="28"
+                    onClick={toggleDarkMode}
+                />
+            )}
+        </>
+    );
+};
+
+export { DarkModeSwitch };
diff --git a/src/components/document-head/document-head.tsx b/src/components/document-head/document-head.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import type { FunctionComponent, PropsWithChildren } from 'react';
+
+const DocumentHead: FunctionComponent<PropsWithChildren> = ({ children }) => {
+    return (
+        <>
+            <html lang="en" />
+
+            <meta
+                httpEquiv="cache-control"
+                content="public, max-age=0, must-revalidate"
+            />
+
+            <meta
+                name="color-scheme"
+                content="light dark"
+            />
+
+            {children}
+        </>
+    );
+};
+
+export { DocumentHead };
diff --git a/...napshots__/seo-blog-posting.test.tsx.snap → ...napshots__/seo-blog-posting.test.tsx.snap b/...napshots__/seo-blog-posting.test.tsx.snap → ...napshots__/seo-blog-posting.test.tsx.snap
@@ -2,16 +2,9 @@
 
 exports[`<SeoBlogPosting /> should render 1`] = `
 [
-  <html
-    lang="en"
-  />,
   <title>
     Hosting a static website on Amazon S3
   </title>,
-  <meta
-    content="public, max-age=0, must-revalidate"
-    httpEquiv="cache-control"
-  />,
   <meta
     content="Hosting a simple static website on Amazon Web Services (AWS) can be daunting at first, but luckily it’s quite straightforward. One option..."
     name="description"

diff --git a/.../__snapshots__/seo-web-page.test.tsx.snap → .../__snapshots__/seo-web-page.test.tsx.snap b/.../__snapshots__/seo-web-page.test.tsx.snap → .../__snapshots__/seo-web-page.test.tsx.snap
@@ -2,16 +2,9 @@
 
 exports[`<SeoWebPage /> should render 1`] = `
 [
-  <html
-    lang="en"
-  />,
   <title>
     Broken Robot
   </title>,
-  <meta
-    content="public, max-age=0, must-revalidate"
-    httpEquiv="cache-control"
-  />,
   <meta
     content="Personal website and blog of Tamas Mezei. Welcome to my little corner of the web, where I share my professional experiences, thoughts, adventures, and projects with the world."
     name="description"

diff --git a/...snapshots__/meta-og-article.test.tsx.snap → ...snapshots__/meta-og-article.test.tsx.snap b/...snapshots__/meta-og-article.test.tsx.snap → ...snapshots__/meta-og-article.test.tsx.snap
diff --git a/.../meta-og-article/meta-og-article.test.tsx → .../meta-og-article/meta-og-article.test.tsx b/.../meta-og-article/meta-og-article.test.tsx → .../meta-og-article/meta-og-article.test.tsx
diff --git a/...s/seo/meta-og-article/meta-og-article.tsx → ...d/seo/meta-og-article/meta-og-article.tsx b/...s/seo/meta-og-article/meta-og-article.tsx → ...d/seo/meta-og-article/meta-og-article.tsx
diff --git a/...snapshots__/meta-og-website.test.tsx.snap → ...snapshots__/meta-og-website.test.tsx.snap b/...snapshots__/meta-og-website.test.tsx.snap → ...snapshots__/meta-og-website.test.tsx.snap
diff --git a/.../meta-og-website/meta-og-website.test.tsx → .../meta-og-website/meta-og-website.test.tsx b/.../meta-og-website/meta-og-website.test.tsx → .../meta-og-website/meta-og-website.test.tsx
diff --git a/...s/seo/meta-og-website/meta-og-website.tsx → ...d/seo/meta-og-website/meta-og-website.tsx b/...s/seo/meta-og-website/meta-og-website.tsx → ...d/seo/meta-og-website/meta-og-website.tsx
diff --git a/.../__snapshots__/meta-twitter.test.tsx.snap → .../__snapshots__/meta-twitter.test.tsx.snap b/.../__snapshots__/meta-twitter.test.tsx.snap → .../__snapshots__/meta-twitter.test.tsx.snap
diff --git a/...ts/seo/meta-twitter/meta-twitter.test.tsx → ...ad/seo/meta-twitter/meta-twitter.test.tsx b/...ts/seo/meta-twitter/meta-twitter.test.tsx → ...ad/seo/meta-twitter/meta-twitter.test.tsx
diff --git a/...ponents/seo/meta-twitter/meta-twitter.tsx → ...nt-head/seo/meta-twitter/meta-twitter.tsx b/...ponents/seo/meta-twitter/meta-twitter.tsx → ...nt-head/seo/meta-twitter/meta-twitter.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FunctionComponent } from 'react';
 
-import type { Author } from '../../site-metadata/site-metadata.types';
+import type { Author } from '../../../site-metadata/site-metadata.types';
 
 type MetaTwitterProps = {
     title: string;

diff --git a/..._/rich-results-blog-posting.test.tsx.snap → ..._/rich-results-blog-posting.test.tsx.snap b/..._/rich-results-blog-posting.test.tsx.snap → ..._/rich-results-blog-posting.test.tsx.snap
diff --git a/...osting/rich-results-blog-posting.test.tsx → ...osting/rich-results-blog-posting.test.tsx b/...osting/rich-results-blog-posting.test.tsx → ...osting/rich-results-blog-posting.test.tsx
diff --git a/...log-posting/rich-results-blog-posting.tsx → ...log-posting/rich-results-blog-posting.tsx b/...log-posting/rich-results-blog-posting.tsx → ...log-posting/rich-results-blog-posting.tsx
@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react';
 
 import type { Person, Organization, WebSite, BlogPosting, WithContext } from 'schema-dts';
 
-import type { Author } from '../../site-metadata/site-metadata.types';
+import type { Author } from '../../../site-metadata/site-metadata.types';
 
 type RichResultsBlogPostingProps = {
     siteName: string;

diff --git a/...ots__/rich-results-web-page.test.tsx.snap → ...ots__/rich-results-web-page.test.tsx.snap b/...ots__/rich-results-web-page.test.tsx.snap → ...ots__/rich-results-web-page.test.tsx.snap
diff --git a/...s-web-page/rich-results-web-page.test.tsx → ...s-web-page/rich-results-web-page.test.tsx b/...s-web-page/rich-results-web-page.test.tsx → ...s-web-page/rich-results-web-page.test.tsx
diff --git a/...esults-web-page/rich-results-web-page.tsx → ...esults-web-page/rich-results-web-page.tsx b/...esults-web-page/rich-results-web-page.tsx → ...esults-web-page/rich-results-web-page.tsx
@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react';
 
 import type { Person, Organization, WithContext, WebPage } from 'schema-dts';
 
-import type { Author } from '../../site-metadata/site-metadata.types';
+import type { Author } from '../../../site-metadata/site-metadata.types';
 
 type RichResultsWebPageProps = {
     siteName: string;

diff --git a/src/components/seo/seo-blog-posting.test.tsx → ...cument-head/seo/seo-blog-posting.test.tsx b/src/components/seo/seo-blog-posting.test.tsx → ...cument-head/seo/seo-blog-posting.test.tsx
@@ -5,7 +5,7 @@ import { create } from 'react-test-renderer';
 import { SeoBlogPosting } from './seo-blog-posting';
 import type { SeoBlogPostingProps } from './seo-blog-posting';
 
-jest.mock('../site-metadata/use-site-metadata', () => {
+jest.mock('../../site-metadata/use-site-metadata', () => {
     return {
         useSiteMetadata: jest.fn().mockImplementation(() => {
             return {

diff --git a/src/components/seo/seo-blog-posting.tsx → ...ts/document-head/seo/seo-blog-posting.tsx b/src/components/seo/seo-blog-posting.tsx → ...ts/document-head/seo/seo-blog-posting.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { FunctionComponent } from 'react';
 
-import { useSiteMetadata } from '../site-metadata/use-site-metadata';
+import { useSiteMetadata } from '../../site-metadata/use-site-metadata';
 
 import { MetaOgArticle } from './meta-og-article/meta-og-article';
 import { MetaTwitter } from './meta-twitter/meta-twitter';
@@ -15,28 +15,14 @@ type SeoBlogPostingProps = {
     tags: string[];
 };
 
-const SeoBlogPosting: FunctionComponent<PropsWithChildren<SeoBlogPostingProps>> = ({
-    title,
-    description,
-    pathname,
-    published,
-    tags,
-    children
-}) => {
+const SeoBlogPosting: FunctionComponent<SeoBlogPostingProps> = ({ title, description, pathname, published, tags }) => {
     const { title: siteName, siteUrl, author } = useSiteMetadata();
     const url = `${siteUrl}${pathname}`;
 
     return (
         <>
-            <html lang="en" />
-
             <title>{title}</title>
 
-            <meta
-                httpEquiv="cache-control"
-                content="public, max-age=0, must-revalidate"
-            />
-
             <meta
                 name="description"
                 content={description}
@@ -73,8 +59,6 @@ const SeoBlogPosting: FunctionComponent<PropsWithChildren<SeoBlogPostingProps>>
                 url={url}
                 author={author}
             />
-
-            {children}
         </>
     );
 };

diff --git a/src/components/seo/seo-web-page.test.tsx → ...s/document-head/seo/seo-web-page.test.tsx b/src/components/seo/seo-web-page.test.tsx → ...s/document-head/seo/seo-web-page.test.tsx
@@ -5,7 +5,7 @@ import { create } from 'react-test-renderer';
 import { SeoWebPage } from './seo-web-page';
 import type { SeoWebPageProps } from './seo-web-page';
 
-jest.mock('../site-metadata/use-site-metadata', () => {
+jest.mock('../../site-metadata/use-site-metadata', () => {
     return {
         useSiteMetadata: jest.fn().mockImplementation(() => {
             return {

diff --git a/src/components/seo/seo-web-page.tsx → ...onents/document-head/seo/seo-web-page.tsx b/src/components/seo/seo-web-page.tsx → ...onents/document-head/seo/seo-web-page.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import type { FunctionComponent, PropsWithChildren } from 'react';
+import type { FunctionComponent } from 'react';
 
-import { useSiteMetadata } from '../site-metadata/use-site-metadata';
+import { useSiteMetadata } from '../../site-metadata/use-site-metadata';
 
 import { MetaOgWebsite } from './meta-og-website/meta-og-website';
 import { MetaTwitter } from './meta-twitter/meta-twitter';
@@ -13,26 +13,14 @@ type SeoWebPageProps = {
     pathname: string;
 };
 
-const SeoWebPage: FunctionComponent<PropsWithChildren<SeoWebPageProps>> = ({
-    title,
-    description,
-    pathname,
-    children
-}) => {
+const SeoWebPage: FunctionComponent<SeoWebPageProps> = ({ title, description, pathname }) => {
     const { title: siteName, siteUrl, author } = useSiteMetadata();
     const url = `${siteUrl}${pathname}`;
 
     return (
         <>
-            <html lang="en" />
-
             <title>{title}</title>
 
-            <meta
-                httpEquiv="cache-control"
-                content="public, max-age=0, must-revalidate"
-            />
-
             <meta
                 name="description"
                 content={description}
@@ -57,8 +45,6 @@ const SeoWebPage: FunctionComponent<PropsWithChildren<SeoWebPageProps>> = ({
                 url={url}
                 author={author}
             />
-
-            {children}
         </>
     );
 };

diff --git a/src/components/layout/__snapshots__/layout.test.tsx.snap b/src/components/layout/__snapshots__/layout.test.tsx.snap
@@ -53,6 +53,77 @@ exports[`<Layout /> should render 1`] = `
             About me
           </a>
         </span>
+        <svg
+          fill="none"
+          height="28"
+          onClick={[Function]}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="28"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="5"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="1"
+            y2="3"
+          />
+          <line
+            x1="12"
+            x2="12"
+            y1="21"
+            y2="23"
+          />
+          <line
+            x1="4.22"
+            x2="5.64"
+            y1="4.22"
+            y2="5.64"
+          />
+          <line
+            x1="18.36"
+            x2="19.78"
+            y1="18.36"
+            y2="19.78"
+          />
+          <line
+            x1="1"
+            x2="3"
+            y1="12"
+            y2="12"
+          />
+          <line
+            x1="21"
+            x2="23"
+            y1="12"
+            y2="12"
+          />
+          <line
+            x1="4.22"
+            x2="5.64"
+            y1="19.78"
+            y2="18.36"
+          />
+          <line
+            x1="18.36"
+            x2="19.78"
+            y1="5.64"
+            y2="4.22"
+          />
+        </svg>
       </div>
     </nav>
     <hr />

diff --git a/src/components/layout/header/__snapshots__/header.test.tsx.snap b/src/components/layout/header/__snapshots__/header.test.tsx.snap
@@ -50,6 +50,77 @@ exports[`<Header /> should render 1`] = `
           About me
         </a>
       </span>
+      <svg
+        fill="none"
+        height="28"
+        onClick={[Function]}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        style={
+          {
+            "color": undefined,
+          }
+        }
+        viewBox="0 0 24 24"
+        width="28"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="5"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="1"
+          y2="3"
+        />
+        <line
+          x1="12"
+          x2="12"
+          y1="21"
+          y2="23"
+        />
+        <line
+          x1="4.22"
+          x2="5.64"
+          y1="4.22"
+          y2="5.64"
+        />
+        <line
+          x1="18.36"
+          x2="19.78"
+          y1="18.36"
+          y2="19.78"
+        />
+        <line
+          x1="1"
+          x2="3"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="21"
+          x2="23"
+          y1="12"
+          y2="12"
+        />
+        <line
+          x1="4.22"
+          x2="5.64"
+          y1="19.78"
+          y2="18.36"
+        />
+        <line
+          x1="18.36"
+          x2="19.78"
+          y1="5.64"
+          y2="4.22"
+        />
+      </svg>
     </div>
   </nav>
   <hr />