Add categories for docs template

2025-11-22 10:51:36 +01:00 · 2024-08-27 16:39:29 +02:00
parent 0753345bba
commit 1b1767c0f7
24 changed files with 651 additions and 154 deletions
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -30,6 +30,7 @@

 <WebsiteEditor
  id={data.website.id}
+  contentType={data.website.content_type}
  title={data.website.title}
  {previewContent}
  previewScrollTop={textareaScrollTop}
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
@@ -85,7 +85,6 @@ export const actions: Actions = {
      },
      body: JSON.stringify({
        website_id: params.websiteId,
-        user_id: locals.user.id,
        title: data.get("title")
      })
    });
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -14,6 +14,7 @@

 <WebsiteEditor
  id={data.website.id}
+  contentType={data.website.content_type}
  title={data.website.title}
  previewContent={data.home.main_content}
 >
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.server.ts
@@ -11,10 +11,22 @@ export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) =
    }
  });

+  const categoryData = await fetch(
+    `${API_BASE_PREFIX}/docs_category?website_id=eq.${params.websiteId}&order=category_weight.desc`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      }
+    }
+  );
+
  const article = await articleData.json();
+  const categories = await categoryData.json();
  const { website } = await parent();

-  return { website, article, API_BASE_PREFIX };
+  return { website, article, categories, API_BASE_PREFIX };
 };

 export const actions: Actions = {
@@ -53,7 +65,8 @@ export const actions: Actions = {
        meta_author: data.get("author"),
        cover_image: uploadedImage.file_id,
        publication_date: data.get("publication-date"),
-        main_content: data.get("main-content")
+        main_content: data.get("main-content"),
+        category: data.get("category")
      })
    });

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
@@ -30,6 +30,7 @@

 <WebsiteEditor
  id={data.website.id}
+  contentType={data.website.content_type}
  title={data.website.title}
  previewContent={previewContent ||
    "Put some markdown content in main content to see a live preview here"}
@@ -50,6 +51,17 @@
        };
      }}
    >
+      {#if data.website.content_type === "Docs"}
+        <label>
+          Category:
+          <select name="category">
+            {#each data.categories as { id, category_name }}
+              <option value={id} selected={id === data.article.category}>{category_name}</option>
+            {/each}
+          </select>
+        </label>
+      {/if}
+
      <label>
        Title:
        <input
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.server.ts
@@ -0,0 +1,95 @@
+import type { Actions, PageServerLoad } from "./$types";
+import { API_BASE_PREFIX } from "$lib/server/utils";
+
+export const load: PageServerLoad = async ({ parent, params, cookies, fetch }) => {
+  const categoryData = await fetch(
+    `${API_BASE_PREFIX}/docs_category?website_id=eq.${params.websiteId}&order=category_weight.desc`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      }
+    }
+  );
+
+  const categories = await categoryData.json();
+  const { website, home } = await parent();
+
+  return {
+    categories,
+    website,
+    home
+  };
+};
+
+export const actions: Actions = {
+  createCategory: async ({ request, fetch, cookies, params }) => {
+    const data = await request.formData();
+
+    const res = await fetch(`${API_BASE_PREFIX}/docs_category`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      },
+      body: JSON.stringify({
+        website_id: params.websiteId,
+        category_name: data.get("category-name"),
+        category_weight: data.get("category-weight")
+      })
+    });
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully created category" };
+  },
+  updateCategory: async ({ request, fetch, cookies, params }) => {
+    const data = await request.formData();
+
+    const res = await fetch(
+      `${API_BASE_PREFIX}/docs_category?website_id=eq.${params.websiteId}&id=eq.${data.get("category-id")}`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        },
+        body: JSON.stringify({
+          category_weight: data.get("category-weight")
+        })
+      }
+    );
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully updated category" };
+  },
+  deleteCategory: async ({ request, fetch, cookies, params }) => {
+    const data = await request.formData();
+
+    const res = await fetch(
+      `${API_BASE_PREFIX}/docs_category?website_id=eq.${params.websiteId}&id=eq.${data.get("category-id")}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        }
+      }
+    );
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully deleted category" };
+  }
+};
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/categories/+page.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import SuccessOrError from "$lib/components/SuccessOrError.svelte";
+  import Modal from "$lib/components/Modal.svelte";
+  import type { ActionData, PageServerData } from "./$types";
+
+  const { data, form }: { data: PageServerData; form: ActionData } = $props();
+</script>
+
+<SuccessOrError success={form?.success} message={form?.message} />
+
+<WebsiteEditor
+  id={data.website.id}
+  contentType={data.website.content_type}
+  title={data.website.title}
+  previewContent={data.home.main_content}
+>
+  <section id="create-category">
+    <h2>
+      <a href="#create-category">Create category</a>
+    </h2>
+
+    <Modal id="create-category" text="Create category">
+      <h3>Create category</h3>
+
+      <form
+        method="POST"
+        action="?/createCategory"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update();
+            window.location.hash = "!";
+          };
+        }}
+      >
+        <label>
+          Name:
+          <input type="text" name="category-name" maxlength="50" required />
+        </label>
+
+        <label>
+          Weight:
+          <input name="category-weight" type="number" min="0" required />
+        </label>
+
+        <button type="submit">Submit</button>
+      </form>
+    </Modal>
+  </section>
+
+  {#if data.categories.length > 0}
+    <section id="all-categories">
+      <h2>
+        <a href="#all-categories">All categories</a>
+      </h2>
+
+      <ul class="unpadded">
+        {#each data.categories as { id, website_id, category_name, category_weight } (`${website_id}-${id}`)}
+          <li class="category-card">
+            <p>
+              <strong>{category_name} ({category_weight})</strong>
+            </p>
+
+            <div class="category-card__actions">
+              <Modal id="update-category-{id}" text="Update">
+                <h4>Update category</h4>
+
+                <form
+                  method="POST"
+                  action="?/updateCategory"
+                  use:enhance={() => {
+                    return async ({ update }) => {
+                      await update({ reset: false });
+                      window.location.hash = "!";
+                    };
+                  }}
+                >
+                  <input type="hidden" name="category-id" value={id} />
+
+                  <label>
+                    Weight:
+                    <input type="number" name="category-weight" value={category_weight} min="0" />
+                  </label>
+
+                  <button type="submit">Update category</button>
+                </form>
+              </Modal>
+              <Modal id="delete-category-{id}" text="Delete">
+                <h4>Delete category</h4>
+
+                <p>Do you really want to delete the category?</p>
+
+                <form
+                  method="POST"
+                  action="?/deleteCategory"
+                  use:enhance={() => {
+                    return async ({ update }) => {
+                      await update();
+                      window.location.hash = "!";
+                    };
+                  }}
+                >
+                  <input type="hidden" name="category-id" value={id} />
+
+                  <button type="submit">Delete category</button>
+                </form>
+              </Modal>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+</WebsiteEditor>
+
+<style>
+  .category-card {
+    display: flex;
+    align-items: center;
+    column-gap: var(--space-s);
+    row-gap: var(--space-2xs);
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-block-start: var(--space-xs);
+  }
+
+  .category-card + .category-card {
+    padding-block-start: var(--space-xs);
+    border-block-start: var(--border-primary);
+  }
+
+  .category-card__actions {
+    display: flex;
+    gap: var(--space-2xs);
+    align-items: center;
+  }
+</style>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -12,6 +12,7 @@

 <WebsiteEditor
  id={data.website.id}
+  contentType={data.website.content_type}
  title={data.website.title}
  previewContent={data.home.main_content}
 >
@@ -35,7 +36,14 @@
      >
        <label>
          User id:
-          <input type="text" name="user-id" minlength="36" maxlength="36" required />
+          <input
+            type="text"
+            name="user-id"
+            minlength="36"
+            maxlength="36"
+            placeholder="00000000-0000-0000-0000-000000000000"
+            required
+          />
        </label>

        <label>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts
@@ -7,7 +7,7 @@ import { render } from "svelte/server";
 import BlogIndex from "$lib/templates/blog/BlogIndex.svelte";
 import BlogArticle from "$lib/templates/blog/BlogArticle.svelte";
 import DocsIndex from "$lib/templates/docs/DocsIndex.svelte";
-import DocsEntry from "$lib/templates/docs/DocsEntry.svelte";
+import DocsArticle from "$lib/templates/docs/DocsArticle.svelte";
 import { dev } from "$app/environment";

 export const load: PageServerLoad = async ({ params, fetch, cookies, parent }) => {
@@ -38,10 +38,20 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, parent }) =
 };

 export const actions: Actions = {
-  publishWebsite: async ({ request }) => {
-    const data = await request.formData();
-    const websiteOverview = JSON.parse(data.get("website-overview") as string);
+  publishWebsite: async ({ fetch, params, cookies }) => {
+    const websiteOverviewData = await fetch(
+      `${API_BASE_PREFIX}/website_overview?id=eq.${params.websiteId}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`,
+          Accept: "application/vnd.pgrst.object+json"
+        }
+      }
+    );

+    const websiteOverview = await websiteOverviewData.json();
    generateStaticFiles(websiteOverview, false);

    return { success: true, message: "Successfully published website" };
@@ -77,9 +87,15 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
      {
        ({ head, body } = render(DocsIndex, {
          props: {
+            favicon: websiteData.favicon_image
+              ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.favicon_image}`
+              : "",
            title: websiteData.title,
            logoType: websiteData.logo_type,
-            logo: websiteData.logo_text,
+            logo:
+              websiteData.logo_type === "text"
+                ? websiteData.logo_text
+                : `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.logo_image}`,
            mainContent: md(websiteData.main_content ?? "", false),
            articles: websiteData.articles ?? [],
            footerAdditionalText: md(websiteData.additional_text ?? "")
@@ -101,7 +117,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)

  await mkdir(uploadDir, { recursive: true });
  await writeFile(join(uploadDir, "index.html"), indexFileContents);
-  await mkdir(join(uploadDir, websiteData.content_type === "Blog" ? "articles" : "documents"), {
+  await mkdir(join(uploadDir, "articles"), {
    recursive: true
  });

@@ -137,11 +153,17 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
        break;
      case "Docs":
        {
-          ({ head, body } = render(DocsEntry, {
+          ({ head, body } = render(DocsArticle, {
            props: {
+              favicon: websiteData.favicon_image
+                ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.favicon_image}`
+                : "",
              title: article.title,
              logoType: websiteData.logo_type,
-              logo: websiteData.logo_text,
+              logo:
+                websiteData.logo_type === "text"
+                  ? websiteData.logo_text
+                  : `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.logo_image}`,
              coverImage: article.cover_image
                ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${article.cover_image}`
                : "",
@@ -156,22 +178,18 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)

    const articleFileContents = head.concat(body);

-    await writeFile(
-      join(
-        uploadDir,
-        websiteData.content_type === "Blog" ? "articles" : "documents",
-        `${articleFileName}.html`
-      ),
-      articleFileContents
-    );
+    await writeFile(join(uploadDir, "articles", `${articleFileName}.html`), articleFileContents);
  }

  const commonStyles = await readFile(`${process.cwd()}/template-styles/common-styles.css`, {
    encoding: "utf-8"
  });
-  const specificStyles = await readFile(`${process.cwd()}/template-styles/blog-styles.css`, {
-    encoding: "utf-8"
-  });
+  const specificStyles = await readFile(
+    `${process.cwd()}/template-styles/${websiteData.content_type.toLowerCase()}-styles.css`,
+    {
+      encoding: "utf-8"
+    }
+  );
  await writeFile(
    join(uploadDir, "styles.css"),
    commonStyles
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.svelte
@@ -11,6 +11,7 @@

 <WebsiteEditor
  id={data.website.id}
+  contentType={data.website.content_type}
  title={data.website.title}
  previewContent={data.websitePreviewUrl}
  fullPreview={true}
@@ -19,15 +20,13 @@
    <h2>
      <a href="#publish-website">Publish website</a>
    </h2>
-
+    {JSON.stringify(data.websiteOverview.articles)}
    <p>
      The preview area on this page allows you to see exactly how your website will look when it is
      is published. If you are happy with the results, click the button below and your website will
      be published on the Internet.
    </p>
-
    <form method="POST" action="?/publishWebsite" use:enhance>
-      <input type="hidden" name="website-overview" value={JSON.stringify(data.websiteOverview)} />
      <button type="submit">Publish</button>
    </form>
  </section>