Add TypeScript definitions via pg-to-ts and refactor migrations

web-app/src/lib/components/DateTime.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  const { date }: { date: string } = $props();
+  const { date }: { date: Date } = $props();
 
   const options: Intl.DateTimeFormatOptions = {
     year: "numeric",
@@ -11,6 +11,6 @@
   };
 </script>
 
-<time datetime={new Date(date).toLocaleString("sv").replace(" ", "T")}>
-  {new Date(date).toLocaleString("en-us", { ...options })}
+<time datetime={date.toLocaleString("sv").replace(" ", "T")}>
+  {date.toLocaleString("en-us", { ...options })}
 </time>

web-app/src/lib/components/SuccessOrError.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  const { success, message }: { success: boolean | undefined; message: string | undefined } =
-    $props();
+  const { success, message }: { success?: boolean; message?: string } = $props();
 </script>
 
 {#if success}

web-app/src/lib/db-schema.ts

@@ -0,0 +1,496 @@
+/* tslint:disable */
+/* eslint-disable */
+
+/**
+ * AUTO-GENERATED FILE - DO NOT EDIT!
+ *
+ * This file was automatically generated by pg-to-ts v.4.1.1
+ * $ pg-to-ts generate -c postgres://username:password@localhost:15432/archtika -t article -t change_log -t collab -t docs_category -t footer -t header -t home -t legal_information -t media -t settings -t user -t website -s internal
+ *
+ */
+
+export type Json = unknown;
+
+// Table article
+export interface Article {
+  id: string;
+  website_id: string;
+  user_id: string | null;
+  title: string;
+  meta_description: string | null;
+  meta_author: string | null;
+  cover_image: string | null;
+  publication_date: Date | null;
+  main_content: string | null;
+  created_at: Date;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+  title_description_search: any | null;
+  category: string | null;
+  article_weight: number | null;
+}
+export interface ArticleInput {
+  id?: string;
+  website_id: string;
+  user_id?: string | null;
+  title: string;
+  meta_description?: string | null;
+  meta_author?: string | null;
+  cover_image?: string | null;
+  publication_date?: Date | null;
+  main_content?: string | null;
+  created_at?: Date;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+  title_description_search?: any | null;
+  category?: string | null;
+  article_weight?: number | null;
+}
+const article = {
+  tableName: "article",
+  columns: [
+    "id",
+    "website_id",
+    "user_id",
+    "title",
+    "meta_description",
+    "meta_author",
+    "cover_image",
+    "publication_date",
+    "main_content",
+    "created_at",
+    "last_modified_at",
+    "last_modified_by",
+    "title_description_search",
+    "category",
+    "article_weight"
+  ],
+  requiredForInsert: ["website_id", "title"],
+  primaryKey: "id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    user_id: { table: "user", column: "id", $type: null as unknown as User },
+    cover_image: { table: "media", column: "id", $type: null as unknown as Media },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User },
+    category: { table: "docs_category", column: "id", $type: null as unknown as DocsCategory }
+  },
+  $type: null as unknown as Article,
+  $input: null as unknown as ArticleInput
+} as const;
+
+// Table change_log
+export interface ChangeLog {
+  website_id: string;
+  user_id: string;
+  change_summary: string;
+  previous_value: Json | null;
+  new_value: Json | null;
+  timestamp: Date;
+}
+export interface ChangeLogInput {
+  website_id: string;
+  user_id?: string;
+  change_summary: string;
+  previous_value?: Json | null;
+  new_value?: Json | null;
+  timestamp?: Date;
+}
+const change_log = {
+  tableName: "change_log",
+  columns: ["website_id", "user_id", "change_summary", "previous_value", "new_value", "timestamp"],
+  requiredForInsert: ["website_id", "change_summary"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    user_id: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as ChangeLog,
+  $input: null as unknown as ChangeLogInput
+} as const;
+
+// Table collab
+export interface Collab {
+  website_id: string;
+  user_id: string;
+  permission_level: number;
+  added_at: Date;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface CollabInput {
+  website_id: string;
+  user_id: string;
+  permission_level?: number;
+  added_at?: Date;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const collab = {
+  tableName: "collab",
+  columns: [
+    "website_id",
+    "user_id",
+    "permission_level",
+    "added_at",
+    "last_modified_at",
+    "last_modified_by"
+  ],
+  requiredForInsert: ["website_id", "user_id"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    user_id: { table: "user", column: "id", $type: null as unknown as User },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Collab,
+  $input: null as unknown as CollabInput
+} as const;
+
+// Table docs_category
+export interface DocsCategory {
+  id: string;
+  website_id: string;
+  user_id: string | null;
+  category_name: string;
+  category_weight: number;
+}
+export interface DocsCategoryInput {
+  id?: string;
+  website_id: string;
+  user_id?: string | null;
+  category_name: string;
+  category_weight: number;
+}
+const docs_category = {
+  tableName: "docs_category",
+  columns: ["id", "website_id", "user_id", "category_name", "category_weight"],
+  requiredForInsert: ["website_id", "category_name", "category_weight"],
+  primaryKey: "id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    user_id: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as DocsCategory,
+  $input: null as unknown as DocsCategoryInput
+} as const;
+
+// Table footer
+export interface Footer {
+  website_id: string;
+  additional_text: string;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface FooterInput {
+  website_id: string;
+  additional_text: string;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const footer = {
+  tableName: "footer",
+  columns: ["website_id", "additional_text", "last_modified_at", "last_modified_by"],
+  requiredForInsert: ["website_id", "additional_text"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Footer,
+  $input: null as unknown as FooterInput
+} as const;
+
+// Table header
+export interface Header {
+  website_id: string;
+  logo_type: string;
+  logo_text: string | null;
+  logo_image: string | null;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface HeaderInput {
+  website_id: string;
+  logo_type?: string;
+  logo_text?: string | null;
+  logo_image?: string | null;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const header = {
+  tableName: "header",
+  columns: [
+    "website_id",
+    "logo_type",
+    "logo_text",
+    "logo_image",
+    "last_modified_at",
+    "last_modified_by"
+  ],
+  requiredForInsert: ["website_id"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    logo_image: { table: "media", column: "id", $type: null as unknown as Media },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Header,
+  $input: null as unknown as HeaderInput
+} as const;
+
+// Table home
+export interface Home {
+  website_id: string;
+  main_content: string;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface HomeInput {
+  website_id: string;
+  main_content: string;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const home = {
+  tableName: "home",
+  columns: ["website_id", "main_content", "last_modified_at", "last_modified_by"],
+  requiredForInsert: ["website_id", "main_content"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Home,
+  $input: null as unknown as HomeInput
+} as const;
+
+// Table legal_information
+export interface LegalInformation {
+  website_id: string;
+  main_content: string;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface LegalInformationInput {
+  website_id: string;
+  main_content: string;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const legal_information = {
+  tableName: "legal_information",
+  columns: ["website_id", "main_content", "last_modified_at", "last_modified_by"],
+  requiredForInsert: ["website_id", "main_content"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as LegalInformation,
+  $input: null as unknown as LegalInformationInput
+} as const;
+
+// Table media
+export interface Media {
+  id: string;
+  website_id: string;
+  user_id: string;
+  blob: string;
+  mimetype: string;
+  original_name: string;
+  created_at: Date;
+}
+export interface MediaInput {
+  id?: string;
+  website_id: string;
+  user_id?: string;
+  blob: string;
+  mimetype: string;
+  original_name: string;
+  created_at?: Date;
+}
+const media = {
+  tableName: "media",
+  columns: ["id", "website_id", "user_id", "blob", "mimetype", "original_name", "created_at"],
+  requiredForInsert: ["website_id", "blob", "mimetype", "original_name"],
+  primaryKey: "id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    user_id: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Media,
+  $input: null as unknown as MediaInput
+} as const;
+
+// Table settings
+export interface Settings {
+  website_id: string;
+  accent_color_light_theme: string;
+  accent_color_dark_theme: string;
+  favicon_image: string | null;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+}
+export interface SettingsInput {
+  website_id: string;
+  accent_color_light_theme?: string;
+  accent_color_dark_theme?: string;
+  favicon_image?: string | null;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+}
+const settings = {
+  tableName: "settings",
+  columns: [
+    "website_id",
+    "accent_color_light_theme",
+    "accent_color_dark_theme",
+    "favicon_image",
+    "last_modified_at",
+    "last_modified_by"
+  ],
+  requiredForInsert: ["website_id"],
+  primaryKey: "website_id",
+  foreignKeys: {
+    website_id: { table: "website", column: "id", $type: null as unknown as Website },
+    favicon_image: { table: "media", column: "id", $type: null as unknown as Media },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Settings,
+  $input: null as unknown as SettingsInput
+} as const;
+
+// Table user
+export interface User {
+  id: string;
+  username: string;
+  password_hash: string;
+  role: string;
+}
+export interface UserInput {
+  id?: string;
+  username: string;
+  password_hash: string;
+  role?: string;
+}
+const user = {
+  tableName: "user",
+  columns: ["id", "username", "password_hash", "role"],
+  requiredForInsert: ["username", "password_hash"],
+  primaryKey: "id",
+  foreignKeys: {},
+  $type: null as unknown as User,
+  $input: null as unknown as UserInput
+} as const;
+
+// Table website
+export interface Website {
+  id: string;
+  user_id: string;
+  content_type: string;
+  title: string;
+  created_at: Date;
+  last_modified_at: Date;
+  last_modified_by: string | null;
+  title_search: any | null;
+  is_published: boolean;
+}
+export interface WebsiteInput {
+  id?: string;
+  user_id?: string;
+  content_type: string;
+  title: string;
+  created_at?: Date;
+  last_modified_at?: Date;
+  last_modified_by?: string | null;
+  title_search?: any | null;
+  is_published?: boolean;
+}
+const website = {
+  tableName: "website",
+  columns: [
+    "id",
+    "user_id",
+    "content_type",
+    "title",
+    "created_at",
+    "last_modified_at",
+    "last_modified_by",
+    "title_search",
+    "is_published"
+  ],
+  requiredForInsert: ["content_type", "title"],
+  primaryKey: "id",
+  foreignKeys: {
+    user_id: { table: "user", column: "id", $type: null as unknown as User },
+    last_modified_by: { table: "user", column: "id", $type: null as unknown as User }
+  },
+  $type: null as unknown as Website,
+  $input: null as unknown as WebsiteInput
+} as const;
+
+export interface TableTypes {
+  article: {
+    select: Article;
+    input: ArticleInput;
+  };
+  change_log: {
+    select: ChangeLog;
+    input: ChangeLogInput;
+  };
+  collab: {
+    select: Collab;
+    input: CollabInput;
+  };
+  docs_category: {
+    select: DocsCategory;
+    input: DocsCategoryInput;
+  };
+  footer: {
+    select: Footer;
+    input: FooterInput;
+  };
+  header: {
+    select: Header;
+    input: HeaderInput;
+  };
+  home: {
+    select: Home;
+    input: HomeInput;
+  };
+  legal_information: {
+    select: LegalInformation;
+    input: LegalInformationInput;
+  };
+  media: {
+    select: Media;
+    input: MediaInput;
+  };
+  settings: {
+    select: Settings;
+    input: SettingsInput;
+  };
+  user: {
+    select: User;
+    input: UserInput;
+  };
+  website: {
+    select: Website;
+    input: WebsiteInput;
+  };
+}
+
+export const tables = {
+  article,
+  change_log,
+  collab,
+  docs_category,
+  footer,
+  header,
+  home,
+  legal_information,
+  media,
+  settings,
+  user,
+  website
+};

web-app/src/lib/templates/blog/BlogArticle.svelte

@@ -2,52 +2,44 @@
   import Head from "../common/Head.svelte";
   import Nav from "../common/Nav.svelte";
   import Footer from "../common/Footer.svelte";
+  import { type WebsiteOverview, md } from "../../utils";
+  import type { Article } from "../../db-schema";
 
   const {
-    favicon,
-    title,
-    logoType,
-    logo,
-    mainContent,
-    coverImage,
-    publicationDate,
-    footerAdditionalText,
-    metaDescription
-  }: {
-    favicon: string;
-    title: string;
-    logoType: "text" | "image";
-    logo: string;
-    mainContent: string;
-    coverImage: string;
-    publicationDate: string;
-    footerAdditionalText: string;
-    metaDescription: string;
-  } = $props();
+    websiteOverview,
+    article,
+    apiUrl
+  }: { websiteOverview: WebsiteOverview; article: Article; apiUrl: string } = $props();
 </script>
 
-<Head {title} {favicon} nestingLevel={1} {metaDescription} />
+<Head
+  {websiteOverview}
+  nestingLevel={1}
+  {apiUrl}
+  title={article.title}
+  metaDescription={article.meta_description}
+/>
 
-<Nav {logoType} {logo} isIndexPage={false} />
+<Nav {websiteOverview} isDocsTemplate={false} isIndexPage={false} {apiUrl} />
 
 <header>
   <div class="container">
     <hgroup>
-      <p>{publicationDate}</p>
-      <h1>{title}</h1>
+      <p>{article.publication_date}</p>
+      <h1>{article.title}</h1>
     </hgroup>
-    {#if coverImage}
-      <img src={coverImage} alt="" />
+    {#if article.cover_image}
+      <img src="{apiUrl}/rpc/retrieve_file?id={article.cover_image}" alt="" />
     {/if}
   </div>
 </header>
 
-{#if mainContent}
+{#if article.main_content}
   <main>
     <div class="container">
-      {@html mainContent}
+      {@html md(article.main_content)}
     </div>
   </main>
 {/if}
 
-<Footer text={footerAdditionalText} isIndexPage={false} />
+<Footer {websiteOverview} isIndexPage={false} />

web-app/src/lib/templates/blog/BlogIndex.svelte

@@ -2,47 +2,46 @@
   import Head from "../common/Head.svelte";
   import Nav from "../common/Nav.svelte";
   import Footer from "../common/Footer.svelte";
+  import { md, type WebsiteOverview } from "../../utils";
 
   const {
-    favicon,
-    title,
-    logoType,
-    logo,
-    mainContent,
-    articles,
-    footerAdditionalText
-  }: {
-    favicon: string;
-    title: string;
-    logoType: "text" | "image";
-    logo: string;
-    mainContent: string;
-    articles: { title: string; publication_date: string; meta_description: string }[];
-    footerAdditionalText: string;
-  } = $props();
+    websiteOverview,
+    apiUrl,
+    isLegalPage
+  }: { websiteOverview: WebsiteOverview; apiUrl: string; isLegalPage: boolean } = $props();
 </script>
 
-<Head {title} {favicon} />
+<Head
+  {websiteOverview}
+  nestingLevel={0}
+  {apiUrl}
+  title={isLegalPage ? "Legal information" : websiteOverview.title}
+/>
 
-<Nav {logoType} {logo} />
+<Nav {websiteOverview} isDocsTemplate={false} isIndexPage={true} {apiUrl} />
 
 <header>
   <div class="container">
-    <h1>{title}</h1>
+    <h1>{isLegalPage ? "Legal information" : websiteOverview.title}</h1>
   </div>
 </header>
 
 <main>
   <div class="container">
-    {@html mainContent}
-    {#if articles.length > 0}
+    {@html md(
+      isLegalPage
+        ? (websiteOverview.legal_information?.main_content ?? "")
+        : websiteOverview.home.main_content,
+      false
+    )}
+    {#if websiteOverview.article.length > 0 && !isLegalPage}
       <section class="articles" id="articles">
         <h2>
           <a href="#articles">Articles</a>
         </h2>
 
         <ul class="unpadded">
-          {#each articles as article}
+          {#each websiteOverview.article as article}
             {@const articleFileName = article.title.toLowerCase().split(" ").join("-")}
             <li>
               <p>{article.publication_date}</p>
@@ -62,4 +61,4 @@
   </div>
 </main>
 
-<Footer text={footerAdditionalText} />
+<Footer {websiteOverview} isIndexPage={true} />

web-app/src/lib/templates/common/Footer.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-  const { text, isIndexPage = true }: { text: string; isIndexPage?: boolean } = $props();
+  import type { WebsiteOverview } from "../../utils";
+
+  const {
+    websiteOverview,
+    isIndexPage
+  }: { websiteOverview: WebsiteOverview; isIndexPage: boolean } = $props();
 </script>
 
 <footer>
   <div class="container">
     <small>
-      {@html text.replace(
+      {@html websiteOverview.footer.additional_text.replace(
         "!!legal",
         `<a href="${isIndexPage ? "./legal-information" : "../legal-information"}">Legal information</a>`
       )}

web-app/src/lib/templates/common/Head.svelte

@@ -1,13 +1,17 @@
 <script lang="ts">
+  import type { WebsiteOverview } from "../../utils";
+
   const {
+    websiteOverview,
+    nestingLevel,
+    apiUrl,
     title,
-    favicon,
-    nestingLevel = 0,
-    metaDescription = null
+    metaDescription
   }: {
+    websiteOverview: WebsiteOverview;
+    nestingLevel: number;
+    apiUrl: string;
     title: string;
-    favicon: string;
-    nestingLevel?: number;
     metaDescription?: string | null;
   } = $props();
 </script>
@@ -19,8 +23,11 @@
     <title>{title}</title>
     <meta name="description" content={metaDescription ?? title} />
     <link rel="stylesheet" href={`${"../".repeat(nestingLevel)}styles.css`} />
-    {#if favicon}
-      <link rel="icon" href={favicon} />
+    {#if websiteOverview.settings.favicon_image}
+      <link
+        rel="icon"
+        href="{apiUrl}/rpc/retrieve_file?id={websiteOverview.settings.favicon_image}"
+      />
     {/if}
   </head>
 </svelte:head>

web-app/src/lib/templates/common/Nav.svelte

@@ -1,17 +1,36 @@
 <script lang="ts">
+  import type { WebsiteOverview } from "../../utils";
+  import type { Article } from "../../db-schema";
+
   const {
-    logoType,
-    logo,
-    isDocsTemplate = false,
-    categorizedArticles = {},
-    isIndexPage = true
+    websiteOverview,
+    isDocsTemplate,
+    isIndexPage,
+    apiUrl
   }: {
-    logoType: "text" | "image";
-    logo: string;
-    isDocsTemplate?: boolean;
-    categorizedArticles?: { [key: string]: { title: string }[] };
-    isIndexPage?: boolean;
+    websiteOverview: WebsiteOverview;
+    isDocsTemplate: boolean;
+    isIndexPage: boolean;
+    apiUrl: string;
   } = $props();
+
+  const categorizedArticles = Object.fromEntries(
+    Object.entries(
+      Object.groupBy(
+        websiteOverview.article.sort((a, b) => (b.article_weight ?? 0) - (a.article_weight ?? 0)),
+        (article) => article.docs_category?.category_name ?? "Uncategorized"
+      )
+    ).sort(([a], [b]) =>
+      a === "Uncategorized"
+        ? 1
+        : b === "Uncategorized"
+          ? -1
+          : (websiteOverview.article.find((art) => art.docs_category?.category_name === b)
+              ?.docs_category?.category_weight ?? 0) -
+            (websiteOverview.article.find((art) => art.docs_category?.category_name === a)
+              ?.docs_category?.category_weight ?? 0)
+    )
+  ) as { [key: string]: Article[] };
 </script>
 
 <nav>
@@ -53,10 +72,15 @@
       </section>
     {/if}
     <a href={isIndexPage ? "." : ".."}>
-      {#if logoType === "text"}
-        <strong>{logo}</strong>
+      {#if websiteOverview.header.logo_type === "text"}
+        <strong>{websiteOverview.header.logo_text}</strong>
       {:else}
-        <img src={logo} width="24" height="24" alt="" />
+        <img
+          src="{apiUrl}/rpc/retrieve_file?id={websiteOverview.header.logo_image}"
+          width="24"
+          height="24"
+          alt=""
+        />
       {/if}
     </a>
   </div>

web-app/src/lib/templates/docs/DocsArticle.svelte

@@ -2,44 +2,38 @@
   import Head from "../common/Head.svelte";
   import Nav from "../common/Nav.svelte";
   import Footer from "../common/Footer.svelte";
+  import { md, type WebsiteOverview } from "../../utils";
+  import type { Article } from "../../db-schema";
 
   const {
-    favicon,
-    title,
-    logoType,
-    logo,
-    mainContent,
-    categorizedArticles,
-    footerAdditionalText,
-    metaDescription
-  }: {
-    favicon: string;
-    title: string;
-    logoType: "text" | "image";
-    logo: string;
-    mainContent: string;
-    categorizedArticles: { [key: string]: { title: string }[] };
-    footerAdditionalText: string;
-    metaDescription: string;
-  } = $props();
+    websiteOverview,
+    article,
+    apiUrl
+  }: { websiteOverview: WebsiteOverview; article: Article; apiUrl: string } = $props();
 </script>
 
-<Head {title} {favicon} nestingLevel={1} {metaDescription} />
+<Head
+  {websiteOverview}
+  nestingLevel={1}
+  {apiUrl}
+  title={article.title}
+  metaDescription={article.meta_description}
+/>
 
-<Nav {logoType} {logo} isDocsTemplate={true} {categorizedArticles} isIndexPage={false} />
+<Nav {websiteOverview} isDocsTemplate={true} isIndexPage={false} {apiUrl} />
 
 <header>
   <div class="container">
-    <h1>{title}</h1>
+    <h1>{article.title}</h1>
   </div>
 </header>
 
-{#if mainContent}
+{#if article.main_content}
   <main>
     <div class="container">
-      {@html mainContent}
+      {@html md(article.main_content)}
     </div>
   </main>
 {/if}
 
-<Footer text={footerAdditionalText} isIndexPage={false} />
+<Footer {websiteOverview} isIndexPage={false} />

web-app/src/lib/templates/docs/DocsIndex.svelte

@@ -2,40 +2,39 @@
   import Head from "../common/Head.svelte";
   import Nav from "../common/Nav.svelte";
   import Footer from "../common/Footer.svelte";
+  import { md, type WebsiteOverview } from "../../utils";
 
   const {
-    favicon,
-    title,
-    logoType,
-    logo,
-    mainContent,
-    categorizedArticles,
-    footerAdditionalText
-  }: {
-    favicon: string;
-    title: string;
-    logoType: "text" | "image";
-    logo: string;
-    mainContent: string;
-    categorizedArticles: { [key: string]: { title: string }[] };
-    footerAdditionalText: string;
-  } = $props();
+    websiteOverview,
+    apiUrl,
+    isLegalPage
+  }: { websiteOverview: WebsiteOverview; apiUrl: string; isLegalPage: boolean } = $props();
 </script>
 
-<Head {title} {favicon} />
+<Head
+  {websiteOverview}
+  nestingLevel={0}
+  {apiUrl}
+  title={isLegalPage ? "Legal information" : websiteOverview.title}
+/>
 
-<Nav {logoType} {logo} isDocsTemplate={true} {categorizedArticles} />
+<Nav {websiteOverview} isDocsTemplate={true} isIndexPage={true} {apiUrl} />
 
 <header>
   <div class="container">
-    <h1>{title}</h1>
+    <h1>{isLegalPage ? "Legal information" : websiteOverview.title}</h1>
   </div>
 </header>
 
 <main>
   <div class="container">
-    {@html mainContent}
+    {@html md(
+      isLegalPage
+        ? (websiteOverview.legal_information?.main_content ?? "")
+        : websiteOverview.home.main_content,
+      false
+    )}
   </div>
 </main>
 
-<Footer text={footerAdditionalText} />
+<Footer {websiteOverview} isIndexPage={true} />

web-app/src/lib/utils.ts

@@ -5,6 +5,16 @@ import hljs from "highlight.js";
 import GithubSlugger from "github-slugger";
 import DOMPurify from "isomorphic-dompurify";
 import { applyAction, deserialize } from "$app/forms";
+import type {
+  Website,
+  Settings,
+  Header,
+  Home,
+  Footer,
+  Article,
+  DocsCategory,
+  LegalInformation
+} from "$lib/db-schema";
 
 export const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/svg+xml", "image/webp"];
 
@@ -189,3 +199,12 @@ export const handleImagePaste = async (event: ClipboardEvent, API_BASE_PREFIX: s
     return "";
   }
 };
+
+export interface WebsiteOverview extends Website {
+  settings: Settings;
+  header: Header;
+  home: Home;
+  footer: Footer;
+  article: (Article & { docs_category: DocsCategory | null })[];
+  legal_information?: LegalInformation;
+}