rseops-docs-jekyll 1.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d67c6dc80e7d44b0d1b4c7079c14210c02dd4b88a74c5058dd0641a30ee80285
+  data.tar.gz: 63d1b6da759f8ed4a4facfc09b07d78507aa7b1929b0551297bc04c4a40f8a96
+SHA512:
+  metadata.gz: d2acbe3546df3de4d99a18645a19a4f6960fd040d8d18cd70a0c4cfad44c3c076d5ed7d1271da31d6eb47700398f5dfc9b5410afba25e233f5f85ff3e7020ca9
+  data.tar.gz: b0871e957b407551e4badd15dec7d5f2c5ed230f90630aa8a5f8ce1a233f21b6a667c2bb2d1e4d80c34b1d1f71e462fbdf0a1199c65e3c770ae8d8c20ddebc7e

data/COPYRIGHT

@@ -0,0 +1,16 @@
+Intellectual Property Notice
+----------------------------
+
+RADIUSS Docker is licensed under the MIT license (LICENSE).
+
+Copyrights and patents in the RADIUSS Docker project are retained by
+contributors. No copyright assignment is required to contribute to RADIUSS
+Docker.
+
+
+SPDX usage
+------------
+
+Individual files contain SPDX tags instead of the full license text.
+This enables machine processing of license information based on the SPDX
+License Identifiers that are available here: https://spdx.org/licenses/

data/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2021, Lawrence Livermore National Security, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

data/NOTICE

@@ -0,0 +1,22 @@
+This work was produced under the auspices of the U.S. Department of
+Energy by Lawrence Livermore National Laboratory under Contract
+DE-AC52-07NA27344.
+
+This work was prepared as an account of work sponsored by an agency of
+the United States Government. Neither the United States Government nor
+Lawrence Livermore National Security, LLC, nor any of their employees
+makes any warranty, expressed or implied, or assumes any legal liability
+or responsibility for the accuracy, completeness, or usefulness of any
+information, apparatus, product, or process disclosed, or represents that
+its use would not infringe privately owned rights.
+
+Reference herein to any specific commercial product, process, or service
+by trade name, trademark, manufacturer, or otherwise does not necessarily
+constitute or imply its endorsement, recommendation, or favoring by the
+United States Government or Lawrence Livermore National Security, LLC.
+
+The views and opinions of authors expressed herein do not necessarily
+state or reflect those of the United States Government or Lawrence
+Livermore National Security, LLC, and shall not be used for advertising
+or product endorsement purposes.
+

data/README.md

@@ -0,0 +1,97 @@
+# RSE-ops Docs Jekyll
+
+![assets/img/rse-ops-text.png](assets/img/rse-ops-text.png)
+
+This is a RSE-ops documentation Jekyll theme that can be easily deployed to a RSE-ops
+site. The style looks like this, either with a sidebar:
+
+TOOD UPDATE
+
+or without.
+
+TOOD UPDATE
+
+## Usage
+
+Using the theme is easy - just add it as a `remote_theme` to your config yaml.
+
+```bash
+# Theme for docs
+plugins:
+  - jekyll-remote-theme
+
+remote_theme: rse-ops/rseops-docs-jekyll
+```
+
+And add 
+
+```
+gem "jekyll-remote-theme"
+```
+
+to your Gemfile.
+
+### Add a Page
+
+And then you can add any pages with the following front end matter (header)
+to use the documentation template.
+
+```
+---
+title: CMake
+layout: docs
+permalink: /cmake/
+---
+```
+
+### Add a Sidebar
+
+To add a sidebar to your pages, create a file under `_data/menus/` that is named
+according to your sidebar, e.g., `_data/menus/mysidebar.yaml` for a sidebar named `mysidebar`.
+The file should be a flat list of names and urls:
+
+```yaml
+- title: My Page
+  url: "mypage"
+- title: Root of Site
+  url: ""
+```
+
+And then you can add this to the front end matter of pages where you want it to appear:
+
+```
+---
+title: CMake
+layout: docs
+sidebar: mysidebar
+permalink: /pagename/
+---
+```
+
+## Development
+
+If you want to use the gem, it is built during CI, and release is currently done from the command line:
+
+```bash
+$ /bin/bash script/release.sh
+```
+
+But this isn't required since we can use `jekyll-remote-theme` and use it directly from GitHub.
+If you do release, you should bump the version in [rseops-docs-jekyll.gemspec](rseops-docs-jekyll.gemspec)
+and be on the main branch.
+
+License
+-------
+
+Copyright (c) 2021, Lawrence Livermore National Security, LLC. 
+Produced at the Lawrence Livermore National Laboratory.
+
+RADIUSS is licensed under the MIT license [LICENSE](./LICENSE).
+
+Copyrights and patents in the RADIUSS Docker project are retained by
+contributors. No copyright assignment is required to contribute to RADIUSS
+Docker.
+
+This work was produced under the auspices of the U.S. Department of
+Energy by Lawrence Livermore National Laboratory under Contract
+DE-AC52-07NA27344.

data/_includes/_gh_link.html

@@ -0,0 +1,8 @@
+{% unless site.github_link == nil or site.github_link == false %}
+    <div class="border-top mb-0 pt-4 mt-5 text-gray">
+      <h5>This page is open source</h5>
+      <p class="text-small">
+        <a target="_blank" href="{{ site.github.repository_url }}/edit/{{ site.github_pages_branch }}/{{ page.path }}">Help improve its content by opening a Pull Request on GitHub</a>.
+      </p>
+    </div>
+  {% endunless %}

data/_includes/_info_bar.html

@@ -0,0 +1,5 @@
+<div class="py-2">
+  <div class="{% if page.url == '/home/' %}container-lg-home{% else %}container-lg{% endif %} px-4">
+    <p class="mb-0 text-white text-small">{{ site.info_bar_text }}</p>
+  </div>
+</div>

data/_includes/_reading_time.html

@@ -0,0 +1,12 @@
+<span title="Estimated read time">
+  {% if post.content != nil %}
+    {% assign words = post.content | number_of_words %}
+  {% else %}
+    {% assign words = content | number_of_words %}
+  {% endif %}
+  {% if words < 360 %}
+    1 min
+  {% else %}
+    {{ words | divided_by:180 }} min
+  {% endif %}
+</span>

data/_includes/accordion.html

@@ -0,0 +1,131 @@
+<style>
+.accordion {
+  width: 100%;
+  background: #fff;
+  text-align: left;
+}
+.accordion:hover {
+    background-color: #F7F7F7;
+}
+.accordion__trigger {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-size: inherit;
+  /*   text-transform: uppercase; */
+  letter-spacing: 2px;
+  padding: 1rem 1.5rem;
+  background: #333;
+  color: white;
+  cursor: pointer;
+  transition: 0.3s ease;
+  border: 0 none;
+  border-bottom: 1px solid #555;
+  width: 100%;
+  text-align: left;
+  margin: 0;
+  position: relative;
+}
+.accordion__trigger::after {
+  content: "";
+  position: absolute;
+  right: 20px;
+  top: calc(50% - 5px);
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid #fff;
+  transform: rotate(0deg);
+  transform-origin: center;
+  transition: transform 0.5s;
+}
+.accordion__trigger[aria-expanded="true"]::after {
+  transform: rotate(180deg);
+}
+.accordion__copy {
+  overflow: hidden;
+  padding: 0 1.5rem 0 1.5rem;
+  color: #666;
+  line-height: 1.6;
+  font-size: 1rem;
+  font-weight: 500;
+  max-height: 0;
+  visibility: hidden;
+  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
+}
+.accordion__copy--open {
+  visibility: visible;
+}
+.accordion__copy__pic {
+  width: 100px;
+  height: auto;
+  float: right;
+  margin: 0 0 0 20px;
+}
+@media (min-width: 540px) {
+  .container__head {
+    font-size: 2rem;
+  }
+  .accordion__copy__pic {
+    width: 180px;
+  }
+}
+
+</style>
+
+<script>
+// Thank you https://codepen.io/sgestrella/pen/byjPgQ
+(function () {
+  const headings = document.querySelectorAll(".accordion__heading");
+  const triggers = [];
+  const accordionContents = document.querySelectorAll(".accordion__copy");
+  const copyOpenClass = "accordion__copy--open";
+
+  headings.forEach((h, i) => {
+    let btn = h.querySelector("button");
+    triggers.push(btn);
+    let target = h.nextElementSibling;
+    btn.onclick = () => {
+      let expanded = btn.getAttribute("aria-expanded") === "true";
+      if (expanded) {
+        closeItem(target, btn);
+      } else {
+        openItem(target, btn);
+      }
+    };
+  });
+  function closeAllExpandedItems() {
+    const expandedTriggers = triggers.filter(
+      (t) => t.getAttribute("aria-expanded") === "true"
+    );
+    const expandedCopy = Array.from(accordionContents).filter((c) =>
+      c.classList.value.includes(copyOpenClass)
+    );
+    expandedTriggers.forEach((trigger) => {
+      trigger.setAttribute("aria-expanded", false);
+    });
+    expandedCopy.forEach((copy) => {
+      copy.classList.remove(copyOpenClass);
+      copy.style.maxHeight = 0;
+      copy.style.padding = "0 1.5rem 0 1.5rem";
+    });
+  }
+  function closeItem(target, btn) {
+      closeAllExpandedItems();
+      btn.setAttribute("aria-expanded", false);
+      target.classList.remove(copyOpenClass);
+      target.style.maxHeight = 0;
+      target.style.padding = "0 1.5rem 0 1.5rem";
+  }
+  function openItem(target, btn) {
+    closeAllExpandedItems();
+    btn.setAttribute("aria-expanded", true);
+    target.classList.add(copyOpenClass);
+    target.style.maxHeight = target.scrollHeight + "px";
+    target.style.padding = "1rem 1.5rem 2rem 1.5rem";
+  }
+  setTimeout(() => triggers[0].click(), 750);
+})();
+
+</script>

data/_includes/editable.html

@@ -0,0 +1,5 @@
+<div style="padding-top:30px">
+<a href="{{ site.repo }}/edit/{% if site.github_branch %}{{ site.github_branch }}{% else %}main{% endif %}/{{ page.path }}" target="_blank"><i class="fa fa-edit fa-fw"></i> Edit this page</a><br>
+<a href="{{ site.repo }}/issues/new?labels={% if page.editable %}{{ page.editable }}{% else %}question{% endif %}&title=Question:&body=Question on: {{ site.repo }}/tree/{% if site.github_branch %}{{ site.github_branch }}{% else %}main{% endif %}/{{ page.path }}" target="_blank"><i class="fab fa-github fa-fw"></i> Create documentation issue</a><br>
+<a href="{{ site.repo }}/issues/new" target="_blank"><i class="fas fa-tasks fa-fw"></i> Create project issue</a>
+</div>

data/_includes/favicons.html

@@ -0,0 +1,7 @@
+    <link rel="icon" type="image/png" sizes="192x192"  href="{{ site.baseurl }}/assets/img/favicon/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/img/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="{{ site.baseurl }}/assets/img/favicon/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon/favicon-16x16.png">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="{{ site.baseurl }}/assets/img/favicon/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">

data/_includes/feedback.html

@@ -0,0 +1,58 @@
+{% if site.feedback %}<style>
+  .feedback--answer {
+    display: inline-block;
+  }
+  .feedback--answer-no {
+    margin-left: 1em;
+  }
+  .feedback--response {
+    display: none;
+    margin-top: 1em;
+  }
+  .feedback--response__visible {
+    display: block;
+  }
+</style>
+<h5 class="feedback--title">Feedback</h5>
+<p class="feedback--question">Was this page helpful?</p>
+<button class="feedback--answer feedback--answer-yes">Yes</button>
+<button class="feedback--answer feedback--answer-no">No</button>
+<p class="feedback--response feedback--response-yes">
+  Glad to hear it! Please <a href="{{ site.repo }}/issues/new">tell us how we can improve</a>.
+</p>
+<p class="feedback--response feedback--response-no">
+  Sorry to hear that. Please <a href="{{ site.repo  }}/issues/new">tell us how we can improve</a>.
+</p>
+<script>
+  const yesButton = document.querySelector('.feedback--answer-yes');
+  const noButton = document.querySelector('.feedback--answer-no');
+  const yesResponse = document.querySelector('.feedback--response-yes');
+  const noResponse = document.querySelector('.feedback--response-no');
+  const disableButtons = () => {
+    yesButton.disabled = true;
+    noButton.disabled = true;
+  };
+  const sendFeedback = (value) => {
+    if (typeof ga !== 'function') return;
+    const args = {
+      command: 'send',
+      hitType: 'event',
+      category: 'Helpful',
+      action: 'click',
+      label: window.location.pathname,
+      value: value
+    };
+    ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+  };
+  yesButton.addEventListener('click', () => {
+    yesResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(1);
+  });
+  noButton.addEventListener('click', () => {
+    noResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(0);
+  });
+</script>{% endif %}<br/>
+

data/_includes/footer.html

@@ -0,0 +1,8 @@
+<footer class="footer">
+ <p>{{ site.description }}</p>
+  <p>
+    &copy; 2021 <a class="highlight-link" href="https://opensource.llnl.gov/" target="_blank" rel="noreferrer">
+      Lawrence Livermore National Lab
+    </a>
+  </p>
+</footer>

data/_includes/head.html

@@ -0,0 +1,11 @@
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <meta name="viewport" content="width=device-width">
+  <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
+  <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Lora" rel="stylesheet">
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"> -->
+  <script src="{{ site.baseurl }}/assets/js/home.js" ></script>
+</head>

data/_includes/landing.html

@@ -0,0 +1,132 @@
+<!--Thank you https://longpdo.github.io/-->
+<div id="landing">
+  <img src="assets/img/brands.svg"/>
+  <div class="landing-title">
+    <h1>
+      <span class="highlight-title"><a href="{{ site.baseurl }}/home/"><img src="{{ site.baseurl }}/assets/img/rse-ops-text.png"/></a></span>
+    </h1>
+    <h1>
+      <span id="typing"></span>
+    </h1>
+    <div class="landing-icons">
+
+        <a class="social-link" aria-label="Home" href="{{ site.baseurl }}/home/">
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/solid.svg#home"| prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">Home</span>
+        </a>
+
+        <a class="social-link" aria-label="Builds" href="https://rse-ops.github.io/docs/container-bases/">
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/solid.svg#square"| prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">Containers</span>
+        </a>
+
+      {% if site.email != null %}
+        <a class="social-link email" aria-label="My E-Mail" href="mailto:{{site.email}}">
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/solid.svg#envelope" | prepend: site.baseurl }}""></use>
+            </svg>
+          </div>
+          <span class="label">E-Mail</span>
+        </a>
+      {% endif %}
+
+      {% if site.github_username != null %}
+        <a class="social-link" aria-label="My GitHub" target="_blank" rel="noreferrer"
+          href="https://github.com/{{site.github_username}}"
+        >
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#github" | prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">GitHub</span>
+        </a>
+      {% endif %}
+
+      {% if site.codepen_username != null %}
+        <a class="social-link" aria-label="My Codepen" target="_blank" rel="noreferrer"
+          href="https://codepen.io/{{site.codepen_username}}"
+        >
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#codepen" | prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">CodePen</span>
+        </a>
+      {% endif %}
+
+      {% if site.dev_username != null %}
+        <a class="social-link" aria-label="My DEV" target="_blank" rel="noreferrer"
+          href="https://dev.to/{{site.dev_username}}"
+        >
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#dev" | prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">DEV</span>
+        </a>
+      {% endif %}
+
+      {% if site.linkedin_username != null %}
+        <a class="social-link linkedin" aria-label="My LinkedIn" target="_blank"
+          rel="noreferrer" href="https://www.linkedin.com/{{site.linkedin_username}}"
+        >
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#linkedin-in" | prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">LinkedIn</span>
+        </a>
+      {% endif %}
+
+      {% if site.twitter_username != null %}
+        <a class="social-link twitter" aria-label="My Twitter" target="_blank"
+          rel="noreferrer" href="https://twitter.com/{{site.twitter_username}}"
+        >
+          <svg viewBox="0 0 200 200" class="circle">
+            <circle cx="100" cy="100" r="80" />
+          </svg>
+          <div class="social">
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="{{ "/assets/img/brands.svg#twitter" | prepend: site.baseurl }}"></use>
+            </svg>
+          </div>
+          <span class="label">Twitter</span>
+        </a>
+      {% endif %}
+    </div>
+  </div>
+</div>

data/_includes/navigation.html

@@ -0,0 +1,25 @@
+<nav class="site-nav py-4 bg-white">
+  <div class="{% if page.url == '/home/' %}container-lg-home{% else %}container-lg{% endif %} px-4">
+    <div class="d-flex flex-justify-between flex-items-center">
+      <div>
+        <a class="heading-beta no-underline" href="/home/">{% unless site.nav_logo_file == nil %}<img src="{{ site.nav_logo_file | absolute_url }}" alt="" class="site-logo mr-2">{% endunless %}</a>
+      </div>
+      <button type="button" name="Open nav" class="site-nav-trigger js-site-nav-trigger">
+        nav
+      </button>
+
+          <ol class="site-nav-items list-style-none js-site-nav-list">              
+            <li class="site-nav-item mb-0 mr-3 js-site-nav-item">
+              <a class="site-nav-link" href="https://rse-ops.github.io/about/">
+                About
+              </a>
+              </li>              
+              <li class="site-nav-item mb-0 mr-3 js-site-nav-item">
+              <a class="site-nav-link" href="https://rse-ops.github.io/docs/">
+                 Docs
+               </a>
+            </li>
+      </ol>
+    </div>
+  </div>
+</nav>

data/_includes/policy/legend.html

@@ -0,0 +1,4 @@
+<h4 id="legend">Legend</h4>
+<p><a href=""><img src="https://img.shields.io/badge/M.section-N-red.svg" alt="generic badge" /></a> Designates a <strong>mandatory</strong> point (policy).</p>
+
+<p><a href=""><img src="https://img.shields.io/badge/R.section-N-yellow.svg" alt="generic badge" /></a> Designates a <strong>recommended</strong> point (guideline).</p>

data/_includes/policy/rule.html

@@ -0,0 +1,13 @@
+    <section class="accordion__item">
+      <h4 class="accordion__heading"><button class="accordion__trigger">
+      <p> <a name="{{ rule.id }}"></a><a href="#{{ rule.id }}"><img style="float:left" src="{{ rule.badge }}" alt="{% if rule.alt %}{{ rule.alt }}{% else %}Generic badge{% endif %}"/></a>&nbsp;&nbsp; {{ rule.description }}</p>
+      </button></h4>
+      <div class="accordion__copy">
+    <ul style="padding-bottom:20px">
+    {% if rule.details %}<li><strong>Details</strong>: {{ rule.details }}</li>{% endif %}
+    {% if rule.rationale %}<li><strong>Rationale</strong>: {{ rule.rationale }}</li>{% endif %}
+    {% if rule.references %}<li><strong>Reference</strong>: {% for reference in rule.references %}<a href="{{ reference.url }}" target="_blank"><em>{{ reference.id }}</em></a>{% endfor %}</li>{% endif %}
+    {% if rule.examples %}<li><strong>Examples</strong>:<ul>{% for example in rule.examples %}<li>{{ example }}</li>{% endfor %}</ul></li>{% endif %}
+    </ul>
+   </div>
+</section>

data/_includes/scrolltop.html

@@ -0,0 +1,33 @@
+
+<style>
+#uppy {
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: darkred;
+  color: white;
+  cursor: pointer;
+  margin:15px;
+  border-radius: 10px;
+}
+
+#returnTop:hover {
+  background-color: #555;
+}
+</style>
+
+<button id="uppy" title="Return to Top" class="btn btn-lg"> <i class="fa fa-chevron-up"></i></button>
+
+<script>
+(function() {
+
+var scrollTop = function() {
+    window.scrollTo(0, 0);
+};
+document.getElementById('uppy').onclick = scrollTop;
+})();
+</script>
+

data/_includes/sidebar.html

@@ -0,0 +1,22 @@
+<div id="td-sidebar-menu" class="td-sidebar__inner">
+  <!-- TODO we need search here -->
+  <!--<form class="td-sidebar__search d-flex align-items-center">
+    <input type="search" class="form-control td-search-input" placeholder="Search this site..." aria-label="Search this site..." autocomplete="off">
+      <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+      </button>
+  </form>-->
+  
+  <nav class="collapse td-sidebar-nav pt-2" id="td-section-nav">
+    <ul class="list-style-none">
+    {% for section in site.data.menus.[page.sidebar] %}
+        {% capture sectionUrl %} 
+          {{ section.url | replace: "/", "" }} 
+        {% endcapture %}
+        {% capture pageUrl %} 
+          {{ page.url | replace: "/", "" }} 
+        {% endcapture %}
+            <li class="side-nav-item border-bottom m-0{% if pageUrl == sectionUrl %} active{% endif %} js-side-nav-item"><a href="{{ site.baseurl }}/{{ section.url }}" class="side-nav-link py-2 d-block{% if pageUrl == sectionUrl %} active js-side-nav-link-active{% endif %}">{{ section.title }}</a></li>
+        {% endfor %}
+    </ul>
+  </nav>
+</div>