Use environment variables for ports in web app

flake.nix

@@ -67,7 +67,7 @@
           web = {
             type = "app";
             program = "${pkgs.writeShellScriptBin "web-wrapper" ''
-              ORIGIN=http://localhost:4000 HOST=127.0.0.1 PORT=4000 ${pkgs.nodejs_22}/bin/node ${
+              ORIGIN=http://localhost:4000 HOST=127.0.0.1 PORT=4000 ARCHTIKA_API_PORT=3000 ARCHTIKA_NGINX_PORT=18000 ${pkgs.nodejs_22}/bin/node ${
                 self.packages.${system}.default
               }/web-app
             ''}/bin/web-wrapper";

nix/module-test.nix

@@ -30,13 +30,18 @@
     forwardPorts = [
       {
         from = "host";
-        host.port = 13000;
+        host.port = 5000;
-        guest.port = 3000;
+        guest.port = 5000;
       }
       {
         from = "host";
-        host.port = 14000;
+        host.port = 10000;
-        guest.port = 4000;
+        guest.port = 10000;
+      }
+      {
+        from = "host";
+        host.port = 15000;
+        guest.port = 15000;
       }
     ];
   };
@@ -44,7 +49,7 @@
   services.archtika = {
     enable = true;
     package = localArchtikaPackage;
-    jwtSecret = "test-secret";
+    jwtSecret = "a42kVyAhTImYxZeebZkApoAZLmf0VtDA";
   };
 
   system.stateVersion = "24.05";

nix/module.nix

@@ -41,27 +41,33 @@ in
 
     port = mkOption {
       type = types.port;
-      default = 3000;
+      default = 5000;
       description = "Port on which the API runs.";
     };
 
     webAppPort = mkOption {
       type = types.port;
-      default = 4000;
+      default = 10000;
       description = "Port on which the web application runs.";
     };
+
+    nginxPort = mkOption {
+      type = types.port;
+      default = 15000;
+      description = "Port on which NGINX runs.";
+    };
   };
 
   config = mkIf cfg.enable {
     users.users.${cfg.user} = {
       isSystemUser = true;
       group = cfg.group;
-      home = "/var/lib/archtika";
-      createHome = true;
     };
 
     users.groups.${cfg.group} = { };
 
+    systemd.tmpfiles.rules = [ "d /var/www/archtika-websites 0755 ${cfg.user} ${cfg.group} -" ];
+
     systemd.services.archtika-api = {
       description = "archtika API service";
       wantedBy = [ "multi-user.target" ];
@@ -97,7 +103,7 @@ in
       };
 
       script = ''
-        ORIGIN=http://localhost:${toString cfg.webAppPort} PORT=${toString cfg.webAppPort} ${pkgs.nodejs_22}/bin/node ${cfg.package}/web-app
+        ORIGIN=http://localhost:${toString cfg.webAppPort} PORT=${toString cfg.webAppPort} ARCHTIKA_API_PORT=${toString cfg.port} ARCHTIKA_NGINX_PORT=${toString cfg.nginxPort} ${pkgs.nodejs_22}/bin/node ${cfg.package}/web-app
       '';
     };
 
@@ -120,6 +126,25 @@ in
       enable = true;
       recommendedProxySettings = true;
       recommendedTlsSettings = true;
+
+      virtualHosts."_" = {
+        listen = [
+          {
+            addr = "0.0.0.0";
+            port = cfg.nginxPort;
+          }
+        ];
+        locations = {
+          "/" = {
+            root = "/var/www/archtika-websites";
+            index = "index.html";
+            tryFiles = "$uri $uri/ $uri/index.html =404";
+            extraConfig = ''
+              autoindex on;
+            '';
+          };
+        };
+      };
     };
   };
 }

rest-api/db/migrations/20240810115846_image_upload_function.sql.sql

@@ -11,20 +11,24 @@ DECLARE
   _allowed_mimetypes TEXT[] := ARRAY['image/png', 'image/svg+xml', 'image/jpeg', 'image/webp'];
   _max_file_size INT := 5 * 1024 * 1024;
 BEGIN
-  IF _mimetype IS NULL OR _mimetype NOT IN (
+  IF octet_length($1) = 0 THEN
-    SELECT
-      UNNEST(_allowed_mimetypes)) THEN
     RAISE invalid_parameter_value
-    USING message = 'Invalid MIME type. Allowed types are: png, svg, jpg, webp';
+    USING message = 'No file data was provided';
   END IF;
-    IF OCTET_LENGTH($1) > _max_file_size THEN
+    IF _mimetype IS NULL OR _mimetype NOT IN (
-      RAISE program_limit_exceeded
+      SELECT
-      USING message = FORMAT('File size exceeds the maximum limit of %s MB', _max_file_size / (1024 * 1024));
+        UNNEST(_allowed_mimetypes)) THEN
+      RAISE invalid_parameter_value
+      USING message = 'Invalid MIME type. Allowed types are: png, svg, jpg, webp';
     END IF;
-      INSERT INTO internal.media (website_id, blob, mimetype, original_name)
+      IF OCTET_LENGTH($1) > _max_file_size THEN
-        VALUES (_website_id, $1, _mimetype, _original_filename)
+        RAISE program_limit_exceeded
-      RETURNING
+        USING message = FORMAT('File size exceeds the maximum limit of %s MB', _max_file_size / (1024 * 1024));
-        id INTO file_id;
+      END IF;
+        INSERT INTO internal.media (website_id, blob, mimetype, original_name)
+          VALUES (_website_id, $1, _mimetype, _original_filename)
+        RETURNING
+          id INTO file_id;
 END;
 $$
 LANGUAGE plpgsql

templates/blog/article.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../styles.css">
   <title>Document</title>
 </head>
 <body>

templates/blog/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
   <title>Document</title>
 </head>
 <body>

templates/blog/styles.css

@@ -0,0 +1,18 @@
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  margin-inline: auto;
+  inline-size: min(100% - 2rem, 75ch);
+  line-height: 1.5;
+  font-family: system-ui, sans-serif;
+}
+
+img,
+picture,
+svg,
+video {
+  max-inline-size: 100%;
+  block-size: auto;
+}

web-app/.gitignore

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

web-app/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "vite dev",
+    "dev": "ARCHTIKA_API_PORT=3000 ARCHTIKA_NGINX_PORT=18000 vite dev",
     "build": "vite build",
-    "preview": "vite preview",
+    "preview": "ARCHTIKA_API_PORT=3000 ARCHTIKA_NGINX_PORT=18000 vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check .",

web-app/src/hooks.server.ts

@@ -1,7 +1,7 @@
 import { redirect } from "@sveltejs/kit";
 
 export const handle = async ({ event, resolve }) => {
-  const userData = await event.fetch("http://localhost:3000/account", {
+  const userData = await event.fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/account`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",

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

@@ -4,7 +4,7 @@ export const actions: Actions = {
   default: async ({ request, cookies, fetch }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/rpc/login", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/login`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({

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

@@ -4,7 +4,7 @@ export const actions: Actions = {
   default: async ({ request, fetch }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/rpc/register", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/register`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({

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

@@ -6,7 +6,7 @@ export const load: PageServerLoad = async ({ fetch, cookies, url }) => {
 
   const params = new URLSearchParams();
 
-  const baseFetchUrl = "http://localhost:3000/website";
+  const baseFetchUrl = `http://localhost:${process.env.ARCHTIKA_API_PORT}/website`;
 
   if (searchQuery) {
     params.append("title", `ilike.*${searchQuery}*`);
@@ -63,17 +63,20 @@ export const actions: Actions = {
   createWebsite: async ({ request, fetch, cookies }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/rpc/create_website", {
+    const res = await fetch(
-      method: "POST",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/create_website`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        content_type: data.get("content-type"),
+        },
-        title: data.get("title")
+        body: JSON.stringify({
-      })
+          content_type: data.get("content-type"),
-    });
+          title: data.get("title")
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();
@@ -85,16 +88,19 @@ export const actions: Actions = {
   updateWebsite: async ({ request, cookies, fetch }) => {
     const data = await request.formData();
 
-    const res = await fetch(`http://localhost:3000/website?id=eq.${data.get("id")}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${data.get("id")}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        title: data.get("title")
+        },
-      })
+        body: JSON.stringify({
-    });
+          title: data.get("title")
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();
@@ -106,13 +112,16 @@ export const actions: Actions = {
   deleteWebsite: async ({ request, cookies, fetch }) => {
     const data = await request.formData();
 
-    const res = await fetch(`http://localhost:3000/website?id=eq.${data.get("id")}`, {
+    const res = await fetch(
-      method: "DELETE",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${data.get("id")}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "DELETE",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        }
       }
-    });
+    );
 
     if (!res.ok) {
       const response = await res.json();

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

@@ -15,16 +15,19 @@ export const actions: Actions = {
   deleteAccount: async ({ request, fetch, cookies }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/rpc/delete_account", {
+    const res = await fetch(
-      method: "POST",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/delete_account`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "POST",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        password: data.get("password")
+        },
-      })
+        body: JSON.stringify({
-    });
+          password: data.get("password")
+        })
+      }
+    );
 
     const response = await res.json();
 

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

@@ -1,23 +1,29 @@
 import type { LayoutServerLoad } from "./$types";
 
 export const load: LayoutServerLoad = async ({ params, fetch, cookies }) => {
-  const websiteData = await fetch(`http://localhost:3000/website?id=eq.${params.websiteId}`, {
+  const websiteData = await fetch(
-    method: "GET",
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/website?id=eq.${params.websiteId}`,
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "GET",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
+      headers: {
-      Accept: "application/vnd.pgrst.object+json"
+        "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}`, {
+  const homeData = await fetch(
-    method: "GET",
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/home?website_id=eq.${params.websiteId}`,
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "GET",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
+      headers: {
-      Accept: "application/vnd.pgrst.object+json"
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
     }
-  });
+  );
 
   const website = await websiteData.json();
   const home = await homeData.json();

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

@@ -2,7 +2,7 @@ import type { Actions, PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
   const globalSettingsData = await fetch(
-    `http://localhost:3000/settings?website_id=eq.${params.websiteId}`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/settings?website_id=eq.${params.websiteId}`,
     {
       method: "GET",
       headers: {
@@ -13,23 +13,29 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url }) => {
     }
   );
 
-  const headerData = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
+  const headerData = await fetch(
-    method: "GET",
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/header?website_id=eq.${params.websiteId}`,
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "GET",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
+      headers: {
-      Accept: "application/vnd.pgrst.object+json"
+        "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(
-    method: "GET",
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/footer?website_id=eq.${params.websiteId}`,
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "GET",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
+      headers: {
-      Accept: "application/vnd.pgrst.object+json"
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${cookies.get("session_token")}`,
+        Accept: "application/vnd.pgrst.object+json"
+      }
     }
-  });
+  );
 
   const globalSettings = await globalSettingsData.json();
   const header = await headerData.json();
@@ -47,37 +53,43 @@ export const actions: Actions = {
     const data = await request.formData();
     const faviconFile = data.get("favicon") as File;
 
-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
+    const uploadedImageData = await fetch(
-      method: "POST",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
-      headers: {
+      {
-        "Content-Type": "application/octet-stream",
+        method: "POST",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
+        headers: {
-        Accept: "application/vnd.pgrst.object+json",
+          "Content-Type": "application/octet-stream",
-        "X-Website-Id": params.websiteId,
+          Authorization: `Bearer ${cookies.get("session_token")}`,
-        "X-Mimetype": faviconFile.type,
+          Accept: "application/vnd.pgrst.object+json",
-        "X-Original-Filename": faviconFile.name
+          "X-Website-Id": params.websiteId,
-      },
+          "X-Mimetype": faviconFile.type,
-      body: await faviconFile.arrayBuffer()
+          "X-Original-Filename": faviconFile.name
-    });
+        },
+        body: await faviconFile.arrayBuffer()
+      }
+    );
 
     const uploadedImage = await uploadedImageData.json();
 
-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && faviconFile.size > 0) {
       return { success: false, message: uploadedImage.message };
     }
 
-    const res = await fetch(`http://localhost:3000/settings?website_id=eq.${params.websiteId}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/settings?website_id=eq.${params.websiteId}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        accent_color_light_theme: data.get("accent-color-light"),
+        },
-        accent_color_dark_theme: data.get("accent-color-dark"),
+        body: JSON.stringify({
-        favicon_image: uploadedImage.file_id
+          accent_color_light_theme: data.get("accent-color-light"),
-      })
+          accent_color_dark_theme: data.get("accent-color-dark"),
-    });
+          favicon_image: uploadedImage.file_id
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();
@@ -93,37 +105,43 @@ export const actions: Actions = {
     const data = await request.formData();
     const logoImage = data.get("logo-image") as File;
 
-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
+    const uploadedImageData = await fetch(
-      method: "POST",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
-      headers: {
+      {
-        "Content-Type": "application/octet-stream",
+        method: "POST",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
+        headers: {
-        Accept: "application/vnd.pgrst.object+json",
+          "Content-Type": "application/octet-stream",
-        "X-Website-Id": params.websiteId,
+          Authorization: `Bearer ${cookies.get("session_token")}`,
-        "X-Mimetype": logoImage.type,
+          Accept: "application/vnd.pgrst.object+json",
-        "X-Original-Filename": logoImage.name
+          "X-Website-Id": params.websiteId,
-      },
+          "X-Mimetype": logoImage.type,
-      body: await logoImage.arrayBuffer()
+          "X-Original-Filename": logoImage.name
-    });
+        },
+        body: await logoImage.arrayBuffer()
+      }
+    );
 
     const uploadedImage = await uploadedImageData.json();
 
-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && logoImage.size > 0) {
       return { success: false, message: uploadedImage.message };
     }
 
-    const res = await fetch(`http://localhost:3000/header?website_id=eq.${params.websiteId}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/header?website_id=eq.${params.websiteId}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        logo_type: data.get("logo-type"),
+        },
-        logo_text: data.get("logo-text"),
+        body: JSON.stringify({
-        logo_image: uploadedImage.file_id
+          logo_type: data.get("logo-type"),
-      })
+          logo_text: data.get("logo-text"),
-    });
+          logo_image: uploadedImage.file_id
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();
@@ -138,16 +156,19 @@ export const actions: Actions = {
   updateHome: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
 
-    const res = await fetch(`http://localhost:3000/home?website_id=eq.${params.websiteId}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/home?website_id=eq.${params.websiteId}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        main_content: data.get("main-content")
+        },
-      })
+        body: JSON.stringify({
-    });
+          main_content: data.get("main-content")
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();
@@ -159,16 +180,19 @@ export const actions: Actions = {
   updateFooter: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
 
-    const res = await fetch(`http://localhost:3000/footer?website_id=eq.${params.websiteId}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/footer?website_id=eq.${params.websiteId}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        additional_text: data.get("additional-text")
+        },
-      })
+        body: JSON.stringify({
-    });
+          additional_text: data.get("additional-text")
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();

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

@@ -56,7 +56,7 @@
         {#if data.globalSettings.favicon_image}
           <Modal id="preview-favicon-global-{data.globalSettings.website_id}" text="Preview">
             <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.globalSettings.favicon_image}`}
               alt=""
             />
           </Modal>
@@ -110,7 +110,7 @@
         {#if data.header.logo_image}
           <Modal id="preview-logo-header-{data.header.website_id}" text="Preview">
             <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.header.logo_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.header.logo_image}`}
               alt=""
             />
           </Modal>

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

@@ -6,7 +6,7 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, url, parent
 
   const parameters = new URLSearchParams();
 
-  const baseFetchUrl = `http://localhost:3000/article?website_id=eq.${params.websiteId}&select=id,title`;
+  const baseFetchUrl = `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?website_id=eq.${params.websiteId}&select=id,title`;
 
   if (searchQuery) {
     parameters.append("title", `ilike.*${searchQuery}*`);
@@ -66,7 +66,7 @@ export const actions: Actions = {
   createArticle: async ({ request, fetch, cookies, params, locals }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/article", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/article`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -89,13 +89,16 @@ export const actions: Actions = {
   deleteArticle: async ({ request, fetch, cookies }) => {
     const data = await request.formData();
 
-    const res = await fetch(`http://localhost:3000/article?id=eq.${data.get("id")}`, {
+    const res = await fetch(
-      method: "DELETE",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${data.get("id")}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "DELETE",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${cookies.get("session_token")}`
+        }
       }
-    });
+    );
 
     if (!res.ok) {
       const response = await res.json();

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

@@ -1,14 +1,17 @@
 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(
-    method: "GET",
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${params.articleId}`,
-    headers: {
+    {
-      "Content-Type": "application/json",
+      method: "GET",
-      Authorization: `Bearer ${cookies.get("session_token")}`,
+      headers: {
-      Accept: "application/vnd.pgrst.object+json"
+        "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();
@@ -21,40 +24,46 @@ export const actions: Actions = {
     const data = await request.formData();
     const coverFile = data.get("cover-image") as File;
 
-    const uploadedImageData = await fetch(`http://localhost:3000/rpc/upload_file`, {
+    const uploadedImageData = await fetch(
-      method: "POST",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/upload_file`,
-      headers: {
+      {
-        "Content-Type": "application/octet-stream",
+        method: "POST",
-        Authorization: `Bearer ${cookies.get("session_token")}`,
+        headers: {
-        Accept: "application/vnd.pgrst.object+json",
+          "Content-Type": "application/octet-stream",
-        "X-Website-Id": params.websiteId,
+          Authorization: `Bearer ${cookies.get("session_token")}`,
-        "X-Mimetype": coverFile.type,
+          Accept: "application/vnd.pgrst.object+json",
-        "X-Original-Filename": coverFile.name
+          "X-Website-Id": params.websiteId,
-      },
+          "X-Mimetype": coverFile.type,
-      body: await coverFile.arrayBuffer()
+          "X-Original-Filename": coverFile.name
-    });
+        },
+        body: await coverFile.arrayBuffer()
+      }
+    );
 
     const uploadedImage = await uploadedImageData.json();
 
-    if (!uploadedImageData.ok) {
+    if (!uploadedImageData.ok && coverFile.size > 0) {
       return { success: false, message: uploadedImage.message };
     }
 
-    const res = await fetch(`http://localhost:3000/article?id=eq.${params.articleId}`, {
+    const res = await fetch(
-      method: "PATCH",
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/article?id=eq.${params.articleId}`,
-      headers: {
+      {
-        "Content-Type": "application/json",
+        method: "PATCH",
-        Authorization: `Bearer ${cookies.get("session_token")}`
+        headers: {
-      },
+          "Content-Type": "application/json",
-      body: JSON.stringify({
+          Authorization: `Bearer ${cookies.get("session_token")}`
-        title: data.get("title"),
+        },
-        meta_description: data.get("description"),
+        body: JSON.stringify({
-        meta_author: data.get("author"),
+          title: data.get("title"),
-        cover_image: uploadedImage.file_id,
+          meta_description: data.get("description"),
-        publication_date: data.get("publication-date"),
+          meta_author: data.get("author"),
-        main_content: data.get("main-content")
+          cover_image: uploadedImage.file_id,
-      })
+          publication_date: data.get("publication-date"),
-    });
+          main_content: data.get("main-content")
+        })
+      }
+    );
 
     if (!res.ok) {
       const response = await res.json();

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

@@ -69,7 +69,7 @@
         {#if data.article.cover_image}
           <Modal id="preview-cover-article-{data.article.id}" text="Preview">
             <img
-              src={`http://localhost:3000/rpc/retrieve_file?id=${data.article.cover_image}`}
+              src={`http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${data.article.cover_image}`}
               alt=""
             />
           </Modal>

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

@@ -4,7 +4,7 @@ export const load: PageServerLoad = async ({ parent, params, fetch, cookies }) =
   const { website, home } = await parent();
 
   const collabData = await fetch(
-    `http://localhost:3000/collab?website_id=eq.${params.websiteId}&select=*,user!user_id(*)`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&select=*,user!user_id(*)`,
     {
       method: "GET",
       headers: {
@@ -27,7 +27,7 @@ export const actions: Actions = {
   addCollaborator: async ({ request, fetch, cookies, params }) => {
     const data = await request.formData();
 
-    const res = await fetch("http://localhost:3000/collab", {
+    const res = await fetch(`http://localhost:${process.env.ARCHTIKA_API_PORT}/collab`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -51,7 +51,7 @@ export const actions: Actions = {
     const data = await request.formData();
 
     const res = await fetch(
-      `http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
       {
         method: "PATCH",
         headers: {
@@ -75,7 +75,7 @@ export const actions: Actions = {
     const data = await request.formData();
 
     const res = await fetch(
-      `http://localhost:3000/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
+      `http://localhost:${process.env.ARCHTIKA_API_PORT}/collab?website_id=eq.${params.websiteId}&user_id=eq.${data.get("user-id")}`,
       {
         method: "DELETE",
         headers: {

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

@@ -5,7 +5,7 @@ import type { Actions, PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) => {
   const websiteOverviewData = await fetch(
-    `http://localhost:3000/website_overview?id=eq.${params.websiteId}`,
+    `http://localhost:${process.env.ARCHTIKA_API_PORT}/website_overview?id=eq.${params.websiteId}`,
     {
       method: "GET",
       headers: {
@@ -20,17 +20,22 @@ export const load: PageServerLoad = async ({ params, fetch, cookies, locals }) =
 
   generateStaticFiles(websiteOverview);
 
+  const websitePreviewUrl = `http://localhost:${process.env.ARCHTIKA_NGINX_PORT}/previews/${websiteOverview.user_id}/${websiteOverview.id}/index.html`;
+
   return {
-    websiteOverview
+    websiteOverview,
+    websitePreviewUrl
   };
 };
 
 export const actions: Actions = {
-  publishWebsite: async ({ request, params, locals }) => {
+  publishWebsite: async ({ request }) => {
     const data = await request.formData();
     const websiteOverview = JSON.parse(data.get("website-overview") as string);
 
     generateStaticFiles(websiteOverview, false);
+
+    return { success: true, message: "Successfully published website" };
   }
 };
 
@@ -46,6 +51,7 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
   const articleFile = await readFile(join(templatePath, "article.html"), {
     encoding: "utf-8"
   });
+  const stylesFile = await readFile(join(templatePath, "styles.css"), { encoding: "utf-8" });
 
   const indexFileContents = indexFile
     .replace(
@@ -88,7 +94,15 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
   let uploadDir = "";
 
   if (isPreview) {
-    uploadDir = join(process.cwd(), "static", "user-websites", websiteData.user_id, websiteData.id);
+    uploadDir = join(
+      "/",
+      "var",
+      "www",
+      "archtika-websites",
+      "previews",
+      websiteData.user_id,
+      websiteData.id
+    );
   } else {
     uploadDir = join("/", "var", "www", "archtika-websites", websiteData.user_id, websiteData.id);
   }
@@ -109,7 +123,10 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
           ? `<strong>${websiteData.logo_text}</strong>`
           : `<img src="https://picsum.photos/32/32" />`
       )
-      .replace("{{cover_image}}", `<img src="https://picsum.photos/600/200" />`)
+      .replace(
+        "{{cover_image}}",
+        `<img src="${article.cover_image ? `http://localhost:${process.env.ARCHTIKA_API_PORT}/rpc/retrieve_file?id=${article.cover_image}` : "https://picsum.photos/600/200"}" />`
+      )
       .replace("{{title}}", `<h1>${article.title}</h1>`)
       .replace("{{publication_date}}", `<p>${article.publication_date}</p>`)
       .replace("{{main_content}}", md.render(article.main_content ?? ""))
@@ -117,4 +134,6 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
 
     await writeFile(join(uploadDir, "articles", `${articleFileName}.html`), articleFileContents);
   }
+
+  await writeFile(join(uploadDir, "styles.css"), stylesFile);
 };

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

@@ -12,8 +12,7 @@
 <WebsiteEditor
   id={data.website.id}
   title={data.website.title}
-  previewContent="http://localhost:5173/user-websites/{data.websiteOverview.user_id}/{data
+  previewContent={data.websitePreviewUrl}
-    .websiteOverview.id}/index.html"
   fullPreview={true}
 >
   <section>