Merge pull request #16 from 42devops/perf/inline-svg-icons

perf: replace webfont icon requests with zero-latency inline SVGs

Author: iasonliu

_layouts/default.html

@@ -8,11 +8,10 @@
     <meta name="description" content="Engineering thoughts on DevOps, Kubernetes, Infrastructure, and Algorithms." />
     <meta name="author" content="42DevOps" />
 
-    <!-- Google Fonts & Material Symbols -->
+    <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Shantell+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 
     <!-- Stylesheets (with cache-busting timestamp) -->
     <link rel="stylesheet" href="/css/syntax.css?v={{ site.time | date: '%s' }}" type="text/css" />
@@ -63,7 +62,7 @@
           </ul>
 
           <button class="theme-toggle-btn" id="theme-toggle" aria-label="Toggle Theme">
-            <span class="material-symbols-outlined" id="theme-icon" style="font-size: 1.1rem;">dark_mode</span>
+            <span id="theme-icon-container" style="display: inline-flex; align-items: center;"></span>
             <span id="theme-label" style="font-size: 0.8rem; font-weight: 600;">Dark</span>
           </button>
         </nav>
@@ -78,7 +77,10 @@
           &copy; {{ "now" | date: "%Y" }} <strong>42DevOps</strong>. Powered by <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> &amp; GitHub Pages.
         </div>
         <div class="footer-links">
-          <a href="/atom.xml">RSS Feed</a>
+          <a href="/atom.xml" style="display: inline-flex; align-items: center; gap: 0.3rem;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
+            <span>RSS Feed</span>
+          </a>
           <a href="https://42devops.com">42devops.com</a>
         </div>
       </footer>
@@ -89,15 +91,18 @@
       document.addEventListener('DOMContentLoaded', function() {
         // Theme Switcher Logic
         const toggleBtn = document.getElementById('theme-toggle');
-        const themeIcon = document.getElementById('theme-icon');
+        const themeIconContainer = document.getElementById('theme-icon-container');
         const themeLabel = document.getElementById('theme-label');
 
+        const sunSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`;
+        const moonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>`;
+
         function updateThemeUI(theme) {
           if (theme === 'dark') {
-            themeIcon.textContent = 'light_mode';
+            if (themeIconContainer) themeIconContainer.innerHTML = sunSVG;
             themeLabel.textContent = 'Light';
           } else {
-            themeIcon.textContent = 'dark_mode';
+            if (themeIconContainer) themeIconContainer.innerHTML = moonSVG;
             themeLabel.textContent = 'Dark';
           }
         }

_layouts/post.html

@@ -6,7 +6,7 @@
   <header class="post-header">
     <div style="margin-bottom: 1rem;">
       <a href="/" style="text-decoration: none; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem;">
-        <span class="material-symbols-outlined" style="font-size: 1rem;">arrow_back</span> Back to articles
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg> Back to articles
       </a>
     </div>
 
@@ -15,13 +15,13 @@ <h1 class="post-title">{{ page.title }}</h1>
     <div class="post-meta-bar">
       {% if page.date %}
       <time datetime="{{ page.date | date_to_xmlschema }}" style="font-family: var(--font-mono); font-weight: 500; display: inline-flex; align-items: center; gap: 0.25rem;">
-        <span class="material-symbols-outlined" style="font-size: 0.95rem; color: var(--text-light);">calendar_today</span> {{ page.date | date: "%b %d, %Y" }}
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg> {{ page.date | date: "%b %d, %Y" }}
       </time>
       {% endif %}
 
       {% if page.categories %}
       <div style="display: flex; gap: 0.4rem; align-items: center;">
-        <span class="material-symbols-outlined" style="font-size: 0.95rem; color: var(--text-light);">sell</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg>
         {% for category in page.categories %}
           <span class="tag-badge">{{ category }}</span>
         {% endfor %}
@@ -30,7 +30,7 @@ <h1 class="post-title">{{ page.title }}</h1>
 
       <!-- Reading time estimate -->
       <span style="font-family: var(--font-mono); font-size: 0.825rem; color: var(--text-light); display: inline-flex; align-items: center; gap: 0.25rem;">
-        <span class="material-symbols-outlined" style="font-size: 0.95rem; color: var(--text-light);">schedule</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-light)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
         {% assign words = content | number_of_words %}
         {% if words < 360 %}
           1 min read

css/screen.css

@@ -76,23 +76,10 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Google Material Symbols Font Styling */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 1.25rem;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: 'liga';
+/* Inline SVG Icon Helper */
+svg {
+  vertical-align: middle;
+  flex-shrink: 0;
 }
 
 body {

index.html

@@ -10,7 +10,13 @@
         <span class="ann ann-e ann-purple ann-no-mark" data-note="Keep Walking" style="--ann-font-size: 1.25rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
           <span class="ann ann-w ann-green ann-no-mark" data-note="Mostly Harmless" style="--ann-font-size: 1.25rem; --ann-font-weight: 600; --ann-target-gap: 8px;">
             <span style="display: inline-flex; align-items: center; justify-content: center; user-select: none;">
-              <span class="material-symbols-outlined" style="font-size: 3.5rem; color: var(--brand-primary); line-height: 1;">directions_walk</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--brand-primary)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m19 19-3-3v-3l2-1" />
+                <path d="M13 18l-2-3-2 2-3 3" />
+                <path d="M10 12l2-3 2 1 2 4" />
+                <path d="M8 21l3-5" />
+                <circle cx="13" cy="4" r="2" />
+              </svg>
             </span>
           </span>
         </span>
@@ -67,7 +73,10 @@ <h2 class="section-title">Featured Projects</h2>
     <a href="https://github.com/42devops/salt-kube-lite" target="_blank" rel="noopener" class="project-card">
       <div>
         <div class="project-name">
-          <span style="display: flex; align-items: center; gap: 0.35rem;"><span class="material-symbols-outlined" style="font-size: 1.15rem; color: var(--brand-primary);">bolt</span> Salt-Kube Lite</span>
+          <span style="display: flex; align-items: center; gap: 0.35rem;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--brand-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+            Salt-Kube Lite
+          </span>
           <span class="tag-badge">Kubernetes</span>
         </div>
         <p class="project-desc">