<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>
projects / website / commitdiff