dsccommunity · Gijsreyn · May 17, 2026
diff --git a/archetypes/blog.md b/archetypes/blog.md
@@ -1,8 +1,8 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
-type: "post"
 draft: false
+dsc_family: "" # "PowerShell DSC", "Microsoft DSC", or "Community"
 ---
 
-## {{ replace .Name "-" " " | title }}
+## {{ replace .Name "-" " " | title }}
diff --git a/assets/css/futuristic.css b/assets/css/futuristic.css
@@ -72,16 +72,17 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.3);
   --shadow-card: 0 0 0 1px var(--border-color), var(--shadow-md);
 
   /* Typography */
-  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+  --font-sans:
+    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
   --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
 
   --text-xs: 0.75rem;
@@ -201,8 +202,8 @@
       #0f172a 50%,
       #1e293b 100%
     );
-    --shadow-card: 0 0 0 1px var(--border-color),
-      0 4px 6px -1px rgb(0 0 0 / 0.3);
+    --shadow-card:
+      0 0 0 1px var(--border-color), 0 4px 6px -1px rgb(0 0 0 / 0.3);
   }
 }
 
@@ -412,7 +413,8 @@ pre code {
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border-color);
-  transition: background-color var(--transition-normal),
+  transition:
+    background-color var(--transition-normal),
     box-shadow var(--transition-normal);
 }
 
@@ -832,10 +834,8 @@ pre code {
 .hero-grid {
   position: absolute;
   inset: 0;
-  background-image: linear-gradient(
-      rgba(255, 255, 255, 0.03) 1px,
-      transparent 1px
-    ),
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
@@ -1006,7 +1006,9 @@ pre code {
 
 .card:hover {
   border-color: var(--color-primary);
-  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary);
+  box-shadow:
+    var(--shadow-lg),
+    0 0 0 1px var(--color-primary);
   transform: translateY(-4px);
 }
 
@@ -1840,6 +1842,150 @@ pre code {
   transition: background var(--transition-fast);
 }
 
+/* -----------------------------------------------------------------------------
+   Blog Article with TOC Layout
+   ----------------------------------------------------------------------------- */
+.article-with-toc {
+  display: grid;
+  grid-template-columns: 1fr 260px;
+  gap: var(--space-12);
+  align-items: start;
+}
+
+@media (max-width: 1024px) {
+  .article-with-toc {
+    grid-template-columns: 1fr;
+  }
+
+  .article-toc {
+    display: none;
+  }
+}
+
+.article-body {
+  min-width: 0;
+}
+
+/* TOC sidebar */
+.article-toc {
+  position: relative;
+}
+
+.toc-sticky {
+  position: sticky;
+  top: calc(var(--header-height) + var(--space-6));
+  max-height: calc(100vh - var(--header-height) - var(--space-12));
+  overflow-y: auto;
+  padding: var(--space-5);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+}
+
+.toc-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  margin-bottom: var(--space-3);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.toc-heading i {
+  font-size: var(--text-sm);
+}
+
+/* Hugo generates a <nav id="TableOfContents"> containing <ul><li><a> */
+.toc-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-nav li {
+  margin: 0;
+}
+
+.toc-nav a {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  transition: all var(--transition-fast);
+  line-height: var(--line-height-normal);
+}
+
+.toc-nav a:hover {
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.06);
+  border-left-color: var(--color-primary-light);
+  text-decoration: none;
+}
+
+/* nested h3 items */
+.toc-nav ul ul {
+  padding-left: var(--space-3);
+}
+
+.toc-nav ul ul a {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+}
+
+/* Active TOC item (set via JS below) */
+.toc-nav a.toc-active {
+  color: var(--color-primary);
+  background: rgba(59, 130, 246, 0.08);
+  border-left-color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* -----------------------------------------------------------------------------
+   Blog Section Headers (list page)
+   ----------------------------------------------------------------------------- */
+.blog-section-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin-bottom: var(--space-8);
+  padding-bottom: var(--space-6);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.blog-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  color: white;
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.blog-section-title {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  margin-bottom: var(--space-1);
+  line-height: 1.3;
+}
+
+.blog-section-description {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  margin: 0;
+}
+
 .search-result-item:hover,
 .search-result-item.focused {
   background: var(--bg-tertiary);

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
   initCodeHighlight();
   initSmoothScroll();
   initAnimations();
+  initTocHighlight();
 });
 
 /**
@@ -101,7 +102,7 @@ function initHeader() {
 
       lastScroll = currentScroll;
     },
-    { passive: true }
+    { passive: true },
   );
 }
 
@@ -257,20 +258,20 @@ function handleSearch(e) {
     .map(
       (item, index) => `
     <a href="${item.url}" class="search-result-item${
-        index === 0 ? " focused" : ""
-      }" data-index="${index}">
+      index === 0 ? " focused" : ""
+    }" data-index="${index}">
       <div class="search-result-icon">
         <i class="ri-file-text-line"></i>
       </div>
       <div class="search-result-content">
         <div class="search-result-title">${highlightMatch(
           item.title,
-          query
+          query,
         )}</div>
         <div class="search-result-path">${item.section}</div>
       </div>
     </a>
-  `
+  `,
     )
     .join("");
 }
@@ -279,7 +280,7 @@ function highlightMatch(text, query) {
   const regex = new RegExp(`(${escapeRegex(query)})`, "gi");
   return text.replace(
     regex,
-    '<mark style="background: rgba(59, 130, 246, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>'
+    '<mark style="background: rgba(59, 130, 246, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>',
   );
 }
 
@@ -353,6 +354,41 @@ function initSmoothScroll() {
   });
 }
 
+/**
+ * TOC Active Highlight
+ * Highlights the current section in the sticky TOC as the user scrolls
+ */
+function initTocHighlight() {
+  const tocNav = document.querySelector(".toc-nav");
+  if (!tocNav) return;
+
+  const tocLinks = Array.from(tocNav.querySelectorAll("a[href^='#']"));
+  if (tocLinks.length === 0) return;
+
+  const headings = tocLinks
+    .map((link) => document.querySelector(link.getAttribute("href")))
+    .filter(Boolean);
+
+  function onScroll() {
+    const scrollY = window.scrollY + 80; // offset for sticky header
+    let current = headings[0];
+
+    for (const heading of headings) {
+      if (heading.offsetTop <= scrollY) {
+        current = heading;
+      }
+    }
+
+    tocLinks.forEach((link) => {
+      const isActive = link.getAttribute("href") === "#" + current.id;
+      link.classList.toggle("toc-active", isActive);
+    });
+  }
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  onScroll();
+}
+
 /**
  * Intersection Observer for Animations
  */
@@ -369,7 +405,7 @@ function initAnimations() {
     {
       threshold: 0.1,
       rootMargin: "0px 0px -50px 0px",
-    }
+    },
   );
 
   document

diff --git a/config.toml b/config.toml
@@ -13,6 +13,10 @@ unsafe = true
 style = "github-dark"
 lineNos = false
 codeFences = true
+[markup.tableOfContents]
+startLevel = 2
+endLevel = 3
+ordered = false
 
 [params]
 # Updated modern color palette

diff --git a/content/blog/DSC-is-dead-long-live-dsc.en.md b/content/blog/DSC-is-dead-long-live-dsc.en.md
@@ -1,10 +1,10 @@
 ---
 title: "DSC is Dead"
 date: 2020-05-30T23:00:00+01:00
-type: "post"
 weight: 2
 draft: false
 author: gaelcolas
+dsc_family: "PowerShell DSC"
 ---
 
 Is DSC really dead? In this PSConfEU session, Michael and Gael address the most common questions about Desired State Configuration, its current state, and where the future might be heading with Guest Configuration and Azure Arc.

diff --git a/content/blog/add-codecov-support-to-repository.md b/content/blog/add-codecov-support-to-repository.md
@@ -1,8 +1,8 @@
 ---
 title: "Add Code Coverage Support to Repository"
 date: 2020-02-03T19:17:35+01:00
-type: "post"
 draft: false
+dsc_family: "Community"
 author: johlju
 ---
 

diff --git a/content/blog/class-based-dsc-resources.md b/content/blog/class-based-dsc-resources.md
@@ -1,9 +1,9 @@
 ---
 title: "Class Based DSC Resource only proposal"
 date: 2020-10-02T10:00:00+02:00
-type: "post"
 draft: false
 author: gaelcolas
+dsc_family: "PowerShell DSC"
 ---
 
 The PowerShell team announced plans to focus on class-based DSC resources only for PowerShell 7.2+, moving away from MOF/CIM dependencies. This article explains why this is a good direction, addresses common concerns about backward compatibility and testing, and shares the DSC Community's perspective on this change.

diff --git a/content/blog/convert-a-module-for-continuous-delivery.en.md b/content/blog/convert-a-module-for-continuous-delivery.en.md
@@ -1,8 +1,8 @@
 ---
 title: "Steps to convert a module for continuous delivery"
 date: 2019-12-30
-type: "post"
 draft: false
+dsc_family: "PowerShell DSC"
 author: johlju
 ---
 

diff --git a/content/blog/convert-master-to-main.en.md b/content/blog/convert-master-to-main.en.md
@@ -1,8 +1,8 @@
 ---
 title: "Steps to rename master branch to main for a DSC Community resource"
 date: 2020-12-26
-type: "post"
 draft: false
+dsc_family: "Community"
 author: dscottraynsford
 ---