hdoc-tools 0.8.10 → 0.8.11

package/ui/css/theme-default/styles/htldoc.layouts.css

@@ -1,14 +1,15 @@
 /* put htl styles here */
 
 /* LAYOUT */
-.hb-container-vertical,
-.hb-container-horizontal{
+.hb-container-vertical{
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 .hb-container-horizontal{
+    display: flex;
   flex-direction: row;
+  width: 100%;  
 }
 .hb-container-vertical > *,
 .hb-container-horizontal > *{
@@ -82,6 +83,19 @@
   padding: 0px 20px;
 }
 
+.toolbar-action
+{
+  cursor:pointer;
+  text-decoration : none;
+  padding: 4px;
+}
+.toolbar-action:hover
+{
+  background-color: var(--htl-c-blue-dimm-2);
+}
+
+
+
 
 /* toolbar title and desc */
 .toolbar-layout .title
@@ -141,6 +155,16 @@
   text-decoration: underline;
 }
 
+.nav-bar-nav-list.noeffects .nav-bar-item:hover {
+  text-decoration: none;
+  cursor: default;
+}
+
+.nav-bar-nav-list.noeffects .nav-bar-item.active {
+  text-decoration: none;
+}
+
+
 /* panel headers */
 .panel-header
 {
@@ -242,3 +266,4 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+

package/ui/index.html

@@ -13,11 +13,13 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="description" content="Internal documentation for the Hornbill ESP Platform">
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
-
     <style>
         .hb-hidden
         {
@@ -182,10 +184,65 @@
                 <div class="HTL-doc content-wrapper hb-container-expand">
                     <div class="injected-document-container hb-container-horizontal">
                         
-                        <div class="injected-document-content"></div>
+                        <div class="injected-document-content">
+                            <div class="document-header">
+
+                                <!-- breadcrumb-->
+                                <div class="hb-container-horizontal">
+                                    <div class="hb-center-v hb-container-expand">
+                                        <ul class="ps-0 nav-bar-nav-list noeffects after-fslash  overflow-ellipsis">
+                                            <li class="mt-0  nav-bar-item" v-for="(crumb,$index) in docApp.bookBreadCrumb">
+                                                <a class="ps-0 pe-0 text-decoration-none" v-bind:href="crumb.link">{{crumb.title}}</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div class="toolbar-right hb-center-v">
+
+                                        <a class="toolbar-action" v-bind:href="docApp.documentGithubUrl" target="_blank">
+                                            <i  class="bi bi-pencil"></i>
+                                        </a>
+
+                                        <a  class="toolbar-action">
+                                            <i class="bi bi-three-dots-vertical"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                                
+                                <div class="document-title"></div>
+                                
+                                <!-- doc frontmatter info -->
+                                <div class="hb-container-horizontal">
+                                    <div class="hb-center-v hb-container-expand">
+                                        <ul class="ps-0 nav-bar-nav-list noeffects after-bullets  overflow-ellipsis text-light-2">
+                                            <li class="ps-0 mt-0 nav-bar-item">
+                                                Article
+                                            </li>
+                                            <li class="ps-0 mt-0 nav-bar-item">
+                                                2023-01-17
+                                            </li>                                                    
+                                            <li class="ps-0 mt-0 nav-bar-item">
+                                                8 minutes to read
+                                            </li>                                                                  
+                                            <li class="ps-0 mt-0 nav-bar-item">
+                                                <a class="link c-pointer">3 contributers</a>
+                                            </li>                                                    
+                                        </ul>
+                                    </div>
+                                    <div class="toolbar-right hb-center-v">
+                                    </div>
+                                </div>                                        
+
+                            </div>
+                            <div class="document-body"></div>
+
+                        </div>
+
+
+
+                        
 
                         <!-- table of contents -->
-                        <div  v-if="docApp.keepTocLayout" class="injected-document-toc">
+                        <div v-if="docApp.keepTocLayout" class="injected-document-toc">
                             <div v-if="docApp.tableOfContents.length" class="panel-header">
                                 <span class="icon">
                                     <i class="bi bi-list-ul"></i> 
@@ -193,11 +250,12 @@
                                 <span class="title">In This Document</span>
                             </div>
                             <div v-if="docApp.tableOfContents.length" class="panel-content">
-                                <div v-for="tocItem in docApp.tableOfContents" :class="tocItem.tagName">
+                                <div v-for="tocItem in docApp.tableOfContents">
                                     <a :href="tocItem.href">{{tocItem.eleText}}</a>
                                 </div>
                             </div>
                         </div>
+                        
                     </div>
                     
                 </div>

package/ui/js/doc.hornbill.js

@@ -3,6 +3,7 @@
 //-- loaded in index.html
 
 var jqContentContainer = null;
+var jqDocumentHeader = null;
 var jqLeftNav = null;
 var global = {stateParams:{},lastLayoutClass:""};    
 
@@ -332,6 +333,14 @@ function loadContentUrl(linkRef,fromPageRefresh,fromPopState)
 
         highlightJsBadge(options);
 
+        //-- get first H1 and put it into our header section header
+        let docHeader = jqContentContainer.find("H1").eq(0)
+        jqDocumentHeader.find(".document-title").append( docHeader );
+
+
+        setGitHubBookUrl(linkRef);
+
+
         //-- make sure selected link parents are set to .expand=true
         if(expandNavParentSectionBySelectedLinkHref(linkRef))
         {
@@ -355,6 +364,15 @@ function loadContentUrl(linkRef,fromPageRefresh,fromPopState)
     });
 }
 
+function setGitHubBookUrl(linkRef)
+{
+    let bookRef = linkRef.split(siteBaseLocation);
+    bookRef = (bookRef[1])?bookRef[1]:bookRef[0];
+    let bookId = bookRef.split("/")[0];
+    view.docApp.documentGithubUrl = "https://github.com/Hornbill-Docs/" + bookId + "/blob/main/" + bookRef + ".md";
+    //--https://github.com/Hornbill-Docs/hdoc-guide/blob/main/hdoc-guide/overview.md
+}
+
 function loadBookDefaultLink()
 {
     $(".DocLink.link").first().click();
@@ -391,6 +409,40 @@ function findFirstClickableBookLink(findByLinkRef,currentNavSection)
 }
 
 function expandNavParentSectionBySelectedLinkHref(findByLinkRef, currentNavSection)
+{
+    findByLinkRef = findByLinkRef.split("#")[0];
+    if(currentNavSection === undefined) 
+    {
+        view.docApp.bookBreadCrumb = [];        //-- reset bread crumb
+        currentNavSection = view.docApp.navSections;
+    }
+    
+    for(let x=0;x<currentNavSection.length;x++)
+    {
+        if(currentNavSection[x].items)
+        {
+            let res = expandNavParentSectionBySelectedLinkHref(findByLinkRef,currentNavSection[x].items);
+            if(res)
+            {
+                currentNavSection[x].expand=true;
+                view.docApp.bookBreadCrumb.unshift({title:currentNavSection[x].text,link:currentNavSection[x].items[0].link});
+                return res;
+            }
+        }
+        else
+        {
+            //-- check item to see if it matches url
+            if(removeStartingSlash(removeTrailingSlash(currentNavSection[x].link)) == findByLinkRef)
+            {
+                return true;
+            }
+        }
+    }
+
+}
+
+
+function old_expandNavParentSectionBySelectedLinkHref(findByLinkRef, currentNavSection)
 {
     findByLinkRef = findByLinkRef.split("#")[0];
     if(currentNavSection === undefined) 
@@ -475,7 +527,7 @@ async function fetchJsonFile(strFilePath)
 //-- THE INIT APP CALLED FROM index.html
 var view = new Vue({
     el: '#vDocDevApp',
-    data: {updateCounter:0,bookId:"", docApp:{keepTocLayout:false,book:{},navSections:[],tableOfContents:[]}},
+    data: {updateCounter:0,bookId:"", docApp:{keepTocLayout:false,book:{},navSections:[],tableOfContents:[],bookBreadCrumb:[]}},
     methods:docAppMethods,
     directives: {
        somedirectivename: {
@@ -509,7 +561,9 @@ async function intialiseApp() {
     // set theme switch
     $(".theme-switch-checkbox").prop('checked', (ThemePreference === 'dark'));
 
-    jqContentContainer = $(".injected-document-content");
+    jqDocumentHeader = $(".injected-document-content .document-header");
+    jqContentContainer = $(".injected-document-content .document-body");    
+    //jqContentContainer = $(".injected-document-content");
     jqLeftNav = $("#DocSidebarNav");
 
     await fetchJsonFile("_books/library.json").then(function(data){