From 0b2a9f2383d629a6b73b1996132c1ea15a189483 Mon Sep 17 00:00:00 2001 From: Thilo Hohlt <123883702+thiloho@users.noreply.github.com> Date: Sat, 3 Aug 2024 13:49:41 +0200 Subject: [PATCH] Render HTML out of markdown content --- web-app/README.md | 2 +- web-app/package-lock.json | 104 ++++++++++++++++++ web-app/package.json | 7 +- web-app/src/app.css | 4 + web-app/src/app.html | 16 +++ .../src/lib/components/WebsiteEditor.svelte | 28 +++-- .../src/routes/(authenticated)/+page.svelte | 2 +- .../(authenticated)/account/+page.svelte | 18 +-- .../website/[websiteId]/+page.svelte | 4 +- .../website/[websiteId]/articles/+page.svelte | 2 +- .../articles/[articleId]/+page.svelte | 4 +- web-app/src/routes/+layout.svelte | 5 +- 12 files changed, 171 insertions(+), 25 deletions(-) diff --git a/web-app/README.md b/web-app/README.md index 5bef35f..756f04c 100644 --- a/web-app/README.md +++ b/web-app/README.md @@ -1 +1 @@ -# web-app \ No newline at end of file +# web-app diff --git a/web-app/package-lock.json b/web-app/package-lock.json index dd45dd8..3f011a7 100644 --- a/web-app/package-lock.json +++ b/web-app/package-lock.json @@ -7,11 +7,16 @@ "": { "name": "web-app", "version": "0.0.1", + "dependencies": { + "highlight.js": "^11.10.0", + "markdown-it": "^14.1.0" + }, "devDependencies": { "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/adapter-node": "^5.2.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@types/markdown-it": "^14.1.2", "@types/node": "^22.0.0", "prettier": "^3.1.1", "prettier-plugin-svelte": "^3.1.2", @@ -1022,6 +1027,31 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/node": { "version": "22.0.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.0.tgz", @@ -1109,6 +1139,12 @@ "node": ">= 8" } }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "license": "Python-2.0" + }, "node_modules/aria-query": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", @@ -1349,6 +1385,18 @@ "dev": true, "license": "MIT" }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/es6-promise": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz", @@ -1551,6 +1599,15 @@ "node": ">= 0.4" } }, + "node_modules/highlight.js": { + "version": "11.10.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz", + "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/import-meta-resolve": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz", @@ -1719,6 +1776,15 @@ "node": ">=6" } }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "license": "MIT", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/locate-character": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", @@ -1743,6 +1809,29 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "license": "MIT" + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -1992,6 +2081,15 @@ "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -2470,6 +2568,12 @@ "node": ">=14.17" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "license": "MIT" + }, "node_modules/undici-types": { "version": "6.11.1", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz", diff --git a/web-app/package.json b/web-app/package.json index 7b88ed7..9d981ed 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -16,6 +16,7 @@ "@sveltejs/adapter-node": "^5.2.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@types/markdown-it": "^14.1.2", "@types/node": "^22.0.0", "prettier": "^3.1.1", "prettier-plugin-svelte": "^3.1.2", @@ -24,5 +25,9 @@ "typescript": "^5.0.0", "vite": "^5.0.3" }, - "type": "module" + "type": "module", + "dependencies": { + "highlight.js": "^11.10.0", + "markdown-it": "^14.1.0" + } } diff --git a/web-app/src/app.css b/web-app/src/app.css index 78287ea..ebfe5c9 100644 --- a/web-app/src/app.css +++ b/web-app/src/app.css @@ -86,6 +86,10 @@ select { background-color: var(--bg-primary); } +textarea { + resize: vertical; +} + a { color: var(--color-accent); } diff --git a/web-app/src/app.html b/web-app/src/app.html index 84ffad1..16a0cf7 100644 --- a/web-app/src/app.html +++ b/web-app/src/app.html @@ -4,6 +4,22 @@ + + %sveltekit.head% diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte index 4b6b593..f5fd048 100644 --- a/web-app/src/lib/components/WebsiteEditor.svelte +++ b/web-app/src/lib/components/WebsiteEditor.svelte @@ -1,5 +1,7 @@
@@ -21,22 +37,18 @@
- {@html previewContent} + {@html md.render(previewContent)}
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte index 3cb29a0..416fff8 100644 --- a/web-app/src/routes/(authenticated)/+page.svelte +++ b/web-app/src/routes/(authenticated)/+page.svelte @@ -79,7 +79,7 @@
- {#each data.websites as { id, content_type, title, created_at }} + {#each data.websites as { id, content_type, title, created_at } (id)}

{title} diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte index 8c5fb3f..0c6e47b 100644 --- a/web-app/src/routes/(authenticated)/account/+page.svelte +++ b/web-app/src/routes/(authenticated)/account/+page.svelte @@ -11,14 +11,16 @@

Overview

-

- Username: - {data.user.username} -

-

- ID: - {data.user.id} -

+
    +
  • + Id: + {data.user.id} +
    • +
  • + Username: + {data.user.username} +
    • +
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte index 8fde115..29972d5 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte @@ -98,7 +98,7 @@ > @@ -119,7 +119,7 @@ > diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte index 95b63c2..89522fa 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte @@ -68,7 +68,7 @@ - {#each data.articles as { id, title }} + {#each data.articles as { id, title } (id)}

{title}

diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte index 713eb8e..aea77df 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte @@ -32,7 +32,7 @@ diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte index 59d551f..3c404cc 100644 --- a/web-app/src/routes/+layout.svelte +++ b/web-app/src/routes/+layout.svelte @@ -67,8 +67,9 @@ .editor { inline-size: min(100% - 2rem, 1536px); block-size: calc(100vh - 7rem); - border: var(--border-primary); - display: flex; + border-block-start: var(--border-primary); + display: grid; + grid-template-columns: 1fr 1fr; padding-block: 0; }