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

2025-11-22 10:51:36 +01:00 · 2024-10-30 21:33:44 +01:00
parent f7180ebd92
commit 037165947b
32 changed files with 409 additions and 223 deletions
--- a/web-app/src/routes/(authenticated)/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/+page.server.ts
@@ -76,19 +76,8 @@ export const actions: Actions = {
    const data = await request.formData();
    const id = data.get("id");

-    const deleteWebsite = await apiRequest(
-      fetch,
-      `${API_BASE_PREFIX}/website?id=eq.${id}`,
-      "DELETE",
-      {
-        successMessage: "Successfully deleted website"
-      }
-    );
-
-    if (!deleteWebsite.success) {
-      return deleteWebsite;
-    }
-
-    return deleteWebsite;
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/website?id=eq.${id}`, "DELETE", {
+      successMessage: "Successfully deleted website"
+    });
  }
 };
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -77,7 +77,7 @@
    </details>

    <ul class="website-grid unpadded">
-      {#each data.websites as { id, user_id, content_type, title, created_at, collab } (id)}
+      {#each data.websites as { id, user_id, content_type, title, created_at, last_modified_at, collab } (id)}
        <li class="website-card">
          <p>
            <strong>
@@ -90,9 +90,13 @@
              {content_type}
            </li>
            <li>
-              <strong>Created at:</strong>
+              <strong>Created:</strong>
              <DateTime date={created_at} />
            </li>
+            <li>
+              <strong>Last modified:</strong>
+              <DateTime date={last_modified_at} />
+            </li>
          </ul>
          <div class="website-card__actions">
            <Modal id="update-website-{id}" text="Update">
--- a/web-app/src/routes/(authenticated)/account/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/account/+page.server.ts
@@ -4,7 +4,7 @@ import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 export const load: PageServerLoad = async ({ fetch, locals }) => {
  const storageSizes = await apiRequest(
    fetch,
-    `${API_BASE_PREFIX}/rpc/user_websites_storage_size`,
+    `${API_BASE_PREFIX}/rpc/user_websites_storage_size?order=max_storage_bytes.desc`,
    "GET",
    {
      returnData: true
--- a/web-app/src/routes/(authenticated)/manage/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/manage/+page.server.ts
@@ -10,7 +10,7 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
  const usersWithWebsites: (User & { website: Website[] })[] = (
    await apiRequest(
      fetch,
-      `${API_BASE_PREFIX}/user?select=*,website!user_id(*)&order=created_at&limit=${PAGINATION_MAX_ITEMS}&offset=${resultOffset}`,
+      `${API_BASE_PREFIX}/user?select=*,website!user_id(*)&order=created_at&website.order=created_at.desc&limit=${PAGINATION_MAX_ITEMS}&offset=${resultOffset}`,
      "GET",
      {
        returnData: true
@@ -61,7 +61,7 @@ export const actions: Actions = {
        body: {
          max_storage_size: data.get("storage-size")
        },
-        successMessage: "Successfully updated user website storage size"
+        successMessage: "Successfully updated website storage"
      }
    );
  },
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/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();

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/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>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -36,7 +36,13 @@
      <form method="POST" action="?/createCategory" use:enhance={enhanceForm({ closeModal: true })}>
        <label>
          Name:
-          <input type="text" name="category-name" maxlength="50" required />
+          <input
+            type="text"
+            name="category-name"
+            maxlength="50"
+            pattern="^(?!Uncategorized$).+$"
+            required
+          />
        </label>

        <label>
@@ -80,6 +86,7 @@
                      name="category-name"
                      value={category_name}
                      maxlength="50"
+                      pattern="^(?!Uncategorized$).+$"
                      required
                    />
                  </label>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/legal-information/+page.server.ts
@@ -44,7 +44,7 @@ export const actions: Actions = {
    });
  },
  deleteLegalInformation: async ({ fetch, params }) => {
-    const deleteLegalInformation = await apiRequest(
+    return await apiRequest(
      fetch,
      `${API_BASE_PREFIX}/legal_information?website_id=eq.${params.websiteId}`,
      "DELETE",
@@ -52,12 +52,6 @@ export const actions: Actions = {
        successMessage: "Successfully deleted legal information"
      }
    );
-
-    if (!deleteLegalInformation.success) {
-      return deleteLegalInformation;
-    }
-
-    return deleteLegalInformation;
  },
  pasteImage: async ({ request, fetch, params }) => {
    const data = await request.formData();
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
@@ -106,7 +106,7 @@
            <th>User</th>
            <th>Resource</th>
            <th>Operation</th>
-            <th>Date & Time</th>
+            <th>Time</th>
            <th>Changes</th>
          </tr>
        </thead>
@@ -140,21 +140,20 @@
                      <button type="submit">Compute diff</button>
                    </form>
                    {#if form?.logId === id && form?.currentDiff}
-                      <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
-                          form.currentDiff,
-                          { ALLOWED_TAGS: ["ins", "del"] }
-                        )}</pre>
+                      <pre>{@html DOMPurify.sanitize(form.currentDiff, {
+                          ALLOWED_TAGS: ["ins", "del"]
+                        })}</pre>
                    {/if}
                  {/if}

                  {#if new_value && !old_value}
                    <h4>New value</h4>
-                    <pre style="white-space: pre-wrap">{DOMPurify.sanitize(newValue)}</pre>
+                    <pre>{DOMPurify.sanitize(newValue)}</pre>
                  {/if}

                  {#if old_value && !new_value}
                    <h4>Old value</h4>
-                    <pre style="white-space: pre-wrap">{DOMPurify.sanitize(oldValue)}</pre>
+                    <pre>{DOMPurify.sanitize(oldValue)}</pre>
                  {/if}
                </Modal>
              </td>
@@ -169,3 +168,9 @@
    />
  </section>
 </WebsiteEditor>
+
+<style>
+  pre {
+    white-space: pre-wrap;
+  }
+</style>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
@@ -4,25 +4,24 @@ import BlogArticle from "$lib/templates/blog/BlogArticle.svelte";
 import BlogIndex from "$lib/templates/blog/BlogIndex.svelte";
 import DocsArticle from "$lib/templates/docs/DocsArticle.svelte";
 import DocsIndex from "$lib/templates/docs/DocsIndex.svelte";
-import { type WebsiteOverview, hexToHSL, slugify } from "$lib/utils";
-import { mkdir, readFile, rename, writeFile, chmod, readdir } from "node:fs/promises";
+import { type WebsiteOverview, hexToHSL } from "$lib/utils";
+import { mkdir, readFile, writeFile, chmod, readdir } from "node:fs/promises";
 import { join } from "node:path";
 import { render } from "svelte/server";
 import type { Actions, PageServerLoad } from "./$types";

+const getOverviewFetchUrl = (websiteId: string) => {
+  return `${API_BASE_PREFIX}/website?id=eq.${websiteId}&select=*,settings(*),header(*),home(*),footer(*),article(*,docs_category(*)),legal_information(*),domain_prefix(*)`;
+};
+
 export const load: PageServerLoad = async ({ params, fetch, parent }) => {
  const websiteOverview: WebsiteOverview = (
-    await apiRequest(
-      fetch,
-      `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,settings(*),header(*),home(*),footer(*),article(*,docs_category(*)),legal_information(*),domain_prefix(*)`,
-      "GET",
-      {
-        headers: {
-          Accept: "application/vnd.pgrst.object+json"
-        },
-        returnData: true
-      }
-    )
+    await apiRequest(fetch, getOverviewFetchUrl(params.websiteId), "GET", {
+      headers: {
+        Accept: "application/vnd.pgrst.object+json"
+      },
+      returnData: true
+    })
  ).data;

  const { websitePreviewUrl, websiteProdUrl } = await generateStaticFiles(websiteOverview);
@@ -40,22 +39,15 @@ export const load: PageServerLoad = async ({ params, fetch, parent }) => {
 export const actions: Actions = {
  publishWebsite: async ({ fetch, params }) => {
    const websiteOverview: WebsiteOverview = (
-      await apiRequest(
-        fetch,
-        `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,settings(*),header(*),home(*),footer(*),article(*,docs_category(*)),legal_information(*),domain_prefix(*)`,
-        "GET",
-        {
-          headers: {
-            Accept: "application/vnd.pgrst.object+json"
-          },
-          returnData: true
-        }
-      )
+      await apiRequest(fetch, getOverviewFetchUrl(params.websiteId), "GET", {
+        headers: {
+          Accept: "application/vnd.pgrst.object+json"
+        },
+        returnData: true
+      })
    ).data;

-    await generateStaticFiles(websiteOverview, false);
-
-    return await apiRequest(
+    const publish = await apiRequest(
      fetch,
      `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}`,
      "PATCH",
@@ -66,78 +58,33 @@ export const actions: Actions = {
        successMessage: "Successfully published website"
      }
    );
+
+    if (!publish.success) {
+      return publish;
+    }
+
+    await generateStaticFiles(websiteOverview, false);
+
+    return publish;
  },
  createUpdateCustomDomainPrefix: async ({ request, fetch, params }) => {
    const data = await request.formData();

-    const oldDomainPrefix = (
-      await apiRequest(
-        fetch,
-        `${API_BASE_PREFIX}/domain_prefix?website_id=eq.${params.websiteId}`,
-        "GET",
-        {
-          headers: {
-            Accept: "application/vnd.pgrst.object+json"
-          },
-          returnData: true
-        }
-      )
-    ).data;
-
-    const newDomainPrefix = await apiRequest(fetch, `${API_BASE_PREFIX}/domain_prefix`, "POST", {
-      headers: {
-        Prefer: "resolution=merge-duplicates",
-        Accept: "application/vnd.pgrst.object+json"
-      },
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/rpc/set_domain_prefix`, "POST", {
      body: {
        website_id: params.websiteId,
        prefix: data.get("domain-prefix")
      },
      successMessage: "Successfully created/updated domain prefix"
    });
-
-    if (!newDomainPrefix.success) {
-      return newDomainPrefix;
-    }
-
-    await rename(
-      join(
-        "/",
-        "var",
-        "www",
-        "archtika-websites",
-        oldDomainPrefix?.prefix ? oldDomainPrefix.prefix : params.websiteId
-      ),
-      join("/", "var", "www", "archtika-websites", data.get("domain-prefix") as string)
-    );
-
-    return newDomainPrefix;
  },
  deleteCustomDomainPrefix: async ({ fetch, params }) => {
-    const customPrefix = await apiRequest(
-      fetch,
-      `${API_BASE_PREFIX}/domain_prefix?website_id=eq.${params.websiteId}`,
-      "DELETE",
-      {
-        headers: {
-          Prefer: "return=representation",
-          Accept: "application/vnd.pgrst.object+json"
-        },
-        successMessage: "Successfully deleted domain prefix",
-        returnData: true
-      }
-    );
-
-    if (!customPrefix.success) {
-      return customPrefix;
-    }
-
-    await rename(
-      join("/", "var", "www", "archtika-websites", customPrefix.data.prefix),
-      join("/", "var", "www", "archtika-websites", params.websiteId)
-    );
-
-    return customPrefix;
+    return await apiRequest(fetch, `${API_BASE_PREFIX}/rpc/delete_domain_prefix`, "POST", {
+      body: {
+        website_id: params.websiteId
+      },
+      successMessage: "Successfully deleted domain prefix"
+    });
  }
 };

@@ -211,10 +158,7 @@ const generateStaticFiles = async (websiteData: WebsiteOverview, isPreview = tru
      }
    });

-    await writeFile(
-      join(uploadDir, "articles", `${slugify(article.title)}.html`),
-      fileContents(head, body)
-    );
+    await writeFile(join(uploadDir, "articles", `${article.slug}.html`), fileContents(head, body));
  }

  if (websiteData.legal_information) {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -71,7 +71,7 @@
            placeholder="my-blog"
            minlength="3"
            maxlength="16"
-            pattern="^[a-z]+(-[a-z]+)*$"
+            pattern="^(?!previews$)[a-z]+(-[a-z]+)*$"
            required
          />
        </label>