diff --git a/index.html b/index.html
index e4b78ea..4f92c7f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Vite + React + TS
+ pihkaal
diff --git a/package.json b/package.json
index 90ca0ab..8c321dc 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"axios": "^1.6.7",
"react": "18.2.0",
"react-dom": "18.2.0",
+ "vite-tsconfig-paths": "^4.3.1",
"zod": "^3.22.4"
},
"devDependencies": {
@@ -33,6 +34,7 @@
"postcss": "^8.4.31",
"prettier": "^3.1.0",
"prettier-plugin-tailwindcss": "^0.5.11",
+ "sass": "^1.70.0",
"tailwindcss": "^3.3.5",
"typescript": "^5.1.6",
"vite": "^5.0.12"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 752eea3..f9099e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
react-dom:
specifier: 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:
specifier: ^3.22.4
version: 3.22.4
@@ -67,6 +70,9 @@ devDependencies:
prettier-plugin-tailwindcss:
specifier: ^0.5.11
version: 0.5.11(prettier@3.1.1)
+ sass:
+ specifier: ^1.70.0
+ version: 1.70.0
tailwindcss:
specifier: ^3.3.5
version: 3.4.1
@@ -75,7 +81,7 @@ devDependencies:
version: 5.3.3
vite:
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:
@@ -102,7 +108,6 @@ packages:
cpu: [ppc64]
os: [aix]
requiresBuild: true
- dev: true
optional: true
/@esbuild/android-arm64@0.19.12:
@@ -111,7 +116,6 @@ packages:
cpu: [arm64]
os: [android]
requiresBuild: true
- dev: true
optional: true
/@esbuild/android-arm@0.19.12:
@@ -120,7 +124,6 @@ packages:
cpu: [arm]
os: [android]
requiresBuild: true
- dev: true
optional: true
/@esbuild/android-x64@0.19.12:
@@ -129,7 +132,6 @@ packages:
cpu: [x64]
os: [android]
requiresBuild: true
- dev: true
optional: true
/@esbuild/darwin-arm64@0.19.12:
@@ -138,7 +140,6 @@ packages:
cpu: [arm64]
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/@esbuild/darwin-x64@0.19.12:
@@ -147,7 +148,6 @@ packages:
cpu: [x64]
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/@esbuild/freebsd-arm64@0.19.12:
@@ -156,7 +156,6 @@ packages:
cpu: [arm64]
os: [freebsd]
requiresBuild: true
- dev: true
optional: true
/@esbuild/freebsd-x64@0.19.12:
@@ -165,7 +164,6 @@ packages:
cpu: [x64]
os: [freebsd]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-arm64@0.19.12:
@@ -174,7 +172,6 @@ packages:
cpu: [arm64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-arm@0.19.12:
@@ -183,7 +180,6 @@ packages:
cpu: [arm]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-ia32@0.19.12:
@@ -192,7 +188,6 @@ packages:
cpu: [ia32]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-loong64@0.19.12:
@@ -201,7 +196,6 @@ packages:
cpu: [loong64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-mips64el@0.19.12:
@@ -210,7 +204,6 @@ packages:
cpu: [mips64el]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-ppc64@0.19.12:
@@ -219,7 +212,6 @@ packages:
cpu: [ppc64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-riscv64@0.19.12:
@@ -228,7 +220,6 @@ packages:
cpu: [riscv64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-s390x@0.19.12:
@@ -237,7 +228,6 @@ packages:
cpu: [s390x]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/linux-x64@0.19.12:
@@ -246,7 +236,6 @@ packages:
cpu: [x64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@esbuild/netbsd-x64@0.19.12:
@@ -255,7 +244,6 @@ packages:
cpu: [x64]
os: [netbsd]
requiresBuild: true
- dev: true
optional: true
/@esbuild/openbsd-x64@0.19.12:
@@ -264,7 +252,6 @@ packages:
cpu: [x64]
os: [openbsd]
requiresBuild: true
- dev: true
optional: true
/@esbuild/sunos-x64@0.19.12:
@@ -273,7 +260,6 @@ packages:
cpu: [x64]
os: [sunos]
requiresBuild: true
- dev: true
optional: true
/@esbuild/win32-arm64@0.19.12:
@@ -282,7 +268,6 @@ packages:
cpu: [arm64]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@esbuild/win32-ia32@0.19.12:
@@ -291,7 +276,6 @@ packages:
cpu: [ia32]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@esbuild/win32-x64@0.19.12:
@@ -300,7 +284,6 @@ packages:
cpu: [x64]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@@ -441,7 +424,6 @@ packages:
cpu: [arm]
os: [android]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-android-arm64@4.9.6:
@@ -449,7 +431,6 @@ packages:
cpu: [arm64]
os: [android]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-darwin-arm64@4.9.6:
@@ -457,7 +438,6 @@ packages:
cpu: [arm64]
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-darwin-x64@4.9.6:
@@ -465,7 +445,6 @@ packages:
cpu: [x64]
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.9.6:
@@ -473,7 +452,6 @@ packages:
cpu: [arm]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-arm64-gnu@4.9.6:
@@ -481,7 +459,6 @@ packages:
cpu: [arm64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-arm64-musl@4.9.6:
@@ -489,7 +466,6 @@ packages:
cpu: [arm64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-riscv64-gnu@4.9.6:
@@ -497,7 +473,6 @@ packages:
cpu: [riscv64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-x64-gnu@4.9.6:
@@ -505,7 +480,6 @@ packages:
cpu: [x64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-linux-x64-musl@4.9.6:
@@ -513,7 +487,6 @@ packages:
cpu: [x64]
os: [linux]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-win32-arm64-msvc@4.9.6:
@@ -521,7 +494,6 @@ packages:
cpu: [arm64]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-win32-ia32-msvc@4.9.6:
@@ -529,7 +501,6 @@ packages:
cpu: [ia32]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@rollup/rollup-win32-x64-msvc@4.9.6:
@@ -537,7 +508,6 @@ packages:
cpu: [x64]
os: [win32]
requiresBuild: true
- dev: true
optional: true
/@rushstack/eslint-patch@1.6.1:
@@ -676,7 +646,6 @@ packages:
/@types/estree@1.0.5:
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
- dev: true
/@types/json-schema@7.0.15:
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -690,7 +659,6 @@ packages:
resolution: {integrity: sha512-X36s5CXMrrJOs2lQCdDF68apW4Rfx9ixYMawlepwmE4Anezv/AV2LSpKD1Ub8DAc+urp5bk0BGZ6NtmBitfnsg==}
dependencies:
undici-types: 5.26.5
- dev: true
/@types/prop-types@15.7.11:
resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -860,7 +828,7 @@ packages:
vite: ^4 || ^5
dependencies:
'@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:
- '@swc/helpers'
dev: true
@@ -920,7 +888,6 @@ packages:
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
- dev: true
/arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
@@ -1076,7 +1043,6 @@ packages:
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
- dev: true
/brace-expansion@1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -1096,7 +1062,6 @@ packages:
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
- dev: true
/browserslist@4.22.2:
resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==}
@@ -1152,7 +1117,6 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.3
- dev: true
/clsx@2.1.0:
resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
@@ -1230,7 +1194,6 @@ packages:
optional: true
dependencies:
ms: 2.1.2
- dev: true
/deep-is@0.1.4:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -1434,7 +1397,6 @@ packages:
'@esbuild/win32-arm64': 0.19.12
'@esbuild/win32-ia32': 0.19.12
'@esbuild/win32-x64': 0.19.12
- dev: true
/escalade@3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -1770,7 +1732,6 @@ packages:
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
- dev: true
/find-up@5.0.0:
resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
@@ -1839,7 +1800,6 @@ packages:
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/function-bind@1.1.2:
@@ -1888,7 +1848,6 @@ packages:
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
- dev: true
/glob-parent@6.0.2:
resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -1957,6 +1916,10 @@ packages:
slash: 3.0.0
dev: true
+ /globrex@0.1.2:
+ resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+ dev: false
+
/gopd@1.0.1:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
dependencies:
@@ -2015,6 +1978,9 @@ packages:
engines: {node: '>= 4'}
dev: true
+ /immutable@4.3.5:
+ resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+
/import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -2074,7 +2040,6 @@ packages:
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
- dev: true
/is-boolean-object@1.1.2:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -2105,7 +2070,6 @@ packages:
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
- dev: true
/is-finalizationregistry@1.0.2:
resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
@@ -2130,7 +2094,6 @@ packages:
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
- dev: true
/is-map@2.0.2:
resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
@@ -2151,7 +2114,6 @@ packages:
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
- dev: true
/is-path-inside@3.0.3:
resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -2402,7 +2364,6 @@ packages:
/ms@2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
- dev: true
/ms@2.1.3:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -2420,7 +2381,6 @@ packages:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
- dev: true
/natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -2433,7 +2393,6 @@ packages:
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
- dev: true
/normalize-range@0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -2585,12 +2544,10 @@ packages:
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
- dev: true
/picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
- dev: true
/pify@2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
@@ -2670,7 +2627,6 @@ packages:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
- dev: true
/prelude-ls@1.2.1:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -2788,7 +2744,6 @@ packages:
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
- dev: true
/reflect.getprototypeof@1.0.4:
resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
@@ -2875,7 +2830,6 @@ packages:
'@rollup/rollup-win32-ia32-msvc': 4.9.6
'@rollup/rollup-win32-x64-msvc': 4.9.6
fsevents: 2.3.3
- dev: true
/run-parallel@1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -2902,6 +2856,15 @@ packages:
is-regex: 1.1.4
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:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
@@ -2973,7 +2936,6 @@ packages:
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
- dev: true
/string-width@4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -3140,7 +3102,6 @@ packages:
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
- dev: true
/ts-api-utils@1.0.3(typescript@5.3.3):
resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
@@ -3155,6 +3116,19 @@ packages:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
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:
resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
dependencies:
@@ -3218,7 +3192,6 @@ packages:
resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
engines: {node: '>=14.17'}
hasBin: true
- dev: true
/unbox-primitive@1.0.2:
resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
@@ -3231,7 +3204,6 @@ packages:
/undici-types@5.26.5:
resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
- dev: true
/update-browserslist-db@1.0.13(browserslist@4.22.2):
resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
@@ -3254,7 +3226,24 @@ packages:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
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==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
@@ -3286,9 +3275,9 @@ packages:
esbuild: 0.19.12
postcss: 8.4.33
rollup: 4.9.6
+ sass: 1.70.0
optionalDependencies:
fsevents: 2.3.3
- dev: true
/which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/App.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/App.tsx b/src/App.tsx
index a4f0798..c5c60fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,31 +1,39 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import "./App.css";
+import { MusicPlayer } from "./components/MusicPlayer";
+import { MusicVisualizer } from "./components/MusicVisualizer";
+import { Nvim } from "./components/Nvim/Nvim";
+import { Terminal } from "./components/Terminal";
+import { AppContextProvider } from "./context/AppContext";
function App() {
- const [count, setCount] = useState(0);
-
return (
- <>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/MusicPlayer.tsx b/src/components/MusicPlayer.tsx
new file mode 100644
index 0000000..b14f132
--- /dev/null
+++ b/src/components/MusicPlayer.tsx
@@ -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 {canvas.render()}
;
+};
diff --git a/src/components/MusicVisualizer.tsx b/src/components/MusicVisualizer.tsx
new file mode 100644
index 0000000..6a3f5c3
--- /dev/null
+++ b/src/components/MusicVisualizer.tsx
@@ -0,0 +1,5 @@
+import { type FunctionComponent } from "react";
+
+export const MusicVisualizer: FunctionComponent = () => (
+
+);
diff --git a/src/components/Nvim/Nvim.tsx b/src/components/Nvim/Nvim.tsx
new file mode 100644
index 0000000..115d95e
--- /dev/null
+++ b/src/components/Nvim/Nvim.tsx
@@ -0,0 +1,19 @@
+import { NvimStatusBar } from "./NvimStatusBar";
+import { NvimTree } from "./NvimTree";
+
+export const Nvim = () => {
+ return (
+
+ );
+};
diff --git a/src/components/Nvim/NvimStatusBar.tsx b/src/components/Nvim/NvimStatusBar.tsx
new file mode 100644
index 0000000..f6ca985
--- /dev/null
+++ b/src/components/Nvim/NvimStatusBar.tsx
@@ -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 {canvas.render()}
;
+};
diff --git a/src/components/Nvim/NvimTree.tsx b/src/components/Nvim/NvimTree.tsx
new file mode 100644
index 0000000..6bd10af
--- /dev/null
+++ b/src/components/Nvim/NvimTree.tsx
@@ -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 => {
+ if (manifest === undefined) return [];
+
+ const files: Array = [];
+ 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) => {
+ 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 | 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 {canvas.render()}
;
+};
+
+/*
+ .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,
+ ),
+*/
diff --git a/src/components/Terminal.tsx b/src/components/Terminal.tsx
new file mode 100644
index 0000000..17d18d8
--- /dev/null
+++ b/src/components/Terminal.tsx
@@ -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(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 (
+
+
+ {size && props.children}
+
+
+ );
+};
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
new file mode 100644
index 0000000..7d30f50
--- /dev/null
+++ b/src/context/AppContext.tsx
@@ -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(null);
+
+export const AppContextProvider = (props: {
+ children: Array | ReactNode;
+}) => {
+ const [manifest, setManifest] = useState(null);
+
+ useEffect(() => {
+ void axios
+ .get(
+ "https://raw.githubusercontent.com/pihkaal/pihkaal/main/manifest.json",
+ )
+ .then(x => {
+ setManifest(x.data);
+ console.log(x.data);
+ });
+ }, []);
+
+ return (
+
+ {manifest && props.children}
+
+ );
+};
+
+export const useApp = () => {
+ const context = useContext(AppContext);
+ if (!context) throw new Error("useApp must be used inside the app lol");
+
+ return context;
+};
diff --git a/src/context/TerminalContext.tsx b/src/context/TerminalContext.tsx
new file mode 100644
index 0000000..9dd44b5
--- /dev/null
+++ b/src/context/TerminalContext.tsx
@@ -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;
+};
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 6119ad9..0000000
--- a/src/index.css
+++ /dev/null
@@ -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;
- }
-}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..0ddcb5d
--- /dev/null
+++ b/src/index.scss
@@ -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;
+}
diff --git a/src/main.tsx b/src/main.tsx
index f25366e..39e1049 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
-import "./index.css";
+import "./index.scss";
ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/utils/filesystem.ts b/src/utils/filesystem.ts
new file mode 100644
index 0000000..69844c2
--- /dev/null
+++ b/src/utils/filesystem.ts
@@ -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;
+
+export type FileType = keyof typeof FILE_STYLES;
+
+export type File = {
+ name: string;
+} & (
+ | {
+ type: Exclude;
+ }
+ | {
+ type: "directory";
+ children: Array;
+ folded: boolean;
+ }
+);
diff --git a/src/utils/math.ts b/src/utils/math.ts
new file mode 100644
index 0000000..62a509c
--- /dev/null
+++ b/src/utils/math.ts
@@ -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): Array =>
+ xs.map(Math.floor);
diff --git a/src/utils/terminal/cell.ts b/src/utils/terminal/cell.ts
new file mode 100644
index 0000000..f2984cc
--- /dev/null
+++ b/src/utils/terminal/cell.ts
@@ -0,0 +1,9 @@
+export type Cell = {
+ char: string;
+} & CellStyle;
+
+export type CellStyle = Partial<{
+ foreground: string;
+ background: string;
+ fontWeight: number;
+}>;
diff --git a/src/utils/terminal/element.ts b/src/utils/terminal/element.ts
new file mode 100644
index 0000000..2768d78
--- /dev/null
+++ b/src/utils/terminal/element.ts
@@ -0,0 +1,7 @@
+import { type Cell } from "./cell";
+
+export interface TerminalElement {
+ readonly data: Array>;
+ readonly width: number;
+ readonly height: number;
+}
diff --git a/src/utils/terminal/elements/box.ts b/src/utils/terminal/elements/box.ts
new file mode 100644
index 0000000..4c3cd0d
--- /dev/null
+++ b/src/utils/terminal/elements/box.ts
@@ -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>;
+
+ 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;
+ }
+}
diff --git a/src/utils/terminal/renderer.tsx b/src/utils/terminal/renderer.tsx
new file mode 100644
index 0000000..4917ce4
--- /dev/null
+++ b/src/utils/terminal/renderer.tsx
@@ -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>;
+
+ 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(this.width).fill({
+ char: " ",
+ ...defaultStyle,
+ }),
+ );
+ }
+
+ apply(x: number, y: number, cell: Partial): 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 {
+ const nodes: Array = [];
+
+ 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(
+
+ {cell.char}
+ ,
+ );
+ }
+
+ nodes.push(
);
+ }
+
+ return nodes;
+ }
+}
diff --git a/src/utils/terminal/theme.ts b/src/utils/terminal/theme.ts
new file mode 100644
index 0000000..24a741b
--- /dev/null
+++ b/src/utils/terminal/theme.ts
@@ -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",
+};
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..b35bd6a
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,6 @@
+export type Manifest = {
+ projects: Array<{
+ name: string;
+ files: Array;
+ }>;
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0d4950c..3011c77 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";
const config = {
- content: ["./src/**/*.tsx"],
+ content: ["index.html", "./src/**/*.tsx"],
theme: {
extend: {
fontSize: {
diff --git a/tsconfig.json b/tsconfig.json
index a7fc6fb..556f71e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,12 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+
+ "baseUrl": ".",
+ "paths": {
+ "~/*": ["./src/*"]
+ }
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
diff --git a/vite.config.ts b/vite.config.ts
index 689b0ce..1a3e353 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
+import tsconfigPaths from "vite-tsconfig-paths";
const config = defineConfig({
- plugins: [react()],
+ plugins: [tsconfigPaths(), react()],
});
export default config;
| |