From 99645ec87419fecbe11ae7250216a0fc71a7d934 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:17:33 +0200
Subject: [PATCH] Create nix derivations for building and running web app

---
 flake.nix                                     | 35 +++++++++++++-
 web-app/.gitignore                            |  1 +
 web-app/src/app.css                           | 11 ++++-
 .../website/[websiteId]/+page.svelte          | 47 ++++++++++++++-----
 .../articles/[articleId]/+page.server.ts      | 17 ++++---
 .../articles/[articleId]/+page.svelte         | 19 ++++++--
 .../{svelte.config.ts => svelte.config.js}    |  4 +-
 7 files changed, 105 insertions(+), 29 deletions(-)
 rename web-app/{svelte.config.ts => svelte.config.js} (90%)

diff --git a/flake.nix b/flake.nix
index 03aa1f3..2ac8daf 100644
--- a/flake.nix
+++ b/flake.nix
@@ -42,6 +42,8 @@
           pkgs = nixpkgs.legacyPackages.${system};
         in
         {
+          dev-vm = self.nixosConfigurations.${system}.dev-vm.config.system.build.vm;
+
           api-setup = pkgs.writeShellScriptBin "api-setup" ''
             source .env
 
@@ -53,7 +55,38 @@
 
             PGRST_DB_URI="$PGRST_DB_URI" PGRST_JWT_SECRET="$JWT_SECRET" ${pkgs.postgrest}/bin/postgrest postgrest.conf
           '';
-          dev-vm = self.nixosConfigurations.${system}.dev-vm.config.system.build.vm;
+
+          web = pkgs.buildNpmPackage {
+            name = "archtika-web-app";
+            src = ./web-app;
+            npmDepsHash = "sha256-DmIII/x5ANlEpKtnZC/JlbVAvhbgnSiNn8hkj+qVCZY=";
+            npmFlags = [ "--legacy-peer-deps" ];
+            installPhase = ''
+              mkdir $out
+              cp package.json $out
+              cp -r node_modules $out
+              cp -r build/* $out
+            '';
+          };
+        }
+      );
+
+      apps = forAllSystems (
+        system:
+        let
+          pkgs = nixpkgs.legacyPackages.${system};
+        in
+        {
+          web = {
+            type = "app";
+            program = "${pkgs.writeShellScriptBin "web-wrapper" ''
+              export ORIGIN=http://localhost:4000
+              export HOST=127.0.0.1
+              export PORT=4000
+
+              ${pkgs.nodejs_22}/bin/node ${self.packages.${system}.web}
+            ''}/bin/web-wrapper";
+          };
         }
       );
 
diff --git a/web-app/.gitignore b/web-app/.gitignore
index f2b82b1..db048fc 100644
--- a/web-app/.gitignore
+++ b/web-app/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 user-uploads
 user-websites
+result
 
 # Output
 .output
diff --git a/web-app/src/app.css b/web-app/src/app.css
index ebfe5c9..e01e5e4 100644
--- a/web-app/src/app.css
+++ b/web-app/src/app.css
@@ -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;
+}
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
index 6769e80..98f35fe 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
@@ -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>
diff --git 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
index f60120b..b212d3e 100644
--- 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
@@ -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();
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
index d81f73a..e4f0a9d 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/[articleId]/+page.svelte
@@ -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>
diff --git a/web-app/svelte.config.ts b/web-app/svelte.config.js
similarity index 90%
rename from web-app/svelte.config.ts
rename to web-app/svelte.config.js
index c595732..8123f69 100644
--- a/web-app/svelte.config.ts
+++ b/web-app/svelte.config.js
@@ -1,8 +1,8 @@
 import adapter from "@sveltejs/adapter-node";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
-import { Config } from "@sveltejs/kit";
 
-const config: Config = {
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
   preprocess: vitePreprocess(),