From: Kai Moritz <kai@juplo.de>
Date: Sun, 5 Jul 2026 08:11:42 +0000 (+0200)
Subject: HTML-Struktur des Footer-Bereichs "Navigation" überarbeitet
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=ec9c66a52e05bf68595602b284b249c654b2c090;p=website

HTML-Struktur des Footer-Bereichs "Navigation" überarbeitet
---

diff --git a/src/components/BlogNav.astro b/src/components/BlogNav.astro
index 49882311..3803702c 100644
--- a/src/components/BlogNav.astro
+++ b/src/components/BlogNav.astro
@@ -166,268 +166,274 @@ const activeTagSlug  = onTagTerm      ? currentUrl.replace(/^\/tags\//, '').repl
   <hr class="n"/>
   <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
   <h1 class="nav">Navigation</h1>
-  <h2 class="nav menu">Section-Menu</h2>
-  <ul id="menu" class="cf">
-    {mainSections.map(s => (
-      <li class={`m ${s.name}`}>
-        <a href={s.url} class={activeSection === s.name ? 'm selected' : 'm'}>{s.title}</a>
-      </li>
-    ))}
-  </ul>
-  <h2 class="nav submenu">
-    {currentUrl === '/'
-      ? <strong class="s">Home</strong>
-      : <a class="s selected" href="/">Home</a>
-    }
-  </h2>
-  <ul id="submenu" class="s active">
-
-    {/* ── Blog subtree ─────────────────────────────────────────────────────── */}
-    <li class={`s sub${blogSectionOff ? ' off' : ''}`}>
-      {onBlog
-        ? <strong class="s">Blog</strong>
-        : <a href="/blog/" class={blogSelected ? 's selected' : 's'}>
-            {blogSelected ? <strong>Blog</strong> : 'Blog'}
-          </a>
-      }
-      <ul class={blogSelected ? 's active' : 's'}>
-        {/* Archive subtree — always rendered; off-class controls visibility via CSS */}
-        <li class={`s sub${archiveOff ? ' off' : ''}`}>
-          {currentUrl === '/blog/archive/'
-            ? <strong class="s">Archive</strong>
-            : <a href="/blog/archive/" class={onArchive ? 's selected' : 's'}>
-                {onArchive ? <strong>Archive</strong> : 'Archive'}
-              </a>
-          }
-          <ul class={onArchive ? 's active' : 's'}>
-            {years.map(year => {
-              const active = isActiveYear(year);
-              // Year visible only when: on Archive root (all years are children) or this year is active.
-              // On Blog root, Categories, Tags, outside Blog: all years are off.
-              const yearOff = currentUrl !== '/blog/archive/' && !active;
-              return (
-                <li class={`s${yearOff ? ' off' : ''}`}>
-                  {currentUrl === `/blog/archive/${year}/`
-                    ? <strong class="s">{year}</strong>
-                    : <a href={`/blog/archive/${year}/`} class={active ? 's selected' : 's'}>
-                        {active ? <strong>{year}</strong> : year}
-                      </a>
-                  }
-                  <ul class="s">
-                    {postsByYear[year].map(post => {
-                      const pUrl = postUrl(post);
-                      const current = pUrl === currentUrl;
-                      return (
-                        <li class="s nav-leaf">
-                          {current
-                            ? <strong class="s">{post.data.title}</strong>
-                            : <a href={pUrl} class="s">{post.data.title}</a>
-                          }
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </li>
-              );
-            })}
-          </ul>
+  <div>
+  <h2 id="sitedescription" class="nav menu">Description of the website structure</h2>
+    <ul id="menu" class="cf">
+      {mainSections.map(s => (
+        <li class={`m ${s.name}`}>
+          <a href={s.url} class={activeSection === s.name ? 'm selected' : 'm'}>{s.title}</a><span class="sep">:</span>
+          <span class="description">Wechselnde passende Beschreibung des Bereichs</span>
         </li>
-        {/* Categories subtree */}
-        {categories.length > 0 && (
-          <li class={`s${categoriesOff ? ' off' : ''}${categoriesSelected ? ' sub' : ''}`}>
-            {onCategoriesIndex
-              ? <strong class="s">Categories</strong>
-              : <a href="/blog/categories/" class={categoriesSelected ? 's selected' : 's'}>
-                  {categoriesSelected ? <strong>Categories</strong> : 'Categories'}
-                </a>
-            }
-            {categoriesSelected ? (
-              <ul class="s active">
-                {categories.map(cat => {
-                  const active = cat.name === activeCatSlug;
-                  return (
-                    <li class="s">
-                      {active
-                        ? <strong class="s">{cat.displayName}</strong>
-                        : <a href={cat.url} class="s">{cat.displayName}</a>
-                      }
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <ul class="s">
-                {categories.map(cat => (
-                  <li class="s nav-leaf">
-                    <a href={cat.url} class="s">{cat.displayName}</a>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </li>
-        )}
-        {/* Tags subtree */}
-        {tags.length > 0 && (
-          <li class={`s${tagsOff ? ' off' : ''}${tagsSelected ? ' sub' : ''}`}>
-            {onTagsIndex
-              ? <strong class="s">Tags</strong>
-              : <a href="/blog/tags/" class={tagsSelected ? 's selected' : 's'}>
-                  {tagsSelected ? <strong>Tags</strong> : 'Tags'}
+      ))}
+    </ul>
+  </div>
+  <div id="sitemap">
+    <h2 class="nav">Sitemap</h2>
+    <a class="home">
+      {currentUrl === '/'
+        ? <strong class="s">You are at the start-page of the site</strong>
+        : <a class="s selected" href="/">Go back to the start-page of the site</a>
+      }
+    </a>
+    <ul id="submenu" class="s active">
+
+      {/* ── Blog subtree ─────────────────────────────────────────────────────── */}
+      <li class={`s sub${blogSectionOff ? ' off' : ''}`}>
+        {onBlog
+          ? <strong class="s">Blog</strong>
+          : <a href="/blog/" class={blogSelected ? 's selected' : 's'}>
+              {blogSelected ? <strong>Blog</strong> : 'Blog'}
+            </a>
+        }
+        <ul class={blogSelected ? 's active' : 's'}>
+          {/* Archive subtree — always rendered; off-class controls visibility via CSS */}
+          <li class={`s sub${archiveOff ? ' off' : ''}`}>
+            {currentUrl === '/blog/archive/'
+              ? <strong class="s">Archive</strong>
+              : <a href="/blog/archive/" class={onArchive ? 's selected' : 's'}>
+                  {onArchive ? <strong>Archive</strong> : 'Archive'}
                 </a>
             }
-            {tagsSelected ? (
-              <ul class="s active">
-                {tags.map(tag => {
-                  const active = tag.name === activeTagSlug;
-                  return (
-                    <li class="s">
-                      {active
-                        ? <strong class="s">{tag.displayName}</strong>
-                        : <a href={tag.url} class="s">{tag.displayName}</a>
-                      }
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <ul class="s">
-                {tags.map(tag => (
-                  <li class="s nav-leaf">
-                    <a href={tag.url} class="s">{tag.displayName}</a>
+            <ul class={onArchive ? 's active' : 's'}>
+              {years.map(year => {
+                const active = isActiveYear(year);
+                // Year visible only when: on Archive root (all years are children) or this year is active.
+                // On Blog root, Categories, Tags, outside Blog: all years are off.
+                const yearOff = currentUrl !== '/blog/archive/' && !active;
+                return (
+                  <li class={`s${yearOff ? ' off' : ''}`}>
+                    {currentUrl === `/blog/archive/${year}/`
+                      ? <strong class="s">{year}</strong>
+                      : <a href={`/blog/archive/${year}/`} class={active ? 's selected' : 's'}>
+                          {active ? <strong>{year}</strong> : year}
+                        </a>
+                    }
+                    <ul class="s">
+                      {postsByYear[year].map(post => {
+                        const pUrl = postUrl(post);
+                        const current = pUrl === currentUrl;
+                        return (
+                          <li class="s nav-leaf">
+                            {current
+                              ? <strong class="s">{post.data.title}</strong>
+                              : <a href={pUrl} class="s">{post.data.title}</a>
+                            }
+                          </li>
+                        );
+                      })}
+                    </ul>
                   </li>
-                ))}
-              </ul>
-            )}
+                );
+              })}
+            </ul>
           </li>
-        )}
-      </ul>
-    </li>
-
-    {/* ── Projects subtree ─────────────────────────────────────────────────── */}
-    <li class={`s sub${projectsSectionOff ? ' off' : ''}`}>
-      {currentUrl === '/projects/'
-        ? <strong class="s">Projects</strong>
-        : <a href="/projects/" class={onProjectsSection ? 's selected' : 's'}>
-            {onProjectsSection ? <strong>Projects</strong> : 'Projects'}
-          </a>
-      }
-      <ul class={`s${onProjectsSection ? ' active' : ''}`}>
-        {projectTrees.map(info => {
-          const root       = info.navRoot;
-          const rootInPath = inSubtree(root, currentUrl);
-          const rootOff    = projNodeOff(root.url, '/projects/', rootInPath);
-          return (
-            <li class={`s sub${rootOff ? ' off' : ''}`}>
-              {root.url === currentUrl
-                ? <strong class="s">{root.title}</strong>
-                : <a href={root.url} class={rootInPath ? 's selected' : 's'}>
-                    {rootInPath ? <strong>{root.title}</strong> : root.title}
+          {/* Categories subtree */}
+          {categories.length > 0 && (
+            <li class={`s${categoriesOff ? ' off' : ''}${categoriesSelected ? ' sub' : ''}`}>
+              {onCategoriesIndex
+                ? <strong class="s">Categories</strong>
+                : <a href="/blog/categories/" class={categoriesSelected ? 's selected' : 's'}>
+                    {categoriesSelected ? <strong>Categories</strong> : 'Categories'}
                   </a>
               }
-              <ul class={`s${rootInPath ? ' active' : ''}`}>
-                {root.children.map(child => {
-                  const childInPath = inSubtree(child, currentUrl);
-                  const childOff    = projNodeOff(child.url, root.url, childInPath, child.isAlias);
-                  const childIsNode = child.isNode;
-                  return (
-                    <li class={`s${childIsNode ? ' sub' : ''}${child.isAlias ? ' alias' : ''}${childOff ? ' off' : ''}`}>
-                      {child.url === currentUrl
-                        ? <strong class="s">{child.title}</strong>
-                        : <a href={child.url} class={childInPath ? 's selected' : 's'}>
-                            {childInPath ? <strong>{child.title}</strong> : child.title}
-                          </a>
-                      }
-                      {child.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
-                      {childIsNode && child.children.length > 0 && (
-                        <ul class={`s${childInPath ? ' active' : ''}`}>
-                          {child.children.map(grand => {
-                            const grandInPath = inSubtree(grand, currentUrl);
-                            const grandOff    = projNodeOff(grand.url, child.url, grandInPath, grand.isAlias);
-                            const grandIsNode = grand.isNode;
-                            return (
-                              <li class={`s${grandIsNode ? ' sub' : ''}${grand.isAlias ? ' alias' : ''}${grandOff ? ' off' : ''}`}>
-                                {grand.url === currentUrl
-                                  ? <strong class="s">{grand.title}</strong>
-                                  : <a href={grand.url} class={grandInPath ? 's selected' : 's'}>
-                                      {grandInPath ? <strong>{grand.title}</strong> : grand.title}
-                                    </a>
-                                }
-                                {grand.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
-                                {grandIsNode && grand.children.length > 0 && (
-                                  <ul class={`s${grandInPath ? ' active' : ''}`}>
-                                    {grand.children.map(ggrand => {
-                                      const ggInPath = ggrand.url === currentUrl;
-                                      const ggOff    = projNodeOff(ggrand.url, grand.url, ggInPath, ggrand.isAlias);
-                                      return (
-                                        <li class={`s${ggrand.isAlias ? ' alias' : ''}${ggOff ? ' off' : ''}`}>
-                                          {ggInPath
-                                            ? <strong class="s">{ggrand.title}</strong>
-                                            : <a href={ggrand.url} class="s">{ggrand.title}</a>
-                                          }
-                                          {ggrand.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
-                                        </li>
-                                      );
-                                    })}
-                                  </ul>
-                                )}
-                              </li>
-                            );
-                          })}
-                        </ul>
-                      )}
+              {categoriesSelected ? (
+                <ul class="s active">
+                  {categories.map(cat => {
+                    const active = cat.name === activeCatSlug;
+                    return (
+                      <li class="s">
+                        {active
+                          ? <strong class="s">{cat.displayName}</strong>
+                          : <a href={cat.url} class="s">{cat.displayName}</a>
+                        }
+                      </li>
+                    );
+                  })}
+                </ul>
+              ) : (
+                <ul class="s">
+                  {categories.map(cat => (
+                    <li class="s nav-leaf">
+                      <a href={cat.url} class="s">{cat.displayName}</a>
                     </li>
-                  );
-                })}
-              </ul>
+                  ))}
+                </ul>
+              )}
             </li>
-          );
-        })}
-      </ul>
-    </li>
-
-    {/* ── About subtree ────────────────────────────────────────────────────── */}
-    <li class={`s sub${aboutOff ? ' off' : ''}`}>
-      {currentUrl === '/about.html'
-        ? <strong class="s">About</strong>
-        : <a href="/about.html" class={onAboutSection ? 's selected' : 's'}>
-            {onAboutSection ? <strong>About</strong> : 'About'}
-          </a>
-      }
-      <ul class={`s${onAboutSection ? ' active' : ''}`}>
-        {aboutSection.children!.map(child => {
-          const childInPath  = inSubtree(child, currentUrl);
-          const childOff     = aboutNodeOff(child.url, '/about.html', childInPath);
-          const childHasSubs = (child.children ?? []).length > 0;
-          return (
-            <li class={`s${childHasSubs ? ' sub' : ''}${childOff ? ' off' : ''}`}>
-              {child.url === currentUrl
-                ? <strong class="s">{child.title}</strong>
-                : <a href={child.url} class={childInPath ? 's selected' : 's'}>
-                    {childInPath ? <strong>{child.title}</strong> : child.title}
+          )}
+          {/* Tags subtree */}
+          {tags.length > 0 && (
+            <li class={`s${tagsOff ? ' off' : ''}${tagsSelected ? ' sub' : ''}`}>
+              {onTagsIndex
+                ? <strong class="s">Tags</strong>
+                : <a href="/blog/tags/" class={tagsSelected ? 's selected' : 's'}>
+                    {tagsSelected ? <strong>Tags</strong> : 'Tags'}
                   </a>
               }
-              {childHasSubs && (
-                <ul class={`s${childInPath ? ' active' : ''}`}>
-                  {child.children!.map(grand => {
-                    const grandActive = grand.url === currentUrl;
-                    const grandOff    = aboutNodeOff(grand.url, child.url, grandActive);
+              {tagsSelected ? (
+                <ul class="s active">
+                  {tags.map(tag => {
+                    const active = tag.name === activeTagSlug;
                     return (
-                      <li class={`s${grandOff ? ' off' : ''}`}>
-                        {grandActive
-                          ? <strong class="s">{grand.title}</strong>
-                          : <a href={grand.url} class="s">{grand.title}</a>
+                      <li class="s">
+                        {active
+                          ? <strong class="s">{tag.displayName}</strong>
+                          : <a href={tag.url} class="s">{tag.displayName}</a>
                         }
                       </li>
                     );
                   })}
                 </ul>
+              ) : (
+                <ul class="s">
+                  {tags.map(tag => (
+                    <li class="s nav-leaf">
+                      <a href={tag.url} class="s">{tag.displayName}</a>
+                    </li>
+                  ))}
+                </ul>
               )}
             </li>
-          );
-        })}
-      </ul>
-    </li>
+          )}
+        </ul>
+      </li>
+
+      {/* ── Projects subtree ─────────────────────────────────────────────────── */}
+      <li class={`s sub${projectsSectionOff ? ' off' : ''}`}>
+        {currentUrl === '/projects/'
+          ? <strong class="s">Projects</strong>
+          : <a href="/projects/" class={onProjectsSection ? 's selected' : 's'}>
+              {onProjectsSection ? <strong>Projects</strong> : 'Projects'}
+            </a>
+        }
+        <ul class={`s${onProjectsSection ? ' active' : ''}`}>
+          {projectTrees.map(info => {
+            const root       = info.navRoot;
+            const rootInPath = inSubtree(root, currentUrl);
+            const rootOff    = projNodeOff(root.url, '/projects/', rootInPath);
+            return (
+              <li class={`s sub${rootOff ? ' off' : ''}`}>
+                {root.url === currentUrl
+                  ? <strong class="s">{root.title}</strong>
+                  : <a href={root.url} class={rootInPath ? 's selected' : 's'}>
+                      {rootInPath ? <strong>{root.title}</strong> : root.title}
+                    </a>
+                }
+                <ul class={`s${rootInPath ? ' active' : ''}`}>
+                  {root.children.map(child => {
+                    const childInPath = inSubtree(child, currentUrl);
+                    const childOff    = projNodeOff(child.url, root.url, childInPath, child.isAlias);
+                    const childIsNode = child.isNode;
+                    return (
+                      <li class={`s${childIsNode ? ' sub' : ''}${child.isAlias ? ' alias' : ''}${childOff ? ' off' : ''}`}>
+                        {child.url === currentUrl
+                          ? <strong class="s">{child.title}</strong>
+                          : <a href={child.url} class={childInPath ? 's selected' : 's'}>
+                              {childInPath ? <strong>{child.title}</strong> : child.title}
+                            </a>
+                        }
+                        {child.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
+                        {childIsNode && child.children.length > 0 && (
+                          <ul class={`s${childInPath ? ' active' : ''}`}>
+                            {child.children.map(grand => {
+                              const grandInPath = inSubtree(grand, currentUrl);
+                              const grandOff    = projNodeOff(grand.url, child.url, grandInPath, grand.isAlias);
+                              const grandIsNode = grand.isNode;
+                              return (
+                                <li class={`s${grandIsNode ? ' sub' : ''}${grand.isAlias ? ' alias' : ''}${grandOff ? ' off' : ''}`}>
+                                  {grand.url === currentUrl
+                                    ? <strong class="s">{grand.title}</strong>
+                                    : <a href={grand.url} class={grandInPath ? 's selected' : 's'}>
+                                        {grandInPath ? <strong>{grand.title}</strong> : grand.title}
+                                      </a>
+                                  }
+                                  {grand.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
+                                  {grandIsNode && grand.children.length > 0 && (
+                                    <ul class={`s${grandInPath ? ' active' : ''}`}>
+                                      {grand.children.map(ggrand => {
+                                        const ggInPath = ggrand.url === currentUrl;
+                                        const ggOff    = projNodeOff(ggrand.url, grand.url, ggInPath, ggrand.isAlias);
+                                        return (
+                                          <li class={`s${ggrand.isAlias ? ' alias' : ''}${ggOff ? ' off' : ''}`}>
+                                            {ggInPath
+                                              ? <strong class="s">{ggrand.title}</strong>
+                                              : <a href={ggrand.url} class="s">{ggrand.title}</a>
+                                            }
+                                            {ggrand.isAlias && <span class="alias-hint"> (Schnellzugriff)</span>}
+                                          </li>
+                                        );
+                                      })}
+                                    </ul>
+                                  )}
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </li>
+            );
+          })}
+        </ul>
+      </li>
+
+      {/* ── About subtree ────────────────────────────────────────────────────── */}
+      <li class={`s sub${aboutOff ? ' off' : ''}`}>
+        {currentUrl === '/about.html'
+          ? <strong class="s">About</strong>
+          : <a href="/about.html" class={onAboutSection ? 's selected' : 's'}>
+              {onAboutSection ? <strong>About</strong> : 'About'}
+            </a>
+        }
+        <ul class={`s${onAboutSection ? ' active' : ''}`}>
+          {aboutSection.children!.map(child => {
+            const childInPath  = inSubtree(child, currentUrl);
+            const childOff     = aboutNodeOff(child.url, '/about.html', childInPath);
+            const childHasSubs = (child.children ?? []).length > 0;
+            return (
+              <li class={`s${childHasSubs ? ' sub' : ''}${childOff ? ' off' : ''}`}>
+                {child.url === currentUrl
+                  ? <strong class="s">{child.title}</strong>
+                  : <a href={child.url} class={childInPath ? 's selected' : 's'}>
+                      {childInPath ? <strong>{child.title}</strong> : child.title}
+                    </a>
+                }
+                {childHasSubs && (
+                  <ul class={`s${childInPath ? ' active' : ''}`}>
+                    {child.children!.map(grand => {
+                      const grandActive = grand.url === currentUrl;
+                      const grandOff    = aboutNodeOff(grand.url, child.url, grandActive);
+                      return (
+                        <li class={`s${grandOff ? ' off' : ''}`}>
+                          {grandActive
+                            ? <strong class="s">{grand.title}</strong>
+                            : <a href={grand.url} class="s">{grand.title}</a>
+                          }
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </li>
 
-  </ul>
+    </ul>
+  </div>
   <hr class="n"/>
 </nav>