feat: support Simple Icons for social icons

st1020 · May 19, 2024 · 968ba41 · 968ba41
1 parent 01e0b32
commit 968ba41
Show file tree

Hide file tree

Showing 14 changed files with 14 additions and 24 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
 pnpm-lock.yaml
+templates/macros.html
diff --git a/config.toml b/config.toml
@@ -79,6 +79,7 @@ avatar_url = "icons/github.svg"
 avatar_invert = true
 
 # The social icons below the profile on the home page.
+# The `name` should be the file name of static/icons/*.svg or the icon name of https://simpleicons.org/
 [[extra.profile.social]]
 name = "github"
 url = "https://github.com/st1020/kita"

diff --git a/static/icons/codeberg.svg b/static/icons/codeberg.svg
diff --git a/static/icons/goodreads.svg b/static/icons/goodreads.svg
diff --git a/static/icons/instagram.svg b/static/icons/instagram.svg
diff --git a/static/icons/linkedin.svg b/static/icons/linkedin.svg
diff --git a/static/icons/mastodon.svg b/static/icons/mastodon.svg
diff --git a/static/icons/stackoverflow.svg b/static/icons/stackoverflow.svg
diff --git a/static/icons/telegram.svg b/static/icons/telegram.svg
diff --git a/static/icons/twitter.svg b/static/icons/twitter.svg
diff --git a/templates/index.html b/templates/index.html
@@ -1,3 +1,4 @@
+{% import "macros.html" as macros %}
 <!doctype html>
 <html class="not-ready lg:text-base" lang="{{ lang }}">
   {% include "partials/head.html" %}

diff --git a/templates/macros.html b/templates/macros.html
@@ -0,0 +1,8 @@
+{%- macro get_social_icon(icon) -%}
+{%- set meta = get_image_metadata(path="/static/icons/" ~ icon ~ ".svg", allow_missing=true) -%}
+{%- if meta -%}
+{{- get_url(path="icons/" ~ icon ~ ".svg") -}}
+{%- else -%}
+{{- "https://cdn.jsdelivr.net/npm/simple-icons/icons/" ~ icon ~ ".svg" -}}
+{%- endif -%}
+{%- endmacro get_social_icon -%}
diff --git a/templates/partials/head.html b/templates/partials/head.html
@@ -1,3 +1,4 @@
+{% import "macros.html" as macros %}
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -68,7 +69,7 @@
   {% if config.extra.profile.social %}
   <!---->
   {% for social in config.extra.profile.social %}
-  <link rel="preload" as="image" href="{{ get_url(path=`icons/` ~ social.name ~ `.svg`) }}" />
+  <link rel="preload" as="image" href="{{ macros::get_social_icon(icon=social.name) }}" />
   {% endfor %}
   <!---->
   {% endif %}

diff --git a/templates/partials/profile.html b/templates/partials/profile.html
@@ -24,7 +24,7 @@ <h1 class="mb-2 text-3xl font-bold">{{ config.extra.profile.name }}</h1>
       {% for social in config.extra.profile.social %}
       <a
         class="primary-link h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat]"
-        style="--url: url(./icons/{{ social.name }}.svg)"
+        style="--url: url({{ macros::get_social_icon(icon=social.name) }})"
         href="{{ social.url | replace(from=`$BASE_URL`, to=config.base_url) | safe  }}"
         target="_blank"
         rel="{% if social.name == `rss` %}alternate{% else %}me{% endif %}"