Add basic forms and routes

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

@@ -1,5 +1,14 @@
 export const load = async ({ params, fetch, cookies }) => {
-  const websiteData = await fetch(`http://localhost:3000/content?id=eq.${params.websiteId}`, {
+  const websiteData = await fetch(`http://localhost:3000/website?id=eq.${params.websiteId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`,
+      Accept: "application/vnd.pgrst.object+json"
+    }
+  });
+
+  const homeData = await fetch(`http://localhost:3000/home?website_id=eq.${params.websiteId}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -9,8 +18,10 @@ export const load = async ({ params, fetch, cookies }) => {
   });
 
   const website = await websiteData.json();
+  const home = await homeData.json();
 
   return {
-    website
+    website,
+    home
   };
 };

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

@@ -1,7 +1,4 @@
-import { randomUUID } from "node:crypto";
-import { mkdir, writeFile } from "node:fs/promises";
-import { extname, join, relative } from "node:path";
-import { ALLOWED_MIME_TYPES } from "$lib/utils.js";
+import { handleFileUpload } from "$lib/server/utils.js";
 
 export const load = async ({ params, fetch, cookies, url }) => {
   const globalSettingsData = await fetch(
@@ -28,15 +25,6 @@ export const load = async ({ params, fetch, cookies, url }) => {
     }
   );
 
-  const homeData = await fetch(`http://localhost:3000/home?website_id=eq.${params.websiteId}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
-      Accept: "application/vnd.pgrst.object+json"
-    }
-  });
-
   const footerData = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
     method: "GET",
     headers: {
@@ -46,54 +34,14 @@ export const load = async ({ params, fetch, cookies, url }) => {
     }
   });
 
-  const searchQuery = url.searchParams.get("article_search_query");
-  const sortBy = url.searchParams.get("article_sort");
-
-  const parameters = new URLSearchParams();
-
-  const baseFetchUrl = `http://localhost:3000/article?website_id=eq.${params.websiteId}&select=*,media(*)`;
-
-  if (searchQuery) {
-    parameters.append("title", `ilike.*${searchQuery}*`);
-  }
-
-  switch (sortBy) {
-    case "creation-time":
-      parameters.append("order", "created_at.desc");
-      break;
-    case "last-modified":
-      parameters.append("order", "last_modified_at.desc");
-      break;
-    case "title-a-to-z":
-      parameters.append("order", "title.asc");
-      break;
-    case "title-z-to-a":
-      parameters.append("order", "title.desc");
-      break;
-  }
-
-  const constructedFetchUrl = `${baseFetchUrl}&${parameters.toString()}`;
-
-  const articlesData = await fetch(constructedFetchUrl, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${cookies.get("session_token")}`
-    }
-  });
-
   const globalSettings = await globalSettingsData.json();
   const header = await headerData.json();
-  const home = await homeData.json();
   const footer = await footerData.json();
-  const articles = await articlesData.json();
 
   return {
     globalSettings,
     header,
-    home,
-    footer,
-    articles
+    footer
   };
 };
 
@@ -134,8 +82,7 @@ export const actions = {
 
     return {
       success: true,
-      operation: "updated",
-      ressource: "global settings"
+      message: "Successfully updated global settings"
     };
   },
   updateHeader: async ({ request, fetch, cookies, locals, params }) => {
@@ -174,8 +121,7 @@ export const actions = {
 
     return {
       success: true,
-      operation: "updated",
-      ressource: "header settings"
+      message: "Successfully updated header"
     };
   },
   updateHome: async ({ request, fetch, cookies, params }) => {
@@ -197,7 +143,7 @@ export const actions = {
       return { success: false, message: response.message };
     }
 
-    return { success: true, operation: "updated", ressource: "home settings" };
+    return { success: true, message: "Successfully updated home" };
   },
   updateFooter: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
@@ -220,149 +166,7 @@ export const actions = {
 
     return {
       success: true,
-      operation: "updated",
-      ressource: "footer settings"
+      message: "Successfully updated footer"
     };
-  },
-  createArticle: async ({ request, fetch, cookies, params }) => {
-    const data = await request.formData();
-
-    const res = await fetch("http://localhost:3000/article", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        website_id: params.websiteId,
-        title: data.get("title")
-      })
-    });
-
-    if (!res.ok) {
-      const response = await res.json();
-      return { success: false, message: response.message };
-    }
-
-    return { success: true, operation: "created", ressource: "article" };
-  },
-  editArticle: async ({ request, fetch, cookies, locals, params }) => {
-    const data = await request.formData();
-
-    const coverFile = data.get("cover-image") as File;
-    const cover = await handleFileUpload(
-      coverFile,
-      params.websiteId,
-      locals.user.id,
-      cookies.get("session_token"),
-      fetch
-    );
-
-    if (cover?.success === false) {
-      return cover;
-    }
-
-    const res = await fetch(`http://localhost:3000/article?id=eq.${data.get("article-id")}`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${cookies.get("session_token")}`
-      },
-      body: JSON.stringify({
-        title: data.get("title"),
-        meta_description: data.get("description"),
-        meta_author: data.get("author"),
-        cover_image: cover?.content,
-        publication_date: data.get("publication-date"),
-        main_content: data.get("main-content")
-      })
-    });
-
-    if (!res.ok) {
-      const response = await res.json();
-      return { success: false, message: response.message };
-    }
-
-    return { success: true, operation: "updated", ressource: "article" };
-  },
-  deleteArticle: async ({ request, fetch, cookies }) => {
-    const data = await request.formData();
-
-    const res = await fetch(`http://localhost:3000/article?id=eq.${data.get("article-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, operation: "deleted", ressource: "article" };
   }
 };
-
-const handleFileUpload = async (
-  file: File,
-  contentId: string,
-  userId: string,
-  session_token: string | undefined,
-  customFetch: typeof fetch
-) => {
-  if (file.size === 0) return undefined;
-
-  const MAX_FILE_SIZE = 1024 * 1024;
-
-  if (file.size > MAX_FILE_SIZE) {
-    return {
-      success: false,
-      message: `File size exceeds the maximum limit of ${MAX_FILE_SIZE / 1024 / 1024} MB.`
-    };
-  }
-
-  if (!ALLOWED_MIME_TYPES.includes(file.type)) {
-    return {
-      success: false,
-      message: "Invalid file type. JPEG, PNG, SVG and WEBP are allowed."
-    };
-  }
-
-  const buffer = Buffer.from(await file.arrayBuffer());
-  const uploadDir = join(process.cwd(), "static", "user-uploads", userId);
-  await mkdir(uploadDir, { recursive: true });
-
-  const fileId = randomUUID();
-  const fileExtension = extname(file.name);
-  const filepath = join(uploadDir, `${fileId}${fileExtension}`);
-
-  await writeFile(filepath, buffer);
-
-  const relativePath = relative(join(process.cwd(), "static"), filepath);
-
-  const res = await customFetch("http://localhost:3000/media", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${session_token}`,
-      Prefer: "return=representation",
-      Accept: "application/vnd.pgrst.object+json"
-    },
-    body: JSON.stringify({
-      website_id: contentId,
-      user_id: userId,
-      original_name: file.name,
-      file_system_path: relativePath
-    })
-  });
-
-  const response = await res.json();
-
-  if (!res.ok) {
-    return { success: false, message: response.message };
-  }
-
-  return { success: true, content: response.id };
-};

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

@@ -1,15 +1,133 @@
-<section>
-  <h2>Settings</h2>
-</section>
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import { ALLOWED_MIME_TYPES } from "$lib/utils";
 
-<section>
-  <h2>Articles</h2>
-</section>
+  const { data, form } = $props();
+</script>
 
-<section>
-  <h2>Collaborators</h2>
-</section>
+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
 
-<section>
-  <h2>Logs</h2>
-</section>
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
+<WebsiteEditor
+  id={data.website.id}
+  title={data.website.title}
+  previewContent={data.home.main_content}
+>
+  <section>
+    <h2>Settings</h2>
+
+    <section>
+      <h3>Global</h3>
+      <form
+        action="?/updateGlobal"
+        method="POST"
+        enctype="multipart/form-data"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update({ reset: false });
+          };
+        }}
+      >
+        <label>
+          Light accent color:
+          <input
+            type="color"
+            name="accent-color-light"
+            value={data.globalSettings.accent_color_light_theme}
+          />
+        </label>
+        <label>
+          Light accent color:
+          <input
+            type="color"
+            name="accent-color-dark"
+            value={data.globalSettings.accent_color_dark_theme}
+          />
+        </label>
+        <label>
+          Favicon:
+          <input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
+        </label>
+
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+
+    <section>
+      <h3>Header</h3>
+
+      <form
+        action="?/updateHeader"
+        method="POST"
+        enctype="multipart/form-data"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update({ reset: false });
+          };
+        }}
+      >
+        <label>
+          Logo type:
+          <select name="logo-type">
+            <option value="text" selected={"text" === data.header.logo_type}>Text</option>
+            <option value="image" selected={"image" === data.header.logo_type}>Image</option>
+          </select>
+        </label>
+        <label>
+          Logo text:
+          <input type="text" name="logo-text" value={data.header.logo_text} />
+        </label>
+        <label>
+          Logo image:
+          <input type="file" name="logo-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
+        </label>
+
+        <button type="submit">Submit</button>
+      </form>
+    </section>
+
+    <section>
+      <h3>Home</h3>
+
+      <form
+        action="?/updateHome"
+        method="POST"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update({ reset: false });
+          };
+        }}
+      >
+        <label>
+          Main content:
+          <textarea name="main-content">{data.home.main_content}</textarea>
+        </label>
+      </form>
+    </section>
+
+    <section>
+      <h3>Footer</h3>
+
+      <form
+        action="?/updateFooter"
+        method="POST"
+        use:enhance={() => {
+          return async ({ update }) => {
+            await update({ reset: false });
+          };
+        }}
+      >
+        <label>
+          Additional text:
+          <textarea name="additional-text">{data.footer.additional_text}</textarea>
+        </label>
+      </form>
+    </section>
+  </section>
+</WebsiteEditor>

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

@@ -0,0 +1,103 @@
+export const load = async ({ params, fetch, cookies, url, parent }) => {
+  const searchQuery = url.searchParams.get("article_search_query");
+  const sortBy = url.searchParams.get("article_sort");
+
+  const parameters = new URLSearchParams();
+
+  const baseFetchUrl = `http://localhost:3000/article?website_id=eq.${params.websiteId}&select=id,title`;
+
+  if (searchQuery) {
+    parameters.append("title", `ilike.*${searchQuery}*`);
+  }
+
+  switch (sortBy) {
+    case null:
+    case "creation-time":
+      parameters.append("order", "created_at.desc");
+      break;
+    case "last-modified":
+      parameters.append("order", "last_modified_at.desc");
+      break;
+    case "title-a-to-z":
+      parameters.append("order", "title.asc");
+      break;
+    case "title-z-to-a":
+      parameters.append("order", "title.desc");
+      break;
+  }
+
+  const constructedFetchUrl = `${baseFetchUrl}&${parameters.toString()}`;
+
+  const totalArticlesData = await fetch(baseFetchUrl, {
+    method: "HEAD",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`,
+      Prefer: "count=exact"
+    }
+  });
+
+  const totalArticleCount = Number(
+    totalArticlesData.headers.get("content-range")?.split("/").at(-1)
+  );
+
+  const articlesData = await fetch(constructedFetchUrl, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`
+    }
+  });
+
+  const articles = await articlesData.json();
+  const { website } = await parent();
+
+  return {
+    totalArticleCount,
+    articles,
+    website
+  };
+};
+
+export const actions = {
+  createArticle: async ({ request, fetch, cookies, params }) => {
+    const data = await request.formData();
+
+    const res = await fetch("http://localhost:3000/article", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      },
+      body: JSON.stringify({
+        website_id: params.websiteId,
+        title: data.get("title")
+      })
+    });
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully created article" };
+  },
+  deleteArticle: async ({ request, fetch, cookies }) => {
+    const data = await request.formData();
+
+    const res = await fetch(`http://localhost:3000/article?id=eq.${data.get("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 article" };
+  }
+};

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import { sortOptions } from "$lib/utils.js";
+  import { page } from "$app/stores";
+  import { enhance } from "$app/forms";
+
+  const { data, form } = $props();
+</script>
+
+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
+<WebsiteEditor
+  id={data.website.id}
+  title={data.website.title}
+  previewContent={data.home.main_content}
+>
+  <section>
+    <h2>Create article</h2>
+
+    <form method="POST" action="?/createArticle" use:enhance>
+      <label>
+        Title:
+        <input type="text" name="title" />
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
+  </section>
+
+  {#if data.totalArticleCount > 0}
+    <section>
+      <h2>All articles</h2>
+
+      <form method="GET">
+        <label>
+          Search:
+          <input
+            type="text"
+            name="article_search_query"
+            value={$page.url.searchParams.get("article_search_query")}
+          />
+        </label>
+        <label>
+          Sort:
+          <select name="article_sort">
+            {#each sortOptions as { value, text }}
+              <option {value} selected={value === $page.url.searchParams.get("article_sort")}
+                >{text}</option
+              >
+            {/each}
+          </select>
+        </label>
+        <button type="submit">Submit</button>
+      </form>
+
+      {#each data.articles as { id, title }}
+        <article>
+          <h3>{title}</h3>
+          <a href="/website/{data.website.id}/articles/{id}">Edit</a>
+          <details>
+            <summary>Delete</summary>
+            <p>
+              <strong>Caution!</strong>
+              Deleting this article will irretrievably erase all data.
+            </p>
+            <form method="POST" action="?/deleteArticle" use:enhance>
+              <input type="hidden" name="id" value={id} />
+
+              <button type="submit">Permanently delete article</button>
+            </form>
+          </details>
+        </article>
+      {/each}
+    </section>
+  {/if}
+</WebsiteEditor>

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

@@ -0,0 +1,59 @@
+import { handleFileUpload } from "$lib/server/utils.js";
+
+export const load = async ({ parent, params, cookies, fetch }) => {
+  const articleData = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`,
+      Accept: "application/vnd.pgrst.object+json"
+    }
+  });
+
+  const article = await articleData.json();
+  const { website } = await parent();
+
+  return { website, article };
+};
+
+export const actions = {
+  default: async ({ fetch, cookies, request, params, locals }) => {
+    const data = await request.formData();
+
+    const coverFile = data.get("cover-image") as File;
+    const cover = await handleFileUpload(
+      coverFile,
+      params.websiteId,
+      locals.user.id,
+      cookies.get("session_token"),
+      fetch
+    );
+
+    if (cover?.success === false) {
+      return cover;
+    }
+
+    const res = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`
+      },
+      body: JSON.stringify({
+        title: data.get("title"),
+        meta_description: data.get("description"),
+        meta_author: data.get("author"),
+        cover_image: cover?.content,
+        publication_date: data.get("publication-date"),
+        main_content: data.get("main-content")
+      })
+    });
+
+    if (!res.ok) {
+      const response = await res.json();
+      return { success: false, message: response.message };
+    }
+
+    return { success: true, message: "Successfully updated article" };
+  }
+};

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
+  import { ALLOWED_MIME_TYPES } from "$lib/utils";
+
+  const { data, form } = $props();
+</script>
+
+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
+<WebsiteEditor
+  id={data.website.id}
+  title={data.website.title}
+  previewContent={data.article.main_content}
+>
+  <section>
+    <h2>Edit article</h2>
+
+    <form
+      method="POST"
+      enctype="multipart/form-data"
+      use:enhance={() => {
+        return async ({ update }) => {
+          await update({ reset: false });
+        };
+      }}
+    >
+      <label>
+        Title:
+        <input type="text" name="title" value={data.article.title} />
+      </label>
+      <label>
+        Description:
+        <textarea name="description">{data.article.meta_description}</textarea>
+      </label>
+      <label>
+        Author:
+        <input type="text" name="author" value={data.article.meta_author} />
+      </label>
+      <label>
+        Publication date:
+        <input type="date" name="publication-date" value={data.article.publication_date} />
+      </label>
+      <label>
+        Cover image:
+        <input type="file" name="cover-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
+      </label>
+      <label>
+        Main content:
+        <textarea name="main-content">{data.article.main_content}</textarea>
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
+  </section>
+</WebsiteEditor>