From 3c010efb5983677fd9fd63dc55a317520cf7ad74 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Tue, 13 Sep 2022 17:53:30 +0200 Subject: [PATCH] added compact mode switcher --- .eslintrc | 4 +- README.md | 4 - package-lock.json | 120 +++++++++++++++++- package.json | 7 +- .../DarkmodeSwitch/ThemeSwitcher.tsx | 29 ----- .../__snapshots__/Content.test.tsx.snap | 88 +++++++++++++ .../Post/__snapshots__/Post.test.tsx.snap | 88 +++++++++++++ src/components/PostHeader/PostHeader.tsx | 2 + src/components/Sidebar/Menu/Menu.module.scss | 2 - src/components/Sidebar/Sidebar.tsx | 7 +- .../__snapshots__/Sidebar.test.tsx.snap | 92 +++++++++++++- .../ThemeSwitcher/ThemeSwitcher.tsx | 39 ++++++ src/components/ThemeSwitcher/Themes.ts | 4 + .../ThemeSwitcher/components/Moon.tsx | 18 +++ .../ThemeSwitcher/components/Sun.tsx | 19 +++ src/components/ThemeSwitcher/theme.scss | 116 +++++++++++++++++ .../CategoriesTemplate.test.tsx.snap | 92 +++++++++++++- .../CategoryTemplate.test.tsx.snap | 92 +++++++++++++- .../__snapshots__/IndexTemplate.test.tsx.snap | 92 +++++++++++++- .../NotFoundTemplate.test.tsx.snap | 92 +++++++++++++- .../__snapshots__/PageTemplate.test.tsx.snap | 92 +++++++++++++- .../__snapshots__/PostTemplate.test.tsx.snap | 88 +++++++++++++ .../__snapshots__/TagTemplate.test.tsx.snap | 92 +++++++++++++- .../__snapshots__/TagsTemplate.test.tsx.snap | 92 +++++++++++++- 24 files changed, 1297 insertions(+), 74 deletions(-) delete mode 100644 src/components/DarkmodeSwitch/ThemeSwitcher.tsx create mode 100644 src/components/ThemeSwitcher/ThemeSwitcher.tsx create mode 100644 src/components/ThemeSwitcher/Themes.ts create mode 100644 src/components/ThemeSwitcher/components/Moon.tsx create mode 100644 src/components/ThemeSwitcher/components/Sun.tsx create mode 100644 src/components/ThemeSwitcher/theme.scss diff --git a/.eslintrc b/.eslintrc index 43525d6..f8eaa18 100644 --- a/.eslintrc +++ b/.eslintrc @@ -38,7 +38,9 @@ "selector": "parameter" }], "react/static-property-placement": ["off"], - "react/prop-types": ["off"] + "react/prop-types": ["off"], + "no-shadow": "off", + "@typescript-eslint/no-shadow": ["error"] }, "settings": { "import/resolver": { diff --git a/README.md b/README.md index ba60f4f..26d82d0 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,6 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https: ## Todo -- Add a better dark mode toggle - - - show in posts view - - print view - hide mode toggler diff --git a/package-lock.json b/package-lock.json index ee26d06..b3ab9a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "0.5.0", "license": "MIT", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "classnames": "^2.3.1", "disqus-react": "^1.1.3", "gatsby": "^4.20.0", @@ -38,7 +41,8 @@ "react": "^18.2.0", "react-cookie-consent": "^8.0.1", "react-dom": "^18.2.0", - "react-helmet": "^6.1.0" + "react-helmet": "^6.1.0", + "react-toggle": "^4.1.3" }, "devDependencies": { "@jest/globals": "^27.5.1", @@ -55,6 +59,7 @@ "@types/react-dom": "^18.0.6", "@types/react-helmet": "^6.1.5", "@types/react-test-renderer": "^18.0.0", + "@types/react-toggle": "^4.0.3", "@types/sass": "^1.43.1", "@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/parser": "^5.36.1", @@ -2226,6 +2231,51 @@ "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", + "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz", + "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz", + "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz", @@ -6340,6 +6390,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-toggle": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz", + "integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -28561,6 +28620,19 @@ "react": "^18.2.0" } }, + "node_modules/react-toggle": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz", + "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==", + "dependencies": { + "classnames": "^2.2.5" + }, + "peerDependencies": { + "prop-types": ">= 15.3.0 < 19", + "react": ">= 15.3.0 < 19", + "react-dom": ">= 15.3.0 < 19" + } + }, "node_modules/read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", @@ -35548,6 +35620,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", + "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz", + "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.0" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz", + "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.0" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@gatsbyjs/parcel-namer-relative-to-cwd": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz", @@ -38674,6 +38775,15 @@ "@types/react": "*" } }, + "@types/react-toggle": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz", + "integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -55015,6 +55125,14 @@ "scheduler": "^0.23.0" } }, + "react-toggle": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz", + "integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==", + "requires": { + "classnames": "^2.2.5" + } + }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", diff --git a/package.json b/package.json index a7fe6fa..d8ee073 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,9 @@ ] }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "classnames": "^2.3.1", "disqus-react": "^1.1.3", "gatsby": "^4.20.0", @@ -73,7 +76,8 @@ "react": "^18.2.0", "react-cookie-consent": "^8.0.1", "react-dom": "^18.2.0", - "react-helmet": "^6.1.0" + "react-helmet": "^6.1.0", + "react-toggle": "^4.1.3" }, "devDependencies": { "@jest/globals": "^27.5.1", @@ -90,6 +94,7 @@ "@types/react-dom": "^18.0.6", "@types/react-helmet": "^6.1.5", "@types/react-test-renderer": "^18.0.0", + "@types/react-toggle": "^4.0.3", "@types/sass": "^1.43.1", "@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/parser": "^5.36.1", diff --git a/src/components/DarkmodeSwitch/ThemeSwitcher.tsx b/src/components/DarkmodeSwitch/ThemeSwitcher.tsx deleted file mode 100644 index dd0450e..0000000 --- a/src/components/DarkmodeSwitch/ThemeSwitcher.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useState, useEffect } from "react"; - -enum themes { - dark = "dark", - light = "light", -} - -function ThemeSwitcher() { - const initTheme = document.documentElement.dataset.theme; - const [theme, setTheme] = useState(initTheme); - - useEffect(() => { - localStorage.setItem("theme", theme ?? themes.light); - document.documentElement.dataset.theme = theme; - }, [theme]); - - const getOppositeTheme = () => { - return theme === themes.light ? themes.dark : themes.light; - }; - - function toggleTheme() { - const newTheme = theme === themes.dark ? themes.light : themes.dark; - setTheme(newTheme); - } - - return {`Switch to ${getOppositeTheme()} mode`}; -} - -export default ThemeSwitcher; diff --git a/src/components/Post/Content/__snapshots__/Content.test.tsx.snap b/src/components/Post/Content/__snapshots__/Content.test.tsx.snap index 7823189..b9308db 100644 --- a/src/components/Post/Content/__snapshots__/Content.test.tsx.snap +++ b/src/components/Post/Content/__snapshots__/Content.test.tsx.snap @@ -27,6 +27,94 @@ Array [ > ↩ All articles +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
,
diff --git a/src/components/Post/__snapshots__/Post.test.tsx.snap b/src/components/Post/__snapshots__/Post.test.tsx.snap index 5daa9c8..7915e04 100644 --- a/src/components/Post/__snapshots__/Post.test.tsx.snap +++ b/src/components/Post/__snapshots__/Post.test.tsx.snap @@ -28,6 +28,94 @@ exports[`Post renders correctly 1`] = ` > ↩ All articles +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/components/PostHeader/PostHeader.tsx b/src/components/PostHeader/PostHeader.tsx index 42d1e0a..f527402 100644 --- a/src/components/PostHeader/PostHeader.tsx +++ b/src/components/PostHeader/PostHeader.tsx @@ -1,6 +1,7 @@ import { Image } from "@/components/Image"; import { Link } from "gatsby"; import React, { FunctionComponent } from "react"; +import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"; import * as styles from "./PostHeader.module.scss"; type Props = { author: { name: string; photo: string } }; @@ -21,6 +22,7 @@ export const PostHeader: FunctionComponent = ({ author }) => { ↩ All articles +
); diff --git a/src/components/Sidebar/Menu/Menu.module.scss b/src/components/Sidebar/Menu/Menu.module.scss index 8242866..c00f42a 100644 --- a/src/components/Sidebar/Menu/Menu.module.scss +++ b/src/components/Sidebar/Menu/Menu.module.scss @@ -2,8 +2,6 @@ @import "../../../assets/scss/mixins"; .menu { - @include margin-bottom(1); - .list { list-style: none; @include margin-equal(0); diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 5b18fed..027d35c 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,13 +1,12 @@ +import { useSiteMetadata } from "@/hooks"; import React from "react"; +import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"; 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"; -import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher"; type Props = { isIndex?: boolean; @@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => { - +
); diff --git a/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap index c008ddb..484f3fb 100644 --- a/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap +++ b/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap @@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
`; diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ThemeSwitcher/ThemeSwitcher.tsx new file mode 100644 index 0000000..3445e8d --- /dev/null +++ b/src/components/ThemeSwitcher/ThemeSwitcher.tsx @@ -0,0 +1,39 @@ +/* eslint-disable no-undef */ +import React, { FunctionComponent, useEffect, useState } from "react"; +import Toggle from "react-toggle"; +import { Moon } from "./components/Moon"; +import { Sun } from "./components/Sun"; +import "./theme.scss"; +import { Themes } from "./Themes"; + +type Props = { showLabel: boolean }; + +export const ThemeSwitcher: FunctionComponent = ({ showLabel }) => { + const initTheme = document.documentElement.dataset.theme; + const [theme, setTheme] = useState(initTheme); + + useEffect(() => { + localStorage.setItem("theme", theme ?? Themes.light); + document.documentElement.dataset.theme = theme; + }, [theme]); + + function toggleTheme() { + const newTheme = theme === Themes.dark ? Themes.light : Themes.dark; + setTheme(newTheme); + } + + return ( + <> + {showLabel && "Switch color mode:"} + {showLabel &&
} + , + unchecked: , + }} + onChange={toggleTheme} + /> + + ); +}; diff --git a/src/components/ThemeSwitcher/Themes.ts b/src/components/ThemeSwitcher/Themes.ts new file mode 100644 index 0000000..9719ef3 --- /dev/null +++ b/src/components/ThemeSwitcher/Themes.ts @@ -0,0 +1,4 @@ +export enum Themes { + dark = "dark", + light = "light", +} diff --git a/src/components/ThemeSwitcher/components/Moon.tsx b/src/components/ThemeSwitcher/components/Moon.tsx new file mode 100644 index 0000000..c5c966b --- /dev/null +++ b/src/components/ThemeSwitcher/components/Moon.tsx @@ -0,0 +1,18 @@ +import { faMoon } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React from "react"; + +export const Moon = () => { + return ( +
+ +
+ ); +}; diff --git a/src/components/ThemeSwitcher/components/Sun.tsx b/src/components/ThemeSwitcher/components/Sun.tsx new file mode 100644 index 0000000..4ea1658 --- /dev/null +++ b/src/components/ThemeSwitcher/components/Sun.tsx @@ -0,0 +1,19 @@ +import { faSun } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React from "react"; + +export const Sun = () => { + return ( +
+ +
+ ); +}; diff --git a/src/components/ThemeSwitcher/theme.scss b/src/components/ThemeSwitcher/theme.scss new file mode 100644 index 0000000..bad7e9d --- /dev/null +++ b/src/components/ThemeSwitcher/theme.scss @@ -0,0 +1,116 @@ +.react-toggle { + background-color: transparent; + border: 0; + cursor: pointer; + + display: inline-block; + padding: 0; + position: relative; + + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + touch-action: pan-x; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.react-toggle-screenreader-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + -webkit-transition: opacity 0.25s; + transition: opacity 0.25s; +} + +.react-toggle-track { + background-color: #4D4D4D; + border-radius: 30px; + height: 24px; + padding: 0; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + transition: all 0.2s ease; + width: 50px; +} + +.react-toggle-track-check { + bottom: 0px; + height: 10px; + left: 8px; + line-height: 0; + margin-bottom: auto; + margin-top: auto; + opacity: 0; + position: absolute; + top: 0px; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; + width: 14px; +} + +.react-toggle--checked .react-toggle-track-check { + opacity: 1; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; +} + +.react-toggle-track-x { + bottom: 0px; + height: 10px; + line-height: 0; + margin-bottom: auto; + margin-top: auto; + opacity: 1; + position: absolute; + right: 10px; + top: 0px; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; + transition: opacity 0.25s ease; + width: 10px; +} + +.react-toggle--checked .react-toggle-track-x { + opacity: 0; +} + +.react-toggle-thumb { + background-color: #FAFAFA; + border: 1px solid #4D4D4D; + border-radius: 50%; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + height: 22px; + left: 1px; + position: absolute; + top: 1px; + + -webkit-transition: all 0.25s ease; + -moz-transition: all 0.25s ease; + transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; + transition: all 0.25s ease; + width: 22px; +} + +.react-toggle--checked .react-toggle-thumb { + left: 27px; +} diff --git a/src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap b/src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap index ef8f43f..87df816 100644 --- a/src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap +++ b/src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`CategoriesTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap b/src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap index 0b1ca29..164c020 100644 --- a/src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap +++ b/src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`CategoryTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap b/src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap index d571fd2..e6b798e 100644 --- a/src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap +++ b/src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`IndexTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap b/src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap index 7e4138f..a2059f5 100644 --- a/src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap +++ b/src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`NotFoundTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap b/src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap index 8805cb0..1c1905f 100644 --- a/src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap +++ b/src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`PageTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap b/src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap index d7191af..d9797c7 100644 --- a/src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap +++ b/src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap @@ -29,6 +29,94 @@ exports[`PostTemplate renders correctly 1`] = ` > ↩ All articles +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap b/src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap index 61c73c5..c9de7a7 100644 --- a/src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap +++ b/src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`TagTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
diff --git a/src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap b/src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap index 61d40ec..af34ee5 100644 --- a/src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap +++ b/src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap @@ -142,12 +142,96 @@ exports[`TagsTemplate renders correctly 1`] = ` - +
- Switch to light mode - +
+
+
+ +
+
+
+
+ +
+
+
+
+ +