Render HTML out of markdown content

2025-11-22 10:51:36 +01:00 · 2024-08-03 13:49:41 +02:00
parent d306872179
commit 0b2a9f2383
12 changed files with 171 additions and 25 deletions
--- 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);
 }
--- a/web-app/src/app.html
+++ b/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">
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/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;
-    block-size: 100%;
+    overflow-y: auto;
  }

  .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>
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/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>
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/web-app/src/routes/(authenticated)/account/+page.svelte
@@ -11,14 +11,16 @@
 <section>
  <h2>Overview</h2>

-  <p>
-    <strong>Username:</strong>
-    {data.user.username}
-  </p>
-  <p>
-    <strong>ID:</strong>
-    {data.user.id}
-  </p>
+  <ul>
+    <li>
+      <strong>Id:</strong>
+      {data.user.id}
+    </li>
+    <li>
+      <strong>Username:</strong>
+      {data.user.username}
+    </li>
+  </ul>
 </section>

 <section>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/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>
--- 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 @@
        <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>

--- 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 @@
      </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>
--- 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;
  }
 </style>