From aed37d6698c8260aa4f9320576f5641811fe6939 Mon Sep 17 00:00:00 2001 From: DarkCat09 Date: Tue, 15 Aug 2023 16:57:50 +0400 Subject: [PATCH] Static content; CSS: dark theme, improvements --- package-lock.json | 158 ++++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + src/app.ts | 11 ++- static/common.css | 45 +++++++++++++ static/index.css | 23 +++++++ templates/get.ejs | 1 + templates/index.ejs | 35 +--------- 7 files changed, 233 insertions(+), 41 deletions(-) create mode 100644 static/common.css create mode 100644 static/index.css diff --git a/package-lock.json b/package-lock.json index ff5ec40..0345bc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@fastify/static": "^6.10.2", "@fastify/view": "^8.0.0", "@mozilla/readability": "^0.4.4", "axios": "^1.4.0", @@ -101,6 +102,14 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fastify/accept-negotiator": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz", + "integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==", + "engines": { + "node": ">=14" + } + }, "node_modules/@fastify/ajv-compiler": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/@fastify/ajv-compiler/-/ajv-compiler-3.5.0.tgz", @@ -149,6 +158,69 @@ "fast-json-stringify": "^5.7.0" } }, + "node_modules/@fastify/send": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@fastify/send/-/send-2.1.0.tgz", + "integrity": "sha512-yNYiY6sDkexoJR0D8IDy3aRP3+L4wdqCpvx5WP+VtEU58sn7USmKynBzDQex5X42Zzvw2gNzzYgP90UfWShLFA==", + "dependencies": { + "@lukeed/ms": "^2.0.1", + "escape-html": "~1.0.3", + "fast-decode-uri-component": "^1.0.1", + "http-errors": "2.0.0", + "mime": "^3.0.0" + } + }, + "node_modules/@fastify/static": { + "version": "6.10.2", + "resolved": "https://registry.npmjs.org/@fastify/static/-/static-6.10.2.tgz", + "integrity": "sha512-UoaMvIHSBLCZBYOVZwFRYqX2ufUhd7FFMYGDeSf0Z+D8jhYtwljjmuQGuanUP8kS4y/ZEV1a8mfLha3zNwsnnQ==", + "dependencies": { + "@fastify/accept-negotiator": "^1.0.0", + "@fastify/send": "^2.0.0", + "content-disposition": "^0.5.3", + "fastify-plugin": "^4.0.0", + "glob": "^8.0.1", + "p-limit": "^3.1.0", + "readable-stream": "^4.0.0" + } + }, + "node_modules/@fastify/static/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@fastify/static/node_modules/glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@fastify/static/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/@fastify/view": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@fastify/view/-/view-8.0.0.tgz", @@ -210,6 +282,14 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@lukeed/ms": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@lukeed/ms/-/ms-2.0.1.tgz", + "integrity": "sha512-Xs/4RZltsAL7pkvaNStUQt7netTkyxrS0K+RILcVr3TRMS/ToOg4I6uNfhB9SlGsnWBym4U+EaXq0f0cEMNkHA==", + "engines": { + "node": ">=8" + } + }, "node_modules/@mozilla/readability": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.4.4.tgz", @@ -897,6 +977,17 @@ "version": "0.0.1", "license": "MIT" }, + "node_modules/content-disposition": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", + "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/cookie": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", @@ -980,6 +1071,14 @@ "node": ">=0.4.0" } }, + "node_modules/depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/diff": { "version": "4.0.2", "dev": true, @@ -1063,6 +1162,11 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==" + }, "node_modules/escape-string-regexp": { "version": "4.0.0", "dev": true, @@ -1520,7 +1624,6 @@ }, "node_modules/fs.realpath": { "version": "1.0.0", - "dev": true, "license": "ISC" }, "node_modules/glob": { @@ -1614,6 +1717,21 @@ "node": ">=12" } }, + "node_modules/http-errors": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", + "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "dependencies": { + "depd": "2.0.0", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": "2.0.1", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/http-proxy-agent": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", @@ -1691,7 +1809,6 @@ }, "node_modules/inflight": { "version": "1.0.6", - "dev": true, "license": "ISC", "dependencies": { "once": "^1.3.0", @@ -1700,7 +1817,6 @@ }, "node_modules/inherits": { "version": "2.0.4", - "dev": true, "license": "ISC" }, "node_modules/ipaddr.js": { @@ -1917,6 +2033,17 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -1978,7 +2105,6 @@ }, "node_modules/once": { "version": "1.4.0", - "dev": true, "license": "ISC", "dependencies": { "wrappy": "1" @@ -2002,7 +2128,6 @@ }, "node_modules/p-limit": { "version": "3.1.0", - "dev": true, "license": "MIT", "dependencies": { "yocto-queue": "^0.1.0" @@ -2411,6 +2536,11 @@ "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz", "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==" }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + }, "node_modules/shebang-command": { "version": "2.0.0", "dev": true, @@ -2466,6 +2596,14 @@ "node": ">= 10.x" } }, + "node_modules/statuses": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", + "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/stream-combiner": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz", @@ -2567,6 +2705,14 @@ "node": ">=8.0" } }, + "node_modules/toidentifier": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", + "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "engines": { + "node": ">=0.6" + } + }, "node_modules/tough-cookie": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", @@ -2808,7 +2954,6 @@ }, "node_modules/wrappy": { "version": "1.0.2", - "dev": true, "license": "ISC" }, "node_modules/ws": { @@ -2858,7 +3003,6 @@ }, "node_modules/yocto-queue": { "version": "0.1.0", - "dev": true, "license": "MIT", "engines": { "node": ">=10" diff --git a/package.json b/package.json index 18433e0..1088754 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "description": "", "main": "dist/app.js", "dependencies": { + "@fastify/static": "^6.10.2", "@fastify/view": "^8.0.0", "@mozilla/readability": "^0.4.4", "axios": "^1.4.0", diff --git a/src/app.ts b/src/app.ts index a2675ee..fe0e852 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,7 +1,10 @@ import { IConfigService } from "./config/config.interface"; import { ConfigService } from "./config/config.service"; +import path from "path"; + import Fastify from "fastify"; +import fastifyStatic from "@fastify/static"; import fastifyView from "@fastify/view"; import ejs from "ejs"; @@ -21,7 +24,13 @@ class App { logger: true, }); - await fastify.register(fastifyView, { + fastify.register(fastifyStatic, { + root: path.join(__dirname, '..', 'static'), + prefix: '/static/', + }); + + fastify.register(fastifyView, { + root: path.join(__dirname, '..'), engine: { ejs: ejs, }, diff --git a/static/common.css b/static/common.css new file mode 100644 index 0000000..5f10ff9 --- /dev/null +++ b/static/common.css @@ -0,0 +1,45 @@ +* { + box-sizing: border-box; +} + +:root { + --bg: #fff; + --fg: #111; + + --link: hsl(207, 100%, 40%); + --link-hl: hsl(207, 100%, 20%); +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #222; + --fg: #eee; + + --link: hsl(207, 100%, 60%); + --link-hl: hsl(207, 100%, 80%); + } +} + +body { + margin: 0; + padding: 0; + + background: var(--bg); + color: var(--fg); + + font-family: system-ui, sans-serif; + font-size: 1.1rem; +} + +main { + max-width: 50rem; + width: fit-content; + margin: auto; +} + +a { + color: var(--link); +} +a:hover { + color: var(--link-hl); +} diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..53a2af3 --- /dev/null +++ b/static/index.css @@ -0,0 +1,23 @@ +main { + display: flex; + flex-direction: column; + align-items: center; +} + +.input-grid { + display: grid; + /* 2 columns: auto width, min-content width */ + grid-template-columns: auto min-content; + + width: fit-content; +} + +.input-row { + display: flex; + flex-direction: row; + align-items: center; +} + +#url { + width: 100%; +} diff --git a/templates/get.ejs b/templates/get.ejs index c2a64c9..39c762c 100644 --- a/templates/get.ejs +++ b/templates/get.ejs @@ -6,6 +6,7 @@ <%= parsed.title %> +

<%= parsed.title %>

diff --git a/templates/index.ejs b/templates/index.ejs index bd22cd1..3292c33 100644 --- a/templates/index.ejs +++ b/templates/index.ejs @@ -7,39 +7,8 @@ txt. main page - - + +