WIP on theme selector of about-me, docs: updated README.mds

wip: theme
add basic components
2022-12-01 07:53:17 +00:00 · 2022-11-20 04:37:35 +00:00 · 2022-11-17 02:55:56 +00:00
8 changed files with 358 additions and 308 deletions
--- a/README.md
+++ b/README.md
@ -5,7 +5,6 @@ Scaffolded by `pnpm create turbo@latest`
 This project manages my homelab infrastructure under a monorepo to keep things
 centralized and easily sharable across different modules

-
 # Turbo-repo details

 ## What's inside?
@ -14,11 +13,11 @@ This turborepo uses [pnpm](https://pnpm.io) as a package manager. It includes th

 ### Apps and Packages

- `docs`: a [Next.js](https://nextjs.org/) app
- `web`: another [Next.js](https://nextjs.org/) app
- `ui`: a stub React component library shared by both `web` and `docs` applications
- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+- `apps/docs`: a [Next.js](https://nextjs.org/) app
+- `apps/web`: another [Next.js](https://nextjs.org/) app
+- `packages/ui`: a stub React component library shared by both `web` and `docs` applications
+- `packages/eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `packages/tsconfig`: `tsconfig.json`s used throughout the monorepo

 Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

--- a/apps/about-me/src/components/index.tsx
+++ b/apps/about-me/src/components/index.tsx
@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+
+export const Section: React.FC<{children?: ReactNode}> = ({children}) => <section className="text-gray-700 max-w-4xl">{children}</section>
+export const UL: React.FC<{ children?: ReactNode }> = ({ children }) => <ul className="list-disc list-inside">{children}</ul>
+
+export const SectionHeader: React.FC<{ text?: string, children?: ReactNode }> = ({ text, children }) => <div>
+  <h1 className="text-xl text-gray-600 tracking-widest">
+    {text}
+    {children}
+  </h1>
+  <div className="mt-8" />
+</div>
--- a/apps/about-me/src/pages/_document.tsx
+++ b/apps/about-me/src/pages/_document.tsx
@ -1,15 +0,0 @@
-import { Head } from "next/document";
-import { Main } from "next/document";
-import { NextScript } from "next/document";
-import { Html } from "next/document";
-import React from "react";
-
-const document = () => <Html>
-    <Head />
-    <body className="scrollbar-track-gray-50 scrollbar-thumb-amber-400">
-        <Main />
-        <NextScript />
-    </body>
-</Html>
-
-export default document;
--- a/apps/about-me/src/pages/blogs/[slug].tsx
+++ b/apps/about-me/src/pages/blogs/[slug].tsx
--- a/apps/about-me/src/pages/blogs/index.tsx
+++ b/apps/about-me/src/pages/blogs/index.tsx
--- a/apps/about-me/src/pages/index.tsx
+++ b/apps/about-me/src/pages/index.tsx
@ -1,7 +1,7 @@
 import { type NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 import Link from "next/link";
@ -18,6 +18,42 @@ import Lizzie from "@public/assets/lizzie.jpg";
 import SantaMonicaStairs from "@public/assets/santa-monica-stairs.jpg";
 import SantaMonicaHigh from "@public/assets/santa-monica-high.jpg";
 import assert from "assert";
+import { Section, SectionHeader, UL } from "@components/index";
+
+type Theme = "dark" | "light";
+
+const ThemeContext = React.createContext<{
+    theme: Theme,
+    systemTheme: Theme,
+    setThemePreference(theme: Theme): void,
+} | undefined>(undefined);
+const ThemeProvider: React.FC<{ children: React.ReactNode, prefer?: "light" | "dark" }> = ({ children, prefer }) => {
+    const pref = prefer ?? "light";
+    const [systemTheme, setSystemTheme] = useState<Theme>(pref);
+    const [themePref, setThemePref] = useState<Theme | undefined>(undefined);
+    // add a listener to system preference on which theme
+    // TODO: is there another way that remove event listener faster?
+    useEffect(() => {
+        console.log("useEffect called");
+        type EventType = { matches: boolean };
+        const onThemeChange = (event: EventType) => {
+            const newColorScheme = event.matches ? "dark" : "light";
+            setSystemTheme(newColorScheme);
+        };
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', onThemeChange);
+        return () => {
+            console.log("useEffect unmount");
+            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener("change", onThemeChange)
+        }
+    }, []);
+    return <ThemeContext.Provider value={{
+        theme: themePref ?? systemTheme,
+        systemTheme: systemTheme,
+        setThemePreference: setThemePref,
+    }}>{children}</ThemeContext.Provider>
+}
+const useTheme = () => useContext(ThemeContext);
+

 const circle = cva("absolute rounded-full border -z-10", {
    variants: {
@ -33,15 +69,42 @@ const circle = cva("absolute rounded-full border -z-10", {
            pulse: "animate-pulse",
            ping: "animate-ping",
        },
+        theme: {
+            light: "",
+            dark: "",
+        },
        color: {
-      back: "border-pink-50",
-      fore: "border-amber-300",
+            back: "",
+            fore: "",
        }
    },
+    compoundVariants: [
+        {
+            theme: "light",
+            color: "back",
+            className: "border-pink-50"
+        },
+        {
+            theme: "light",
+            color: "fore",
+            className: "border-amber-300"
+        },
+        {
+            theme: "dark",
+            color: "back",
+            className: "border-violet-300"
+        },
+        {
+            theme: "dark",
+            color: "fore",
+            className: "border-amber-400"
+        },
+    ],
    defaultVariants: {
        size: 0,
        animate: "none",
-    color: "back"
+        color: "back",
+        theme: "light"
    }
 });

@ -64,14 +127,14 @@ const Article: React.FC<{ children?: ReactNode }> = ({ children }) => <article
 </article>


-const InpageSection: React.FC<{href: string, children?: ReactNode}>= ({
+const InpageSection: React.FC<{ href: string, children?: ReactNode }> = ({
    href,
    children
 }) => <Link href={href} className="p-2 text-lg text-gray-500/50 rounded-3xl 
        border border-amber-400/50 hover:text-gray-500 hover:border-amber-400 transition-colors
        hover:animate-pulse">
        {children}
-</Link>
+    </Link>

 const Brief = () => <Article>
    {/*Avatar*/}
@ -101,13 +164,6 @@ const Brief = () => <Article>
    </div>
 </Article>

-const SectionHeader: React.FC<{ text?: string, children?: ReactNode }> = ({ text, children }) => <div>
-  <h1 className="text-xl text-gray-600 tracking-widest">
-    {text}
-    {children}
-  </h1>
-  <div className="mt-8" />
-</div>

 const images = [
    {
@ -216,7 +272,9 @@ const ImageDisplay: React.FC<{ imageDisplayHook: ImageDisplayHook }> = ({ imageD
    // setImageRepo,
    imgIndex,
    image
-} }) => <div className="relative bg-gray-100/30 rounded-md overflow-hidden">
+} }) => {
+    const {theme} = useTheme()!;
+    return <div className="relative h-fit w-fit bg-gray-100/30 rounded-md">
        <button className="group left-0 absolute w-5/12 h-full flex flex-row justify-start items-center" onClick={prev}>
            <span className={imageButton()}>{"<"}</span>
        </button>
@ -227,16 +285,18 @@ const ImageDisplay: React.FC<{ imageDisplayHook: ImageDisplayHook }> = ({ imageD
            <div className="flex flex-row justify-between items-center gap-2">
                {Array.from(Array(imageRepo.length).keys()).map(i => <div className={imageIndex({
                    active: (i == imgIndex ? "isActive" : "isInactive"),
-          theme: "light"
+                    theme: theme
                })}
                    key={`img-index-${i}`} />)}
            </div>
        </div>
-    {image && <Image src={image.src} alt={image.alt} className="w-96 h-96 object-contain rounded-md overflow-hidden transition-all" />}
+        {image && <Image placeholder="blur" src={image.src} alt={image.alt} 
+            className="w-96 h-96 object-contain rounded-md" />}
    </div>
+}

 const MyLink: React.FC<{ href: string, children?: ReactNode }> = ({ href, children }) => <Link
-  className="text-amber-400/70 visited:text-purple-300/70 hover:text-amber-400 visited:hover:text-purple-300" href={href}>
+    className="text-amber-400/70 visited:text-purple-400/70 hover:text-amber-400 visited:hover:text-purple-400" href={href}>
    {children}
 </Link>

@ -245,36 +305,36 @@ const About = () => {

    return <Article>
        <SectionHeader>About</SectionHeader>
-    <div className="flex flex-row gap-4">
+        <div className="flex flex-row w-11/12 justify-evenly max-w-screen-lg gap-8">
            <ImageDisplay imageDisplayHook={imgDisplay} />
            <div className="text-left">
-        <section>
+                <Section>
                    <span>
                        Aspiring software engineer with intense drive and curiosity in software development.
                    </span>
-        </section>
-        <section className="max-w-4xl">
+                </Section>
+                <Section>
                    My computer infrastructure consists of:
-          <ul className="list-disc list-inside">
+                    <UL>
                        <li>24 home CPU cores</li>
                        <li>60 GB of RAM (4 GB SDDR3 and 56 GB DDR4)</li>
                        <li>2.5 TB of SSD + HDD</li>
                        <li>A mix of NixOS, Ubuntu, and Windows</li>
-          </ul>
-        </section>
-        <section>
+                    </UL>
+                </Section>
+                <Section>
                    <span>
                        In free time, you would find me:
                    </span>
-          <ul className="list-disc list-inside">
+                    <UL>
                        <li>Learning about new technology in a week</li>
                        <li>Performing microbenchmarks on competing implementations and technologies</li>
                        <li>Optimizing my workspace through <MyLink href="https://git.pegasust.com/pegasust/dotfiles.git">dotfiles</MyLink></li>
                        <li>Contributing to open-source projects</li>
                        <li>Watching edutainment videos and podcasts about software</li> {/*TODO: add link to edutainment note-taking platform here*/}
                        <li><MyLink href="https://soundcloud.com/h-ng-tr-n-186908751">Producing music</MyLink></li>
-          </ul>
-        </section>
+                    </UL>
+                </Section>
            </div>
        </div>
    </Article>
@ -307,7 +367,7 @@ const NavbarItem: React.FC<{
 </Link>


-const iconCva = cva("transition-colors", {
+const iconCva = cva("transition-colors group-hover:animate-bounce", {
    variants: {
        theme: {
            light: "group-hover:fill-gray-700 fill-gray-400"
@ -318,21 +378,26 @@ const iconCva = cva("transition-colors", {
    }
 });

-const Navbar = () => <div className="flex justify-center items-center w-full z-50 sticky top-0 left-0 backdrop-blur-md h-8">
+const Navbar = () => {
+    const _theme = useTheme();
+    if (!_theme) { throw new Error("no theme provider"); }
+    const { theme, setThemePreference } = _theme;
+    return <div className="flex justify-center items-center w-full z-50 sticky top-0 left-0 backdrop-blur-md h-8">
        <div className="w-11/12 max-w-screen-lg flex items-center gap-4">
            <div className="flex flex-row justify-center items-center gap-1">
                <NavbarItem text="GitHub" link="https://github.com/pegasust"><FaGithub className={iconCva()} /></NavbarItem>
                <NavbarItem text="LinkedIn" link="https://linkedin.com/in/hung-tran-1963bb205/"><FaLinkedin className={iconCva()} /></NavbarItem>
            </div>
            <Link href="#brief">
-      <span className="transition-colors hover:text-amber-400 text-amber-400/50 animate-pulse">Hung Tran</span>
+                <span className="transition-colors hover:text-amber-400 text-amber-400/50 hover:animate-pulse">Hung Tran</span>
            </Link>
        </div>
-</div>
-
+    </div>
+}

 const Home: NextPage = () => {
    return (
+        <ThemeProvider>
            <main className="overflow-x-hidden z-0 flex flex-col overflow-y-scroll h-screen
                items-center bg-pink-50/20 min-h-screen antialiased snap-y snap-proximity
                scrollbar-track-gray-200 scrollbar-thumb-amber-300/50 scrollbar-thin"> {/*vimium users cry if snap-mandatory*/}
@ -358,6 +423,7 @@ const Home: NextPage = () => {
                    <Projects />
                </section>
            </main>
+        </ThemeProvider>
    );
 };

--- a/apps/about-me/tsconfig.json
+++ b/apps/about-me/tsconfig.json
@ -12,8 +12,9 @@
      "@server/*": ["src/server/*"],
      "@db/*": ["src/server/db/*"],
      "@trpc/*": ["src/server/trpc/*"],
-      "@router/*": ["src/server/trpc/router"],
-      "@public/*": ["public/*"]
+      "@router/*": ["src/server/trpc/router/*"],
+      "@public/*": ["public/*"],
+      "@components/*": ["src/components/*"]
    }
  }
 }
--- a/packages/tsconfig/t3.json
+++ b/packages/tsconfig/t3.json
@ -4,19 +4,6 @@
  "extends": "./nextjs.json",
  "compilerOptions": {
    "declaration": false,
-    "baseUrl": ".",
-    "paths": {
-      "@env/*": ["src/env/*"],
-      "@pages/*": ["src/pages/*"],
-      "@styles/*": ["src/styles/*"],
-      "@utils/*": ["src/utils/*"],
-      "@server/*": ["src/server/*"],
-      "@db/*": ["src/server/db/*"],
-      "@trpc/*": ["src/server/trpc/*"],
-      "@router/*": ["src/server/trpc/router"],
-      "@public/*": ["public/*"]
-      
-    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
  "exclude": ["node_modules"],
Author	SHA1	Message	Date
pegasust	064a9355e6	WIP on theme selector of about-me, docs: updated README.mds	2022-12-01 07:53:17 +00:00
pegasust	70f7b14a67	wip: theme	2022-11-20 04:37:35 +00:00
pegasust	df126da2a6	add basic components	2022-11-17 02:55:56 +00:00