Ability to bulk import or export articles as gzip, handle domain prefix logic in API and other smaller improvements

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

@@ -1,6 +1,7 @@
 import type { Actions, PageServerLoad } from "./$types";
 import { API_BASE_PREFIX } from "$lib/server/utils";
 import { apiRequest } from "$lib/server/utils";
+import { parse } from "node:path";
 import type { Article, DocsCategory } from "$lib/db-schema";
 
 export const load: PageServerLoad = async ({ params, fetch, url, parent, locals }) => {
@@ -58,6 +59,7 @@ export const load: PageServerLoad = async ({ params, fetch, url, parent, locals
     website,
     home,
     permissionLevel,
+    API_BASE_PREFIX,
     user: locals.user
   };
 };
@@ -74,6 +76,25 @@ export const actions: Actions = {
       successMessage: "Successfully created article"
     });
   },
+  importArticles: async ({ request, fetch, params }) => {
+    const data = await request.formData();
+    const files = data.getAll("import-articles") as File[];
+
+    const articles = await Promise.all(
+      files.map(async (file) => {
+        return {
+          website_id: params.websiteId,
+          title: parse(file.name).name,
+          main_content: await file.text()
+        };
+      })
+    );
+
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/article`, "POST", {
+      body: articles,
+      successMessage: "Successfully imported articles"
+    });
+  },
   deleteArticle: async ({ request, fetch }) => {
     const data = await request.formData();
 

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

@@ -31,18 +31,37 @@
       <a href="#create-article">Create article</a>
     </h2>
 
-    <Modal id="create-article" text="Create article">
-      <h3>Create article</h3>
-
-      <form method="POST" action="?/createArticle" use:enhance={enhanceForm({ closeModal: true })}>
-        <label>
-          Title:
-          <input type="text" name="title" pattern="\S(.*\S)?" maxlength="100" required />
-        </label>
-
-        <button type="submit" disabled={data.permissionLevel === 10}>Create article</button>
-      </form>
-    </Modal>
+    <div class="multi-wrapper">
+      <Modal id="create-article" text="Create article">
+        <h3>Create article</h3>
+        <form
+          method="POST"
+          action="?/createArticle"
+          use:enhance={enhanceForm({ closeModal: true })}
+        >
+          <label>
+            Title:
+            <input type="text" name="title" pattern="\S(.*\S)?" maxlength="100" required />
+          </label>
+          <button type="submit" disabled={data.permissionLevel === 10}>Create article</button>
+        </form>
+      </Modal>
+      <Modal id="import-articles" text="Import articles">
+        <h3>Import articles</h3>
+        <form
+          method="POST"
+          action="?/importArticles"
+          enctype="multipart/form-data"
+          use:enhance={enhanceForm({ closeModal: true })}
+        >
+          <label>
+            Markdown files:
+            <input type="file" name="import-articles" accept=".md" multiple required />
+          </label>
+          <button type="submit" disabled={data.permissionLevel === 10}>Import articles</button>
+        </form>
+      </Modal>
+    </div>
   </section>
 
   {#if data.totalArticleCount > 0}
@@ -51,6 +70,11 @@
         <a href="#all-articles">All articles</a>
       </h2>
 
+      <a
+        class="export-anchor"
+        href={`${data.API_BASE_PREFIX}/rpc/export_articles_zip?website_id=${data.website.id}`}
+        >Export articles</a
+      >
       <details>
         <summary>Search & Filter</summary>
         <form method="GET">
@@ -92,7 +116,6 @@
                     fill="currentColor"
                     width="16"
                     height="16"
-                    style="vertical-align: middle"
                   >
                     <path
                       fill-rule="evenodd"
@@ -160,4 +183,15 @@
     gap: var(--space-s);
     align-items: center;
   }
+
+  .multi-wrapper {
+    display: flex;
+    gap: var(--space-s);
+    flex-wrap: wrap;
+    align-items: start;
+  }
+
+  .export-anchor {
+    max-inline-size: fit-content;
+  }
 </style>