Drafts Directory: TEST: nomnoml svg

Action

Posted by 42sol-eu (Andreas_Haeberle), Last update over 4 years ago - Unlisted

Display nomnoml diagrams in a HTML preview.
With clickable links in SVG

Steps

script

draft.setTemplateTag(
  "nomnoml_scale", 2.6
)

let links = {
    "nomnoml": "http://nomnoml.com",
    "awesome": "http://forums.getdrafts.com"
}

draft.setTemplateTag(
  "links", links
)

htmlpreview

<!DOCTYPE html>
<html dir="auto">

<head>
  <title>[[title]]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    @charset "utf-8";

    :root {
      --main-bg-color: white;
      --main-color: black;
      --alternate-bg-color: #efefef;
      --alternate-color: #222222;
      --main-border-color: #BBBBBB;
        --link-color: #627EC9;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --main-bg-color: #222222;
        --main-color: #eeeeee;
        --alternate-bg-color: #444444;
        --alternate-color: #cccccc;
        --main-border-color: #AAAAAA;
          --link-color: #627EC9;
      }
    }

    html {
      font-size: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
      line-height: 1.4em;
    }

    body {
      margin: 0;
      padding: 1em;
      background-color: var(--main-bg-color);
      color: var(--main-color);
    }

    @media (max-device-width: 480px) {}

    @media (min-device-width: 481px) {
      body {
        margin: auto;
        max-width: 600px;
      }
    }

    blockquote {
      font-style: italic;
      margin: 1.5em 2em;
      padding: 1em;
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
    }

    a {
      color: var(--link-color);
    }
    pre {
      display: block;
      overflow: scroll;
      width: 100%;
      background-color: var(--alternate-bg-color);
      padding: .5em 1em;
      margin: 1em 0;
    }

    code {
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
      font-family: Menlo, Courier, sans-serif;
      padding: 2px 3px;
    }

    table {
      margin: 1.5em 0;
      border: 1px solid var(--main-border-color);
      border-collapse: collapse;
    }

    th {
      padding: .25em .5em;
      background: var(--alternate-bg-color);
      border: 1px solid var(--main-border-color);
    }

    td {
      padding: .25em .5em;
      border: 1px solid var(--main-border-color);
    }

    img {
      max-width: 90%;
    }
  </style>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nomnoml/1.2.0/nomnoml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
%%[[draft]]%%

SVG START
<div id="nomSvg"></div>
SVG STOP

<script>
//let links = [[links]]; 
let links = {
    "nomnoml": "http://nomnoml.com",
    "awesome": "http://forums.getdrafts.com"
}

//let nom_source = $("code.nomnoml")[0];
let nom_source = "[nomnoml] -- [awesome]"
nom_svg = nomnoml.renderSvg(nom_source)

let divElement = document.getElementById ("nomSvg");
var parser = new DOMParser();


divElement.innerHTML = nom_svg;

document.querySelector('svg').onclick = function (e) { 
    let key = e.target.attributes['data-name'].value;
    //console.log(key);
    let link = links[key];
    //console.log
    alert("opening " + link); 
    window.open(link);
    //console.log("...done");
}
</script>
</html>

Options

After Success Default

Notification Info

Log Level Info

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Info
Log Level	Info