Merge pull request #277 from ELIXIR-Belgium/toc-jumping

Fix the TOC being loaded as last making the content jump around with big pages

_includes/toc.html

@@ -1,6 +1,6 @@
 <script>
   $(document).ready(function () {
-    $('#toc-contents').toc({ minimumHeaders: {{site.theme_variables.toc.min_headings | default: 2 }}, listType: 'ul', classes: { list: 'list-unstyled' }, noBackToTopLinks: true, showSpeed: 0, headers: '{{site.theme_variables.toc.headings | default: 'main h2' }}' , title: '<strong class="my-2">On this page</strong><hr class="my-2">' });
+    $('#toc-contents').toc({ minimumHeaders: {{site.theme_variables.toc.min_headings | default: 1 }}, listType: 'ul', classes: { list: 'list-unstyled' }, noBackToTopLinks: true, showSpeed: 0, headers: '{{site.theme_variables.toc.headings | default: 'main h2' }}' , title: '<strong class="my-2">On this page</strong><hr class="my-2">' });
   });
 </script>
 <button id="btn-toc-hide" class="btn bg-light d-xl-none hover-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#toc-contents" aria-expanded="true" aria-controls="toc-contents">

_layouts/page.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<main id="main" class="order-1">
+<main id="main" class="order-1{% unless page.toc == false %} add-grid{% endunless %}">
     <div id="intro">
         {%- if page.title %}
         {%- if page.type %}

assets/css/main.scss

@@ -124,7 +124,6 @@ body img {
 
 #toc {
     grid-area: toc;
-    display: none;
 }
 
 @include media-breakpoint-up(xl) {

assets/js/toc.js

@@ -1,4 +1,4 @@
-// https://github.com/ghiculescu/jekyll-table-of-contents
+// Modified from: https://github.com/ghiculescu/jekyll-table-of-contents
 (function ($) {
   $.fn.toc = function (options) {
     var defaults = {
@@ -37,11 +37,13 @@
       }
       return this.id;
     }), output = $(this);
+
+    // Check if there are any headers
     if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
-      return;
-    } else {
-      $('#main').addClass("add-grid");
-      $("#toc").show();
+
+      $('#main').removeClass("add-grid");
+      $("#toc").hide();
+      return;  // Exit early if there are no headers
     }
 
     if (0 === settings.showSpeed) {

pages/documentation/configuring_theme.md

@@ -59,8 +59,8 @@ theme_variables:
     affiliation-tiles-page: Affiliations
     contributor-minitiles-page: Contributors
   toc:
-    min_headings: 2
-    headings: 'h2'
+    min_headings: 1
+    headings: 'main h2'
   topnav:
     theme: light
     brand_logo: assets/img/main_logo.svg
@@ -85,12 +85,12 @@ More detailed information about these settings can be found here:
     `related-pages`: Default: Related pages
     `more-information-tiles`:  Default: More information
     `resource-table-all`: Default: Tools and resources on this page
-    `resource-table-all-collapse`: Make the tools and resources table collapsed like the other sections. Default: False
+    `resource-table-all-collapse`: Make the tools and resources table collapsed like the other more information sections. This will also make the tools and resources table and National resources part of the More information heading. Default: *False*
     `affiliation-tiles-page`: Default: Affiliations
     `contributor-minitiles-page`: Default: Contributors
 * toc: Settings related to the table of contents.
-  * `min_headings`: The minimum amount of headings (h2, h3,.. depending on the headings option) on a page for the toc to appear. This has to be an integer.
-  * `headings`: The type of headings that need to be indexed by the toc. This can be a list or one value, ex: **'h1, h2, h3'** or **'h2'**
+  * `min_headings`: The minimum amount of headings (h2, h3,.. depending on the headings option) on a page for the toc to appear. This has to be an integer. Default: *1*
+  * `headings`: The type of headings that need to be indexed by the toc. This can be a list or one value, ex: **'h1, h2, h3'** or **'h2'**. Default: *main h2*
 * topnav: Settings related to the top navigation.
   *  `theme`: This variable is needed to change between a dark and a light top navigation. possible values: **dark** and **light**
   *  `brand_logo`: Custom path towards the brand logo, in case the assets/img/main_logo.svg can not be used.

pages/documentation/page_mechanics.md

@@ -35,7 +35,7 @@ It is important to know that you can also set the these key-value pairs on multi
 
 * `sidebar`: Specify here an alternative sidebar, which corresponds to the filename in the *_data/sidebars/* directory. Default: *main*. If no sidebar is set, or *sidebar: false*, no sidebar will be shown.
 
-* `toc`: When set to false, the table of contents in the beginning of the page will not be generated.
+* `toc`: When set to *false*, the table of contents at the right side of the page will not be generated. This is recommended when you know in advance no table of contents will ever be needed, and improves page loading times.
 
 * `page_id`: Unique identifier of a page used to list Related pages or to tag tools in the *tool_and_resource_list.yml* file. It is usually a shortened version of the page name or title, with small letters, or an acronym, with capital and small letters. Make sure it does not contain hyphens if you want to make use of the Tools and resources table. .
 
@@ -93,6 +93,13 @@ It is important to know that you can also set the these key-value pairs on multi
   dsw_deep_link_prefix: https://researchers.ds-wizard.org/knowledge-models/dsw:root:latest/preview?questionUuid=
   ```
 
+* `rdmkit`: Link out to guides inside of the RDMkit.
+  ```yml
+  rdmkit:
+    - name: RDMkit page title
+      url: https://rdmkit.elixir-europe.org/human_data
+  ```
+
 ### Tools and resources
 
 * `ref_to_main_resources`: Refer to entries of the "main_tool_ and_resource_table" if institutions, organizations and projects from the country contribute to the development of international tools and resources. List the id of the tool your refer to in the main tools table.

pages/example_pages/overview_tiles.md

@@ -1,5 +1,6 @@
 ---
 title: Overview page example
+toc: false
 ---
 
 More info about sections tiles can be found in the [website sections page](website_sections).