diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | bun.lock | 98 | ||||
| -rw-r--r-- | design/index.html | 2 | ||||
| -rw-r--r-- | design/log.html | 2 | ||||
| -rw-r--r-- | design/styles.css (renamed from design/style.css) | 0 | ||||
| -rw-r--r-- | frontend/scss/general.scss | 157 | ||||
| -rw-r--r-- | frontend/scss/home.scss | 22 | ||||
| -rw-r--r-- | frontend/scss/main.scss | 24 | ||||
| -rw-r--r-- | frontend/scss/special.scss | 50 | ||||
| -rw-r--r-- | index.ts | 1 | ||||
| -rw-r--r-- | package.json | 23 | ||||
| -rw-r--r-- | tsconfig.json | 29 |
12 files changed, 408 insertions, 2 deletions
@@ -35,3 +35,5 @@ I made my custom parser because I have extended its specification. The backend is in `backend`. It uses `github.com/go-chi/chi/v5`. +The frontend stuff is in `frontend`. + diff --git a/bun.lock b/bun.lock new file mode 100644 index 0000000..3269829 --- /dev/null +++ b/bun.lock @@ -0,0 +1,98 @@ +{ + "lockfileVersion": 1, + "workspaces": { + "": { + "name": "small-web", + "dependencies": { + "reset-css": "^5.0.2", + "sass": "^1.93.2", + "scss": "^0.2.4", + }, + "devDependencies": { + "@types/bun": "latest", + }, + "peerDependencies": { + "typescript": "^5", + }, + }, + }, + "packages": { + "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="], + + "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="], + + "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="], + + "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="], + + "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="], + + "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="], + + "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="], + + "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="], + + "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="], + + "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="], + + "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="], + + "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="], + + "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="], + + "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="], + + "@types/bun": ["@types/bun@1.2.23", "", { "dependencies": { "bun-types": "1.2.23" } }, "sha512-le8ueOY5b6VKYf19xT3McVbXqLqmxzPXHsQT/q9JHgikJ2X22wyTW3g3ohz2ZMnp7dod6aduIiq8A14Xyimm0A=="], + + "@types/node": ["@types/node@24.6.2", "", { "dependencies": { "undici-types": "~7.13.0" } }, "sha512-d2L25Y4j+W3ZlNAeMKcy7yDsK425ibcAOO2t7aPTz6gNMH0z2GThtwENCDc0d/Pw9wgyRqE5Px1wkV7naz8ang=="], + + "@types/react": ["@types/react@19.2.0", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-1LOH8xovvsKsCBq1wnT4ntDUdCJKmnEakhsuoUSy6ExlHCkGP2hqnatagYTgFk6oeL0VU31u7SNjunPN+GchtA=="], + + "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="], + + "bun-types": ["bun-types@1.2.23", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-R9f0hKAZXgFU3mlrA0YpE/fiDvwV0FT9rORApt2aQVWSuJDzZOyB5QLc0N/4HF57CS8IXJ6+L5E4W1bW6NS2Aw=="], + + "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="], + + "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="], + + "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], + + "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], + + "immutable": ["immutable@5.1.3", "", {}, "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg=="], + + "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], + + "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="], + + "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="], + + "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="], + + "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="], + + "ometa": ["ometa@0.2.2", "", {}, "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng=="], + + "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="], + + "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="], + + "reset-css": ["reset-css@5.0.2", "", {}, "sha512-YtgUGSq5z5W0NPSjsBW7ys7rtWa8P8AiE7S6Fg3d1TQCPpAodgYyLuZYlU0AOsLtprk/fC9ormHN/0pAavVIDw=="], + + "sass": ["sass@1.93.2", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg=="], + + "scss": ["scss@0.2.4", "", { "dependencies": { "ometa": "0.2.2" } }, "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A=="], + + "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], + + "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="], + + "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="], + + "undici-types": ["undici-types@7.13.0", "", {}, "sha512-Ov2Rr9Sx+fRgagJ5AX0qvItZG/JKKoBRAVITs1zk7IqZGTJUwgUr7qoYBpWwakpWilTZFM98rG/AFRocu10iIQ=="], + } +} diff --git a/design/index.html b/design/index.html index ed27fd1..e42aa98 100644 --- a/design/index.html +++ b/design/index.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>anhgelus</title> <link href="reset.css" rel="stylesheet"> - <link href="style.css" rel="stylesheet"> + <link href="styles.css" rel="stylesheet"> </head> <body> <header> diff --git a/design/log.html b/design/log.html index 709e918..b95be46 100644 --- a/design/log.html +++ b/design/log.html @@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>anhgelus - log entry - Title</title> <link href="reset.css" rel="stylesheet"> - <link href="style.css" rel="stylesheet"> + <link href="styles.css" rel="stylesheet"> </head> <body> <header> diff --git a/design/style.css b/design/styles.css index 6b0e1fb..6b0e1fb 100644 --- a/design/style.css +++ b/design/styles.css diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss new file mode 100644 index 0000000..b9cd31a --- /dev/null +++ b/frontend/scss/general.scss @@ -0,0 +1,157 @@ +body { + font-family: "Raveo Variable", Raveo, "Inter Variable", Inter, sans-serif; + + background: var(--color-dark); + color: var(--color-light); + + padding: 2rem; +} + +body * { + line-height: 1.4em; +} + +main, article { + max-width: var(--width-content); + margin: 0 auto; +} + +h1, h2, h3 { + font-weight: 500; + + margin-bottom: 0.5rem; +} + +h1 { + font-size: 2rem; + font-weight: 600; +} + +h2 { + font-size: 1.66rem; + + margin-top: calc(var(--margin-base) + 1rem); +} + +h3 { + font-size: 1.33rem; + + margin-top: calc(var(--margin-base) + 0.5rem); +} + +p { + margin-bottom: var(--margin-base); +} + +a { + color: var(--color-rose); + text-decoration: underline; + + &:hover { + background: var(--color-light-rose); + } +} + +em, cite { + font-style: italic; +} + +b { + background: var(--color-light-rose); + font-weight: 500; + + padding: 0.05em 0.1em; +} + +ul, ol { + margin-top: -0.5rem; + margin-bottom: var(--margin-base - 0.5rem); + margin-left: 1rem; + + list-style-position: outside; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: roman; +} + +li { + margin-bottom: 0.25rem; +} + +.quote { + font-size: var(--font-size-tiny); +} + +blockquote { + padding: 0.5rem 2rem; + margin-bottom: 0.25rem; + + color: var(--color-gray); + + border-left: var(--color-rose) solid 0.25em; +} + +figure { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; + + text-align: center; + + margin-bottom: var(--margin-base); + + & a, img { + max-height: max(60vh, 400px); + max-width: 100%; + display: block; + + &.large { + --max-width: var(--width-deco); + --width: min(calc(100vw - 4rem), var(--max-width)); + margin-left: max(-15%, calc((100% - var(--width))/2)); + width: var(--max-width); + max-width: var(--width); + max-height: none; + } + } +} + +figcaption { + font-size: var(--font-size-tiny); + + color: var(--color-gray); +} + +code, pre { + background: rgba(0, 0, 0, 0.4); +} + +code { + padding: 0.05em 0.1em; + + font-family: monospace; + font-size: var(--font-size-tiny); + + color: var(--color-gray); + border: var(--color-light) 1px solid; +} + +pre { + border: var(--color-light) 2px solid; + + margin: 0 -1rem var(--margin-base) -1rem; + padding: 0.5rem 1rem; + + & code { + padding: 0; + + background: none; + border: none; + } +}
\ No newline at end of file diff --git a/frontend/scss/home.scss b/frontend/scss/home.scss new file mode 100644 index 0000000..bb64a95 --- /dev/null +++ b/frontend/scss/home.scss @@ -0,0 +1,22 @@ +.introduction { + margin: var(--margin-header) 0; +} + +article article { + margin-bottom: var(--margin-header); + &:last-child { + margin-bottom: 0; + } +} + +.pagination { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: var(--margin-base); + + & p { + margin-bottom: 0; + } +} diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss new file mode 100644 index 0000000..e89d4e7 --- /dev/null +++ b/frontend/scss/main.scss @@ -0,0 +1,24 @@ +@use "../../node_modules/reset-css/reset.css"; + +:root { + --color-dark: hsl(202, 25%, 9%); + --color-light: #EFF7F6; + --color-gray: #BCB3BB; /* quote and legend */ + --color-rose: #F2B5D4; /* link accent */ + --color-light-rose: hsl(330, 55%, 70%, 0.2); /* link accent hover and highlight */ + + --font-size-tiny: 0.85rem; /* quote, legend, code */ + + --width-content: 700px; /* main, article */ + --width-deco: 900px; /* header, footer, large image */ + --height-header: 8rem; /* header, footer, introduction */ + + --margin-base: 1.5rem; + --margin-header: calc(var(--height-header) / 2); + + font-size: 20px; +} + +@use "general"; +@use "special"; +@use "home"; diff --git a/frontend/scss/special.scss b/frontend/scss/special.scss new file mode 100644 index 0000000..1d92eb3 --- /dev/null +++ b/frontend/scss/special.scss @@ -0,0 +1,50 @@ +header { + max-width: var(--width-deco); + height: var(--height-header); + + margin: 0 auto var(--margin-header) auto; + padding-bottom: 2rem; + + display: flex; + flex-direction: row; + gap: 2rem; + + border-bottom: var(--color-light) 2px solid; + + @media only screen and (max-width: 600px) { + flex-direction: column; + height: auto; + min-height: var(--height-header); + & img { + width: max(33%, 128px); + margin: 0 auto; + } + } + + & nav { + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 0.5rem; + + & a { + display: block; + + min-width: 8rem; + + font-family: monospace; + } + } +} + +footer { + max-width: var(--width-deco); + height: var(--height-header); + + margin: var(--margin-header) auto 0 auto; + padding-top: 2rem; + + border-top: var(--color-light) 2px solid; + + font-size: var(--font-size-tiny); +}
\ No newline at end of file diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..f67b2c6 --- /dev/null +++ b/index.ts @@ -0,0 +1 @@ +console.log("Hello via Bun!");
\ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..1cf5eb4 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "small-web", + "module": "index.ts", + "type": "module", + "private": true, + "scripts": { + "build:sass": "sass --no-source-map --style=compressed frontend/scss/main.scss dist/styles.css", + "watch:sass": "sass --watch frontend/scss/main.scss dist/styles.css", + "build:js": "bun build ./index.ts --outdir ./dist --minify", + "build": "bun run build:sass && bun run build:js" + }, + "devDependencies": { + "@types/bun": "latest" + }, + "peerDependencies": { + "typescript": "^5" + }, + "dependencies": { + "reset-css": "^5.0.2", + "sass": "^1.93.2", + "scss": "^0.2.4" + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bfa0fea --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + // Environment setup & latest features + "lib": ["ESNext"], + "target": "ESNext", + "module": "Preserve", + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedIndexedAccess": true, + "noImplicitOverride": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + } +} |