thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add basic forms and routes

Browse Source
This commit is contained in:
Thilo Hohlt
2024-08-01 18:09:35 +02:00
parent d21e00a0c3
commit b0666f4a8c
20 changed files with 762 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web-app/src/app.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/@acab/reset.css" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

45
web-app/src/lib/components/WebsiteEditor.svelte Normal file
View File

@@ -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>

66
web-app/src/lib/server/utils.ts Normal file
View File

@@ -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 };
};

2
web-app/src/routes/(anonymous)/login/+page.server.ts
View File

@@ -18,6 +18,6 @@ export const actions = {
} }
cookies.set("session_token", response.token, { path: "/" }); cookies.set("session_token", response.token, { path: "/" });
return { success: true }; return { success: true, message: "Successfully logged in" };
} }
}; };

20
web-app/src/routes/(anonymous)/login/+page.svelte
View File

@@ -4,21 +4,21 @@
const { form } = $props(); const { form } = $props();
</script> </script>
{#if form?.success}
<p>{form.message}</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<form method="POST" use:enhance> <form method="POST" use:enhance>
{#if form?.success}
<p>Successfully logged in</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<label> <label>
Username Username:
<input type="text" name="username" required /> <input type="text" name="username" required />
</label> </label>
<label> <label>
Password Password:
<input type="password" name="password" required /> <input type="password" name="password" required />
</label> </label>

2
web-app/src/routes/(anonymous)/register/+page.server.ts
View File

@@ -17,6 +17,6 @@ export const actions = {
return { success: false, message: response.message }; return { success: false, message: response.message };
} }
return { success: true }; return { success: true, message: "Successfully registered, you can now login" };
} }
}; };

20
web-app/src/routes/(anonymous)/register/+page.svelte
View File

@@ -4,21 +4,21 @@
const { form } = $props(); const { form } = $props();
</script> </script>
{#if form?.success}
<p>{form.message}</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<form method="POST" use:enhance> <form method="POST" use:enhance>
{#if form?.success}
<p>Successfully registered</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<label> <label>
Username Username:
<input type="text" name="username" minlength="3" maxlength="16" required /> <input type="text" name="username" minlength="3" maxlength="16" required />
</label> </label>
<label> <label>
Password Password:
<input type="password" name="password" minlength="12" maxlength="128" required /> <input type="password" name="password" minlength="12" maxlength="128" required />
</label> </label>

29
web-app/src/routes/(authenticated)/+page.server.ts
View File

@@ -7,10 +7,11 @@ export const load = async ({ fetch, cookies, url }) => {
const baseFetchUrl = "http://localhost:3000/website"; const baseFetchUrl = "http://localhost:3000/website";
if (searchQuery) { if (searchQuery) {
params.append("website_title", `ilike.*${searchQuery}*`); params.append("title", `ilike.*${searchQuery}*`);
} }
switch (sortBy) { switch (sortBy) {
case null:
case "creation-time": case "creation-time":
params.append("order", "created_at.desc"); params.append("order", "created_at.desc");
break; break;
@@ -27,6 +28,19 @@ export const load = async ({ fetch, cookies, url }) => {
const constructedFetchUrl = `${baseFetchUrl}?${params.toString()}`; 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, { const websiteData = await fetch(constructedFetchUrl, {
method: "GET", method: "GET",
headers: { headers: {
@@ -38,6 +52,7 @@ export const load = async ({ fetch, cookies, url }) => {
const websites = await websiteData.json(); const websites = await websiteData.json();
return { return {
totalWebsiteCount,
websites websites
}; };
}; };
@@ -60,10 +75,10 @@ export const actions = {
if (!res.ok) { if (!res.ok) {
const response = await res.json(); 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 }) => { updateWebsite: async ({ request, cookies, fetch }) => {
const data = await request.formData(); const data = await request.formData();
@@ -81,10 +96,10 @@ export const actions = {
if (!res.ok) { if (!res.ok) {
const response = await res.json(); 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 }) => { deleteWebsite: async ({ request, cookies, fetch }) => {
const data = await request.formData(); const data = await request.formData();
@@ -99,9 +114,9 @@ export const actions = {
if (!res.ok) { if (!res.ok) {
const response = await res.json(); 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" };
} }
}; };

165
web-app/src/routes/(authenticated)/+page.svelte
View File

@@ -1,31 +1,33 @@
<script lang="ts"> <script lang="ts">
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
import DateTime from "$lib/components/DateTime.svelte"; import DateTime from "$lib/components/DateTime.svelte";
import { sortOptions } from "$lib/utils.js";
import { page } from "$app/stores";
const { form, data } = $props(); const { form, data } = $props();
</script> </script>
{#if form?.success}
<p>{form.message}</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<section> <section>
<h2>Create website</h2> <h2>Create website</h2>
<form method="POST" action="?/createWebsite" use:enhance> <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> <label>
Type Type:
<select name="content-type"> <select name="content-type">
<option value="Blog">Blog</option> <option value="Blog">Blog</option>
<option value="Docs">Docs</option> <option value="Docs">Docs</option>
</select> </select>
</label> </label>
<label> <label>
Title Title:
<input type="text" name="title" /> <input type="text" name="title" />
</label> </label>
@@ -33,71 +35,86 @@
</form> </form>
</section> </section>
<section> {#if data.totalWebsiteCount > 0}
<h2>Your websites</h2> <section>
<h2>All websites</h2>
{#if form?.deleteWebsite?.success} <form method="GET">
<p>Successfully deleted website</p> <label>
{/if} 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} {#each data.websites as { id, content_type, title, created_at }}
<p>{form.deleteWebsite.message}</p> <article>
{/if} <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 }} <button type="submit">Submit</button>
<article> </form>
<h3> </details>
<a href="/website/{id}">{title}</a> <details>
</h3> <summary>Delete</summary>
<p> <p>
<strong>Type:</strong> <strong>Caution!</strong>
{content_type} Deleting this website will irretrievably erase all data.
</p> </p>
<p> <form method="POST" action="?/deleteWebsite" use:enhance>
<strong>Created at:</strong> <input type="hidden" name="id" value={id} />
<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}
{#if form?.updateWebsite?.success === false} <button type="submit">Permanently delete website</button>
<p>{form.updateWebsite.message}</p> </form>
{/if} </details>
</article>
<input type="hidden" name="id" value={id} /> {/each}
<label> </section>
Title {/if}
<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>

6
web-app/src/routes/(authenticated)/account/+page.server.ts
View File

@@ -8,7 +8,7 @@ export const actions = {
logout: async ({ cookies }) => { logout: async ({ cookies }) => {
cookies.delete("session_token", { path: "/" }); cookies.delete("session_token", { path: "/" });
return { logout: { success: true } }; return { success: true, message: "Successfully logged out" };
}, },
deleteAccount: async ({ request, fetch, cookies }) => { deleteAccount: async ({ request, fetch, cookies }) => {
const data = await request.formData(); const data = await request.formData();
@@ -27,10 +27,10 @@ export const actions = {
const response = await res.json(); const response = await res.json();
if (!res.ok) { if (!res.ok) {
return { deleteAccount: { success: false, message: response.message } }; return { success: false, message: response.message };
} }
cookies.delete("session_token", { path: "/" }); cookies.delete("session_token", { path: "/" });
return { deleteAccount: { success: true } }; return { success: true, message: "Successfully deleted account" };
} }
}; };

22
web-app/src/routes/(authenticated)/account/+page.svelte
View File

@@ -4,6 +4,14 @@
const { data, form } = $props(); const { data, form } = $props();
</script> </script>
{#if form?.success}
<p>{form.message}</p>
{/if}
{#if form?.success === false}
<p>{form.message}</p>
{/if}
<section> <section>
<h2>Overview</h2> <h2>Overview</h2>
@@ -20,10 +28,6 @@
<section> <section>
<h2>Logout</h2> <h2>Logout</h2>
{#if form?.logout?.success}
<p>Successfully logged out</p>
{/if}
<form method="POST" action="?/logout" use:enhance> <form method="POST" action="?/logout" use:enhance>
<button type="submit">Logout</button> <button type="submit">Logout</button>
</form> </form>
@@ -32,17 +36,9 @@
<section> <section>
<h2>Delete account</h2> <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> <form method="POST" action="?/deleteAccount" use:enhance>
<label> <label>
Password Password:
<input type="password" name="password" required /> <input type="password" name="password" required />
</label> </label>

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

@@ -1,5 +1,14 @@
export const load = async ({ params, fetch, cookies }) => { 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", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -9,8 +18,10 @@ export const load = async ({ params, fetch, cookies }) => {
}); });
const website = await websiteData.json(); const website = await websiteData.json();
const home = await homeData.json();
return { return {
website website,
home
}; };
}; };

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

@@ -1,7 +1,4 @@
import { randomUUID } from "node:crypto"; import { handleFileUpload } from "$lib/server/utils.js";
import { mkdir, writeFile } from "node:fs/promises";
import { extname, join, relative } from "node:path";
import { ALLOWED_MIME_TYPES } from "$lib/utils.js";
export const load = async ({ params, fetch, cookies, url }) => { export const load = async ({ params, fetch, cookies, url }) => {
const globalSettingsData = await fetch( 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}`, { const footerData = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
method: "GET", method: "GET",
headers: { 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 globalSettings = await globalSettingsData.json();
const header = await headerData.json(); const header = await headerData.json();
const home = await homeData.json();
const footer = await footerData.json(); const footer = await footerData.json();
const articles = await articlesData.json();
return { return {
globalSettings, globalSettings,
header, header,
home, footer
footer,
articles
}; };
}; };
@@ -134,8 +82,7 @@ export const actions = {
return { return {
success: true, success: true,
operation: "updated", message: "Successfully updated global settings"
ressource: "global settings"
}; };
}, },
updateHeader: async ({ request, fetch, cookies, locals, params }) => { updateHeader: async ({ request, fetch, cookies, locals, params }) => {
@@ -174,8 +121,7 @@ export const actions = {
return { return {
success: true, success: true,
operation: "updated", message: "Successfully updated header"
ressource: "header settings"
}; };
}, },
updateHome: async ({ request, fetch, cookies, params }) => { updateHome: async ({ request, fetch, cookies, params }) => {
@@ -197,7 +143,7 @@ export const actions = {
return { success: false, message: response.message }; 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 }) => { updateFooter: async ({ request, fetch, cookies, params }) => {
const data = await request.formData(); const data = await request.formData();
@@ -220,149 +166,7 @@ export const actions = {
return { return {
success: true, success: true,
operation: "updated", message: "Successfully updated footer"
ressource: "footer settings"
}; };
},
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 };
};

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

@@ -1,15 +1,133 @@
<section> <script lang="ts">
<h2>Settings</h2> import { enhance } from "$app/forms";
</section> import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
import { ALLOWED_MIME_TYPES } from "$lib/utils";
<section> const { data, form } = $props();
<h2>Articles</h2> </script>
</section>
<section> {#if form?.success}
<h2>Collaborators</h2> <p>{form.message}</p>
</section> {/if}
<section> {#if form?.success === false}
<h2>Logs</h2> <p>{form.message}</p>
</section> {/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>

103
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts Normal file
View File

@@ -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" };
}
};

82
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte Normal file
View File

@@ -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>

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

@@ -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" };
}
};

62
web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte Normal file
View File

@@ -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>

53
web-app/src/routes/+layout.svelte
View File

@@ -1,11 +1,14 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
const { data, children } = $props(); const { data, children } = $props();
const isProjectRoute = $derived($page.url.pathname.startsWith("/website"));
</script> </script>
<nav> <nav>
<a href="/">archtika</a> <strong>archtika</strong>
{#if data.user} {#if data.user}
<a href="/">Dashboard</a>
<a href="/account">Account</a> <a href="/account">Account</a>
{:else} {:else}
<a href="/register">Register</a> <a href="/register">Register</a>
@@ -13,16 +16,54 @@
{/if} {/if}
</nav> </nav>
<header> {#if !isProjectRoute}
<h1>{$page.url.pathname}</h1> <header>
</header> <h1>{$page.url.pathname}</h1>
</header>
{/if}
<main> <main class:editor={isProjectRoute}>
{@render children()} {@render children()}
</main> </main>
<footer> <footer>
<p> <p>
<small>archtika</small> <small>archtika is a free, open, modern, performant and lightweight CMS</small>
</p> </p>
</footer> </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>

2
web-app/svelte.config.ts
View File

@@ -1,4 +1,4 @@
import adapter from "@sveltejs/adapter-auto"; import adapter from "@sveltejs/adapter-node";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */