mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-12-26 06:49:18 +01:00
added compact mode switcher
This commit is contained in:
parent
859c1d81b7
commit
3c010efb59
@ -38,7 +38,9 @@
|
|||||||
"selector": "parameter"
|
"selector": "parameter"
|
||||||
}],
|
}],
|
||||||
"react/static-property-placement": ["off"],
|
"react/static-property-placement": ["off"],
|
||||||
"react/prop-types": ["off"]
|
"react/prop-types": ["off"],
|
||||||
|
"no-shadow": "off",
|
||||||
|
"@typescript-eslint/no-shadow": ["error"]
|
||||||
},
|
},
|
||||||
"settings": {
|
"settings": {
|
||||||
"import/resolver": {
|
"import/resolver": {
|
||||||
|
|||||||
@ -4,10 +4,6 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
|
|||||||
|
|
||||||
## Todo
|
## Todo
|
||||||
|
|
||||||
- Add a better dark mode toggle
|
|
||||||
|
|
||||||
- show in posts view
|
|
||||||
|
|
||||||
- print view
|
- print view
|
||||||
|
|
||||||
- hide mode toggler
|
- hide mode toggler
|
||||||
|
|||||||
120
package-lock.json
generated
120
package-lock.json
generated
@ -9,6 +9,9 @@
|
|||||||
"version": "0.5.0",
|
"version": "0.5.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"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",
|
"classnames": "^2.3.1",
|
||||||
"disqus-react": "^1.1.3",
|
"disqus-react": "^1.1.3",
|
||||||
"gatsby": "^4.20.0",
|
"gatsby": "^4.20.0",
|
||||||
@ -38,7 +41,8 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-cookie-consent": "^8.0.1",
|
"react-cookie-consent": "^8.0.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-helmet": "^6.1.0"
|
"react-helmet": "^6.1.0",
|
||||||
|
"react-toggle": "^4.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jest/globals": "^27.5.1",
|
"@jest/globals": "^27.5.1",
|
||||||
@ -55,6 +59,7 @@
|
|||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
"@types/react-helmet": "^6.1.5",
|
"@types/react-helmet": "^6.1.5",
|
||||||
"@types/react-test-renderer": "^18.0.0",
|
"@types/react-test-renderer": "^18.0.0",
|
||||||
|
"@types/react-toggle": "^4.0.3",
|
||||||
"@types/sass": "^1.43.1",
|
"@types/sass": "^1.43.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
||||||
"@typescript-eslint/parser": "^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",
|
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
|
"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": {
|
"node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": {
|
||||||
"version": "1.7.0",
|
"version": "1.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz",
|
"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": "*"
|
"@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": {
|
"node_modules/@types/responselike": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
||||||
@ -28561,6 +28620,19 @@
|
|||||||
"react": "^18.2.0"
|
"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": {
|
"node_modules/read": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
"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": {
|
"@gatsbyjs/parcel-namer-relative-to-cwd": {
|
||||||
"version": "1.7.0",
|
"version": "1.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz",
|
"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": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@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": {
|
"@types/responselike": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
||||||
@ -55015,6 +55125,14 @@
|
|||||||
"scheduler": "^0.23.0"
|
"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": {
|
"read": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||||
|
|||||||
@ -44,6 +44,9 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"classnames": "^2.3.1",
|
||||||
"disqus-react": "^1.1.3",
|
"disqus-react": "^1.1.3",
|
||||||
"gatsby": "^4.20.0",
|
"gatsby": "^4.20.0",
|
||||||
@ -73,7 +76,8 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-cookie-consent": "^8.0.1",
|
"react-cookie-consent": "^8.0.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-helmet": "^6.1.0"
|
"react-helmet": "^6.1.0",
|
||||||
|
"react-toggle": "^4.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jest/globals": "^27.5.1",
|
"@jest/globals": "^27.5.1",
|
||||||
@ -90,6 +94,7 @@
|
|||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
"@types/react-helmet": "^6.1.5",
|
"@types/react-helmet": "^6.1.5",
|
||||||
"@types/react-test-renderer": "^18.0.0",
|
"@types/react-test-renderer": "^18.0.0",
|
||||||
|
"@types/react-toggle": "^4.0.3",
|
||||||
"@types/sass": "^1.43.1",
|
"@types/sass": "^1.43.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
||||||
"@typescript-eslint/parser": "^5.36.1",
|
"@typescript-eslint/parser": "^5.36.1",
|
||||||
|
|||||||
@ -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 <a href="#" onClick={toggleTheme}>{`Switch to ${getOppositeTheme()} mode`}</a>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ThemeSwitcher;
|
|
||||||
@ -27,6 +27,94 @@ Array [
|
|||||||
>
|
>
|
||||||
↩ All articles
|
↩ All articles
|
||||||
</a>
|
</a>
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>,
|
</div>,
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -28,6 +28,94 @@ exports[`Post renders correctly 1`] = `
|
|||||||
>
|
>
|
||||||
↩ All articles
|
↩ All articles
|
||||||
</a>
|
</a>
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
import { Link } from "gatsby";
|
import { Link } from "gatsby";
|
||||||
import React, { FunctionComponent } from "react";
|
import React, { FunctionComponent } from "react";
|
||||||
|
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||||
import * as styles from "./PostHeader.module.scss";
|
import * as styles from "./PostHeader.module.scss";
|
||||||
|
|
||||||
type Props = { author: { name: string; photo: string } };
|
type Props = { author: { name: string; photo: string } };
|
||||||
@ -21,6 +22,7 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
|
|||||||
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
|
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
|
||||||
↩ All articles
|
↩ All articles
|
||||||
</Link>
|
</Link>
|
||||||
|
<ThemeSwitcher showLabel={false} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2,8 +2,6 @@
|
|||||||
@import "../../../assets/scss/mixins";
|
@import "../../../assets/scss/mixins";
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
@include margin-bottom(1);
|
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@include margin-equal(0);
|
@include margin-equal(0);
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
|
import { useSiteMetadata } from "@/hooks";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||||
|
|
||||||
import { Author } from "./Author";
|
import { Author } from "./Author";
|
||||||
import { Contacts } from "./Contacts";
|
import { Contacts } from "./Contacts";
|
||||||
import { Copyright } from "./Copyright";
|
import { Copyright } from "./Copyright";
|
||||||
import { Menu } from "./Menu";
|
import { Menu } from "./Menu";
|
||||||
|
|
||||||
import * as styles from "./Sidebar.module.scss";
|
import * as styles from "./Sidebar.module.scss";
|
||||||
import { useSiteMetadata } from "@/hooks";
|
|
||||||
import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
isIndex?: boolean;
|
isIndex?: boolean;
|
||||||
@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => {
|
|||||||
<Contacts contacts={author.contacts} />
|
<Contacts contacts={author.contacts} />
|
||||||
<Copyright copyright={copyright} />
|
<Copyright copyright={copyright} />
|
||||||
<Menu menu={legalMenu} />
|
<Menu menu={legalMenu} />
|
||||||
<ThemeSwitcher />
|
<ThemeSwitcher showLabel />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
@ -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<Props> = ({ 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 && <br />}
|
||||||
|
<Toggle
|
||||||
|
checked={theme === Themes.dark}
|
||||||
|
icons={{
|
||||||
|
checked: <Moon />,
|
||||||
|
unchecked: <Sun />,
|
||||||
|
}}
|
||||||
|
onChange={toggleTheme}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
4
src/components/ThemeSwitcher/Themes.ts
Normal file
4
src/components/ThemeSwitcher/Themes.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export enum Themes {
|
||||||
|
dark = "dark",
|
||||||
|
light = "light",
|
||||||
|
}
|
||||||
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "1.1em",
|
||||||
|
position: "absolute",
|
||||||
|
top: "-4px",
|
||||||
|
color: "#f1c40f",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faMoon} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: "#f39c12",
|
||||||
|
position: "absolute",
|
||||||
|
fontSize: "1em",
|
||||||
|
top: "-3px",
|
||||||
|
left: "-3px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faSun} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
116
src/components/ThemeSwitcher/theme.scss
Normal file
116
src/components/ThemeSwitcher/theme.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -142,12 +142,96 @@ exports[`CategoriesTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`IndexTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`PageTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -29,6 +29,94 @@ exports[`PostTemplate renders correctly 1`] = `
|
|||||||
>
|
>
|
||||||
↩ All articles
|
↩ All articles
|
||||||
</a>
|
</a>
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`TagTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -142,12 +142,96 @@ exports[`TagsTemplate renders correctly 1`] = `
|
|||||||
<nav>
|
<nav>
|
||||||
<ul />
|
<ul />
|
||||||
</nav>
|
</nav>
|
||||||
<a
|
Switch color mode:
|
||||||
href="#"
|
<br />
|
||||||
|
<div
|
||||||
|
className="react-toggle"
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
|
onTouchEnd={[Function]}
|
||||||
|
onTouchMove={[Function]}
|
||||||
|
onTouchStart={[Function]}
|
||||||
>
|
>
|
||||||
Switch to light mode
|
<div
|
||||||
</a>
|
className="react-toggle-track"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-check"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f1c40f",
|
||||||
|
"fontSize": "1.1em",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-4px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-moon "
|
||||||
|
data-icon="moon"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-track-x"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"color": "#f39c12",
|
||||||
|
"fontSize": "1em",
|
||||||
|
"left": "-3px",
|
||||||
|
"position": "absolute",
|
||||||
|
"top": "-3px",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
className="svg-inline--fa fa-sun "
|
||||||
|
data-icon="sun"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
style={Object {}}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||||
|
fill="currentColor"
|
||||||
|
style={Object {}}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="react-toggle-thumb"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
checked={false}
|
||||||
|
className="react-toggle-screenreader-only"
|
||||||
|
onBlur={[Function]}
|
||||||
|
onChange={[Function]}
|
||||||
|
onFocus={[Function]}
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user