Allow removing images and wrap tables with scroll container

flake.nix

@@ -32,7 +32,7 @@
             shellHook = ''
               alias dbmate="${pkgs.dbmate}/bin/dbmate --no-dump-schema --url ${dbUrl "postgres"}?sslmode=disable"
               alias formatsql="${pkgs.pgformatter}/bin/pg_format -s 2 -f 2 -U 2 -i db/migrations/*.sql"
-              alias dbconnect="${pkgs.postgresql_16}/bin/psql ${dbUrl "postgres"}"
+              alias dbconnect="${pkgs.postgresql}/bin/psql ${dbUrl "postgres"}"
             '';
           };
           web = pkgs.mkShell {
@@ -76,7 +76,7 @@
                 jwtSecret = "BMlgCY9fEzmf7jhQpNnxlS6TM8E6xk2vS08C3ukm5LM2aTooaF5PfxT3o2K9uKzq";
               in
               "${pkgs.writeShellScriptBin "api-setup" ''
-                psql ${dbUrl "postgres"} \
+                ${pkgs.postgresql}/bin/psql ${dbUrl "postgres"} \
                   -c "ALTER DATABASE archtika SET \"app.jwt_secret\" TO '${jwtSecret}'" \
                   -c "ALTER DATABASE archtika SET \"app.website_max_storage_size\" TO ${toString settings.maxStorage}" \
                   -c "ALTER DATABASE archtika SET \"app.website_max_number_user\" TO ${toString settings.maxWebsites}"

nix/deploy/prod/default.nix

@@ -9,7 +9,7 @@ in
     ../../module.nix
   ];
 
-  networking.hostName = "archtika-qs";
+  networking.hostName = "archtika-demo";
 
   services.archtika = {
     enable = true;

nix/module.nix

@@ -240,6 +240,7 @@ in
         };
         serviceConfig = {
           ReadWritePaths = [ "/var/www/archtika-websites" ];
+          SystemCallFilter = [ "@system-service" ];
         };
       };
 

web-app/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { Marked } from "marked";
+import { Marked, Renderer } from "marked";
-import type { Renderer, Token } from "marked";
+import type { Token } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
 import DOMPurify from "isomorphic-dompurify";
@@ -40,6 +40,7 @@ const slugify = (string: string) => {
 
 const createMarkdownParser = (showToc = true) => {
   const marked = new Marked();
+  const renderer = new Renderer();
 
   marked.use({
     async: false,
@@ -58,6 +59,14 @@ const createMarkdownParser = (showToc = true) => {
     })
   );
 
+  marked.use({
+    renderer: {
+      table(...args) {
+        return `<div class="scroll-container">${renderer.table.apply(this, args)}</div>`;
+      }
+    }
+  });
+
   const gfmHeadingId = ({ prefix = "", showToc = true } = {}) => {
     const headings: { text: string; level: number; id: string }[] = [];
     const sectionStack: { level: number; id: string }[] = [];

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

@@ -72,6 +72,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeFavicon: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/settings?website_id=eq.${params.websiteId}`,
+      "PATCH",
+      {
+        body: {
+          favicon_image: null
+        },
+        successMessage: "Successfully removed favicon"
+      }
+    );
+  },
   updateHeader: async ({ request, fetch, params }) => {
     const data = await request.formData();
     const logoImage = data.get("logo-image") as File;
@@ -110,6 +123,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeLogoImage: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/header?website_id=eq.${params.websiteId}`,
+      "PATCH",
+      {
+        body: {
+          logo_image: null
+        },
+        successMessage: "Successfully removed logo image"
+      }
+    );
+  },
   updateHome: async ({ request, fetch, params }) => {
     const data = await request.formData();
 

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

@@ -91,6 +91,13 @@
               src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
               alt=""
             />
+            <form
+              method="POST"
+              action="?/removeFavicon"
+              use:enhance={enhanceForm({ reset: false, closeModal: true })}
+            >
+              <button type="submit">Remove</button>
+            </form>
           </Modal>
         {/if}
       </div>
@@ -138,6 +145,13 @@
               src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.header.logo_image}`}
               alt=""
             />
+            <form
+              method="POST"
+              action="?/removeLogoImage"
+              use:enhance={enhanceForm({ reset: false, closeModal: true })}
+            >
+              <button type="submit">Remove</button>
+            </form>
           </Modal>
         {/if}
       </div>

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

@@ -72,6 +72,19 @@ export const actions: Actions = {
       }
     );
   },
+  removeCoverImage: async ({ fetch, params }) => {
+    return await apiRequest(
+      fetch,
+      `${API_BASE_PREFIX}/article?id=eq.${params.articleId}`,
+      "PATCH",
+      {
+        body: {
+          cover_image: null
+        },
+        successMessage: "Successfully removed cover image"
+      }
+    );
+  },
   pasteImage: async ({ request, fetch, params }) => {
     const data = await request.formData();
     const file = data.get("file") as File;

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

@@ -107,6 +107,13 @@
                 src={`${data.API_BASE_PREFIX}/rpc/retrieve_file?id=${data.article.cover_image}`}
                 alt=""
               />
+              <form
+                method="POST"
+                action="?/removeCoverImage"
+                use:enhance={enhanceForm({ reset: false, closeModal: true })}
+              >
+                <button type="submit">Remove</button>
+              </form>
             </Modal>
           {/if}
         </div>