Create nix derivations for building and running web app

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";
+          };
         }
       );
 

web-app/.gitignore

@@ -1,6 +1,7 @@
 node_modules
 user-uploads
 user-websites
+result
 
 # Output
 .output

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

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>
+      <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,6 +97,7 @@
           required={data.header.logo_type === "text"}
         />
       </label>
+      <div class="file-field">
         <label>
           Logo image:
           <input
@@ -95,6 +107,15 @@
             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>

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}`, {
+  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();

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

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(),