Redo design and refactor

Author: Joshua-Lester3

EssentialCSharp.Web/Services/SiteMappingDto.cs

@@ -5,7 +5,7 @@
 public class SiteMappingDto
 {
     public required int Level { get; set; }
-    public required List<string> Keys { get; set; }
+    public required string Key { get; set; }
     public required string Href { get; set; }
     public required string Title { get; set; }
     public required IEnumerable<SiteMappingDto> Items { get; set; }

EssentialCSharp.Web/Services/SiteMappingService.cs

@@ -17,15 +17,15 @@ public IEnumerable<SiteMappingDto> GetTocData()
     {
         return SiteMappings.GroupBy(x => x.ChapterNumber).OrderBy(x => x.Key).Select(x =>
         {
-            IEnumerable<SiteMapping> orderedX = x.OrderBy(i => i.PageNumber).ThenBy(i => i.OrderOnPage);
-            SiteMapping firstX = orderedX.First();
+            IEnumerable<SiteMapping> orderedGrouping = x.OrderBy(i => i.PageNumber).ThenBy(i => i.OrderOnPage);
+            SiteMapping firstElement = orderedGrouping.First();
             return new SiteMappingDto()
             {
                 Level = 0,
-                Keys = [firstX.Keys.First()],
-                Href = $"{firstX.Keys.First()}#{firstX.AnchorId}",
-                Title = $"Chapter {x.Key}: {firstX.ChapterTitle}",
-                Items = GetItems(orderedX.Skip(1), 1)
+                Key = firstElement.Keys.First(),
+                Href = $"{firstElement.Keys.First()}#{firstElement.AnchorId}",
+                Title = $"Chapter {x.Key}: {firstElement.ChapterTitle}",
+                Items = GetItems(orderedGrouping.Skip(1), 1)
             };
         }
         );
@@ -42,7 +42,7 @@ private static IEnumerable<SiteMappingDto> GetItems(IEnumerable<SiteMapping> cha
             .Select(i => new SiteMappingDto()
             {
                 Level = indentLevel,
-                Keys = i.Keys,
+                Key = i.Keys.First(),
                 Href = $"{i.Keys.First()}#{i.AnchorId}",
                 Title = i.RawHeading,
                 // Any children of this node will be /after/ this node,

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -277,25 +277,25 @@
     @* Recursive vue component template for rendering the table of contents. *@
     <template id="toc-tree">
         <li v-if="item.items.length">
-            <details :open="expandedTocs.has(item.keys)"
-                     v-on:toggle="!$event.target.open ? expandedTocs.delete(item.keys) : expandedTocs.add(item.keys)">
+            <details :open="expandedTocs.has(item.key)"
+                     v-on:toggle="!$event.target.open ? expandedTocs.delete(item.key) : expandedTocs.add(item.key)">
                 <summary :class="{
                          'toc-content' : item.level==0,
                          'nested' : item.level>
                     0,
-                    'current-section': currentPage.some(p => JSON.stringify(p.keys) == JSON.stringify(item.keys)),
+                    'current-section': currentPage.some(p => p.key == item.key),
                     }" :href="item.href">{{item.title}}
                 </summary>
                 <ul>
                     <li :class="{
                         ['indent-level-' + (item.level+1)]: true,
                         'current-li' : currentPage.some(p=>
-                        JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+                        p.key == item.key) && !currentPage.some(p => p.level > item.level),
                         }" >
                         <a class="section-link" :class="{
                            ['indent-level-' + (item.level+1)]: true,
                            'current-section' : currentPage.some(p=>
-                            JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+                            p.key == item.key) && !currentPage.some(p => p.level > item.level),
                             }" :href="item.href"> Introduction
                         </a>
                     </li>
@@ -307,12 +307,12 @@
         <li v-else :class="{
             ['indent-level-' + (item.level+1)]: true,
             'current-li' : currentPage.some(p=>
-            JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+            p.key == item.key) && !currentPage.some(p => p.level > item.level),
             }" >
             <a class="section-link" :class="{
                ['indent-level-' + (item.level)]: true,
                'current-section' : currentPage.some(p=>
-                JSON.stringify(p.keys) == JSON.stringify(item.keys)),
+                p.key == item.key),
                 }" :href="item.href"> {{item.title}}
             </a>
         </li>

EssentialCSharp.Web/wwwroot/js/site.js

@@ -12,7 +12,7 @@ import { useWindowSize } from "vue-window-size";
 /**
  * @typedef {Object} TocItem
  * @prop {number} [level]
- * @prop {string[]} [keys]
+ * @prop {string} [key]
  * @prop {string} [href]
  * @prop {string} [title]
  * @prop {TocItem[]} [items]
@@ -83,10 +83,8 @@ function findCurrentPage(path, items) {
         if (window.location.href.endsWith("/" + item.href)) {
             return itemPath;
         }
-        for (let key of item.keys) {
-            if (window.location.href.endsWith("/" + key)) {
-                return itemPath;
-            }
+        if (window.location.href.endsWith("/" + item.key)) {
+            return itemPath;
         }
 
         const recursivePath = findCurrentPage(itemPath, item.items);
@@ -201,7 +199,7 @@ const app = createApp({
         const sectionTitle = ref(currentPage?.[0]?.title || "Essential C#");
         const expandedTocs = reactive(new Set());
         for (const item of currentPage) {
-            expandedTocs.add(item.keys);
+            expandedTocs.add(item.key);
         }
 
         // hide the sidebar when resizing to small screen
@@ -271,15 +269,15 @@ const app = createApp({
                 expandedTocs.clear();
                 // If a search query is removed, open the TOC for the current page.
                 for (const item of currentPage) {
-                    expandedTocs.add(item.keys);
+                    expandedTocs.add(item.key);
                 }
             }
             else {
                 expandedTocs.clear();
                 const query = normalizeString(newQuery);
                 tocData.forEach(item => {
                     if (filterItem(item, query)) {
-                        expandedTocs.add(item.keys);
+                        expandedTocs.add(item.key);
                     }
                 });
             }