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

2025-11-22 10:51:36 +01:00 · 2024-09-10 17:29:57 +02:00
parent 8121be1d96
commit c5fbcdc8bd
50 changed files with 1525 additions and 1632 deletions
--- a/web-app/src/lib/templates/blog/BlogArticle.svelte
+++ b/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} />
--- a/web-app/src/lib/templates/blog/BlogIndex.svelte
+++ b/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} />
--- a/web-app/src/lib/templates/common/Footer.svelte
+++ b/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>`
      )}
--- a/web-app/src/lib/templates/common/Head.svelte
+++ b/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>
--- a/web-app/src/lib/templates/common/Nav.svelte
+++ b/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>
--- a/web-app/src/lib/templates/docs/DocsArticle.svelte
+++ b/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} />
--- a/web-app/src/lib/templates/docs/DocsIndex.svelte
+++ b/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} />