frankrausch/build_html_from_md.sh

## build_html_from_md.sh
pandoc -o index_temp.html index.md
cat header.html index_temp.html footer.html > index.html
rm index_temp.html

## footer.html

    <footer>
      Example Footer
    </footer>

  </main>
</div><!-- /wrapper -->
<script>

  document.addEventListener("DOMContentLoaded", function(event) {
    var tocWrapper = document.querySelector('.toc');
    var toc = document.createElement('ol');

    document.querySelectorAll("h2").forEach(el => {
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.appendChild(document.createTextNode(el.innerText));
      a.setAttribute('href', '#' + el.getAttribute('id'));
      li.appendChild(a);
      toc.appendChild(li);
    });

    tocWrapper.appendChild(toc);
  });

</script>

</body>
</html>

## header.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>

  <style>
    * {
      box-sizing: border-box;
    }

    a {
      text-decoration: none;
      color: #245AAA;
    }

    a:hover {
      color: #3B88FD;
    }

    /* Reset */
    h1, h2, h3 {
      font-size: 1rem;
      margin: 0;
      padding: 0;
    }

    html {
      background-color: #fafafa;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      line-height: 1.6;
    }

    .wrapper {
      display: flex;
      padding: 5vw;
    }

    @media screen and (max-width: 979px) {
      .wrapper {
        flex-direction: column;
      }
    }

    main {
      counter-reset: h2;
      margin: auto;
      max-width: 40rem;
    }

    img {
      display: block;
      height: auto;
      max-width: 100%;
      padding: 2rem 0 1rem 0;
    }

    h1 {
      font-size: 1.7rem;
      margin: 0 0 2rem 0;
    }

    h2 {
      border-top: 1px solid #ddd;
      display: flex;
      font-size: 1.3rem;
      font-weight: bold;
      margin: 6rem 0 1rem 0;
      padding: 4rem 0 0 0;
    }

    h2::before {
      color: #aaa;
      content: counter(h2) ".\00A0";
      counter-increment: h2;
      counter: decimal;
      flex: 0 0 2.4rem;
      text-align: right;
      margin-right: 0.4em;
    }

    h3 {
      font-weight: bold;
      margin: 3rem 0 0.5rem 0;
    }

    code {
      font-size: 0.85em;
      background-color: white;
      border-radius: 2px;
      border: 1px solid #eee;
      font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
      margin: 0 -.1em;
      padding: 0 .2em;
    }

    pre > code {
      display: block;
      width: 100%;
      overflow-x: scroll;
      padding: 1rem 2rem;
    }

    p, ol li, ul li {
      margin-bottom: 0.5rem;
    }

    ol {
      counter-reset: li;
      list-style: none !important;
      padding-left: 1.6em;
    }

    ol li::before {
      color: #aaa;
      content: counter(li) "";
      counter-increment: li;
      display: block;
      float: left;
      margin-left: -1.6em;
      width: 1.6em;
    }

    ul, ul[style] {
      counter-reset: li;
      list-style-type: none !important;
      padding-left: 1.6em;
    }

    ul li::before {
      content: "→";
      counter-increment: li;
      counter: decimal;
      display: block;
      float: left;
      margin-left: -1.6em;
      width: 1.6em;
    }

    main > p,
    main > ul,
    main > ol,
    main > h3,
    pre {
      margin-left: 3rem;
    }

    footer {
      color: #888;
      font-size: 0.75rem;
      border-top: 1px solid #ddd;
      margin: 7rem 0 1rem 0;
      padding: 2rem 0 0 0;
    }

    .toc {
      position: sticky;
      top: 0;
      align-self: flex-start;
      font-size: 0.75rem;
      margin-right: 2rem;
    }

    @media screen and (max-width: 979px) {
      .toc {
        position: unset;
        top: unset;
        margin-bottom: 5vw;
      }
    }

  </style>
</head>
<body>
<div class="wrapper">
  <div class="toc">

  </div><!-- /toc -->
  <main>

## index.md

      
    Raw
  

              index.md
            
          
    Lorem

Lorem ipsum dolor sit amet.
Ipsum

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Dolor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem
ipsum
dolor
sit

Sit Amet

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	pandoc -o index_temp.html index.md
	cat header.html index_temp.html footer.html > index.html
	rm index_temp.html