Add basic forms and routes

2025-11-22 02:41:35 +01:00 · 2024-08-01 18:09:35 +02:00
parent d21e00a0c3
commit b0666f4a8c
20 changed files with 762 additions and 342 deletions
--- a/web-app/src/app.html
+++ b/web-app/src/app.html
@@ -4,6 +4,7 @@
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://unpkg.com/@acab/reset.css" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/web-app/src/lib/components/WebsiteEditor.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  const { id, title, children, previewContent } = $props<{
+    id: string;
+    title: string;
+    children: Snippet;
+    previewContent: string;
+  }>();
+</script>
+
+<div class="operations">
+  <h1>{title}</h1>
+
+  <div>
+    <a href="/website/{id}">Settings</a>
+    <a href="/website/{id}/articles">Articles</a>
+  </div>
+
+  {@render children()}
+</div>
+
+<div class="preview">
+  {@html previewContent}
+</div>
+
+<style>
+  .operations,
+  .preview {
+    padding: 1rem;
+    min-inline-size: 15rem;
+    block-size: 100%;
+  }
+
+  .operations {
+    inline-size: 50%;
+    border-inline-end: 0.0625rem solid hsl(0 0% 50%);
+    resize: horizontal;
+    overflow-y: auto;
+  }
+
+  .preview {
+    flex-grow: 1;
+  }
+</style>
--- a/web-app/src/lib/server/utils.ts
+++ b/web-app/src/lib/server/utils.ts
@@ -0,0 +1,66 @@
+import { randomUUID } from "node:crypto";
+import { mkdir, writeFile } from "node:fs/promises";
+import { extname, join, relative } from "node:path";
+import { ALLOWED_MIME_TYPES } from "../utils";
+
+export 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 };
+};
--- a/web-app/src/routes/(anonymous)/login/+page.server.ts
+++ b/web-app/src/routes/(anonymous)/login/+page.server.ts
@@ -18,6 +18,6 @@ export const actions = {
    }

    cookies.set("session_token", response.token, { path: "/" });
-    return { success: true };
+    return { success: true, message: "Successfully logged in" };
  }
 };
--- a/web-app/src/routes/(anonymous)/login/+page.svelte
+++ b/web-app/src/routes/(anonymous)/login/+page.svelte
@@ -4,21 +4,21 @@
  const { form } = $props();
 </script>

+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
 <form method="POST" use:enhance>
-  {#if form?.success}
-    <p>Successfully logged in</p>
-  {/if}
-
-  {#if form?.success === false}
-    <p>{form.message}</p>
-  {/if}
-
  <label>
-    Username
+    Username:
    <input type="text" name="username" required />
  </label>
  <label>
-    Password
+    Password:
    <input type="password" name="password" required />
  </label>

--- a/web-app/src/routes/(anonymous)/register/+page.server.ts
+++ b/web-app/src/routes/(anonymous)/register/+page.server.ts
@@ -17,6 +17,6 @@ export const actions = {
      return { success: false, message: response.message };
    }

-    return { success: true };
+    return { success: true, message: "Successfully registered, you can now login" };
  }
 };
--- a/web-app/src/routes/(anonymous)/register/+page.svelte
+++ b/web-app/src/routes/(anonymous)/register/+page.svelte
@@ -4,21 +4,21 @@
  const { form } = $props();
 </script>

+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
 <form method="POST" use:enhance>
-  {#if form?.success}
-    <p>Successfully registered</p>
-  {/if}
-
-  {#if form?.success === false}
-    <p>{form.message}</p>
-  {/if}
-
  <label>
-    Username
+    Username:
    <input type="text" name="username" minlength="3" maxlength="16" required />
  </label>
  <label>
-    Password
+    Password:
    <input type="password" name="password" minlength="12" maxlength="128" required />
  </label>

--- a/web-app/src/routes/(authenticated)/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/+page.server.ts
@@ -7,10 +7,11 @@ export const load = async ({ fetch, cookies, url }) => {
  const baseFetchUrl = "http://localhost:3000/website";

  if (searchQuery) {
-    params.append("website_title", `ilike.*${searchQuery}*`);
+    params.append("title", `ilike.*${searchQuery}*`);
  }

  switch (sortBy) {
+    case null:
    case "creation-time":
      params.append("order", "created_at.desc");
      break;
@@ -27,6 +28,19 @@ export const load = async ({ fetch, cookies, url }) => {

  const constructedFetchUrl = `${baseFetchUrl}?${params.toString()}`;

+  const totalWebsitesData = await fetch(baseFetchUrl, {
+    method: "HEAD",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${cookies.get("session_token")}`,
+      Prefer: "count=exact"
+    }
+  });
+
+  const totalWebsiteCount = Number(
+    totalWebsitesData.headers.get("content-range")?.split("/").at(-1)
+  );
+
  const websiteData = await fetch(constructedFetchUrl, {
    method: "GET",
    headers: {
@@ -38,6 +52,7 @@ export const load = async ({ fetch, cookies, url }) => {
  const websites = await websiteData.json();

  return {
+    totalWebsiteCount,
    websites
  };
 };
@@ -60,10 +75,10 @@ export const actions = {

    if (!res.ok) {
      const response = await res.json();
-      return { createWebsite: { success: false, message: response.message } };
+      return { success: false, message: response.message };
    }

-    return { createWebsite: { success: true, operation: "created" } };
+    return { success: true, message: "Successfully created website" };
  },
  updateWebsite: async ({ request, cookies, fetch }) => {
    const data = await request.formData();
@@ -81,10 +96,10 @@ export const actions = {

    if (!res.ok) {
      const response = await res.json();
-      return { updateWebsite: { success: false, message: response.message } };
+      return { success: false, message: response.message };
    }

-    return { updateWebsite: { success: true, operation: "updated" } };
+    return { success: true, message: "Successfully updated website" };
  },
  deleteWebsite: async ({ request, cookies, fetch }) => {
    const data = await request.formData();
@@ -99,9 +114,9 @@ export const actions = {

    if (!res.ok) {
      const response = await res.json();
-      return { deleteWebsite: { success: false, message: response.message } };
+      return { success: false, message: response.message };
    }

-    return { deleteWebsite: { success: true, operation: "deleted" } };
+    return { success: true, message: "Successfully deleted website" };
  }
 };
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -1,31 +1,33 @@
 <script lang="ts">
  import { enhance } from "$app/forms";
  import DateTime from "$lib/components/DateTime.svelte";
+  import { sortOptions } from "$lib/utils.js";
+  import { page } from "$app/stores";

  const { form, data } = $props();
 </script>

+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
 <section>
  <h2>Create website</h2>

  <form method="POST" action="?/createWebsite" use:enhance>
-    {#if form?.createWebsite?.success}
-      <p>Successfully created website</p>
-    {/if}
-
-    {#if form?.createWebsite?.success === false}
-      <p>{form.createWebsite.message}</p>
-    {/if}
-
    <label>
-      Type
+      Type:
      <select name="content-type">
        <option value="Blog">Blog</option>
        <option value="Docs">Docs</option>
      </select>
    </label>
    <label>
-      Title
+      Title:
      <input type="text" name="title" />
    </label>

@@ -33,71 +35,86 @@
  </form>
 </section>

-<section>
-  <h2>Your websites</h2>
+{#if data.totalWebsiteCount > 0}
+  <section>
+    <h2>All websites</h2>

-  {#if form?.deleteWebsite?.success}
-    <p>Successfully deleted website</p>
-  {/if}
+    <form method="GET">
+      <label>
+        Search:
+        <input
+          type="text"
+          name="website_search_query"
+          value={$page.url.searchParams.get("website_search_query")}
+        />
+      </label>
+      <label>
+        Sort:
+        <select name="website_sort">
+          {#each sortOptions as { value, text }}
+            <option {value} selected={value === $page.url.searchParams.get("website_sort")}
+              >{text}</option
+            >
+          {/each}
+        </select>
+      </label>
+      <label>
+        Filter:
+        <select name="website_filter">
+          <option value="all">Show all</option>
+          <option value="creations">Created by you</option>
+          <option value="shared">Shared with you</option>
+        </select>
+      </label>
+      <button type="submit">Submit</button>
+    </form>

-  {#if form?.deleteWebsite?.success === false}
-    <p>{form.deleteWebsite.message}</p>
-  {/if}
+    {#each data.websites as { id, content_type, title, created_at }}
+      <article>
+        <h3>
+          <a href="/website/{id}">{title}</a>
+        </h3>
+        <p>
+          <strong>Type:</strong>
+          {content_type}
+        </p>
+        <p>
+          <strong>Created at:</strong>
+          <DateTime date={created_at} />
+        </p>
+        <details>
+          <summary>Update</summary>
+          <form
+            method="POST"
+            action="?/updateWebsite"
+            use:enhance={() => {
+              return async ({ update }) => {
+                await update({ reset: false });
+              };
+            }}
+          >
+            <input type="hidden" name="id" value={id} />
+            <label>
+              Title
+              <input type="text" name="title" value={title} />
+            </label>

-  {#each data.websites as { id, content_type, title, created_at }}
-    <article>
-      <h3>
-        <a href="/website/{id}">{title}</a>
-      </h3>
-      <p>
-        <strong>Type:</strong>
-        {content_type}
-      </p>
-      <p>
-        <strong>Created at:</strong>
-        <DateTime date={created_at} />
-      </p>
-      <details>
-        <summary>Update</summary>
-        <form
-          method="POST"
-          action="?/updateWebsite"
-          use:enhance={() => {
-            return async ({ update }) => {
-              await update({ reset: false });
-            };
-          }}
-        >
-          {#if form?.updateWebsite?.success}
-            <p>Successfully updated website</p>
-          {/if}
+            <button type="submit">Submit</button>
+          </form>
+        </details>
+        <details>
+          <summary>Delete</summary>
+          <p>
+            <strong>Caution!</strong>
+            Deleting this website will irretrievably erase all data.
+          </p>
+          <form method="POST" action="?/deleteWebsite" use:enhance>
+            <input type="hidden" name="id" value={id} />

-          {#if form?.updateWebsite?.success === false}
-            <p>{form.updateWebsite.message}</p>
-          {/if}
-
-          <input type="hidden" name="id" value={id} />
-          <label>
-            Title
-            <input type="text" name="title" value={title} />
-          </label>
-
-          <button type="submit">Submit</button>
-        </form>
-      </details>
-      <details>
-        <summary>Delete</summary>
-        <!-- TODO: Needs to be password protected -->
-        <form method="POST" action="?/deleteWebsite" use:enhance>
-          <input type="hidden" name="id" value={id} />
-
-          <button type="submit">Delete</button>
-        </form>
-      </details>
-    </article>
-  {/each}
-</section>
-
-<section>
-  <h2>Shared with you</h2>
-</section>
+            <button type="submit">Permanently delete website</button>
+          </form>
+        </details>
+      </article>
+    {/each}
+  </section>
+{/if}
--- a/web-app/src/routes/(authenticated)/account/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/account/+page.server.ts
@@ -8,7 +8,7 @@ export const actions = {
  logout: async ({ cookies }) => {
    cookies.delete("session_token", { path: "/" });

-    return { logout: { success: true } };
+    return { success: true, message: "Successfully logged out" };
  },
  deleteAccount: async ({ request, fetch, cookies }) => {
    const data = await request.formData();
@@ -27,10 +27,10 @@ export const actions = {
    const response = await res.json();

    if (!res.ok) {
-      return { deleteAccount: { success: false, message: response.message } };
+      return { success: false, message: response.message };
    }

    cookies.delete("session_token", { path: "/" });
-    return { deleteAccount: { success: true } };
+    return { success: true, message: "Successfully deleted account" };
  }
 };
--- a/web-app/src/routes/(authenticated)/account/+page.svelte
+++ b/web-app/src/routes/(authenticated)/account/+page.svelte
@@ -4,6 +4,14 @@
  const { data, form } = $props();
 </script>

+{#if form?.success}
+  <p>{form.message}</p>
+{/if}
+
+{#if form?.success === false}
+  <p>{form.message}</p>
+{/if}
+
 <section>
  <h2>Overview</h2>

@@ -20,10 +28,6 @@
 <section>
  <h2>Logout</h2>

-  {#if form?.logout?.success}
-    <p>Successfully logged out</p>
-  {/if}
-
  <form method="POST" action="?/logout" use:enhance>
    <button type="submit">Logout</button>
  </form>
@@ -32,17 +36,9 @@
 <section>
  <h2>Delete account</h2>

-  {#if form?.deleteAccount?.success}
-    <p>Account was deleted</p>
-  {/if}
-
-  {#if form?.deleteAccount?.success === false}
-    <p>{form.deleteAccount.message}</p>
-  {/if}
-
  <form method="POST" action="?/deleteAccount" use:enhance>
    <label>
-      Password
+      Password:
      <input type="password" name="password" required />
    </label>

--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+layout.server.ts
+++ b/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
  };
 };
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.server.ts
+++ b/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 };
-};
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/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>
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/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" };
+  }
+};
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/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>
--- 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
@@ -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" };
+  }
+};
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/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>
--- a/web-app/src/routes/+layout.svelte
+++ b/web-app/src/routes/+layout.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
  import { page } from "$app/stores";
  const { data, children } = $props();
+
+  const isProjectRoute = $derived($page.url.pathname.startsWith("/website"));
 </script>

 <nav>
-  <a href="/">archtika</a>
+  <strong>archtika</strong>
  {#if data.user}
+    <a href="/">Dashboard</a>
    <a href="/account">Account</a>
  {:else}
    <a href="/register">Register</a>
@@ -13,16 +16,54 @@
  {/if}
 </nav>

-<header>
-  <h1>{$page.url.pathname}</h1>
-</header>
+{#if !isProjectRoute}
+  <header>
+    <h1>{$page.url.pathname}</h1>
+  </header>
+{/if}

-<main>
+<main class:editor={isProjectRoute}>
  {@render children()}
 </main>

 <footer>
  <p>
-    <small>archtika</small>
+    <small>archtika is a free, open, modern, performant and lightweight CMS</small>
  </p>
 </footer>
+
+<style>
+  nav,
+  header,
+  main,
+  footer {
+    padding-block: 1rem;
+    inline-size: min(100% - 2rem, 1024px);
+    margin-inline: auto;
+  }
+
+  footer {
+    text-align: center;
+  }
+
+  .editor {
+    inline-size: min(100% - 2rem, 1536px);
+    block-size: calc(100vh - 7rem);
+    border: 0.0625rem solid hsl(0 0% 50%);
+    overflow-y: auto;
+    display: flex;
+    padding-block: 0;
+  }
+
+  :global(section) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  :global(form) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+</style>
--- a/web-app/svelte.config.ts
+++ b/web-app/svelte.config.ts
@@ -1,4 +1,4 @@
-import adapter from "@sveltejs/adapter-auto";
+import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 /** @type {import('@sveltejs/kit').Config} */