Merge pull request #446 from pastemyst/fix/seo

fix: broken ssr
pastemyst · May 12, 2024 · ac1e6cf · ac1e6cf
2 parents 705e177 + 10c03ce
commit ac1e6cf
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 94 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,7 +15,6 @@
         "@sveltejs/adapter-auto": "^3.0.0",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "@types/dompurify": "^3.0.5",
         "@types/node": "^20.3.0",
         "@types/sortablejs": "^1.15.1",
         "@typescript-eslint/eslint-plugin": "^5.59.2",
@@ -43,7 +42,6 @@
         "@codemirror/view": "^6.16.0",
         "@lezer/highlight": "^1.1.6",
         "codemirror": "^6.0.1",
-        "dompurify": "^3.1.3",
         "frappe-charts": "^1.6.2",
         "highlight-words": "^1.2.2",
         "marked": "^12.0.2",

diff --git a/client/src/app.html b/client/src/app.html
@@ -24,8 +24,6 @@
             rel="stylesheet"
         />
 
-        <title>pastemyst</title>
-
         %sveltekit.head%
     </head>
 

diff --git a/client/src/app.scss b/client/src/app.scss
@@ -329,3 +329,48 @@ section {
         margin-bottom: 0.25rem;
     }
 }
+
+.markdown {
+    text-align: justify;
+    line-height: 1.5rem;
+    font-size: $fs-normal;
+
+    h1 {
+        margin-top: 0;
+    }
+
+    h1:first-child {
+        margin-top: 1rem;
+    }
+
+    h1,
+    h2,
+    h3 {
+        border-bottom: 1px solid var(--color-bg2);
+        padding-bottom: 0.5rem;
+        margin-top: 2rem;
+    }
+
+    blockquote {
+        border-left: 4px solid var(--color-secondary);
+        padding-left: 1rem;
+        margin-left: 0;
+    }
+
+    pre {
+        background-color: var(--color-bg1);
+        border-radius: $border-radius;
+        border: 1px solid var(--color-bg2);
+        line-height: initial;
+        padding: 1rem;
+
+        code {
+            border: none;
+            background-color: initial;
+        }
+    }
+
+    img {
+        max-width: 100%;
+    }
+}
diff --git a/client/src/lib/Markdown.svelte b/client/src/lib/Markdown.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import DOMPurify from "dompurify";
     import { marked } from "marked";
     import { gfmHeadingId } from "marked-gfm-heading-id";
 
@@ -10,53 +9,7 @@
     let markdownHtml = marked.parse(content, { gfm: true }) as string;
 </script>
 
-<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-{@html DOMPurify.sanitize(markdownHtml)}
-
-<style lang="scss">
-    :global(.markdown) {
-        padding: 1rem 2rem;
-        text-align: justify;
-        line-height: 1.5rem;
-        font-size: $fs-normal;
-
-        :global(h1) {
-            margin-top: 0;
-        }
-
-        :global(h1:first-child) {
-            margin-top: 1rem;
-        }
-
-        :global(h1),
-        :global(h2),
-        :global(h3) {
-            border-bottom: 1px solid var(--color-bg2);
-            padding-bottom: 0.5rem;
-            margin-top: 2rem;
-        }
-
-        :global(blockquote) {
-            border-left: 4px solid var(--color-secondary);
-            padding-left: 1rem;
-            margin-left: 0;
-        }
-
-        :global(pre) {
-            background-color: var(--color-bg1);
-            border-radius: $border-radius;
-            border: 1px solid var(--color-bg2);
-            line-height: initial;
-            padding: 1rem;
-
-            :global(code) {
-                border: none;
-                background-color: initial;
-            }
-        }
-
-        :global(img) {
-            max-width: 100%;
-        }
-    }
-</style>
+<div class="markdown">
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html markdownHtml}
+</div>
diff --git a/client/src/routes/+layout.svelte b/client/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
     import { activePastesStores, currentUserStore, versionStore } from "$lib/stores";
     import CommandPalette from "$lib/CommandPalette.svelte";
     import { Close, setBaseCommands, type Command } from "$lib/command";
-    import { afterNavigate, beforeNavigate, goto } from "$app/navigation";
+    import { beforeNavigate, goto } from "$app/navigation";
     import ThemeContext from "$lib/ThemeContext.svelte";
     import { env } from "$env/dynamic/public";
 
@@ -80,26 +80,18 @@
     beforeNavigate(() => {
         setBaseCommands(getCommands());
     });
-
-    let loaded = false;
-
-    afterNavigate(() => {
-        loaded = true;
-    });
 </script>
 
 <ThemeContext>
-    {#if loaded}
-        <div id="container">
-            <Header />
+    <div id="container">
+        <Header />
 
-            <main>
-                <slot />
-            </main>
+        <main>
+            <slot />
+        </main>
 
-            <Footer />
-        </div>
-    {/if}
+        <Footer />
+    </div>
 </ThemeContext>
 
 <CommandPalette />

diff --git a/client/src/routes/[paste]/+page.svelte b/client/src/routes/[paste]/+page.svelte
@@ -562,6 +562,10 @@
             }
         }
 
+        .markdown {
+            padding: 0rem 1rem;
+        }
+
         :global(.shiki),
         .markdown {
             border-bottom-left-radius: $border-radius;

diff --git a/client/src/routes/changelog/+page.svelte b/client/src/routes/changelog/+page.svelte
@@ -82,6 +82,5 @@
 
     .content {
         margin-top: 1.5rem;
-        font-size: $fs-normal;
     }
 </style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,8 +24,6 @@ @@
                 rel="stylesheet"
             />
-            <title>pastemyst</title>
             %sveltekit.head%
         </head>
@@ Expand Down @@