Set favicon and logo on output

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

@@ -4,6 +4,7 @@
   import BlogFooter from "./common/BlogFooter.svelte";
 
   const {
+    favicon,
     title,
     logoType,
     logo,
@@ -12,6 +13,7 @@
     publicationDate,
     footerAdditionalText
   }: {
+    favicon: string;
     title: string;
     logoType: "text" | "image";
     logo: string;
@@ -22,7 +24,7 @@
   } = $props();
 </script>
 
-<BlogHead {title} nestingLevel={1} />
+<BlogHead {title} {favicon} nestingLevel={1} />
 
 <BlogNav {logoType} {logo} />
 

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

@@ -4,6 +4,7 @@
   import BlogFooter from "./common/BlogFooter.svelte";
 
   const {
+    favicon,
     title,
     logoType,
     logo,
@@ -11,6 +12,7 @@
     articles,
     footerAdditionalText
   }: {
+    favicon: string;
     title: string;
     logoType: "text" | "image";
     logo: string;
@@ -20,7 +22,7 @@
   } = $props();
 </script>
 
-<BlogHead {title} />
+<BlogHead {title} {favicon} />
 
 <BlogNav {logoType} {logo} />
 

web-app/src/lib/templates/blog/common/BlogHead.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  const { title, nestingLevel = 0 }: { title: string; nestingLevel?: number } = $props();
+  const {
+    title,
+    favicon,
+    nestingLevel = 0
+  }: { title: string; favicon: string; nestingLevel?: number } = $props();
 </script>
 
 <svelte:head>
@@ -8,5 +12,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <link rel="stylesheet" href={`${"../".repeat(nestingLevel)}styles.css`} />
+    {#if favicon}
+      <link rel="icon" href={favicon} />
+    {/if}
   </head>
 </svelte:head>

web-app/src/lib/templates/blog/common/BlogNav.svelte

@@ -10,7 +10,7 @@
           <strong>{logo}</strong>
         </p>
       {:else}
-        <img src={logo} alt="" />
+        <img src={logo} width="24" height="24" alt="" />
       {/if}
     </a>
   </div>

web-app/src/routes/(authenticated)/website/[websiteId]/publish/+page.server.ts

@@ -57,9 +57,15 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
       {
         ({ head, body } = render(BlogIndex, {
           props: {
+            favicon: websiteData.favicon_image
+              ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.favicon_image}`
+              : "",
             title: websiteData.title,
             logoType: websiteData.logo_type,
-            logo: websiteData.logo_text,
+            logo:
+              websiteData.logo_type === "text"
+                ? websiteData.logo_text
+                : `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.logo_image}`,
             mainContent: md(websiteData.main_content ?? "", false),
             articles: websiteData.articles ?? [],
             footerAdditionalText: md(websiteData.additional_text ?? "")
@@ -110,9 +116,15 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
         {
           ({ head, body } = render(BlogArticle, {
             props: {
+              favicon: websiteData.favicon_image
+                ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.favicon_image}`
+                : "",
               title: article.title,
               logoType: websiteData.logo_type,
-              logo: websiteData.logo_text,
+              logo:
+                websiteData.logo_type === "text"
+                  ? websiteData.logo_text
+                  : `${API_BASE_PREFIX}/rpc/retrieve_file?id=${websiteData.logo_image}`,
               coverImage: article.cover_image
                 ? `${API_BASE_PREFIX}/rpc/retrieve_file?id=${article.cover_image}`
                 : "",
@@ -160,5 +172,21 @@ const generateStaticFiles = async (websiteData: any, isPreview: boolean = true)
   const specificStyles = await readFile(`${process.cwd()}/template-styles/blog-styles.css`, {
     encoding: "utf-8"
   });
-  await writeFile(join(uploadDir, "styles.css"), commonStyles.concat(specificStyles));
+  await writeFile(
+    join(uploadDir, "styles.css"),
+    commonStyles
+      .concat(specificStyles)
+      .replace(
+        /--color-accent:\s*(.*?);/,
+        `--color-accent: ${websiteData.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.accent_color_light_theme};`
+          )
+      )
+  );
 };

web-app/template-styles/common-styles.css

@@ -166,7 +166,7 @@ summary {
   background-color: var(--bg-tertiary);
 }
 
-:is(button, input, textarea, select, a, summary):focus,
+:is(button, input, textarea, select, a, summary, pre):focus,
 #toggle-mobile-preview:checked + label {
   outline: 0.125rem solid var(--color-accent);
   outline-offset: 0.25rem;