Add skill overview and attributes sections to player guide; create skill overview page and JSON data for skills

_layouts/toc.html

@@ -0,0 +1,66 @@
+---
+layout: page
+---
+
+<div id="toc"></div>
+
+{{ content }}
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const tocContainer = document.getElementById("toc");
+    if (!tocContainer) return;
+
+    const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+    if (headings.length === 0) return;
+
+    const tocList = document.createElement("ul");
+    tocList.className = "cyber-ul";
+    /*tocList.style.listStyle = "none";
+    tocList.style.paddingLeft = "0";
+    tocList.style.border = "1px solid #ccc";
+    tocList.style.borderRadius = "8px";
+    tocList.style.padding = "1em";
+    tocList.style.backgroundColor = "#f9f9f9";
+    tocList.style.fontFamily = "sans-serif";*/
+
+    const createId = (text) => {
+      return text.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-");
+    };
+
+    headings.forEach((heading) => {
+      const level = parseInt(heading.tagName.substring(1));
+      const text = heading.textContent;
+      let id = heading.id || createId(text);
+
+      // Wenn ID noch nicht vergeben, setzen
+      if (!heading.id) heading.id = id;
+
+      const li = document.createElement("li");
+      li.style.marginLeft = `${(level - 1) * 1.2}em`;
+      li.style.marginBottom = "0.3em";
+
+      const link = document.createElement("a");
+      link.className = "cyber-a";
+      link.href = `#${id}`;
+      link.textContent = text;
+      link.style.textDecoration = "none";
+      link.style.color = "#333";
+      link.style.fontSize = `${1.1 - level * 0.05}em`;
+
+      link.addEventListener("mouseover", () => (link.style.color = "#007acc"));
+      link.addEventListener("mouseout", () => (link.style.color = "#333"));
+
+      li.appendChild(link);
+      tocList.appendChild(li);
+    });
+
+    const heading = document.createElement("strong");
+    heading.textContent = "Inhaltsverzeichnis";
+    heading.style.display = "block";
+    heading.style.marginBottom = "0.5em";
+
+    tocContainer.appendChild(heading);
+    tocContainer.appendChild(tocList);
+  });
+</script>