pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reached same app state using vite

Browse Source
This commit is contained in:
Pihkaal
2024-01-28 15:56:19 +01:00
parent 8446ee6c65
commit 5542dce881
27 changed files with 805 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>pihkaal</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2
package.json
View File

@@ -14,6 +14,7 @@
"axios": "^1.6.7", "axios": "^1.6.7",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"vite-tsconfig-paths": "^4.3.1",
"zod": "^3.22.4" "zod": "^3.22.4"
}, },
"devDependencies": { "devDependencies": {
@@ -33,6 +34,7 @@
"postcss": "^8.4.31", "postcss": "^8.4.31",
"prettier": "^3.1.0", "prettier": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.11", "prettier-plugin-tailwindcss": "^0.5.11",
"sass": "^1.70.0",
"tailwindcss": "^3.3.5", "tailwindcss": "^3.3.5",
"typescript": "^5.1.6", "typescript": "^5.1.6",
"vite": "^5.0.12" "vite": "^5.0.12"

123
pnpm-lock.yaml generated
View File

@@ -14,6 +14,9 @@ dependencies:
react-dom: react-dom:
specifier: 18.2.0 specifier: 18.2.0
version: 18.2.0(react@18.2.0) version: 18.2.0(react@18.2.0)
vite-tsconfig-paths:
specifier: ^4.3.1
version: 4.3.1(typescript@5.3.3)(vite@5.0.12)
zod: zod:
specifier: ^3.22.4 specifier: ^3.22.4
version: 3.22.4 version: 3.22.4
@@ -67,6 +70,9 @@ devDependencies:
prettier-plugin-tailwindcss: prettier-plugin-tailwindcss:
specifier: ^0.5.11 specifier: ^0.5.11
version: 0.5.11(prettier@3.1.1) version: 0.5.11(prettier@3.1.1)
sass:
specifier: ^1.70.0
version: 1.70.0
tailwindcss: tailwindcss:
specifier: ^3.3.5 specifier: ^3.3.5
version: 3.4.1 version: 3.4.1
@@ -75,7 +81,7 @@ devDependencies:
version: 5.3.3 version: 5.3.3
vite: vite:
specifier: ^5.0.12 specifier: ^5.0.12
version: 5.0.12(@types/node@18.19.6) version: 5.0.12(@types/node@18.19.6)(sass@1.70.0)
packages: packages:
@@ -102,7 +108,6 @@ packages:
cpu: [ppc64] cpu: [ppc64]
os: [aix] os: [aix]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/android-arm64@0.19.12: /@esbuild/android-arm64@0.19.12:
@@ -111,7 +116,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/android-arm@0.19.12: /@esbuild/android-arm@0.19.12:
@@ -120,7 +124,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/android-x64@0.19.12: /@esbuild/android-x64@0.19.12:
@@ -129,7 +132,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/darwin-arm64@0.19.12: /@esbuild/darwin-arm64@0.19.12:
@@ -138,7 +140,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/darwin-x64@0.19.12: /@esbuild/darwin-x64@0.19.12:
@@ -147,7 +148,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/freebsd-arm64@0.19.12: /@esbuild/freebsd-arm64@0.19.12:
@@ -156,7 +156,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [freebsd] os: [freebsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/freebsd-x64@0.19.12: /@esbuild/freebsd-x64@0.19.12:
@@ -165,7 +164,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-arm64@0.19.12: /@esbuild/linux-arm64@0.19.12:
@@ -174,7 +172,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-arm@0.19.12: /@esbuild/linux-arm@0.19.12:
@@ -183,7 +180,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-ia32@0.19.12: /@esbuild/linux-ia32@0.19.12:
@@ -192,7 +188,6 @@ packages:
cpu: [ia32] cpu: [ia32]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-loong64@0.19.12: /@esbuild/linux-loong64@0.19.12:
@@ -201,7 +196,6 @@ packages:
cpu: [loong64] cpu: [loong64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-mips64el@0.19.12: /@esbuild/linux-mips64el@0.19.12:
@@ -210,7 +204,6 @@ packages:
cpu: [mips64el] cpu: [mips64el]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-ppc64@0.19.12: /@esbuild/linux-ppc64@0.19.12:
@@ -219,7 +212,6 @@ packages:
cpu: [ppc64] cpu: [ppc64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-riscv64@0.19.12: /@esbuild/linux-riscv64@0.19.12:
@@ -228,7 +220,6 @@ packages:
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-s390x@0.19.12: /@esbuild/linux-s390x@0.19.12:
@@ -237,7 +228,6 @@ packages:
cpu: [s390x] cpu: [s390x]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/linux-x64@0.19.12: /@esbuild/linux-x64@0.19.12:
@@ -246,7 +236,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/netbsd-x64@0.19.12: /@esbuild/netbsd-x64@0.19.12:
@@ -255,7 +244,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [netbsd] os: [netbsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/openbsd-x64@0.19.12: /@esbuild/openbsd-x64@0.19.12:
@@ -264,7 +252,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [openbsd] os: [openbsd]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/sunos-x64@0.19.12: /@esbuild/sunos-x64@0.19.12:
@@ -273,7 +260,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [sunos] os: [sunos]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-arm64@0.19.12: /@esbuild/win32-arm64@0.19.12:
@@ -282,7 +268,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-ia32@0.19.12: /@esbuild/win32-ia32@0.19.12:
@@ -291,7 +276,6 @@ packages:
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@esbuild/win32-x64@0.19.12: /@esbuild/win32-x64@0.19.12:
@@ -300,7 +284,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -441,7 +424,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-android-arm64@4.9.6: /@rollup/rollup-android-arm64@4.9.6:
@@ -449,7 +431,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-darwin-arm64@4.9.6: /@rollup/rollup-darwin-arm64@4.9.6:
@@ -457,7 +438,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-darwin-x64@4.9.6: /@rollup/rollup-darwin-x64@4.9.6:
@@ -465,7 +445,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.9.6: /@rollup/rollup-linux-arm-gnueabihf@4.9.6:
@@ -473,7 +452,6 @@ packages:
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-gnu@4.9.6: /@rollup/rollup-linux-arm64-gnu@4.9.6:
@@ -481,7 +459,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-musl@4.9.6: /@rollup/rollup-linux-arm64-musl@4.9.6:
@@ -489,7 +466,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-riscv64-gnu@4.9.6: /@rollup/rollup-linux-riscv64-gnu@4.9.6:
@@ -497,7 +473,6 @@ packages:
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-gnu@4.9.6: /@rollup/rollup-linux-x64-gnu@4.9.6:
@@ -505,7 +480,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-musl@4.9.6: /@rollup/rollup-linux-x64-musl@4.9.6:
@@ -513,7 +487,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-win32-arm64-msvc@4.9.6: /@rollup/rollup-win32-arm64-msvc@4.9.6:
@@ -521,7 +494,6 @@ packages:
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-win32-ia32-msvc@4.9.6: /@rollup/rollup-win32-ia32-msvc@4.9.6:
@@ -529,7 +501,6 @@ packages:
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rollup/rollup-win32-x64-msvc@4.9.6: /@rollup/rollup-win32-x64-msvc@4.9.6:
@@ -537,7 +508,6 @@ packages:
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/@rushstack/eslint-patch@1.6.1: /@rushstack/eslint-patch@1.6.1:
@@ -676,7 +646,6 @@ packages:
/@types/estree@1.0.5: /@types/estree@1.0.5:
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
dev: true
/@types/json-schema@7.0.15: /@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -690,7 +659,6 @@ packages:
resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==} resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==}
dependencies: dependencies:
undici-types: 5.26.5 undici-types: 5.26.5
dev: true
/@types/prop-types@15.7.11: /@types/prop-types@15.7.11:
resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -860,7 +828,7 @@ packages:
vite: ^4 || ^5 vite: ^4 || ^5
dependencies: dependencies:
'@swc/core': 1.3.106 '@swc/core': 1.3.106
vite: 5.0.12(@types/node@18.19.6) vite: 5.0.12(@types/node@18.19.6)(sass@1.70.0)
transitivePeerDependencies: transitivePeerDependencies:
- '@swc/helpers' - '@swc/helpers'
dev: true dev: true
@@ -920,7 +888,6 @@ packages:
dependencies: dependencies:
normalize-path: 3.0.0 normalize-path: 3.0.0
picomatch: 2.3.1 picomatch: 2.3.1
dev: true
/arg@5.0.2: /arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -1076,7 +1043,6 @@ packages:
/binary-extensions@2.2.0: /binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true
/brace-expansion@1.1.11: /brace-expansion@1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1096,7 +1062,6 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dependencies: dependencies:
fill-range: 7.0.1 fill-range: 7.0.1
dev: true
/browserslist@4.22.2: /browserslist@4.22.2:
resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
@@ -1152,7 +1117,6 @@ packages:
readdirp: 3.6.0 readdirp: 3.6.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true
/clsx@2.1.0: /clsx@2.1.0:
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
@@ -1230,7 +1194,6 @@ packages:
optional: true optional: true
dependencies: dependencies:
ms: 2.1.2 ms: 2.1.2
dev: true
/deep-is@0.1.4: /deep-is@0.1.4:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -1434,7 +1397,6 @@ packages:
'@esbuild/win32-arm64': 0.19.12 '@esbuild/win32-arm64': 0.19.12
'@esbuild/win32-ia32': 0.19.12 '@esbuild/win32-ia32': 0.19.12
'@esbuild/win32-x64': 0.19.12 '@esbuild/win32-x64': 0.19.12
dev: true
/escalade@3.1.1: /escalade@3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -1770,7 +1732,6 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dependencies: dependencies:
to-regex-range: 5.0.1 to-regex-range: 5.0.1
dev: true
/find-up@5.0.0: /find-up@5.0.0:
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
@@ -1839,7 +1800,6 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true
optional: true optional: true
/function-bind@1.1.2: /function-bind@1.1.2:
@@ -1888,7 +1848,6 @@ packages:
engines: {node: '>= 6'} engines: {node: '>= 6'}
dependencies: dependencies:
is-glob: 4.0.3 is-glob: 4.0.3
dev: true
/glob-parent@6.0.2: /glob-parent@6.0.2:
resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -1957,6 +1916,10 @@ packages:
slash: 3.0.0 slash: 3.0.0
dev: true dev: true
/globrex@0.1.2:
resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
dev: false
/gopd@1.0.1: /gopd@1.0.1:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
dependencies: dependencies:
@@ -2015,6 +1978,9 @@ packages:
engines: {node: '>= 4'} engines: {node: '>= 4'}
dev: true dev: true
/immutable@4.3.5:
resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
/import-fresh@3.3.0: /import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'} engines: {node: '>=6'}
@@ -2074,7 +2040,6 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dependencies: dependencies:
binary-extensions: 2.2.0 binary-extensions: 2.2.0
dev: true
/is-boolean-object@1.1.2: /is-boolean-object@1.1.2:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -2105,7 +2070,6 @@ packages:
/is-extglob@2.1.1: /is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true
/is-finalizationregistry@1.0.2: /is-finalizationregistry@1.0.2:
resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==} resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
@@ -2130,7 +2094,6 @@ packages:
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dependencies: dependencies:
is-extglob: 2.1.1 is-extglob: 2.1.1
dev: true
/is-map@2.0.2: /is-map@2.0.2:
resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
@@ -2151,7 +2114,6 @@ packages:
/is-number@7.0.0: /is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'} engines: {node: '>=0.12.0'}
dev: true
/is-path-inside@3.0.3: /is-path-inside@3.0.3:
resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -2402,7 +2364,6 @@ packages:
/ms@2.1.2: /ms@2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
dev: true
/ms@2.1.3: /ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -2420,7 +2381,6 @@ packages:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true hasBin: true
dev: true
/natural-compare@1.4.0: /natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -2433,7 +2393,6 @@ packages:
/normalize-path@3.0.0: /normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true
/normalize-range@0.1.2: /normalize-range@0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -2585,12 +2544,10 @@ packages:
/picocolors@1.0.0: /picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: true
/picomatch@2.3.1: /picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
dev: true
/pify@2.3.0: /pify@2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
@@ -2670,7 +2627,6 @@ packages:
nanoid: 3.3.7 nanoid: 3.3.7
picocolors: 1.0.0 picocolors: 1.0.0
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: true
/prelude-ls@1.2.1: /prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2788,7 +2744,6 @@ packages:
engines: {node: '>=8.10.0'} engines: {node: '>=8.10.0'}
dependencies: dependencies:
picomatch: 2.3.1 picomatch: 2.3.1
dev: true
/reflect.getprototypeof@1.0.4: /reflect.getprototypeof@1.0.4:
resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==} resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
@@ -2875,7 +2830,6 @@ packages:
'@rollup/rollup-win32-ia32-msvc': 4.9.6 '@rollup/rollup-win32-ia32-msvc': 4.9.6
'@rollup/rollup-win32-x64-msvc': 4.9.6 '@rollup/rollup-win32-x64-msvc': 4.9.6
fsevents: 2.3.3 fsevents: 2.3.3
dev: true
/run-parallel@1.2.0: /run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -2902,6 +2856,15 @@ packages:
is-regex: 1.1.4 is-regex: 1.1.4
dev: true dev: true
/sass@1.70.0:
resolution: {integrity: sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.5
source-map-js: 1.0.2
/scheduler@0.23.0: /scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies: dependencies:
@@ -2973,7 +2936,6 @@ packages:
/source-map-js@1.0.2: /source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true
/string-width@4.2.3: /string-width@4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -3140,7 +3102,6 @@ packages:
engines: {node: '>=8.0'} engines: {node: '>=8.0'}
dependencies: dependencies:
is-number: 7.0.0 is-number: 7.0.0
dev: true
/ts-api-utils@1.0.3(typescript@5.3.3): /ts-api-utils@1.0.3(typescript@5.3.3):
resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==} resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
@@ -3155,6 +3116,19 @@ packages:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
dev: true dev: true
/tsconfck@3.0.1(typescript@5.3.3):
resolution: {integrity: sha512-7ppiBlF3UEddCLeI1JRx5m2Ryq+xk4JrZuq4EuYXykipebaq1dV0Fhgr1hb7CkmHt32QSgOZlcqVLEtHBG4/mg==}
engines: {node: ^18 || >=20}
hasBin: true
peerDependencies:
typescript: ^5.0.0
peerDependenciesMeta:
typescript:
optional: true
dependencies:
typescript: 5.3.3
dev: false
/tsconfig-paths@3.15.0: /tsconfig-paths@3.15.0:
resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==} resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
dependencies: dependencies:
@@ -3218,7 +3192,6 @@ packages:
resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
engines: {node: '>=14.17'} engines: {node: '>=14.17'}
hasBin: true hasBin: true
dev: true
/unbox-primitive@1.0.2: /unbox-primitive@1.0.2:
resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
@@ -3231,7 +3204,6 @@ packages:
/undici-types@5.26.5: /undici-types@5.26.5:
resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
dev: true
/update-browserslist-db@1.0.13(browserslist@4.22.2): /update-browserslist-db@1.0.13(browserslist@4.22.2):
resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
@@ -3254,7 +3226,24 @@ packages:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
dev: true dev: true
/vite@5.0.12(@types/node@18.19.6): /vite-tsconfig-paths@4.3.1(typescript@5.3.3)(vite@5.0.12):
resolution: {integrity: sha512-cfgJwcGOsIxXOLU/nELPny2/LUD/lcf1IbfyeKTv2bsupVbTH/xpFtdQlBmIP1GEK2CjjLxYhFfB+QODFAx5aw==}
peerDependencies:
vite: '*'
peerDependenciesMeta:
vite:
optional: true
dependencies:
debug: 4.3.4
globrex: 0.1.2
tsconfck: 3.0.1(typescript@5.3.3)
vite: 5.0.12(@types/node@18.19.6)(sass@1.70.0)
transitivePeerDependencies:
- supports-color
- typescript
dev: false
/vite@5.0.12(@types/node@18.19.6)(sass@1.70.0):
resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
engines: {node: ^18.0.0 || >=20.0.0} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
@@ -3286,9 +3275,9 @@ packages:
esbuild: 0.19.12 esbuild: 0.19.12
postcss: 8.4.33 postcss: 8.4.33
rollup: 4.9.6 rollup: 4.9.6
sass: 1.70.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true
/which-boxed-primitive@1.0.2: /which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}

42
src/App.css
View File

@@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

58
src/App.tsx
View File

@@ -1,31 +1,39 @@
import { useState } from "react"; import { MusicPlayer } from "./components/MusicPlayer";
import reactLogo from "./assets/react.svg"; import { MusicVisualizer } from "./components/MusicVisualizer";
import "./App.css"; import { Nvim } from "./components/Nvim/Nvim";
import { Terminal } from "./components/Terminal";
import { AppContextProvider } from "./context/AppContext";
function App() { function App() {
const [count, setCount] = useState(0);
return ( return (
<> <AppContextProvider>
<div> <main
<a href="https://vitejs.dev" target="_blank"></a> className={
<a href="https://react.dev" target="_blank"> "insets-0 fixed flex h-screen w-screen flex-col gap-3 bg-[url(/wallpaper.jpg)] bg-cover p-3 font-body leading-[26px]"
<img src={reactLogo} className="logo react" alt="React logo" /> }
</a> >
</div> <nav className="border border-red-500">toolbar</nav>
<h1>Vite + React</h1>
<div className="card"> <Terminal className="flex-1">
<button onClick={() => setCount(count => count + 1)}> <Nvim />
count is {count} </Terminal>
</button>
<p> <div className="flex gap-3">
Edit <code>src/App.tsx</code> and save to test HMR <Terminal className="flex-1 select-none">
</p> <MusicPlayer
</div> title="Last Tango in Kyoto"
<p className="read-the-docs"> artist="Floating Bits"
Click on the Vite and React logos to learn more album="Last Tango in Kyoto"
</p> duration={93}
</> />
</Terminal>
<Terminal className="flex-1">
<MusicVisualizer />
</Terminal>
</div>
</main>
</AppContextProvider>
); );
} }

85
src/components/MusicPlayer.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { useTerminal } from "~/context/TerminalContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { TerminalBoxElement } from "~/utils/terminal/elements/box";
import { useEffect, useState } from "react";
const theme = {
black: "#45475a",
red: "#f38ba8",
green: "#a6e3a1",
yellow: "#f9e2af",
blue: "#89bafa",
magenta: "#f5c2e7",
cyan: "#94e2d5",
white: "#bac2de",
grey: "#585B70",
lightGrey: "#a6adc8",
};
const formatDurationMSS = (duration: number) => {
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
export const MusicPlayer = (props: {
title: string;
artist: string;
album: string;
duration: number;
}) => {
const { cols } = useTerminal();
const canvas = new TerminalRenderer(cols, 5);
const [played, setPlayed] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setPlayed(x => Math.min(props.duration, x + 1));
}, 1000);
return () => clearInterval(interval);
}, [setPlayed, props.duration]);
canvas.writeElement(
new TerminalBoxElement(canvas.width, canvas.height),
0,
0,
);
canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
foreground: theme.magenta,
});
const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
// Title and Artist
inner.write(2, 0, `${props.title} · ${props.artist}`, {
foreground: theme.cyan,
fontWeight: 700,
});
inner.apply(0, 0, {
char: "\udb81\udc0a",
foreground: theme.cyan,
fontWeight: 800,
});
// Album
inner.write(0, 1, props.album, { foreground: theme.yellow });
// Bar
inner.write(0, 2, " ".repeat(inner.width), {
foreground: theme.green,
background: "#55576d",
});
inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
foreground: "#55576d",
background: theme.green,
});
const time = `${formatDurationMSS(played)}/${formatDurationMSS(
props.duration,
)}`;
inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
canvas.writeElement(inner, 1, 1);
return <p>{canvas.render()}</p>;
};

5
src/components/MusicVisualizer.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { type FunctionComponent } from "react";
export const MusicVisualizer: FunctionComponent = () => (
<div className="h-full w-full bg-red-500"></div>
);

19
src/components/Nvim/Nvim.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { NvimStatusBar } from "./NvimStatusBar";
import { NvimTree } from "./NvimTree";
export const Nvim = () => {
return (
<div>
<div className="flex">
<div className="w-fit">
<NvimTree />
</div>
<div className="flex-1"></div>
</div>
<div className="h-fit bg-[#29293c]">
<NvimStatusBar label="NORMAL" fileName="README.md" />
</div>
</div>
);
};

31
src/components/Nvim/NvimStatusBar.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { useTerminal } from "~/context/TerminalContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { theme } from "~/utils/terminal/theme";
export const NvimStatusBar = (props: { label: string; fileName: string }) => {
const { cols: width } = useTerminal();
const canvas = new TerminalRenderer(width, 1);
canvas.write(0, 0, ` ${props.label} `, {
background: theme.blue,
foreground: "#000",
});
canvas.write(props.label.length + 2, 0, "\ue0ba", {
background: theme.blue,
foreground: "#474353",
});
canvas.write(props.label.length + 3, 0, "\ue0ba", {
background: "#474353",
foreground: "#373040",
});
canvas.write(props.label.length + 4, 0, ` ${props.fileName} `, {
background: "#373040",
foreground: theme.white,
});
canvas.write(props.label.length + 6 + props.fileName.length, 0, "\ue0ba", {
background: "#373040",
foreground: "#29293c",
});
return <p>{canvas.render()}</p>;
};

158
src/components/Nvim/NvimTree.tsx Normal file
View File

@@ -0,0 +1,158 @@
import { useState, useEffect } from "react";
import { useApp } from "~/context/AppContext";
import { useTerminal } from "~/context/TerminalContext";
import { FILE_STYLES, type File } from "~/utils/filesystem";
import { type Cell } from "~/utils/terminal/cell";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { theme } from "~/utils/terminal/theme";
import { type Manifest } from "~/utils/types";
const PATH_FOLDED: Cell = {
char: "",
foreground: theme.grey,
};
const PATH_UNFOLDED: Cell = {
char: "",
foreground: theme.blue,
};
const buildFileTree = (manifest: Manifest): Array<File> => {
if (manifest === undefined) return [];
const files: Array<File> = [];
manifest.projects.forEach(project => {
if (project.name === "pihkaal") {
project.files.forEach(file => {
files.push({
name: file,
type: "md",
});
});
} else {
files.push({
name: project.name,
type: "directory",
folded: true,
children: project.files.map(file => ({
name: file,
type: "md",
})),
});
}
});
return files;
};
export const NvimTree = () => {
const manifest = useApp();
const [selected, setSelected] = useState(0);
const [files, setFiles] = useState(buildFileTree(manifest));
const { cols: width, rows: height } = useTerminal();
const canvas = new TerminalRenderer(width * 0.2, height - 2, {
background: "#0000001a",
});
const tree = new TerminalRenderer(canvas.width - 3, height - 1);
tree.write(0, selected, " ".repeat(tree.width), { background: "#504651" });
let y = 0;
let indent = 0;
const renderTree = (files: Array<File>) => {
files.forEach(file => {
tree.apply(2 + indent * 2, y, FILE_STYLES[file.type]);
if (file.type === "directory") {
tree.apply(indent * 2, y, file.folded ? PATH_FOLDED : PATH_UNFOLDED);
tree.write(4 + indent * 2, y, file.name, {
foreground: FILE_STYLES.directory.foreground,
});
y++;
if (!file.folded) {
indent++;
renderTree(file.children);
indent--;
}
} else {
if (file.name === "README.md") {
tree.write(4 + indent * 2, y, file.name, {
foreground: theme.yellow,
fontWeight: 800,
});
} else {
tree.write(4 + indent * 2, y, file.name);
}
y++;
}
});
};
useEffect(() => {
const onScroll = (event: KeyboardEvent) => {
switch (event.key) {
case "ArrowUp":
setSelected(x => Math.max(0, x - 1));
break;
case "ArrowDown":
setSelected(x => Math.min(y - 1, x + 1));
break;
case "Enter":
let y = 0;
const findFile = (files: Array<File>): File | null => {
for (const f of files) {
if (y === selected) {
return f;
}
y++;
if (f.type === "directory" && !f.folded) {
const found = findFile(f.children);
if (found) return found;
}
}
return null;
};
const current = findFile(files);
if (!current) {
setSelected(0);
return;
}
if (current.type === "directory") {
current.folded = !current.folded;
setFiles([...files]);
}
break;
}
};
window.addEventListener("keydown", onScroll);
return () => {
window.removeEventListener("keydown", onScroll);
};
});
renderTree(files);
canvas.writeElement(tree, 2, 1);
return <p>{canvas.render()}</p>;
};
/*
.sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) =>
a.type === "directory" && b.type !== "directory"
? -1
: a.type !== "directory" && b.type === "directory"
? 1
: 0,
),
*/

64
src/components/Terminal.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { useRef, useState, useEffect, type ReactNode } from "react";
import clsx from "clsx";
import { TerminalContextProvider } from "~/context/TerminalContext";
export const Terminal = (props: {
children?: ReactNode;
className?: string;
}) => {
const terminalRef = useRef<HTMLDivElement>(null);
const [size, setSize] = useState<{ cols: number; rows: number }>();
useEffect(() => {
const precision = 300;
const calculateSize = () => {
if (!terminalRef.current) return;
const node = document.createElement("span");
node.style.color = "transparent";
node.style.position = "absolute";
node.textContent = "A".repeat(precision);
terminalRef.current.appendChild(node);
setSize({
cols: Math.floor(
(terminalRef.current.offsetWidth - 4) /
(node.offsetWidth / precision),
),
rows: Math.floor(
(terminalRef.current.offsetHeight - 4) / node.offsetHeight,
),
});
node.remove();
};
calculateSize();
setTimeout(() => calculateSize(), 1);
window.addEventListener("resize", calculateSize);
return () => {
window.removeEventListener("resize", calculateSize);
};
}, []);
return (
<TerminalContextProvider value={size}>
<div
ref={terminalRef}
className={clsx(
"overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
props.className,
)}
style={{ backdropFilter: "blur(2px)" }}
>
{size && props.children}
</div>
</TerminalContextProvider>
);
};

42
src/context/AppContext.tsx Normal file
View File

@@ -0,0 +1,42 @@
/* eslint-disable react-refresh/only-export-components */
import {
createContext,
useEffect,
useContext,
useState,
type ReactNode,
} from "react";
import axios from "axios";
import { type Manifest } from "~/utils/types";
const AppContext = createContext<Manifest | null>(null);
export const AppContextProvider = (props: {
children: Array<ReactNode> | ReactNode;
}) => {
const [manifest, setManifest] = useState<Manifest | null>(null);
useEffect(() => {
void axios
.get<Manifest>(
"https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
)
.then(x => {
setManifest(x.data);
console.log(x.data);
});
}, []);
return (
<AppContext.Provider value={manifest}>
{manifest && props.children}
</AppContext.Provider>
);
};
export const useApp = () => {
const context = useContext(AppContext);
if (!context) throw new Error("useApp must be used inside the app lol");
return context;
};

16
src/context/TerminalContext.tsx Normal file
View File

@@ -0,0 +1,16 @@
/* eslint-disable react-refresh/only-export-components */
import { createContext, useContext } from "react";
const TerminalContext = createContext<
{ cols: number; rows: number } | undefined
>(undefined);
export const TerminalContextProvider = TerminalContext.Provider;
export const useTerminal = () => {
const context = useContext(TerminalContext);
if (!context)
throw new Error("useTerminal must be used inside a Terminal component");
return context;
};

68
src/index.css
View File

@@ -1,68 +0,0 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

48
src/index.scss Normal file
View File

@@ -0,0 +1,48 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
font-family: mono;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
}
@font-face {
font-family: "JetBrainsMono";
src:
url("/fonts/JetBrainsMonoNFM-Bold.woff2") format("woff2"),
url("/fonts/JetBrainsMonoNFM-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrainsMono";
src:
url("/fonts/JetBrainsMonoNFM-Regular.woff2") format("woff2"),
url("/fonts/JetBrainsMonoNFM-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrainsMono";
src:
url("/fonts/JetBrainsMonoNFM-Medium.woff2") format("woff2"),
url("/fonts/JetBrainsMonoNFM-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}

2
src/main.tsx
View File

@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App.tsx"; import App from "./App.tsx";
import "./index.css"; import "./index.scss";
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>

32
src/utils/filesystem.ts Normal file
View File

@@ -0,0 +1,32 @@
import { type Cell } from "./terminal/cell";
import { theme } from "./terminal/theme";
export const FILE_STYLES = {
directory: {
char: "\ue6ad", // \ue6ad ||| \ueaf6
foreground: theme.blue,
},
md: {
char: "\ue73e",
foreground: theme.blue,
},
asc: {
char: "\uf43d",
foreground: theme.yellow,
},
} as const satisfies Record<string, Cell>;
export type FileType = keyof typeof FILE_STYLES;
export type File = {
name: string;
} & (
| {
type: Exclude<FileType, "directory">;
}
| {
type: "directory";
children: Array<File>;
folded: boolean;
}
);

7
src/utils/math.ts Normal file
View File

@@ -0,0 +1,7 @@
export const clamp = (v: number, min: number, max: number): number =>
Math.min(Math.max(min, v), max);
export const clamp01 = (v: number): number => clamp(v, 0, 1);
export const floorAll = (...xs: Array<number>): Array<number> =>
xs.map(Math.floor);

9
src/utils/terminal/cell.ts Normal file
View File

@@ -0,0 +1,9 @@
export type Cell = {
char: string;
} & CellStyle;
export type CellStyle = Partial<{
foreground: string;
background: string;
fontWeight: number;
}>;

7
src/utils/terminal/element.ts Normal file
View File

@@ -0,0 +1,7 @@
import { type Cell } from "./cell";
export interface TerminalElement {
readonly data: Array<Array<Cell>>;
readonly width: number;
readonly height: number;
}

38
src/utils/terminal/elements/box.ts Normal file
View File

@@ -0,0 +1,38 @@
import { type Cell, type CellStyle } from "../cell";
import { TerminalRenderer } from "../renderer";
import { type TerminalElement } from "../element";
export class TerminalBoxElement implements TerminalElement {
public readonly data: Array<Array<Cell>>;
constructor(
public readonly width: number,
public readonly height: number,
style: CellStyle = {},
) {
const canvas = new TerminalRenderer(width, height, style);
if (width == 1 && height > 1) {
for (let y = 0; y < height - 1; y++) {
canvas.write(0, y, "│");
}
} else if (height == 1 && width > 1) {
canvas.write(0, 0, "─".repeat(width - 2));
} else {
canvas.write(0, 0, "┌");
canvas.write(width - 1, 0, "┐");
canvas.write(0, height - 1, "└");
canvas.write(width - 1, height - 1, "┘");
canvas.write(1, 0, "─".repeat(width - 2));
canvas.write(1, height - 1, "─".repeat(width - 2));
for (let y = 1; y < height - 1; y++) {
canvas.write(0, y, "│");
canvas.write(width - 1, y, "│");
}
}
this.data = canvas.data;
}
}

124
src/utils/terminal/renderer.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { type ReactNode } from "react";
import { floorAll } from "../math";
import { type CellStyle, type Cell } from "./cell";
import { type TerminalElement } from "./element";
export class TerminalRenderer implements TerminalElement {
public readonly data: Array<Array<Cell>>;
constructor(
public readonly width: number,
public readonly height: number,
public readonly defaultStyle: CellStyle = {},
) {
[this.width, this.height] = floorAll(this.width, this.height);
this.data = new Array(this.height).fill(0).map(() =>
new Array<Cell>(this.width).fill({
char: " ",
...defaultStyle,
}),
);
}
apply(x: number, y: number, cell: Partial<Cell>): void {
[x, y] = floorAll(x, y);
if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
this.data[y][x] = {
...this.data[y][x],
...cell,
};
}
write(x: number, y: number, text: string, style: CellStyle = {}): void {
[x, y] = floorAll(x, y);
for (let i = 0; i < text.length; i++) {
this.apply(x + i, y, {
char: text[i],
...style,
});
}
}
writeFilter(
x: number,
y: number,
text: string,
filter: (cell: Cell) => Cell,
): void {
[x, y] = floorAll(x, y);
for (let i = 0; i < text.length; i++) {
this.apply(x + i, y, {
...filter(this.data[y][x + i]),
char: text[i],
});
}
}
writeElement(canvas: TerminalElement, dx: number, dy: number): void {
[dx, dy] = floorAll(dx, dy);
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
this.apply(dx + x, dy + y, canvas.data[y][x]);
}
}
}
subCanvas(
x: number,
y: number,
width: number,
height: number,
): TerminalRenderer {
[x, y, width, height] = floorAll(x, y, width, height);
const canvas = new TerminalRenderer(width, height);
for (let cy = 0; cy < height; cy++) {
for (let cx = 0; cx < width; cx++) {
canvas.apply(cx, cy, this.data[y + cy][x + cx]);
}
}
return canvas;
}
render(): Array<ReactNode> {
const nodes: Array<ReactNode> = [];
for (let y = 0; y < this.height; y++) {
for (let x = 0; x < this.width; x++) {
const cell = this.data[y][x];
/*
const span = document.createElement("span");
span.innerHTML = cell.char;
span.style.color = cell.foreground ?? "unset";
span.style.background = cell.background ?? "unset";
span.style.fontWeight = String(cell.fontWeight ?? "unset");
target.appendChild(span);
*/
nodes.push(
<span
key={`${x}-${y}`}
style={{
color: cell.foreground,
background: cell.background,
fontWeight: cell.fontWeight,
}}
>
{cell.char}
</span>,
);
}
nodes.push(<br key={y} />);
}
return nodes;
}
}

12
src/utils/terminal/theme.ts Normal file
View File

@@ -0,0 +1,12 @@
export const theme = {
black: "#45475a",
red: "#f38ba8",
green: "#a6e3a1",
yellow: "#f9e2af",
blue: "#89bafa",
magenta: "#f5c2e7",
cyan: "#94e2d5",
white: "#bac2de",
grey: "#585B70",
lightGrey: "#a6adc8",
};

6
src/utils/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export type Manifest = {
projects: Array<{
name: string;
files: Array<string>;
}>;
};

2
tailwind.config.ts
View File

@@ -2,7 +2,7 @@ import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme"; import { fontFamily } from "tailwindcss/defaultTheme";
const config = { const config = {
content: ["./src/**/*.tsx"], content: ["index.html", "./src/**/*.tsx"],
theme: { theme: {
extend: { extend: {
fontSize: { fontSize: {

7
tsconfig.json
View File

@@ -18,7 +18,12 @@
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}, },
"include": ["src"], "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]

3
vite.config.ts
View File

@@ -1,8 +1,9 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc"; import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
const config = defineConfig({ const config = defineConfig({
plugins: [react()], plugins: [tsconfigPaths(), react()],
}); });
export default config; export default config;