diff --git a/src/components/Ps1.tsx b/src/components/Ps1.tsx index 3db90ee..a256bd6 100644 --- a/src/components/Ps1.tsx +++ b/src/components/Ps1.tsx @@ -2,10 +2,15 @@ import React from 'react'; import config from '../../config.json'; export const Ps1 = () => { + let [visitorName, setVisitorName] = React.useState(''); + React.useEffect(() => { + let name = window.sessionStorage.getItem('visitorName'); + setVisitorName(name); + }, [visitorName]); return (
- {config.ps1_username} + {visitorName} @ diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6e4056e..e3f509c 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,7 +1,8 @@ import React from 'react'; import '../styles/global.css'; import Head from 'next/head'; - +import config from '../../config.json'; +import { useLayoutEffect, useState } from 'react'; const App = ({ Component, pageProps }) => { const inputRef = React.useRef(null); @@ -9,6 +10,36 @@ const App = ({ Component, pageProps }) => { inputRef.current.focus(); }; + useLayoutEffect(() => { + let html = document.querySelector('html'); + html.classList.add('dark'); + let theme = window.sessionStorage.getItem('theme'); + if (theme == 'dark') { + html.classList.add('dark'); + } else if (theme == 'light') { + html.classList.remove('dark'); + } + }, []); + + React.useEffect(() => { + const askName = 'What is your name?'; + let visitor: string; + + if (!window.sessionStorage) { + window.prompt(askName); + } + + visitor = window.sessionStorage.getItem('visitorName'); + + if (!visitor) { + visitor = window.prompt(askName); + if (['', undefined, null].includes(visitor)) { + visitor = config.ps1_username; + } + window.sessionStorage.setItem('visitorName', visitor); + } + }, []); + return ( <> diff --git a/src/utils/bin/commands.ts b/src/utils/bin/commands.ts index 338c9f8..6cef3cb 100644 --- a/src/utils/bin/commands.ts +++ b/src/utils/bin/commands.ts @@ -52,6 +52,22 @@ here are the ways you can support my work: `; }; +// theme +export const theme = async (args: string[]): Promise => { + let html = document.querySelector('html'); + if (`${args}` == 'dark') { + window.sessionStorage.setItem('theme', 'dark'); + html.classList.add('dark'); + return `changing theme to dark ...`; + } else if (`${args}` == 'light') { + window.sessionStorage.setItem('theme', 'light'); + html.classList.remove('dark'); + return `changing theme to light ..`; + } else { + return `available options are dark and light.`; + } +}; + // Contact export const email = async (args: string[]): Promise => { window.open(`mailto:${config.email}`); @@ -97,7 +113,8 @@ export const echo = async (args: string[]): Promise => { }; export const whoami = async (args: string[]): Promise => { - return `${config.ps1_username}`; + let visitor = window.sessionStorage.getItem('visitorName'); + return `${visitor}`; }; export const ls = async (args: string[]): Promise => { diff --git a/tailwind.config.js b/tailwind.config.js index 2c63b9b..648791b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,7 @@ module.exports = { './src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}', ], - darkMode: 'media', // or 'media' or 'class' + darkMode: 'class', // or 'media' or 'class' theme: { colors: { transparent: 'transparent',