fix: layout jump and more (#1077)

- fix hugo modules mounts for retrieval market
- fix scrollbars and add fixed height to code blocks
   closes #1065
- fix dashboard resize
anchor links wouldnt scroll to the proper section because dashboard creation would make the layout jump in size at runtime
- remove logs

Author: hugomrdias

README.md

@@ -42,29 +42,32 @@ You can find examples in the `config.toml`
   [[module.imports]]
     path = "github.com/filecoin-project/specs-actors"
     [[module.imports.mounts]]
-    source = "actors"
-    target = "content/modules/actors"
+    source = "."
+    target = "content/externals/specs-actors"
 ```
+> `target` should **ALWAYS** use the folder `content/externals`
+
 This makes files from external repos available for Hugo rendering and allows for linking to up-to-date files that are directly pulled from other repositories.
 
 The configuration above gives the following information:
 
-- `path`: gives the repository you want to mount content from.
-- `source`: the folder from the repository referenced in the `path` that we want to mount into  our local Hugo filesystem. This is the "root" seen from your Hugo site where you pull content from. In the above case, this means that the source that will be mounted is `https://github.com/filecoin-project/specs-actors/actors/`.
-- `target`: the folder in your local Hugo site where the mounted content appears. In our case folder `content` is where we include all Hugo content.
+- `path`: Repository's URL without protocol.
+- `source`: Folder from the repository referenced in the `path` to be mounted into the local Hugo filesystem.
+- `target`: Folder where `source` will be mounted locally, this should follow this structure `content/modules/<target value>`.
 
-Putting everything together in an example: if you want to link to the file `xyz.go` from `https://github.com/filecoin-project/specs-actors/actors/xyz-folder/xyz.go`, from any file within the local folder `content` (or any of its subfolders), then with the above configuration you have to include:
+Example: if you want to link/embed to the file `xyz.go` that lives in `https://github.com/filecoin-project/specs-actors/actors/xyz-folder/xyz.go`, from within a markdown file then with the above configuration the `src` for shortcodes or markdown image syntax would be:
 
 ```
-{{<embed src="/modules/actors/xyz-folder/xyz.go"  lang="go">}}
+{{<embed src="/externals/specs-actors/actors/xyz-folder/xyz.go"  lang="go">}}
 ```
+> The first foward slash is important it means the path is relative to the content folder.
 
 These modules can be updated with 
 
 ```sh
 hugo mod get -u
 ```
-or use specific version with
+or to a specific version with
 
 ```sh
 hugo mod get github.com/filecoin-project/specs-actors@v0.7.2
@@ -119,7 +122,7 @@ stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa
 ```
 
 ## Page Header
-The first heading should be # Head with `---` like below and should refer to the overall title of the document. The right nav **only** starts on the second level of headings. 
+The first heading should be # Head with `---` like below and should refer to the overall title of the document.
 
 ```md
 ---
@@ -146,18 +149,20 @@ Description for all the available frontmatter properties
 title: Libraries 
 <!-- Small description for html metadata, if not present the first couple of paragraphs will be used instead -->
 description: Libraries used from Filecoin
-<!-- This will be used to order the navigation and any other listing of pages -->
+<!-- This will be used to order the ToC, navigation and any other listings of pages -->
 weight: 3
 <!-- This will make a page section collapse in the navigation -->
 bookCollapseSection: true
 <!-- This will hidden the page from the navigation -->
 bookhidden: true
 <!-- This is used in the dashboard to describe the importance of the page content -->
 dashboardWeight: 2
-<!-- This is used in the dashboard to describe the state of the page content options are "incorrect", "wip", "incomplete" and "stable" -->
+<!-- This is used in the dashboard to describe the state of the page content options are "missing", "incorrect", "wip", "reliable", "stable" or "n/a" -->
 dashboardState: stable
-<!-- This is used in the dashboard to describe if the theory of the page has been audited, options are 1 or 0 -->
-dashboardAudit: 1
+<!-- This is used in the dashboard to describe if the theory of the page has been audited, options are "missing", "wip", "stable" or "n/a" -->
+dashboardAudit: wip
+<!-- When dashboardAudit is stable we should have a report url -->
+dashboardAuditURL: https://url.to.the.report
 <!-- This is used in the dashboard to describe if the page content has compliance tests, options are 0 or numbers of tests -->
 dashboardTests: 0
 ```

assets/_code.scss

@@ -0,0 +1,4 @@
+.markdown pre {
+    max-height: 450px;
+    overflow: auto;
+}

assets/_custom.scss

@@ -11,6 +11,7 @@
 @import "plugins/toc";
 @import "katex";
 @import "icons";
+@import "code";
 
 .markdown {
     overflow-x: hidden;
@@ -153,18 +154,16 @@ blockquote {
 }
 .book-menu nav {
     width: 20rem;
-    padding: 1rem 0.2rem 4rem 1rem;
+    height: 100%;
+    padding: 1rem 0.2rem 1rem 1rem;
     position: fixed;
     top: 0;
     bottom: 0;
-    overflow-x: initial;
-    overflow-y: hidden;
+    overflow: hidden;
 }
-
-.book-menu nav .toc {
-    overflow-x: hidden;
-    overflow-y: auto;
+.book-menu .toc {
     height: 100%;
+    overflow: hidden;
 }
 
 .markdown>h1:first-of-type {

assets/_dashboard.scss

@@ -1,8 +1,13 @@
+#dashboard-container {
+    height: 90vh; 
+    overflow: auto
+}
 table.Dashboard {
     display: table;
     table-layout: fixed;
     width: 100%;
     font-size: 12px;
+    margin: 0;
 }
 
 table.Dashboard {
@@ -21,7 +26,6 @@ table.Dashboard {
 }
 
 .Dashboard-section {
-    // max-width:250px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

assets/js/content-model.js

@@ -14,7 +14,6 @@ function buildTocModel (contentSelector) {
     let parents = [{tagName: 'H0', children: model}]
     let prevSibling = null
     for (let el of headingList) {
-      console.log("buildTocModel -> el.dataset", el.dataset)
       let node = {
         id: el.id,
         tagName: el.tagName,

assets/js/main.js

@@ -60,7 +60,7 @@ function initTocScrollSpy () {
 window.addEventListener('DOMContentLoaded', () => {
   const model = buildTocModel('.markdown')
   initToc({tocSelector:'.toc', model })
-  buildDashboard('#test-dash', model)
+  buildDashboard('#dashboard-container', model)
   initTocDepthSlider()
   initTocScrollSpy()
   initPanZoom()

assets/plugins/_scrollbars.scss

@@ -1,23 +1,55 @@
 @import "defaults";
 @import "variables";
 
-// Webkit
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8.5px;
+  height: 8.5px;
 }
+
+* {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: thin;
+  scrollbar-color: transparent rgba(0, 0, 0, 0.3) ;
+}
+
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.3);
   border-radius: 6px;
 }
 
-// MS
-body {
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) #232323;
+::-webkit-scrollbar-button,
+::-webkit-scrollbar-track-piece,
+::-webkit-scrollbar-corner,
+::-webkit-resizer { display: none; }
+
+// code blocks
+.markdown pre::-webkit-scrollbar {
+  display: none;
+}
+.markdown pre:hover::-webkit-scrollbar {
+  display: initial;
 }
 
+.markdown pre {
+  scrollbar-color: transparent rgba(255, 255, 255, 0.1) ;
+}
+
+.markdown pre::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.markdown pre::-webkit-scrollbar-thumb:active {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+// toc
+.toc > ol::-webkit-scrollbar {
+  display: none;
+}
+.toc > ol:hover::-webkit-scrollbar {
+  display: initial;
+}
+
+
 // Future
 .book-menu nav {
   scrollbar-color: transparent $gray-500;

assets/plugins/_toc.scss

@@ -1,7 +1,8 @@
 .toc {
   overflow-y: auto;
   > ol {
-    overflow: hidden;
+    height: 90%;
+    overflow: auto;
     position: relative;
     > li {
       font-weight: 500;

config.toml

@@ -1,5 +1,6 @@
 # baseURL = '/'
 title = 'Filecoin Spec'
+ignoreFiles= ["externals"]
 # theme = 'book'
 canonifyurls = false
 relativeURLs = true
@@ -104,21 +105,15 @@ enableGitInfo = true
   [[module.imports]]
     path = "github.com/filecoin-project/specs-actors"
     [[module.imports.mounts]]
-    source = "actors"
-    target = "content/modules/actors"
+    source = "."
+    target = "content/externals/specs-actors"
   [[module.imports]]
     path = "github.com/filecoin-project/go-fil-markets"
     [[module.imports.mounts]]
     source = "."
-    target = "content/modules/go-fil-markets"    
+    target = "content/externals/go-fil-markets"  
   [[module.imports]]
     path = "github.com/filecoin-project/lotus"
     [[module.imports.mounts]]
     source = "."
-    target = "content/modules/lotus"    
-  [[module.imports]]
-    path = "github.com/filecoin-project/go-data-transfer"
-    [[module.imports.mounts]]
-    source = "."
-    target = "content/modules/go-data-transfer"    
-  
+    target = "content/externals/lotus" 

content/algorithms/crypto/randomness.md

@@ -68,7 +68,7 @@ GetRandomness(dst, l, s):
     return H(buffer)
 ```
 
-{{<embed src="/modules/actors/crypto/randomness.go"  lang="go">}}
+{{<embed src="/externals/specs-actors/actors/crypto/randomness.go"  lang="go">}}
 {{<embed src="/systems/filecoin_blockchain/struct/chain/chain.go" lang="go">}}
 
 ## Drawing tickets from the VRF-chain for proof inclusion