@kenjura/ursa 0.55.0 → 0.58.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 0.58.0
+2025-12-26
+
+- new menu UI with 2-pane horizontal layout
+
+# 0.57.0
+2025-12-26
+
+- added full-text indexing and search using lunr.js
+- all links in generated html will be full links with extensions (e.g. /folder/page.html)
+
+# 0.56.0
+2025-12-23
+
+- restored metadata to directory index JSON files
+
 # 0.55.0
 2025-12-21
 

package/README.md

@@ -242,4 +242,17 @@ Generates the site once using default directories.
 
 ## Requirements
 
-SOURCE folder should have at least an index.md in it.
+SOURCE folder should have at least an index.md in it.
+
+
+## Link logic
+Links are allowed to be extensionless. Link resolution works as follows:
+- If link has an extension, look for exact match, and 404 if not found
+- If link has no extension:
+  - Look for exact match with .md, .txt, .yml extensions (in that order)
+  - If not found, assume the path is a folder, and look for:
+    - index.md, index.txt, _index.md, _index.txt
+    - home.md, home.txt, _home.md, _home.txt
+    - (folder name).md, (folder name).txt
+  - If any of these are found, link to that file's html version
+  - If still not found, 404

package/meta/default.css

@@ -180,15 +180,54 @@ nav#nav-global {
   font-style: italic;
 }
 
+/* Search section styling (for combined path/full-text results) */
+.search-section {
+  border-bottom: 1px solid var(--nav-top-bg);
+}
+
+.search-section:last-child {
+  border-bottom: none;
+}
+
+.search-section-header {
+  padding: 8px 16px;
+  font-size: 0.75em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-color);
+  opacity: 0.6;
+  background-color: color-mix(in srgb, var(--nav-top-bg) 50%, transparent);
+  border-bottom: 1px solid var(--nav-top-bg);
+}
+
+.search-show-more {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  color: var(--link-color);
+  font-size: 0.85em;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.2s ease;
+}
+
+.search-show-more:hover {
+  background-color: var(--nav-top-bg);
+  text-decoration: underline;
+}
+
 nav#nav-main {
   position: fixed;
   top: calc(var(--global-nav-height));
   left: 0;
   width: 260px;
   max-height: calc(100vh - var(--global-nav-height));
-  overflow-y: auto;
-  padding: 0.5rem 0;
-  font-size: 0.9rem;
+  overflow: hidden;
+  padding: 0;
+  font-size: 0.85rem;
   transition: transform 0.2s ease;
 }
 
@@ -204,114 +243,88 @@ body:has(nav#nav-main.collapsed) article#main-content {
 }
 
 nav#nav-main {
-
-  /* Scrollbar styling */
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(128, 128, 128, 0.3);
-    border-radius: 3px;
+  /* Column-based menu styles */
+  
+  .menu-loading {
+    padding: 1rem;
+    opacity: 0.6;
+    text-align: center;
   }
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(128, 128, 128, 0.5);
+  
+  /* Container that clips the columns */
+  .menu-columns-container {
+    width: 100%;
+    height: calc(100vh - var(--global-nav-height) - 40px);
+    overflow: hidden;
+    position: relative;
   }
-
-  /* Breadcrumb navigation header */
-  .menu-breadcrumb {
+  
+  /* Wrapper that holds all columns and transforms for scrolling */
+  .menu-columns-wrapper {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 0.5rem 1rem;
-    margin: 0 8px 0.5rem 8px;
-    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
-  }
-
-  .menu-breadcrumb button {
-    background: none;
-    border: none;
-    color: var(--text-color);
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 1rem;
-    opacity: 0.7;
-    transition: all 0.2s ease;
-  }
-
-  .menu-breadcrumb button:hover {
-    opacity: 1;
-    background: rgba(128, 128, 128, 0.2);
+    height: 100%;
+    transition: transform 0.25s ease-out;
   }
-
-  .menu-current-path {
-    flex: 1;
-    font-weight: 500;
-    opacity: 0.9;
-    text-transform: capitalize;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  
+  /* Individual column */
+  .menu-column {
+    width: 130px;
+    min-width: 130px;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-right: 1px solid rgba(128, 128, 128, 0.15);
+    
+    /* Scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(128, 128, 128, 0.2);
+      border-radius: 2px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(128, 128, 128, 0.4);
+    }
   }
-
-  /* Root ul */
-  ul.menu-level {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  
+  .menu-column:last-child {
+    border-right: none;
   }
-
-  ul {
+  
+  /* Column list */
+  .menu-column-list {
     list-style: none;
     margin: 0;
-    padding: 0;
+    padding: 4px 0;
   }
-
-  li {
+  
+  /* Column item */
+  .menu-column-item {
     margin: 0;
     padding: 0;
   }
-
-  /* Menu item row container - cleaner style like reference */
-  .menu-item-row {
+  
+  .menu-column-item-row {
     display: flex;
     align-items: center;
-    padding: 0.5rem 0.75rem;
-    margin: 2px 8px;
-    border-radius: 6px;
+    padding: 6px 8px;
+    margin: 1px 4px;
+    border-radius: 4px;
     cursor: pointer;
-    transition: all 0.15s ease;
-    gap: 10px;
+    transition: background-color 0.15s ease;
+    gap: 4px;
   }
-
-  .menu-item-row:hover {
-    background-color: rgba(128, 128, 128, 0.1);
-  }
-
-  /* Icon container */
-  .menu-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    font-size: 16px;
-    opacity: 0.7;
-  }
-
-  .menu-icon img {
-    width: 18px;
-    height: 18px;
-    object-fit: contain;
-    border-radius: 3px;
+  
+  .menu-column-item-row:hover {
+    background-color: rgba(128, 128, 128, 0.15);
   }
-
-  /* Menu link */
-  .menu-label {
+  
+  /* Label styling */
+  .menu-column-label {
     flex: 1;
     text-decoration: none;
     color: var(--text-color);
@@ -320,89 +333,105 @@ nav#nav-main {
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: 400;
-    line-height: 1.4;
+    line-height: 1.3;
     text-transform: capitalize;
+    font-size: 0.8rem;
   }
-
-  .menu-item-row:hover .menu-label {
+  
+  .menu-column-item-row:hover .menu-column-label {
     opacity: 1;
   }
-
-  /* More indicator for items with children */
-  .menu-more {
+  
+  /* Arrow for folders */
+  .menu-column-arrow {
     opacity: 0.4;
-    font-size: 14px;
-    padding: 0 4px;
-    cursor: pointer;
-    transition: opacity 0.15s ease;
+    font-size: 12px;
+    flex-shrink: 0;
   }
-
-  .menu-item-row:hover .menu-more {
-    opacity: 0.7;
+  
+  .menu-column-item.has-children .menu-column-item-row:hover .menu-column-arrow {
+    opacity: 0.8;
   }
-
-  .menu-more:hover {
-    opacity: 1 !important;
+  
+  /* Selected item (on path to current doc) */
+  .menu-column-item.selected > .menu-column-item-row {
+    background-color: rgba(128, 128, 128, 0.2);
   }
-
-  /* Caret indicator for level-1 expandable items */
-  .menu-caret {
-    opacity: 0.4;
-    font-size: 12px;
-    padding: 0 4px;
-    cursor: pointer;
-    transition: opacity 0.15s ease;
-    font-weight: bold;
+  
+  .menu-column-item.selected > .menu-column-item-row .menu-column-label {
+    font-weight: 500;
+    opacity: 1;
   }
-
-  .menu-item-row:hover .menu-caret {
-    opacity: 0.7;
+  
+  /* Current page item */
+  .menu-column-item.current-page > .menu-column-item-row {
+    background-color: rgba(0, 255, 255, 0.2);
   }
-
-  .menu-caret:hover {
-    opacity: 1 !important;
+  
+  .menu-column-item.current-page > .menu-column-item-row .menu-column-label {
+    font-weight: 600;
+    opacity: 1;
   }
-
-  /* Current/active item */
-  .current-menu-item > .menu-item-row {
-    background-color: rgba(0, 255, 255, 0.15);
+  
+  /* Scroll buttons */
+  .menu-scroll-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 24px;
+    height: 48px;
+    background: rgba(0, 0, 0, 0.4);
+    border: none;
+    color: var(--text-color);
+    font-size: 18px;
+    cursor: pointer;
+    z-index: 10;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-
-  .current-menu-item > .menu-item-row .menu-label {
-    opacity: 1;
-    font-weight: 500;
+  
+  .menu-scroll-btn:hover:not(:disabled) {
+    background: rgba(0, 0, 0, 0.6);
   }
-
-  /* Level 1 items - main folder entries */
-  .menu-item.level-1 > .menu-item-row {
-    font-size: 0.9rem;
+  
+  .menu-scroll-btn:disabled {
+    cursor: default;
   }
-
-  .menu-item.level-1.has-children > .menu-item-row {
-    margin-top: 0.25rem;
+  
+  .menu-scroll-btn.scroll-left {
+    left: 2px;
   }
-
-  /* Sublevel container - always visible for 2-level nav */
-  .menu-sublevel {
-    margin-left: 0;
-    padding-left: 0;
+  
+  .menu-scroll-btn.scroll-right {
+    right: 2px;
   }
-
-  /* Level 2 items - nested under folders */
-  .menu-item.level-2 > .menu-item-row {
-    padding-left: 2.5rem;
-    font-size: 0.85rem;
+  
+  /* Scroll indicator for current doc */
+  .menu-scroll-indicator {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
   }
-
-  .menu-item.level-2 > .menu-item-row .menu-icon {
-    display: none;
+  
+  .menu-scroll-indicator .scroll-to-current {
+    background: rgba(0, 255, 255, 0.3);
+    border: 1px solid rgba(0, 255, 255, 0.5);
+    color: var(--text-color);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
   }
-
-  /* Separator between sections */
-  .menu-item.level-1.has-children + .menu-item.level-1:not(.has-children) {
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid rgba(128, 128, 128, 0.15);
+  
+  .menu-scroll-indicator .scroll-to-current:hover {
+    background: rgba(0, 255, 255, 0.5);
   }
 }