writefreely/templates/include/post-render.tmpl

<!-- Miscelaneous render related template parts we use multiple times -->
{{define "collection-meta"}}
	{{if .Monetization -}}
		<meta name="monetization" content="{{.DisplayMonetization}}" />
	{{- end}}
{{end}}

{{define "highlighting"}}
<script>
  // TODO: this feels more like a mutation observer
  addEventListener('DOMContentLoaded', function () {
    var hlbaseUri = "/js/";
    var lb = document.querySelectorAll("code[class^='language-']");


    // Custom aliasmap
    var aliasmap = {
      "elisp"      : "lisp",
      "emacs-lisp" : "lisp",
      "c"          : "cpp",
      "cc"         : "cpp",
      "h"          : "cpp",
      "c++"        : "cpp",
      "h++"        : "cpp",
      "hpp"        : "cpp",
      "hh"         : "cpp",
      "hxx"        : "cpp",
      "cxx"        : "cpp",
      "sh"         : "bash",
      "js"         : "javascript",
      "jsx"        : "javascript",
      "html"       : "xml"
    };

    // Given a set of nodes, run highlighting on them
    function highlight(nodes) {
      for (i=0; i < nodes.length; i++) {
          hljs.highlightBlock(nodes[i]);
      }
    }

    // Given a array of URIs, load them in order
    function loadLanguages(uris, callback) {
      uris.forEach(function(uri) {
        var sc = document.createElement('script');
        sc.src = uri;
        sc.async = false; // critical?
	  // Set callback on last script
        if (uris.indexOf(uri) == uris.length-1) {
	  // Set callback regardless
	  // so we're sure it will run if last element had error
	  // (we only know after loading, so we've had load time already)
          sc.onload  = callback; sc.onerror = callback;
        }
        document.head.appendChild(sc);
      });
    }

    // We don't have to do anything if there are no language blocks
    if (lb.length > 0) {
      // We have blocks to be highlighted, so we load css
      var st = document.createElement('link');
      st.rel = "stylesheet";
      st.href = "/css/lib/atom-one-light.min.css";
      document.head.appendChild(st);

      // Construct set of files to load, in order
      var jss = [hlbaseUri + "highlight.min.js"];
      // Check what we need to load
      for (i=0; i < lb.length; i++) {
        lang = lb[i].className.replace('language-','').toLowerCase();
        // Support the aliases specified above
        if (aliasmap[lang]) lang = aliasmap[lang];
        lurl = hlbaseUri + "highlightjs/" + lang + ".min.js";
        if (!jss.includes(lurl)) {
          jss.push(lurl);
        }
      }
      // Load files in order, higlight on last load
      loadLanguages(jss, () => {highlight(lb)});
    }
  });
</script>
{{end}}

<!-- Include mathjax configuration -->
{{define "mathjax"}}
<script>
  MathJax = {
      tex: {
        inlineMath: [
          ["\\(", "\\)"],
          ['$', '$'],
        ],
        displayMath: [
          ['$$', '$$'],
          ['\\[', '\\]'],
        ],
      },
    };
</script>
<script type="text/javascript" id="MathJax-script" src="/js/mathjax/tex-svg-full.js" async>
</script>
{{end}}

{{define "emailsubscribe"}}
    {{if .EmailSubsEnabled}}
		<div id="emailsub">
            {{if .IsSubscriber}}
			<p>You're subscribed to email updates. <a href="/api/collections/{{.Alias}}/email/unsubscribe">Unsubscribe</a>.</p>
            {{else}}
			<form method="post" action="/api/collections/{{.Alias}}/email/subscribe">
				<input type="hidden" name="web" value="1" />
				<p>Enter your email to subscribe to updates.</p> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="email" name="{{.Honeypot}}" tabindex="-1" value="" /><input type="password" name="fake_password" tabindex="-1" placeholder="password" autocomplete="new-password" /></div>
				<input type="email" name="email" placeholder="me@example.com" />
				<input type="submit" id="subscribe-btn" value="Subscribe" />
			</form>
			<script type="text/javascript">
                var $form = document.getElementById('emailsub').getElementsByTagName('form')[0];
                $form.onsubmit = function() {
                    var $sub = document.getElementById('subscribe-btn');
                    $sub.disabled = true;
                    $sub.value = 'Subscribing...';
                }
			</script>
            {{end}}
		</div>
    {{end}}
{{end}}