Add See also panel renderer (DOM injection on /wiki/ pages, no theme override)

Author: Shreenabh664

_includes/head/custom.html

@@ -0,0 +1,4 @@
+{%- if page.url contains "/wiki/" -%}
+<link rel="stylesheet" href="{{ '/assets/css/see-also.css' | relative_url }}">
+<script defer src="{{ '/assets/js/see-also.js' | relative_url }}"></script>
+{%- endif -%}

assets/css/see-also.css

@@ -0,0 +1,15 @@
+.sa-panel {
+  margin: 2.2rem 0 1rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid #e5e8ec;
+}
+.sa-heading {
+  font-size: 1.05rem;
+  margin: 0 0 0.5rem;
+  color: #2c3e50;
+  font-weight: 600;
+}
+.sa-list { list-style: disc; padding-left: 1.4rem; margin: 0; }
+.sa-list li { margin: 0.15rem 0; font-size: 0.95rem; }
+.sa-list a { text-decoration: none; color: #2563aa; }
+.sa-list a:hover { text-decoration: underline; }

assets/js/see-also.js

@@ -0,0 +1,48 @@
+(function () {
+  'use strict';
+
+  var path = window.location.pathname;
+  if (path.indexOf('/wiki/') !== 0) return;
+
+  var target = document.querySelector('.page__content');
+  if (!target) return;
+
+  fetch('/assets/see-also.json', { credentials: 'same-origin' })
+    .then(function (r) {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    })
+    .then(function (data) {
+      var recs = data[path];
+      if (!recs || recs.length === 0) return;
+      render(recs);
+    })
+    .catch(function (err) {
+      if (window.console && console.warn) console.warn('[see-also]', err);
+    });
+
+  function render(recs) {
+    var panel = document.createElement('section');
+    panel.className = 'sa-panel';
+    panel.setAttribute('aria-label', 'Related articles');
+
+    var h = document.createElement('h3');
+    h.className = 'sa-heading';
+    h.textContent = 'See also';
+    panel.appendChild(h);
+
+    var ul = document.createElement('ul');
+    ul.className = 'sa-list';
+    recs.forEach(function (r) {
+      var li = document.createElement('li');
+      var a = document.createElement('a');
+      a.href = r.url;
+      a.textContent = r.title;
+      li.appendChild(a);
+      ul.appendChild(li);
+    });
+    panel.appendChild(ul);
+
+    target.appendChild(panel);
+  }
+})();