web-app/src/routes/%28authenticated%29/website/%5BwebsiteId%5D/publish/+page.server.ts

import { readFile, mkdir, writeFile } from "node:fs/promises";
import { join } from "node:path";
import { type WebsiteOverview } from "$lib/utils";
import type { Actions, PageServerLoad } from "./$types";
import { API_BASE_PREFIX } from "$lib/server/utils";
import { render } from "svelte/server";
import BlogIndex from "$lib/templates/blog/BlogIndex.svelte";
import BlogArticle from "$lib/templates/blog/BlogArticle.svelte";
import DocsIndex from "$lib/templates/docs/DocsIndex.svelte";
import DocsArticle from "$lib/templates/docs/DocsArticle.svelte";
import { dev } from "$app/environment";

export const load: PageServerLoad = async ({ params, fetch, cookies }) => {
  const websiteOverviewData = await fetch(
    `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,settings(*),header(*),home(*),footer(*),article(*,docs_category(*)),legal_information(*)`,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${cookies.get("session_token")}`,
        Accept: "application/vnd.pgrst.object+json"
      }
    }
  );

  const websiteOverview: WebsiteOverview = await websiteOverviewData.json();

  generateStaticFiles(websiteOverview);

  const websitePreviewUrl = `${
    dev
      ? "http://localhost:18000"
      : process.env.ORIGIN
        ? process.env.ORIGIN
        : "http://localhost:18000"
  }/previews/${websiteOverview.id}/`;

  const websiteProdUrl = dev
    ? `http://localhost:18000/${websiteOverview.id}/`
    : process.env.ORIGIN
      ? process.env.ORIGIN.replace("//", `//${websiteOverview.id}.`)
      : `http://localhost:18000/${websiteOverview.id}/`;

  return {
    websiteOverview,
    websitePreviewUrl,
    websiteProdUrl
  };
};

export const actions: Actions = {
  publishWebsite: async ({ fetch, params, cookies }) => {
    const websiteOverviewData = await fetch(
      `${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=*,settings(*),header(*),home(*),footer(*),article(*,docs_category(*)),legal_information(*)`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${cookies.get("session_token")}`,
          Accept: "application/vnd.pgrst.object+json"
        }
      }
    );

    const websiteOverview = await websiteOverviewData.json();
    generateStaticFiles(websiteOverview, false);

    const res = await fetch(`${API_BASE_PREFIX}/website?id=eq.${params.websiteId}`, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${cookies.get("session_token")}`
      },
      body: JSON.stringify({
        is_published: true
      })
    });

    if (!res.ok) {
      const response = await res.json();
      return { success: false, message: response.message };
    }

    return { success: true, message: "Successfully published website" };
  }
};

const generateStaticFiles = async (websiteData: WebsiteOverview, isPreview: boolean = true) => {
  const fileContents = (head: string, body: string) => {
    return `
<!DOCTYPE html>
<html lang="en">
  <head>
    ${head}
  </head>
  <body>
    ${body}
  </body>
</html>`;
  };

  const { head, body } = render(websiteData.content_type === "Blog" ? BlogIndex : DocsIndex, {
    props: {
      websiteOverview: websiteData,
      apiUrl: API_BASE_PREFIX,
      isLegalPage: false
    }
  });

  let uploadDir = "";

  if (isPreview) {
    uploadDir = join("/", "var", "www", "archtika-websites", "previews", websiteData.id);
  } else {
    uploadDir = join("/", "var", "www", "archtika-websites", websiteData.id);
  }

  await mkdir(uploadDir, { recursive: true });
  await writeFile(join(uploadDir, "index.html"), fileContents(head, body));
  await mkdir(join(uploadDir, "articles"), {
    recursive: true
  });

  for (const article of websiteData.article ?? []) {
    const articleFileName = article.title.toLowerCase().split(" ").join("-");

    const { head, body } = render(websiteData.content_type === "Blog" ? BlogArticle : DocsArticle, {
      props: {
        websiteOverview: websiteData,
        article,
        apiUrl: API_BASE_PREFIX
      }
    });

    await writeFile(
      join(uploadDir, "articles", `${articleFileName}.html`),
      fileContents(head, body)
    );
  }

  if (websiteData.legal_information) {
    const { head, body } = render(websiteData.content_type === "Blog" ? BlogIndex : DocsIndex, {
      props: {
        websiteOverview: websiteData,
        apiUrl: API_BASE_PREFIX,
        isLegalPage: true
      }
    });

    await writeFile(join(uploadDir, "legal-information.html"), fileContents(head, body));
  }

  const commonStyles = await readFile(`${process.cwd()}/template-styles/common-styles.css`, {
    encoding: "utf-8"
  });
  const specificStyles = await readFile(
    `${process.cwd()}/template-styles/${websiteData.content_type.toLowerCase()}-styles.css`,
    {
      encoding: "utf-8"
    }
  );
  await writeFile(
    join(uploadDir, "styles.css"),
    commonStyles
      .concat(specificStyles)
      .replace(
        /--color-accent:\s*(.*?);/,
        `--color-accent: ${websiteData.settings.accent_color_dark_theme};`
      )
      .replace(
        /@media\s*\(prefers-color-scheme:\s*dark\)\s*{[^}]*--color-accent:\s*(.*?);/,
        (match) =>
          match.replace(
            /--color-accent:\s*(.*?);/,
            `--color-accent: ${websiteData.settings.accent_color_light_theme};`
          )
      )
  );
};
Include stylesheet in static file generation 2024-08-17 20:21:23 +02:00			`import { readFile, mkdir, writeFile } from "node:fs/promises";`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00			`import { join } from "node:path";`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`import { type WebsiteOverview } from "$lib/utils";`
Explicitely define server load and action types 2024-08-05 14:38:44 +02:00			`import type { Actions, PageServerLoad } from "./$types";`
Put API prefix in server only file to access process.env 2024-08-19 20:33:23 +02:00			`import { API_BASE_PREFIX } from "$lib/server/utils";`
Use SvelteKit render function for templating and add error page 2024-08-17 19:29:10 +02:00			`import { render } from "svelte/server";`
			`import BlogIndex from "$lib/templates/blog/BlogIndex.svelte";`
			`import BlogArticle from "$lib/templates/blog/BlogArticle.svelte";`
Differentiate blog and docs and sectionize headings 2024-08-18 18:17:59 +02:00			`import DocsIndex from "$lib/templates/docs/DocsIndex.svelte";`
Add categories for docs template 2024-08-27 16:39:29 +02:00			`import DocsArticle from "$lib/templates/docs/DocsArticle.svelte";`
Put API prefix in server only file to access process.env 2024-08-19 20:33:23 +02:00			`import { dev } from "$app/environment";`
Add base template for website preview route 2024-08-03 18:07:27 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`export const load: PageServerLoad = async ({ params, fetch, cookies }) => {`
Differentiate between dev and prod for api and nginx 2024-08-14 19:33:41 +02:00			`const websiteOverviewData = await fetch(`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=,settings(),header(),home(),footer(),article(,docs_category()),legal_information()`,
Differentiate between dev and prod for api and nginx 2024-08-14 19:33:41 +02:00			`{`
			`method: "GET",`
			`headers: {`
			`"Content-Type": "application/json",`
			Authorization: `Bearer ${cookies.get("session_token")}`,
			`Accept: "application/vnd.pgrst.object+json"`
			`}`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00			`}`
Differentiate between dev and prod for api and nginx 2024-08-14 19:33:41 +02:00			`);`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`const websiteOverview: WebsiteOverview = await websiteOverviewData.json();`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00
Manage collaborators via RLS 2024-08-07 19:13:39 +02:00			`generateStaticFiles(websiteOverview);`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00
Test website publication and remove collab account 2024-09-01 13:37:28 +02:00			const websitePreviewUrl = `${
			`dev`
			`? "http://localhost:18000"`
			`: process.env.ORIGIN`
			`? process.env.ORIGIN`
			`: "http://localhost:18000"`
Serve routes without .html file extension 2024-09-07 18:22:58 +02:00			}/previews/${websiteOverview.id}/`;
Use environment variables for ports in web app 2024-08-10 22:20:57 +02:00
Set website production url correctly for NGINX 2024-09-07 15:07:31 +02:00			`const websiteProdUrl = dev`
Serve routes without .html file extension 2024-09-07 18:22:58 +02:00			? `http://localhost:18000/${websiteOverview.id}/`
Set website production url correctly for NGINX 2024-09-07 15:07:31 +02:00			`: process.env.ORIGIN`
			? process.env.ORIGIN.replace("//", `//${websiteOverview.id}.`)
Serve routes without .html file extension 2024-09-07 18:22:58 +02:00			: `http://localhost:18000/${websiteOverview.id}/`;
Set website production url correctly for NGINX 2024-09-07 15:07:31 +02:00
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00			`return {`
Use environment variables for ports in web app 2024-08-10 22:20:57 +02:00			`websiteOverview,`
Share styles and update props 2024-08-20 19:17:05 +02:00			`websitePreviewUrl,`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`websiteProdUrl`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00			`};`
			`};`

Explicitely define server load and action types 2024-08-05 14:38:44 +02:00			`export const actions: Actions = {`
Add categories for docs template 2024-08-27 16:39:29 +02:00			`publishWebsite: async ({ fetch, params, cookies }) => {`
			`const websiteOverviewData = await fetch(`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`${API_BASE_PREFIX}/website?id=eq.${params.websiteId}&select=,settings(),header(),home(),footer(),article(,docs_category()),legal_information()`,
Add categories for docs template 2024-08-27 16:39:29 +02:00			`{`
			`method: "GET",`
			`headers: {`
			`"Content-Type": "application/json",`
			Authorization: `Bearer ${cookies.get("session_token")}`,
			`Accept: "application/vnd.pgrst.object+json"`
			`}`
			`}`
			`);`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00
Add categories for docs template 2024-08-27 16:39:29 +02:00			`const websiteOverview = await websiteOverviewData.json();`
Manage collaborators via RLS 2024-08-07 19:13:39 +02:00			`generateStaticFiles(websiteOverview, false);`
Use environment variables for ports in web app 2024-08-10 22:20:57 +02:00
Initialize playwright, fix file upload issue, show publication status and delete website dir on website deletion 2024-08-30 15:48:15 +02:00			const res = await fetch(`${API_BASE_PREFIX}/website?id=eq.${params.websiteId}`, {
			`method: "PATCH",`
			`headers: {`
			`"Content-Type": "application/json",`
			Authorization: `Bearer ${cookies.get("session_token")}`
			`},`
			`body: JSON.stringify({`
			`is_published: true`
			`})`
			`});`

			`if (!res.ok) {`
			`const response = await res.json();`
			`return { success: false, message: response.message };`
			`}`

Use environment variables for ports in web app 2024-08-10 22:20:57 +02:00			`return { success: true, message: "Successfully published website" };`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00			`}`
			`};`

Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`const generateStaticFiles = async (websiteData: WebsiteOverview, isPreview: boolean = true) => {`
			`const fileContents = (head: string, body: string) => {`
			return `
Add basic necessary SEO tags 2024-09-07 16:45:20 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`${head}`
			`</head>`
			`<body>`
			`${body}`
			`</body>`
			</html>`;
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`};`

			`const { head, body } = render(websiteData.content_type === "Blog" ? BlogIndex : DocsIndex, {`
			`props: {`
			`websiteOverview: websiteData,`
			`apiUrl: API_BASE_PREFIX,`
			`isLegalPage: false`
			`}`
			`});`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00
			`let uploadDir = "";`

			`if (isPreview) {`
Enable wildcard domains for published websites 2024-08-18 13:48:36 +02:00			`uploadDir = join("/", "var", "www", "archtika-websites", "previews", websiteData.id);`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00			`} else {`
Enable wildcard domains for published websites 2024-08-18 13:48:36 +02:00			`uploadDir = join("/", "var", "www", "archtika-websites", websiteData.id);`
Generate static HTML files to shared NGINX root directory 2024-08-04 17:46:41 +02:00			`}`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00
			`await mkdir(uploadDir, { recursive: true });`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`await writeFile(join(uploadDir, "index.html"), fileContents(head, body));`
Add categories for docs template 2024-08-27 16:39:29 +02:00			`await mkdir(join(uploadDir, "articles"), {`
Differentiate blog and docs and sectionize headings 2024-08-18 18:17:59 +02:00			`recursive: true`
			`});`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`for (const article of websiteData.article ?? []) {`
Generate base user website via template directory 2024-08-04 16:15:09 +02:00			`const articleFileName = article.title.toLowerCase().split(" ").join("-");`

Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`const { head, body } = render(websiteData.content_type === "Blog" ? BlogArticle : DocsArticle, {`
			`props: {`
			`websiteOverview: websiteData,`
			`article,`
			`apiUrl: API_BASE_PREFIX`
			`}`
			`});`
Add base template for website preview route 2024-08-03 18:07:27 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`await writeFile(`
			join(uploadDir, "articles", `${articleFileName}.html`),
			`fileContents(head, body)`
			`);`
Add base template for website preview route 2024-08-03 18:07:27 +02:00			`}`
Include stylesheet in static file generation 2024-08-17 20:21:23 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`if (websiteData.legal_information) {`
			`const { head, body } = render(websiteData.content_type === "Blog" ? BlogIndex : DocsIndex, {`
			`props: {`
			`websiteOverview: websiteData,`
			`apiUrl: API_BASE_PREFIX,`
			`isLegalPage: true`
			`}`
			`});`
Add legal information operation site 2024-09-08 16:42:32 +02:00
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`await writeFile(join(uploadDir, "legal-information.html"), fileContents(head, body));`
Add legal information operation site 2024-09-08 16:42:32 +02:00			`}`

Share styles and update props 2024-08-20 19:17:05 +02:00			const commonStyles = await readFile(`${process.cwd()}/template-styles/common-styles.css`, {
Include stylesheet in static file generation 2024-08-17 20:21:23 +02:00			`encoding: "utf-8"`
			`});`
Add categories for docs template 2024-08-27 16:39:29 +02:00			`const specificStyles = await readFile(`
			`${process.cwd()}/template-styles/${websiteData.content_type.toLowerCase()}-styles.css`,
			`{`
			`encoding: "utf-8"`
			`}`
			`);`
Set favicon and logo on output 2024-08-25 16:31:12 +02:00			`await writeFile(`
			`join(uploadDir, "styles.css"),`
			`commonStyles`
			`.concat(specificStyles)`
			`.replace(`
			`/--color-accent:\s(.?);/,`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`--color-accent: ${websiteData.settings.accent_color_dark_theme};`
Set favicon and logo on output 2024-08-25 16:31:12 +02:00			`)`
			`.replace(`
			`/@media\s\(prefers-color-scheme:\sdark\)\s{[^}]--color-accent:\s(.?);/,`
			`(match) =>`
			`match.replace(`
			`/--color-accent:\s(.?);/,`
Add TypeScript definitions via pg-to-ts and refactor migrations 2024-09-10 17:29:57 +02:00			`--color-accent: ${websiteData.settings.accent_color_light_theme};`
Set favicon and logo on output 2024-08-25 16:31:12 +02:00			`)`
			`)`
			`);`
Add base template for website preview route 2024-08-03 18:07:27 +02:00			`};`