hdoc-tools 0.62.4 → 0.63.0

package/ui/css/theme-default/styles/components/htl-doc.css

@@ -2,12 +2,7 @@
  * Headings
  * -------------------------------------------------------------------------- */
 
-.HTL-doc h1,
-.HTL-doc h2,
-.HTL-doc h3,
-.HTL-doc h4,
-.HTL-doc h5,
-.HTL-doc h6 {
+.HTL-doc h1, h2, h3 {
   position: relative;
   font-weight: 600;
   outline: none;
@@ -27,6 +22,17 @@
   font-size: 24px;
 }
 
+.HTL-doc .faq-toc-item
+{
+  cursor: pointer;
+  display:inline-block; 
+}
+/* The four .highlight-container rules that were here are gone with the wrapper itself: the
+   section highlight is now an overlay (.hb-section-highlight in htldoc.layouts.css) and nothing
+   re-parents headings any more. These rules were what made the section creep 2px left on each
+   repeat click, via margin-left:-32px + padding-left:30px on each nested wrapper. */
+
+
 .HTL-doc h3 {
   margin: 32px 0 0;
   letter-spacing: -0.01em;
@@ -38,7 +44,7 @@
   position: absolute;
   font-size: 18px;
   left: -25px;
-  top: 52%;
+  /*top: 52%;*/
   width: 32px;
   /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
   opacity: 0;
@@ -49,7 +55,7 @@
   position: absolute;
   font-size: 18px;
   left: -25px;
-  top: 5px;
+  /*top: 5px;*/
   width: 32px;
   /*so will over lap headre slightly - stops flicker when hover out of header into anchor */
   opacity: 0;
@@ -75,8 +81,8 @@
 }
 
 /**
-  * Paragraph and inline elements
-  * -------------------------------------------------------------------------- */
+ * Paragraph and inline elements
+ * -------------------------------------------------------------------------- */
 
 .HTL-doc p,
 .HTL-doc summary {
@@ -112,13 +118,21 @@
   color: var(--htl-c-brand-dark);
 }
 
+.dark .HTL-doc a {
+  color: var(--htl-c-brand-light);
+}
+
+.dark .HTL-doc a:hover {
+  color: var(--htl-c-brand-lighter);
+}
+
 .HTL-doc strong {
   font-weight: 600;
 }
 
 /**
-  * Lists
-  * -------------------------------------------------------------------------- */
+ * Lists
+ * -------------------------------------------------------------------------- */
 
 .HTL-doc ul,
 .HTL-doc ol {
@@ -144,14 +158,19 @@
 }
 
 /**
-  * Table
-  * -------------------------------------------------------------------------- */
+ * Table
+ * -------------------------------------------------------------------------- */
 
 .HTL-doc table {
-  display: block;
-  border-collapse: collapse;
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
   margin: 20px 0;
   font-size: var(--htl-default-font-size);
+  border: 1px solid var(--htl-c-divider);
+  border-radius: var(--htl-box-radius);
+  overflow: hidden;
   /* sets font-size for table and table rows/td/th etc*/
 }
 
@@ -167,10 +186,21 @@
 .HTL-doc th,
 .HTL-doc td {
   border: 1px solid var(--htl-c-divider);
+  border-top: none;
+  border-left: none;
   padding: 10px 14px;
   vertical-align: top;
 }
 
+.HTL-doc th:last-child,
+.HTL-doc td:last-child {
+  border-right: none;
+}
+
+.HTL-doc tr:last-child td {
+  border-bottom: none;
+}
+
 .HTL-doc th {
   font-size: var(--htl-default-font-size);
   font-weight: 600;
@@ -182,18 +212,21 @@
 }
 
 /**
-  * Decorational elements
-  * -------------------------------------------------------------------------- */
+ * Decorational elements
+ * -------------------------------------------------------------------------- */
 
 .HTL-doc hr {
   margin: 16px 0;
   border: none;
-  border-top: 1px solid var(--htl-c-divider-light);
+  border-top: 1px solid var(--htl-c-divider);
+  /* bootstrap's reboot puts opacity:.25 on hr, which multiplied the divider alpha down to
+     near-invisible (and fully invisible in dark mode) - reset it and rely on the var's own alpha */
+  opacity: 1;
 }
 
 /**
-  * Custom Block
-  * -------------------------------------------------------------------------- */
+ * Custom Block
+ * -------------------------------------------------------------------------- */
 
 .HTL-doc .custom-block {
   margin: 16px 0;
@@ -235,8 +268,8 @@
 }
 
 /**
-  * Code
-  * -------------------------------------------------------------------------- */
+ * Code
+ * -------------------------------------------------------------------------- */
 
 /* inline code */
 .HTL-doc :not(pre, h1, h2, h3, h4, h5, h6)>code {
@@ -276,14 +309,14 @@
 
 @media (min-width: 640px) {
   .HTL-doc div[class*='language-'] {
-    border-radius: 8px;
+    border-radius: var(--htl-box-radius);
     margin: 16px 0;
   }
 }
 
 @media (max-width: 639px) {
   .HTL-doc li div[class*='language-'] {
-    border-radius: 8px 0 0 8px;
+    border-radius: var(--htl-box-radius) 0 0 var(--htl-box-radius);
   }
 }
 
@@ -359,13 +392,10 @@
   left: 1rem;
 }
 
+/* the same selector used to be declared twice back-to-back (opacity 0.4 then 0.7 - the second
+   won); collapsed to the surviving values */
 .HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   filter: blur(0.095rem);
-  opacity: 0.4;
-  transition: filter 0.35s, opacity 0.35s;
-}
-
-.HTL-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
   opacity: 0.7;
   transition: filter 0.35s, opacity 0.35s;
 }
@@ -486,40 +516,65 @@
   opacity: 0;
 }
 
-/**
-  * Component: Team
-  * -------------------------------------------------------------------------- */
-
-.HTL-doc .VPTeamMembers {
-  margin-top: 24px;
-}
-
-.HTL-doc .VPTeamMembers.small.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
-.HTL-doc .VPTeamMembers.small.count-2 .container,
-.HTL-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
-}
-
-.HTL-doc .VPTeamMembers.medium.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
-
-
+/* The VPTeamMembers rules that lived here were VitePress theme heritage - VPTeamMembers is a
+   literal VitePress component; nothing in the hdocbook pipeline or this front-end emits it. */
 
 /* CUSTOM HTL CLASSES FOR HTDOC */
-/* highlightjs code copy badge */
+/* highlightjs code copy badge.
+   Upstream positions the badge absolutely over the code block at opacity 0.5, so it sat on top
+   of the first line of code - the code showed through the badge and neither the language name,
+   the clipboard icon nor the code underneath were readable. Taking it out of absolute
+   positioning turns it into a normal flow element: the badge script inserts it as the first
+   child of the <pre>, so it becomes a full-width header bar above the code: language name left,
+   copy icon right. Nothing overlaps, and because the scroll container is the
+   <code class="hljs"> below it, the bar also stays put when a long line is scrolled.
+   Kept visually identical to hdoc serve (hdoc-tools 0.62.3), which fixes the same problem in the
+   badge template inside its own copy of highlightjs-badge.js. Here it is done in CSS instead, so
+   the local accessibility fixes in js/highlightjs-badge.js are left alone: same flex row,
+   space-between, #555 bar, 7px top corners, full width. */
 .HTL-doc .code-badge {
+  position: static !important;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  opacity: 1 !important;
   background: #555 !important;
+  border-radius: 7px 7px 0 0 !important;
   padding: 8px !important;
 }
 
+/* Flex column, purely to drop the whitespace-only text nodes the badged <pre> can contain.
+   Generated api-doc pages emit an indented <pre>\n      <code>...</code>\n    </pre>, and under
+   the inherited white-space:pre that indentation renders as blank lines - measured on
+   docs.hornbill.com as 24px above the badge (so the bar floated away from the tab strip) and
+   48px of dead space below the code: 223px of box for 110px of code. A flex container does not
+   generate anonymous boxes for whitespace-only text, so both gaps go without touching the
+   content pipeline. Measured after: 151px, badge flush at the top, code height unchanged. */
+.HTL-doc .code-badge-pre {
+  display: flex;
+  flex-direction: column;
+}
+
 .HTL-doc .code-badge-copy-icon {
   font-size: 1.3em !important;
+  margin-top: 0 !important;
+}
+
+/* Generated API-doc pages (appAPIDocGen and the esp platform book) ship an inline
+   <style>.tab-code{margin-top:-1.7em}</style> with every Code Examples section - a legacy hack
+   from when the badge was an absolute overlay, meant to pull the code flush under the tab strip.
+   With the badge now a static in-flow header bar (first child of the <pre>, above), -1.7em drags
+   the code up OVER the badge and clips it to a sliver. It only shows on SPA navigations: the
+   article is injected raw there, whereas on a full page load Vue's initial mount compiles the
+   container and drops the <style>, so a refresh looked "fixed". The whitespace gap that hack
+   papered over is already solved properly by .code-badge-pre{display:flex} above. The <style>
+   block is being removed from the generator templates too, but published books keep shipping it
+   until they are rebuilt - this override protects them all now. */
+.HTL-doc .code-badge-pre > code.tab-code {
+  margin-top: 0 !important;
 }
 
 /* HTL inline styles */
@@ -602,6 +657,7 @@
   background-color: #666666;
 }
 
+/* tolerance alias for the common misspelling - renders the correctly spelled badge */
 .HTL-doc .badge.badge-depreciated:after {
   content: "Deprecated";
   border: solid 1px #494949;
@@ -629,6 +685,7 @@
   background-color: rgb(184, 0, 0);
 }
 
+/* API endpoint badge styles */
 .HTL-doc .badge.badge-endpoint-internal:after {
   content: "internal";
   white-space: nowrap;
@@ -734,7 +791,6 @@
   background-color: #4A536B;
 }
 
-
 .HTL-doc .error-msg {
   color: rgb(184, 0, 0);
 }
@@ -759,7 +815,7 @@
 
 .HTL-doc .hdoc-alert {
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--htl-box-radius);
   padding: 16px 16px 8px;
   line-height: 24px;
   font-size: var(--htl-default-font-size);
@@ -768,7 +824,9 @@
 }
 
 .HTL-doc .hdoc-alert p {
-  margin: 8 0;
+  /* was the unitless "margin: 8 0", which the parser drops entirely - matches the equivalent
+     rule in custom-block.css */
+  margin: 8px 0;
 }
 
 .HTL-doc .hdoc-alert .hdoc-alert-title .bi {
@@ -855,20 +913,15 @@
 }
 
 
-
 /* lighter bg for code blocks */
 .HTL-doc .hljs {
   background: #494949;
   width: 100%;
-  font-size: 0.9em !important;
-  line-height: 1.4em;
 }
 
 .dark .HTL-doc .hljs {
   background: #000000;
   width: 100%;
-  font-size: 0.9em !important;
-
 }
 
 /* image sizing for icon library */
@@ -887,4 +940,130 @@
   width: 110px;
   margin-top: -5px;
   padding-right: 5px;
-}
+}
+
+/* Consistent border-radius for images */
+.HTL-doc img {
+  border-radius: var(--htl-box-radius);
+}
+
+/* WCAG AAA: Override inline gray color for accessibility */
+.HTL-doc [style*="color: gray"],
+.HTL-doc [style*="color:gray"] {
+  color: #595959 !important;
+}
+
+/* hdoc-approve signature style (Caveat font, loaded from Google Fonts by both entry pages).
+   Moved here from an inline <style> in index.html so the inline/embedded view - which can
+   also mount hdoc-approve - renders signatures the same way. */
+.caveat-text {
+  font-family: 'Caveat', serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 18px;
+}
+
+/*--
+    MCP server catalog (/mcp) and its toolbar icon.
+
+    The page renders inside .HTL-doc - the same typography scope a book page uses - so
+    headings, body text, code spans and tables all come from the article styles above.
+    That is deliberate: this page is documentation about the MCP servers, so it should
+    read as a page of documentation rather than carry a look of its own. Almost nothing
+    is needed here as a result.
+
+    Do NOT set overflow or max-width on .McpCatalog. This site is a fixed-viewport shell:
+    the document never scrolls, and .hb-container-vertical > .hb-container-expand in
+    htldoc.layouts.css already makes each view its own scroll region, exactly as the
+    library, search and book views do. An earlier version added its own, which put the
+    scrollbar partway across the screen instead of at the window edge. --*/
+.hb-icon-mcp {
+    display: inline-block;
+    /*-- the toolbar buttons are btn-sm, so 1em here is 12px and the mark read as a
+         speck. Root font-size on this site is 14px, not 16. The Bootstrap Icons beside
+         it measure 18px but carry their own font padding, whereas a mask fills its box
+         exactly - so matching their box left this looking smaller than them --*/
+    width: 1.45rem;
+    height: 1.45rem;
+    vertical-align: -0.35em;
+    background-color: currentColor;
+    -webkit-mask: url("../../../../images/mcp-catalog.svg") no-repeat center;
+    mask: url("../../../../images/mcp-catalog.svg") no-repeat center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+.McpCatalog .content-wrapper {
+    padding: 1.5rem 2.5rem 4rem 2.5rem;
+}
+
+/*-- sits beside the server url, so the reader sees the size of a corpus at the point
+     they are deciding whether to connect to it --*/
+.mcp-server-count {
+    margin-left: 0.75rem;
+    color: var(--htl-c-text-3);
+    font-size: 0.9em;
+}
+
+/*-- The Name / URL pair a client's "add server" form asks for. Grid rather than the
+     article's <dl> defaults so the two labels line up and the values sit beside them. --*/
+.mcp-connect {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    column-gap: 1rem;
+    row-gap: 0.35rem;
+    align-items: center;
+    margin: 0 0 1.25rem 0;
+}
+
+.mcp-connect dt {
+    font-weight: 400;
+    color: var(--htl-c-text-3);
+}
+
+.mcp-connect dd {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin: 0;
+    min-width: 0;
+}
+
+.mcp-connect dd code {
+    user-select: all;
+    overflow-wrap: anywhere;
+}
+
+/*-- matches the code-block badge's idiom: quiet until hovered, tick on success --*/
+.mcp-copy {
+    flex: 0 0 auto;
+    border: 0;
+    background: transparent;
+    color: var(--htl-c-text-3);
+    padding: 0.15rem 0.35rem;
+    border-radius: 0.25rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.mcp-copy:hover,
+.mcp-copy:focus-visible {
+    color: var(--htl-c-text-1);
+    background-color: var(--htl-c-bg-mute);
+}
+
+.mcp-copy .bi-check2 {
+    color: var(--htl-c-green, #006737);
+}
+
+@media (max-width: 640px) {
+    .mcp-connect {
+        grid-template-columns: minmax(0, 1fr);
+        row-gap: 0.1rem;
+    }
+
+    .mcp-connect dd {
+        margin-bottom: 0.5rem;
+    }
+}

package/ui/css/theme-default/styles/components/htl-library.css

@@ -0,0 +1,152 @@
+.LibraryContent
+{
+   
+    margin: 0 0;
+    overflow: initial;
+}
+
+
+/* No .library-info-panel / .about-list rules here any more: the library page is entirely
+   index.html markup, which contains neither class - a whole info-panel block that was never
+   rendered by any version of this page. */
+
+.LibraryContent .library-content-panel
+{
+    width:100%;
+}
+
+.LibraryContent .lib-header > p
+{
+    padding-left:3px;
+}
+
+/* No `.LibraryContent .library-banner h1` - same dead .library-banner class as above. Removed r723. */
+
+
+.LibraryContent .document-list
+{
+    padding-left:3px;
+    column-count: 3;
+}
+.LibraryContent .document-list > li .title
+{
+    border-left: 6px solid var(--htl-c-gray-light-2);
+    align-items: center;
+    font-size: 1.125rem;
+    line-height: 28px;
+    margin-top: 0.25rem!important;
+    padding-left: 0.75rem!important;
+    padding-right: 0.75rem!important;
+    color:var(--htl-c-blue);
+    cursor:pointer;
+}
+
+
+.LibraryContent .document-list > li .title:hover
+{
+    border-left: 6px solid var(--htl-c-blue);
+
+}
+
+
+.LibraryContent .columns-container
+{
+    width:100%;
+    padding: 0 0;
+}
+.LibraryContent .columns
+{
+    /* Masonry-style layout using CSS columns */
+    column-count: 3;
+    column-gap: 0;
+}
+
+.LibraryContent .columns .column
+{
+    /* Prevent cards from breaking across columns */
+    break-inside: avoid;
+    display: block;
+}
+
+/* Product card tiles - rounded corners */
+.LibraryContent .columns .column > div.border {
+    border-radius: var(--htl-box-radius);
+}
+
+.LibraryContent .columns .column a.title
+{
+    font-size: 0.92rem;
+    line-height: 22px;
+    margin-top: 0.25rem!important;
+    color:var(--htl-c-blue);
+    cursor:pointer;
+}
+
+/* Dark mode: Use brighter link color for WCAG AAA (7:1) contrast */
+.dark .LibraryContent .document-list > li .title,
+.dark .LibraryContent .columns .column a.title {
+    color: var(--htl-c-blue-light);
+}
+
+/* chevron bullet on tile book links - smaller and muted so it reads as a marker rather than
+   competing with the link text, with clear space before the title */
+.LibraryContent .columns .column .book-link-chevron {
+    font-size: 0.75em;
+    color: var(--htl-c-text-3);
+    margin-right: 8px;
+}
+
+/* product tile header - icon and title vertically centred on a shared line, with a divider
+   separating the header from the book list below. Replaces the old d-table-cell layout with
+   its 64px icon (title hung off the icon's top edge). */
+.LibraryContent .columns .column .product-tile-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    /* 20px above and below the divider, matching the tile's pad-20 padding so the icon->divider,
+       divider->list and tile edge gaps all read as the same distance */
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--htl-c-divider-light);
+}
+
+.LibraryContent .columns .column .product-tile-icon {
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;
+    display: inline-block;
+    /* background image (and its "/ contain" sizing) comes inline from group.icon - see
+       index.html. Sourced from _books/products.json via organiseLibrary() in doc.hornbill.js. */
+}
+
+
+@media (max-width: 1540px)
+{
+    .LibraryContent .columns
+    {
+        column-count: 2;
+    }
+
+}
+
+@media (max-width: 1020px) {
+
+    .LibraryContent .document-list
+    {
+        column-count: 2;
+    }
+
+    .LibraryContent .columns
+    {
+        column-count: 1;
+    }
+}
+
+@media (max-width: 720px) {
+
+    .LibraryContent .document-list
+    {
+        column-count: 1;
+    }
+    
+}