Render HTML out of markdown content

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",

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"
+  }
 }

web-app/src/app.css

@@ -86,6 +86,10 @@ select {
   background-color: var(--bg-primary);
 }
 
+textarea {
+  resize: vertical;
+}
+
 a {
   color: var(--color-accent);
 }

web-app/src/app.html

@@ -4,6 +4,22 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      media="(prefers-color-scheme: light)"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css"
+      integrity="sha512-0aPQyyeZrWj9sCA46UlmWgKOP0mUipLQ6OZXu8l4IcAmD2u31EPEy9VcIMvl7SoAaKe8bLXZhYoMaE/in+gcgA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      media="(prefers-color-scheme: dark)"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"
+      integrity="sha512-rO+olRTkcf304DQBxSWxln8JXCzTHlKnIdnMUwYvQa9/Jd4cQaNkItIUj6Z4nvW1dqK0SKXLbn9h4KwZTNtAyw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">

web-app/src/lib/components/WebsiteEditor.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import markdownit from "markdown-it";
+  import hljs from "highlight.js";
 
   const { id, title, children, previewContent } = $props<{
     id: string;
@@ -7,6 +9,20 @@
     children: Snippet;
     previewContent: string;
   }>();
+
+  const md = markdownit({
+    linkify: true,
+    typographer: true,
+    highlight: (str, lang) => {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return hljs.highlight(str, { language: lang }).value;
+        } catch (_) {}
+      }
+
+      return "";
+    }
+  });
 </script>
 
 <div class="operations">
@@ -21,22 +37,18 @@
 </div>
 
 <div class="preview">
-  {@html previewContent}
+  {@html md.render(previewContent)}
 </div>
 
 <style>
   .operations,
   .preview {
     padding: 1rem;
-    min-inline-size: 15rem;
+    overflow-y: auto;
-    block-size: 100%;
   }
 
   .operations {
     border-inline-end: var(--border-primary);
-    resize: horizontal;
-    overflow-y: auto;
-    inline-size: 50%;
   }
 
   .operations__nav {
@@ -51,6 +63,8 @@
   }
 
   .preview {
-    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 </style>

web-app/src/routes/(authenticated)/+page.svelte

@@ -79,7 +79,7 @@
     </form>
 
     <div class="website-grid">
-      {#each data.websites as { id, content_type, title, created_at }}
+      {#each data.websites as { id, content_type, title, created_at } (id)}
         <article class="website-card">
           <h3>
             <a href="/website/{id}">{title}</a>

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -11,14 +11,16 @@
 <section>
   <h2>Overview</h2>
 
-  <p>
+  <ul>
+    <li>
+      <strong>Id:</strong>
+      {data.user.id}
+    </li>
+    <li>
       <strong>Username:</strong>
       {data.user.username}
-  </p>
+    </li>
-  <p>
+  </ul>
-    <strong>ID:</strong>
-    {data.user.id}
-  </p>
 </section>
 
 <section>

web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte

@@ -98,7 +98,7 @@
     >
       <label>
         Main content:
-        <textarea name="main-content">{data.home.main_content}</textarea>
+        <textarea name="main-content" rows="20">{data.home.main_content}</textarea>
       </label>
 
       <button type="submit">Submit</button>
@@ -119,7 +119,7 @@
     >
       <label>
         Additional text:
-        <textarea name="additional-text">{data.footer.additional_text}</textarea>
+        <textarea name="additional-text" rows="5">{data.footer.additional_text}</textarea>
       </label>
 
       <button type="submit">Submit</button>

web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte

@@ -68,7 +68,7 @@
         <button type="submit">Submit</button>
       </form>
 
-      {#each data.articles as { id, title }}
+      {#each data.articles as { id, title } (id)}
         <article class="article-card">
           <h3>{title}</h3>
 

web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte

@@ -32,7 +32,7 @@
       </label>
       <label>
         Description:
-        <textarea name="description">{data.article.meta_description}</textarea>
+        <textarea name="description" rows="5">{data.article.meta_description}</textarea>
       </label>
       <label>
         Author:
@@ -48,7 +48,7 @@
       </label>
       <label>
         Main content:
-        <textarea name="main-content">{data.article.main_content}</textarea>
+        <textarea name="main-content" rows="20">{data.article.main_content}</textarea>
       </label>
 
       <button type="submit">Submit</button>

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);
+    border-block-start: var(--border-primary);
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     padding-block: 0;
   }
 </style>