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

Create nix derivations for building and running web app

Browse Source
This commit is contained in:
thiloho
2024-08-09 16:17:33 +02:00
parent 2fd934ed86
commit 99645ec874
7 changed files with 105 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web-app/src/app.css
View File

@@ -161,13 +161,20 @@ form[method="GET"] > button[type="submit"] {
align-self: end;
}
form > label {
form label {
display: flex;
flex-direction: column;
gap: 0.25rem;
max-inline-size: 30ch;
}
form > label:has(textarea) {
form label:has(textarea) {
max-inline-size: 65ch;
}
form .file-field {
display: flex;
align-items: end;
gap: 0.5rem;
flex-wrap: wrap;
}

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

@@ -4,6 +4,7 @@
import { ALLOWED_MIME_TYPES } from "$lib/utils";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import Modal from "$lib/components/Modal.svelte";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
</script>
@@ -47,10 +48,20 @@
required
/>
</label>
<label>
Favicon:
<input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
<div class="file-field">
<label>
Favicon:
<input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
{#if data.globalSettings.media}
<Modal id="preview-favicon-global-{data.globalSettings.website_id}" text="Preview">
<img
src={`http://localhost:5173/${data.globalSettings.media.file_system_path}`}
alt={data.globalSettings.media.original_name}
/>
</Modal>
{/if}
</div>
<button type="submit">Submit</button>
</form>
@@ -86,15 +97,25 @@
required={data.header.logo_type === "text"}
/>
</label>
<label>
Logo image:
<input
type="file"
name="logo-image"
accept={ALLOWED_MIME_TYPES.join(", ")}
required={data.header.logo_type === "image"}
/>
</label>
<div class="file-field">
<label>
Logo image:
<input
type="file"
name="logo-image"
accept={ALLOWED_MIME_TYPES.join(", ")}
required={data.header.logo_type === "image"}
/>
</label>
{#if data.header.media}
<Modal id="preview-logo-header-{data.header.website_id}" text="Preview">
<img
src={`http://localhost:5173/${data.header.media.file_system_path}`}
alt={data.header.media.original_name}
/>
</Modal>
{/if}
</div>
<button type="submit">Submit</button>
</form>

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

@@ -2,14 +2,17 @@ import { handleFileUpload } from "$lib/server/utils.js";
import type { Actions, PageServerLoad } from "./$types";
export const load: PageServerLoad = 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 articleData = await fetch(
`http://localhost:3000/article?id=eq.${params.articleId}&select=*,media(*)`,
{
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();

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

@@ -4,6 +4,7 @@
import { ALLOWED_MIME_TYPES } from "$lib/utils";
import SuccessOrError from "$lib/components/SuccessOrError.svelte";
import type { ActionData, PageServerData } from "./$types";
import Modal from "$lib/components/Modal.svelte";
const { data, form } = $props<{ data: PageServerData; form: ActionData }>();
</script>
@@ -60,10 +61,20 @@
Publication date:
<input type="date" name="publication-date" value={data.article.publication_date} required />
</label>
<label>
Cover image:
<input type="file" name="cover-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
<div class="file-field">
<label>
Cover image:
<input type="file" name="cover-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
</label>
{#if data.article.media}
<Modal id="preview-cover-article-{data.article.id}" text="Preview">
<img
src={`http://localhost:5173/${data.article.media.file_system_path}`}
alt={data.article.media.original_name}
/>
</Modal>
{/if}
</div>
<label>
Main content:
<textarea name="main-content" rows="20" required>{data.article.main_content}</textarea>