Add theme toggle for templates

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;

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",

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}

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>

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,