From 9786d8d33a916466a0026368be60ed079ccfd578 Mon Sep 17 00:00:00 2001
From: alexandrev-tibco <alexandre.vazquez@cloud.com>
Date: Mon, 13 Apr 2026 10:17:23 +0200
Subject: [PATCH] Add blog article links to footer for SEO and navigation

---
 frontend/src/App.jsx   | 11 +++++++++++
 frontend/src/style.css | 26 ++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 540e0229..8b0459be 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1905,6 +1905,17 @@ export default function App() {
           >
             Blog &amp; Tutorials
           </a>
+          <span className="footer-blog-links">
+            <a href="https://blog.xsltplayground.com/posts/xslt-for-beginners/" target="_blank" rel="noopener noreferrer">XSLT for Beginners</a>
+            {" · "}
+            <a href="https://blog.xsltplayground.com/posts/xslt-3-new-features/" target="_blank" rel="noopener noreferrer">XSLT 3.0</a>
+            {" · "}
+            <a href="https://blog.xsltplayground.com/posts/xslt-string-functions/" target="_blank" rel="noopener noreferrer">String Functions</a>
+            {" · "}
+            <a href="https://blog.xsltplayground.com/posts/xslt-grouping-for-each-group/" target="_blank" rel="noopener noreferrer">Grouping</a>
+            {" · "}
+            <a href="https://blog.xsltplayground.com/posts/xslt-template-matching-explained/" target="_blank" rel="noopener noreferrer">Template Matching</a>
+          </span>
           {resolvedVersion && (
             <a
               className="version-pill"
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3474bf85..1d809e9e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -35,6 +35,23 @@ a:focus-visible {
   text-decoration: underline;
 }
 
+.footer-blog-links {
+  color: #536084;
+  font-size: 0.78rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid #ccc;
+}
+
+.footer-blog-links a {
+  color: #536084;
+  text-decoration: none;
+}
+
+.footer-blog-links a:hover {
+  color: #007acc;
+  text-decoration: underline;
+}
+
 .version-pill {
   border: 1px solid #007acc;
   color: #007acc;
@@ -1382,6 +1399,15 @@ a:focus-visible {
   color: #c7d2e3;
 }
 
+:root[data-theme="dark"] .footer-blog-links,
+:root[data-theme="dark"] .footer-blog-links a {
+  color: #7a91b0;
+}
+
+:root[data-theme="dark"] .footer-blog-links a:hover {
+  color: #6bb6ff;
+}
+
 :root[data-theme="dark"] .footer a {
   color: #c7d2e3;
 }