Add theme toggle for templates

2025-11-22 10:51:36 +01:00 · 2024-10-03 18:51:30 +02:00
parent 6c314970bd
commit f2d114dac4
22 changed files with 366 additions and 123 deletions
--- a/web-app/src/lib/components/WebsiteEditor.svelte
+++ b/web-app/src/lib/components/WebsiteEditor.svelte
@@ -24,6 +24,16 @@
    const scrollHeight = previewElement.scrollHeight - previewElement.clientHeight;
    previewElement.scrollTop = (textareaScrollTop.value / 100) * scrollHeight;
  });
+
+  const tabs = [
+    "settings",
+    "articles",
+    "categories",
+    "collaborators",
+    "legal-information",
+    "publish",
+    "logs"
+  ];
 </script>

 <input type="checkbox" id="toggle-mobile-preview" hidden />
@@ -34,27 +44,17 @@

  <nav class="operations__nav">
    <ul class="unpadded">
-      <li>
-        <a href="/website/{id}">Settings</a>
-      </li>
-      <li>
-        <a href="/website/{id}/articles">Articles</a>
-      </li>
-      {#if contentType === "Docs"}
-        <a href="/website/{id}/categories">Categories</a>
-      {/if}
-      <li>
-        <a href="/website/{id}/collaborators">Collaborators</a>
-      </li>
-      <li>
-        <a href="/website/{id}/legal-information">Legal information</a>
-      </li>
-      <li>
-        <a href="/website/{id}/publish">Publish</a>
-      </li>
-      <li>
-        <a href="/website/{id}/logs">Logs</a>
-      </li>
+      {#each tabs.filter((tab) => (tab !== "categories" && contentType === "Blog") || contentType === "Docs") as tab}
+        <li>
+          <a
+            href="/website/{id}{tab === 'settings' ? '' : `/${tab}`}"
+            class:active={tab === "settings"
+              ? $page.url.pathname === `/website/${id}`
+              : $page.url.pathname.includes(tab)}
+            >{(tab.charAt(0).toUpperCase() + tab.slice(1)).replace("-", " ") || "Settings"}</a
+          >
+        </li>
+      {/each}
    </ul>
  </nav>

@@ -117,6 +117,11 @@
    gap: var(--space-s);
  }

+  .active {
+    text-underline-offset: 0.375rem;
+    text-decoration-thickness: 0.25rem;
+  }
+
  @media (min-width: 640px) {
    label[for="toggle-mobile-preview"] {
      display: none;
--- a/web-app/src/lib/db-schema.ts
+++ b/web-app/src/lib/db-schema.ts
@@ -27,7 +27,6 @@ export interface Article {
  created_at: Date;
  last_modified_at: Date;
  last_modified_by: string | null;
-  title_description_search: any | null;
 }
 export interface ArticleInput {
  id?: string;
@@ -44,7 +43,6 @@ export interface ArticleInput {
  created_at?: Date;
  last_modified_at?: Date;
  last_modified_by?: string | null;
-  title_description_search?: any | null;
 }
 const article = {
  tableName: "article",
@@ -62,8 +60,7 @@ const article = {
    "article_weight",
    "created_at",
    "last_modified_at",
-    "last_modified_by",
-    "title_description_search"
+    "last_modified_by"
  ],
  requiredForInsert: ["website_id", "title"],
  primaryKey: "id",
@@ -463,7 +460,6 @@ export interface Website {
  created_at: Date;
  last_modified_at: Date;
  last_modified_by: string | null;
-  title_search: any | null;
 }
 export interface WebsiteInput {
  id?: string;
@@ -474,7 +470,6 @@ export interface WebsiteInput {
  created_at?: Date;
  last_modified_at?: Date;
  last_modified_by?: string | null;
-  title_search?: any | null;
 }
 const website = {
  tableName: "website",
@@ -486,8 +481,7 @@ const website = {
    "is_published",
    "created_at",
    "last_modified_at",
-    "last_modified_by",
-    "title_search"
+    "last_modified_by"
  ],
  requiredForInsert: ["content_type", "title"],
  primaryKey: "id",
--- a/web-app/src/lib/templates/common/Head.svelte
+++ b/web-app/src/lib/templates/common/Head.svelte
@@ -19,7 +19,7 @@
 <svelte:head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>{title}</title>
+  <title>{websiteOverview.title === title ? title : `${websiteOverview.title} | ${title}`}</title>
  <meta name="description" content={metaDescription ?? title} />
  <link rel="stylesheet" href={`${"../".repeat(nestingLevel)}styles.css`} />
  {#if websiteOverview.settings.favicon_image}
--- a/web-app/src/lib/templates/common/Nav.svelte
+++ b/web-app/src/lib/templates/common/Nav.svelte
@@ -82,5 +82,32 @@
        />
      {/if}
    </a>
+    <label style="margin-inline-start: auto;" for="toggle-theme">
+      <input type="checkbox" id="toggle-theme" hidden />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        width="20"
+        height="20"
+      >
+        <path
+          d="M10 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 2ZM10 15a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 10 15ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM15.657 5.404a.75.75 0 1 0-1.06-1.06l-1.061 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM6.464 14.596a.75.75 0 1 0-1.06-1.06l-1.06 1.06a.75.75 0 0 0 1.06 1.06l1.06-1.06ZM18 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 18 10ZM5 10a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 5 10ZM14.596 15.657a.75.75 0 0 0 1.06-1.06l-1.06-1.061a.75.75 0 1 0-1.06 1.06l1.06 1.06ZM5.404 6.464a.75.75 0 0 0 1.06-1.06l-1.06-1.06a.75.75 0 1 0-1.061 1.06l1.06 1.06Z"
+        ></path>
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        width="20"
+        height="20"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M7.455 2.004a.75.75 0 0 1 .26.77 7 7 0 0 0 9.958 7.967.75.75 0 0 1 1.067.853A8.5 8.5 0 1 1 6.647 1.921a.75.75 0 0 1 .808.083Z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </label>
  </div>
 </nav>
--- a/web-app/src/lib/utils.ts
+++ b/web-app/src/lib/utils.ts
@@ -3,7 +3,6 @@ import type { Renderer, Token } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
 import DOMPurify from "isomorphic-dompurify";
-import { applyAction, deserialize } from "$app/forms";
 import type {
  Website,
  Settings,
--- a/web-app/src/routes/(anonymous)/login/+page.server.ts
+++ b/web-app/src/routes/(anonymous)/login/+page.server.ts
@@ -18,7 +18,7 @@ export const actions: Actions = {
      return response;
    }

-    cookies.set("session_token", response.data.token, { path: "/" });
+    cookies.set("session_token", response.data.token, { path: "/", maxAge: 86400 });
    return response;
  }
 };
--- a/web-app/src/routes/(authenticated)/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/+page.server.ts
@@ -14,7 +14,7 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {
  const baseFetchUrl = `${API_BASE_PREFIX}/website?order=last_modified_at.desc,created_at.desc`;

  if (searchQuery) {
-    params.append("title_search", `wfts(english).${searchQuery}`);
+    params.append("title", `wfts.${searchQuery}`);
  }

  switch (filterBy) {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.server.ts
@@ -21,7 +21,7 @@ export const load: PageServerLoad = async ({ params, fetch, url, parent, locals
  const parameters = new URLSearchParams();

  if (searchQuery) {
-    parameters.append("title_description_search", `wfts(english).${searchQuery}`);
+    parameters.append("title", `wfts.${searchQuery}`);
  }

  switch (filterBy) {
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte
@@ -7,7 +7,7 @@
  import { page } from "$app/stores";
  import { tables } from "$lib/db-schema";
  import { previewContent } from "$lib/runes.svelte";
-  import { sanitize } from "isomorphic-dompurify";
+  import DOMPurify from "isomorphic-dompurify";

  const { data }: { data: PageServerData } = $props();

@@ -156,9 +156,12 @@
                    <p>{table_name} &mdash; {operation}</p>
                  </hgroup>

-                  <pre style="white-space: pre-wrap">{@html sanitize(htmlDiff(oldValue, newValue), {
-                      ALLOWED_TAGS: ["ins", "del"]
-                    })}</pre>
+                  <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
+                      htmlDiff(oldValue, newValue),
+                      {
+                        ALLOWED_TAGS: ["ins", "del"]
+                      }
+                    )}</pre>
                </Modal>
              </td>
            </tr>