Merge 5652e0bdd3 into 1f2e543bdb

3 years ago · 6c0fac216e
parent 1f2e543bdb 5652e0bdd3
commit 6c0fac216e
4 changed files with 57 additions and 4 deletions
--- 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 (
    <div>
      <span className="text-light-yellow dark:text-dark-yellow">
-        {config.ps1_username}
+        {visitorName}
      </span>
      <span className="text-light-gray dark:text-dark-gray">@</span>
      <span className="text-light-green dark:text-dark-green">
--- 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<HTMLInputElement>(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 (
    <>
      <Head>
--- 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<string> => {
+  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<string> => {
  window.open(`mailto:${config.email}`);
@ -97,7 +113,8 @@ export const echo = async (args: string[]): Promise<string> => {
 };

 export const whoami = async (args: string[]): Promise<string> => {
-  return `${config.ps1_username}`;
+  let visitor = window.sessionStorage.getItem('visitorName');
+  return `${visitor}`;
 };

 export const ls = async (args: string[]): Promise<string> => {
--- 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',