switched handleStyleChange to localStorage

This commit is contained in:
plebbitor
2023-03-11 17:27:46 +01:00
parent ba2a66ba70
commit 9da24c76d1
6 changed files with 141 additions and 179 deletions
-1
View File
@@ -19,7 +19,6 @@
"ext-name": "^5.0.0", "ext-name": "^5.0.0",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"react": "^18.2.0", "react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0", "react-helmet-async": "^1.3.0",
"react-infinite-scroller": "^1.2.6", "react-infinite-scroller": "^1.2.6",
+8 -9
View File
@@ -10,7 +10,6 @@ import CaptchaModal from './components/CaptchaModal';
import { createGlobalStyle } from 'styled-components'; import { createGlobalStyle } from 'styled-components';
import 'react-tooltip/dist/react-tooltip.css'; import 'react-tooltip/dist/react-tooltip.css';
import preloadImages from './utils/preloadImages'; import preloadImages from './utils/preloadImages';
import { useCookies } from 'react-cookie';
export const BoardContext = React.createContext(); export const BoardContext = React.createContext();
@@ -33,31 +32,31 @@ const GlobalStyle = createGlobalStyle`
`; `;
export default function App() { export default function App() {
const [bodyStyle, setBodyStyle] = useState({ const [selectedTitle, setSelectedTitle] = useState('');
const [selectedAddress, setSelectedAddress] = useState('');
const [selectedThread, setSelectedThread] = useState('');
const [selectedStyle, setSelectedStyle] = useState(localStorage.getItem('selectedStyle') || 'Yotsuba');
const [bodyStyle, setBodyStyle] = useState(JSON.parse(localStorage.getItem('bodyStyle')) || {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Helvetica, Arial, sans-serif" fontFamily: "Helvetica, Arial, sans-serif"
}); });
const [selectedTitle, setSelectedTitle] = useState('');
const [selectedAddress, setSelectedAddress] = useState('');
const [selectedThread, setSelectedThread] = useState('');
const [cookies, setCookie] = useCookies(['selectedStyle']);
const [selectedStyle, setSelectedStyle] = useState(cookies.selectedStyle || 'Yotsuba');
const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`); const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
useEffect(() => { useEffect(() => {
preloadImages([...imageUrls]); preloadImages([...imageUrls]);
}, []); }, []);
const handleCaptchaClose = () => { const handleCaptchaClose = () => {
setIsCaptchaOpen(false); setIsCaptchaOpen(false);
}; };
return ( return (
<div> <div>
<Helmet> <Helmet>
+38 -37
View File
@@ -8,7 +8,6 @@ import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import getDate from '../utils/getDate'; import getDate from '../utils/getDate';
import renderComments from '../utils/renderComments'; import renderComments from '../utils/renderComments';
import { useCookies } from 'react-cookie';
const Board = ({ setBodyStyle }) => { const Board = ({ setBodyStyle }) => {
@@ -29,7 +28,7 @@ const Board = ({ setBodyStyle }) => {
const [selectedFeed, setSelectedFeed] = useState(feed); const [selectedFeed, setSelectedFeed] = useState(feed);
const renderedFeed = selectedFeed.slice(0, endIndex); const renderedFeed = selectedFeed.slice(0, endIndex);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const [cookies, setCookie] = useCookies(['selectedStyle']); // const [cookies, setCookie] = useCookies(['selectedStyle']);
// temporary title from JSON, gets subplebbitAddress from URL // temporary title from JSON, gets subplebbitAddress from URL
@@ -107,7 +106,7 @@ const Board = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
const darkModeListener = (e) => { const darkModeListener = (e) => {
@@ -118,7 +117,7 @@ const Board = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
}; };
@@ -288,88 +287,90 @@ const Board = ({ setBodyStyle }) => {
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
switch (event.target.value) { switch (event.target.value) {
case "Yotsuba": case "Yotsuba":
setBodyStyle({ const yotsubaBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
break; break;
case "Yotsuba-B": case "Yotsuba-B":
setBodyStyle({ const yotsubaBBodyStyle = {
background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x", background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
color: "#000", color: "#000",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBBodyStyle);
setSelectedStyle("Yotsuba-B"); setSelectedStyle("Yotsuba-B");
setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba-B");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
break; break;
case "Futaba": case "Futaba":
setBodyStyle({ const futabaBodyStyle = {
background: "#ffe", background: "#ffe",
color: "maroon", color: "maroon",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(futabaBodyStyle);
setSelectedStyle("Futaba"); setSelectedStyle("Futaba");
setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Futaba");
localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
break; break;
case "Burichan": case "Burichan":
setBodyStyle({ const burichanBodyStyle = {
background: "#eef2ff", background: "#eef2ff",
color: "#000", color: "#000",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(burichanBodyStyle);
setSelectedStyle("Burichan"); setSelectedStyle("Burichan");
setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Burichan");
localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
break; break;
case "Tomorrow": case "Tomorrow":
setBodyStyle({ const tomorrowBodyStyle = {
background: "#1d1f21 none", background: "#1d1f21 none",
color: "#c5c8c6", color: "#c5c8c6",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(tomorrowBodyStyle);
setSelectedStyle("Tomorrow"); setSelectedStyle("Tomorrow");
setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Tomorrow");
localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
break; break;
case "Photon": case "Photon":
setBodyStyle({ const photonBodyStyle = {
background: "#eee none", background: "#eee none",
color: "#333", color: "#333",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(photonBodyStyle);
setSelectedStyle("Photon"); setSelectedStyle("Photon");
setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Photon");
localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
break; break;
default: default:
setBodyStyle({ const defaultBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(defaultBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
} }
} }
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
}
useEffect(() => {
const style = getCookie("selectedStyle");
if (style) {
handleStyleChange({ target: { value: style } });
}
}, []);
return ( return (
+37 -38
View File
@@ -7,7 +7,6 @@ import { BoardContext } from '../App';
import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { useCookies } from 'react-cookie';
const Catalog = ({ setBodyStyle }) => { const Catalog = ({ setBodyStyle }) => {
@@ -25,7 +24,6 @@ const Catalog = ({ setBodyStyle }) => {
const { publishComment } = useAccountsActions(); const { publishComment } = useAccountsActions();
const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new'); const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const [cookies, setCookie] = useCookies(['selectedStyle']);
@@ -93,7 +91,7 @@ const Catalog = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
const darkModeListener = (e) => { const darkModeListener = (e) => {
@@ -104,7 +102,7 @@ const Catalog = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
}; };
@@ -250,89 +248,90 @@ const Catalog = ({ setBodyStyle }) => {
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
switch (event.target.value) { switch (event.target.value) {
case "Yotsuba": case "Yotsuba":
setBodyStyle({ const yotsubaBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/" }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
break; break;
case "Yotsuba-B": case "Yotsuba-B":
setBodyStyle({ const yotsubaBBodyStyle = {
background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x", background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
color: "#000", color: "#000",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBBodyStyle);
setSelectedStyle("Yotsuba-B"); setSelectedStyle("Yotsuba-B");
setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba-B");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
break; break;
case "Futaba": case "Futaba":
setBodyStyle({ const futabaBodyStyle = {
background: "#ffe", background: "#ffe",
color: "maroon", color: "maroon",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(futabaBodyStyle);
setSelectedStyle("Futaba"); setSelectedStyle("Futaba");
setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Futaba");
localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
break; break;
case "Burichan": case "Burichan":
setBodyStyle({ const burichanBodyStyle = {
background: "#eef2ff", background: "#eef2ff",
color: "#000", color: "#000",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(burichanBodyStyle);
setSelectedStyle("Burichan"); setSelectedStyle("Burichan");
setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Burichan");
localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
break; break;
case "Tomorrow": case "Tomorrow":
setBodyStyle({ const tomorrowBodyStyle = {
background: "#1d1f21 none", background: "#1d1f21 none",
color: "#c5c8c6", color: "#c5c8c6",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(tomorrowBodyStyle);
setSelectedStyle("Tomorrow"); setSelectedStyle("Tomorrow");
setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Tomorrow");
localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
break; break;
case "Photon": case "Photon":
setBodyStyle({ const photonBodyStyle = {
background: "#eee none", background: "#eee none",
color: "#333", color: "#333",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(photonBodyStyle);
setSelectedStyle("Photon"); setSelectedStyle("Photon");
setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Photon");
localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
break; break;
default: default:
setBodyStyle({ const defaultBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(defaultBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
} }
} }
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
}
useEffect(() => {
const style = getCookie("selectedStyle");
if (style) {
handleStyleChange({ target: { value: style } });
}
}, []);
return ( return (
+37 -38
View File
@@ -8,7 +8,6 @@ import ImageBanner from './ImageBanner';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import getDate from '../utils/getDate'; import getDate from '../utils/getDate';
import renderThreadComments from '../utils/renderThreadComments'; import renderThreadComments from '../utils/renderThreadComments';
import { useCookies } from 'react-cookie';
const Thread = ({ setBodyStyle }) => { const Thread = ({ setBodyStyle }) => {
@@ -22,7 +21,6 @@ const Thread = ({ setBodyStyle }) => {
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
const comment = useComment(`${selectedThread}`); const comment = useComment(`${selectedThread}`);
const { subplebbitAddress, threadCid } = useParams(); const { subplebbitAddress, threadCid } = useParams();
const [cookies, setCookie] = useCookies(['selectedStyle']);
// temporary title from JSON, gets subplebbitAddress and threadCid from URL // temporary title from JSON, gets subplebbitAddress and threadCid from URL
@@ -91,7 +89,7 @@ const Thread = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
const darkModeListener = (e) => { const darkModeListener = (e) => {
@@ -102,7 +100,7 @@ const Thread = ({ setBodyStyle }) => {
color: '#c5c8c6', color: '#c5c8c6',
fontFamily: 'Arial, Helvetica, sans-serif' fontFamily: 'Arial, Helvetica, sans-serif'
}); });
setCookie('selectedStyle', 'Tomorrow', { path: '/', sameSite: 'none', secure: true }); localStorage.setItem('selectedStyle', 'Tomorrow');
} }
}; };
@@ -169,89 +167,90 @@ const Thread = ({ setBodyStyle }) => {
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
switch (event.target.value) { switch (event.target.value) {
case "Yotsuba": case "Yotsuba":
setBodyStyle({ const yotsubaBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/" }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBodyStyle));
break; break;
case "Yotsuba-B": case "Yotsuba-B":
setBodyStyle({ const yotsubaBBodyStyle = {
background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x", background: "#eef2ff url(/assets/fade-blue.png) top center repeat-x",
color: "#000", color: "#000",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(yotsubaBBodyStyle);
setSelectedStyle("Yotsuba-B"); setSelectedStyle("Yotsuba-B");
setCookie("selectedStyle", "Yotsuba-B", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba-B");
localStorage.setItem("bodyStyle", JSON.stringify(yotsubaBBodyStyle));
break; break;
case "Futaba": case "Futaba":
setBodyStyle({ const futabaBodyStyle = {
background: "#ffe", background: "#ffe",
color: "maroon", color: "maroon",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(futabaBodyStyle);
setSelectedStyle("Futaba"); setSelectedStyle("Futaba");
setCookie("selectedStyle", "Futaba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Futaba");
localStorage.setItem("bodyStyle", JSON.stringify(futabaBodyStyle));
break; break;
case "Burichan": case "Burichan":
setBodyStyle({ const burichanBodyStyle = {
background: "#eef2ff", background: "#eef2ff",
color: "#000", color: "#000",
fontFamily: "times new roman, serif" fontFamily: "times new roman, serif"
}); };
setBodyStyle(burichanBodyStyle);
setSelectedStyle("Burichan"); setSelectedStyle("Burichan");
setCookie("selectedStyle", "Burichan", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Burichan");
localStorage.setItem("bodyStyle", JSON.stringify(burichanBodyStyle));
break; break;
case "Tomorrow": case "Tomorrow":
setBodyStyle({ const tomorrowBodyStyle = {
background: "#1d1f21 none", background: "#1d1f21 none",
color: "#c5c8c6", color: "#c5c8c6",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(tomorrowBodyStyle);
setSelectedStyle("Tomorrow"); setSelectedStyle("Tomorrow");
setCookie("selectedStyle", "Tomorrow", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Tomorrow");
localStorage.setItem("bodyStyle", JSON.stringify(tomorrowBodyStyle));
break; break;
case "Photon": case "Photon":
setBodyStyle({ const photonBodyStyle = {
background: "#eee none", background: "#eee none",
color: "#333", color: "#333",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(photonBodyStyle);
setSelectedStyle("Photon"); setSelectedStyle("Photon");
setCookie("selectedStyle", "Photon", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Photon");
localStorage.setItem("bodyStyle", JSON.stringify(photonBodyStyle));
break; break;
default: default:
setBodyStyle({ const defaultBodyStyle = {
background: "#ffe url(/assets/fade.png) top repeat-x", background: "#ffe url(/assets/fade.png) top repeat-x",
color: "maroon", color: "maroon",
fontFamily: "Arial, Helvetica, sans-serif" fontFamily: "Arial, Helvetica, sans-serif"
}); };
setBodyStyle(defaultBodyStyle);
setSelectedStyle("Yotsuba"); setSelectedStyle("Yotsuba");
setCookie("selectedStyle", "Yotsuba", { path: "/", sameSite: 'none', secure: true }); localStorage.setItem("selectedStyle", "Yotsuba");
localStorage.setItem("bodyStyle", JSON.stringify(defaultBodyStyle));
} }
} }
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
}
useEffect(() => {
const style = getCookie("selectedStyle");
if (style) {
handleStyleChange({ target: { value: style } });
}
}, []);
return ( return (
+1 -36
View File
@@ -2853,11 +2853,6 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/cookie@^0.3.3":
version "0.3.3"
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
"@types/eslint-scope@^3.7.3": "@types/eslint-scope@^3.7.3":
version "3.7.4" version "3.7.4"
resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
@@ -2915,14 +2910,6 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/hoist-non-react-statics@^3.0.1":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/html-minifier-terser@^6.0.0": "@types/html-minifier-terser@^6.0.0":
version "6.1.0" version "6.1.0"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4524,11 +4511,6 @@ cookie@0.5.0:
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b" resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
cookie@^0.4.0:
version "0.4.2"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
core-js-compat@^3.25.1: core-js-compat@^3.25.1:
version "3.27.2" version "3.27.2"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.27.2.tgz#607c50ad6db8fd8326af0b2883ebb987be3786da" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.27.2.tgz#607c50ad6db8fd8326af0b2883ebb987be3786da"
@@ -6478,7 +6460,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1" minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: hoist-non-react-statics@^3.0.0:
version "3.3.2" version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9999,15 +9981,6 @@ react-app-polyfill@^3.0.0:
regenerator-runtime "^0.13.9" regenerator-runtime "^0.13.9"
whatwg-fetch "^3.6.2" whatwg-fetch "^3.6.2"
react-cookie@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-4.1.1.tgz#832e134ad720e0de3e03deaceaab179c4061a19d"
integrity sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==
dependencies:
"@types/hoist-non-react-statics" "^3.0.1"
hoist-non-react-statics "^3.0.0"
universal-cookie "^4.0.0"
react-dev-utils@^12.0.1: react-dev-utils@^12.0.1:
version "12.0.1" version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -11669,14 +11642,6 @@ unique-string@^2.0.0:
dependencies: dependencies:
crypto-random-string "^2.0.0" crypto-random-string "^2.0.0"
universal-cookie@^4.0.0:
version "4.0.4"
resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
dependencies:
"@types/cookie" "^0.3.3"
cookie "^0.4.0"
universalify@^0.2.0: universalify@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"