add svg favicon and improve logo ergonomics #18

rdela · web-flow · commit 2ae7d930953d · 2025-06-03T14:56:19.000-05:00
Merge pull request #18 from famebot/ease add svg favicon and improve logo ergonomics
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 _bin
+_cache
 _site
 deno.lock
diff --git a/_config.ts b/_config.ts
@@ -1,8 +1,11 @@
 import lume from "lume/mod.ts";
 import blog from "./mod.ts";
+import favicon from "lume/plugins/favicon.ts";
 
 const site = lume();
 
-site.use(blog());
+site
+  .use(blog())
+  .use(favicon())
 
 export default site;
diff --git a/_data.yml b/_data.yml
@@ -6,6 +6,10 @@ home:
 copyright: "[Xeo](https://github.com/famebot/xeo) &copy; 2022-2025 [Óscar&nbsp;Otero](https://oscarotero.com/) &amp; [Ricky&nbsp;de&nbsp;Laveaga](https://rdela.com/)"
 
 menu_links: []
+
+logo: /favicon.svg
+logo_height: 48
+
 metas:
   site: Xeo (demo)
   description: Lume Simple Blog variant
diff --git a/_includes/layouts/base.vto b/_includes/layouts/base.vto
@@ -10,7 +10,6 @@
     <link rel="stylesheet" href="/styles.css">
     <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ metas.site }}">
     <link rel="alternate" href="/feed.json" type="application/json" title="{{ metas.site }}">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
     <link rel="canonical" href="{{ url |> url(true) }}">
 
     <meta name="supported-color-schemes" content="light dark">
@@ -23,7 +22,7 @@
     <nav class="navbar">
       <a href="/" class="navbar-home">
         {{ if it.logo }}
-          {{ it.logo }}
+          <img src="{{ it.logo }}" height="{{ it.logo_height }}" alt="{{ metas.site }}" title="{{ metas.site }}" />
         {{ else }}
           <strong>{{ metas.site }}</strong>
         {{ /if }}
diff --git a/favicon.png b/favicon.png
diff --git a/favicon.svg b/favicon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<!-- “icicles” from Font Awesome Free 6.7.2 https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+<style>
+  path { fill:hsl(203, 48%, 64%) }
+  @media (prefers-color-scheme: dark) {
+    path { fill:hsl(203, 64%, 80%) }
+  }
+</style><path d="M75.8 304.8L1 35.7c-.7-2.5-1-5-1-7.5C0 12.6 12.6 0 28.2 0H482.4C498.8 0 512 13.2 512 29.6c0 1.6-.1 3.3-.4 4.9L434.6 496.1c-1.5 9.2-9.5 15.9-18.8 15.9c-9.2 0-17.1-6.6-18.7-15.6L336 160 307.2 303.9c-1.9 9.3-10.1 16.1-19.6 16.1c-9.2 0-17.2-6.2-19.4-15.1L240 192 210.6 368.2c-1.5 9.1-9.4 15.8-18.6 15.8s-17.1-6.7-18.6-15.8L144 192 115.9 304.3c-2.3 9.2-10.6 15.7-20.1 15.7c-9.3 0-17.5-6.2-20-15.2z"/></svg>
diff --git a/mod.ts b/mod.ts
@@ -27,6 +27,7 @@ export default function (options: Partial<Options> = {}) {
       "_data/i18n.yml",
       "404.md",
       "archive.page.js",
+      "favicon.svg",
       "index.vto",
       "styles.css",
     ];
diff --git a/plugins.ts b/plugins.ts
@@ -1,9 +1,8 @@
 import baseBlog from "https://deno.land/x/lume_theme_simple_blog@v0.16.0/mod.ts";
+import type { Options as BaseBlogOptions } from "https://deno.land/x/lume_theme_simple_blog@v0.16.0/mod.ts";
 import googleFonts from "lume/plugins/google_fonts.ts";
 import { merge } from "lume/core/utils/object.ts";
 
-import type { Options as BaseBlogOptions } from "https://deno.land/x/lume_theme_simple_blog@v0.15.10/mod.ts";
-
 import "lume/types.ts";
 
 export interface Options extends BaseBlogOptions {

-Original file line number
+Diff line change
@@ @@ -1,4 +1,5 @@ @@
 .DS_Store
 _bin
 +_cache
 _site
 deno.lock