Some examples for ObservableHq DMT Gist Tool

dark markdeep.html

<meta charset="utf-8" emacsmode="-*- markdown -*-"><style class="fallback">body{visibility:hidden}</style><link rel="stylesheet" href="https://casual-effects.com/markdeep/latest/dark.css?">
                      **Example page!**

This is example page of the API doc style created Aras Pranckevičius at Unity for Morgan McGuire's Markdeep and now part of the official Markdeep distro. It uses content that could be an imaginary documentation page. Here would be some introduction text.

What is this?

Thing is a thing used to do stuff for various platforms. Some of the things it can do:

• Run on a computer
• Exit with an exit code
• Be a replacement for our old system, theoldthing.exe

Invoking it

This is a note by the way!

From the root folder, run "thing" with the target name, e.g.: thing Yes

• On Mac, Linux or Windows PowerShell, you'll want to use ./thing instead of just thing.
• Target and option names are case sensitive!
• Several things to do can be specified: thing Yes No FileNotFound

Additional options can be passed via -sNAME=VALUE arguments. Most common ones are CONFIG (used to indicate debug or release thing) and PLATFORM (used to indicate 32 vs 64 bit thing).

Subsection on stuff

Thing Name	Description	Notes
Yes	Yup!
No	Nope :(
FileNotFound	Doesn't find files	Pass -sFIND_FILE=maybe to maybe find them

Markdeep syntax test

Regular styling like bold, italics, strikethrough, inline code, the stuff.

• A
• Bullet
• List

And:

1. A
2. Numbered
3. List!

Symbol substitutions: a 45-degree turn; som x -> y arrows; some whoa ==> fancy <==> arrows.

Is this a definition list? : Looks like one to me Is that right? : Possibly!

And a code listing:

int main()
{
    return 1;
}

Markdeep diagrams:

******************************************* Here's a text to the right of the diagram,

• +-----------------+ .-. * ain't that fancy. Pretty fancy indeed, I
• |\ | .-+ | * must say! Markdeep diagrams are generally
• | \ A-B *---+--> .--+ '--. * enclosed into a rectangle full made of *
• | \ | | Cloud! | * symbols; and are "drawn" using ASCII-art
• +---+-------------+ '-------------' * style, with - | + / \ * o etc. ******************************************* Suh-weet!

Another random diagram, just because:

---

• +-+-+-+-*-o *
• / / ^ / *
• / v / / *
• +-+-+-+ *

---

!!! Note Hey I'm a note. Don't mind me, I'm just sitting here.

!!! WARNING I'm a warning, perhaps. Something might happen!

And other admonitions:

!!! Error: Never Pass nullptr to a Shader Invoking a shader with a null argument can seg fault. This is a multi-line admonition.

Seriously, don't call shaders like that.

The table of contents that Markdeep produces is stuffed on the right side, if the browser window is wide enough. Otherwise it is hidden.

<script src="https://casual-effects.com/markdeep/latest/markdeep.min.js?" charset="utf-8"></script>

GistBtns.js

GistBtns = {
  // Used to lookup language based on file extension and render highlighting
  const prism = new PrismLookup;

  function tinyOcto() {return `${Spinner.octocat}`.replace('"48" height="48"','"24" height="24"')}

  const gistid = '8014cc196d580699feab787abc9398a0'; // My Gist for these examples
  let buttons = [];
  buttons[0] = html`<button class="bttn pill" style="margin-left: 2em;">Markdown gist</button>`;
  buttons[0].onclick = async () => {
    mutable BtnsResult = html `${tinyOcto()}`;
    const filename = 'node-red http codes.md';
    await tkit.gist.fetch(gistid, filename);
    mutable BtnsResult = md `${tkit.data}`;
  }

  buttons[1] = html`<button class="bttn pill">JSON gist</button>`;
  buttons[1].onclick = async () => {
    mutable BtnsResult = html `${tinyOcto()}`;
    const filename = 'test-jsonplaceholders-users.json';
    await tkit.gist.fetch(gistid, filename);
    mutable BtnsResult = {[filename]: JSON.parse(tkit.data)};
  }

  buttons[2] = html`<button class="bttn pill">Javascript markup</button>`;
  buttons[2].onclick = async () => {
    mutable BtnsResult = html `${tinyOcto()}`;
    const filename = 'GistBtns.js';
    await tkit.gist.fetch(gistid, filename);
    let element = '<pre class="line-numbers language-javascript"><code>' + tkit.data + '</code></pre>';
    mutable BtnsResult = html `${element}`;
    await Promises.delay(1); // yield to Observable so it resolves mutable BtnsResult
    Prism.highlightAll()
  }

  buttons[3] = html`<button class="bttn pill">Javascript code</button>`;
  buttons[3].onclick = async () => {
    mutable BtnsResult = html `${tinyOcto()}`;
    const filename = 'sample class.js';
    await tkit.gist.fetch(gistid, filename);
    mutable BtnsResult = Function('return (' + tkit.data + ')')();
  }

  buttons[4] = html`<button class="bttn pill">Reset</button>`;
  buttons[4].onclick = () => {
    mutable BtnsResult = '';
  }
  return md`
Some basic Gist fetches. Expand or press “Javascript Markup” button to see these usage examples.

> Note that the Gist Tool does not format the data fetched - so each button onclick() does the formatiing.

<div class="bttn-group">
${buttons[0]} ${buttons[1]} ${buttons[2]} ${buttons[3]} ${buttons[4]}
</div>
`;
}

node-red http codes.md

HTTP Response

All API methods use standard HTTP response codes to indicate success or failure.

Status Code	Reason
200	Success - with the result in the response content
204	Success - with no further content
400	Bad request - see response format below
401	Not authorized - see Authentication
404	Not found - a resource wasn't found
409	Version mismatch - see POST /flows
500	Server Error - something went wrong on the server

Error response

For a 400 response code, the body of the response will be a JSON object containing the fields:

Field	Description
code	The error code
message	The description of the error

{
  code: "module_already_loaded",
  message: "Module already loaded"
}

Error codes

Code	Description
unexpected_error	An unexpected error occured
invalid_request	The request contains invalid parameters
settings_unavailable	The storage system does not support changing settings
module_already_loaded	The requested module is already loaded
type_in_use	The request is attempting to remove/disable a node type that is currently being used
invalid_api_version	The request specified an invalid api version in the Node-RED-API-Version header

observable-menu.js

xx = {
// Inspired by https://github.com/morgan3d/misc/blob/master/jsmenu/demo.html
  yield html `
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
#menubar {font-size:20px;user-select:none}
#menubar div{display:inline-block;vertical-align:top}
/* Menu label (no hover) */
#menubar .menuLabel{padding:4px 8px 4px 8px;margin-right:10px;margin-left:-8px}
/* Menu label (hover) */
#menubar .menuLabel:hover{background:#555}
/* Drop-down menu */
#menubar div div{position:absolute;display:block;min-width:220px;overflow:auto;background:#fff;box-shadow:0px 2px 6px 0px rgba(0,0,0,.5);z-index:4;padding:4px 2px 2px 30px;margin-left:-8px;margin-top:4px}
/* Drop-down menu (hidden) */
#menubar span:not(.activeMenu) + div{visibility:hidden}
/* Menu item */
#menubar div div a{color:#000;text-decoration:none;display:block;padding:4px;margin:4px 0 4px}
/* Left-aligned icon within a menu item */
#menubar div div a .icon{position:absolute;left:9px}
/* Hotkey documentation in a menu item */
#menubar div div a .hotkey{position:absolute;right:9px;color:rgba(0,0,0,.5)}
/* Google's icon font within the menu */
#menubar div div a .material-icons{font-size:120%;color:rgba(0,0,0,.55)}
/* Line between menu items */
#menubar div div hr{border:none;height:1px;background:rgba(0,0,0,.15);margin:5px -2px 5px -30px}
</style>
<div id="menubar" style="border-bottom: 1px solid #ccc; padding-bottom: 10px; width: 100%; padding-left: 40px">
<div>
<span class="menuLabel">File</span>
<div class="menuDropDown">
<a href="#">Open...<span class="hotkey">Ctrl+O</span></a>
<a href="#"><i class="material-icons icon">print</i>Print...</a>
<hr>
<a href="#"><i class="material-icons icon">delete</i>Delete</a>
</div>
</div>
<div><span class="menuLabel">Edit</span>
<div class="menuDropDown">
<a href="#">Insert...</a>
</div>
</div>
<div><span class="menuLabel">View</span></div>
<div><span class="menuLabel">Help</span></div>
</div>
`
  function closeAllMenus() {
    document.getElementsByClassName('activeMenu').forEach(
      function (node) {node.classList.remove('activeMenu')}
    )}

  function showMenu(e) { closeAllMenus(); this.classList.add('activeMenu'); e.stopPropagation() }

  (function() {
    function on(e,f){window.addEventListener(e,f)}
    on('click', closeAllMenus, true)
    on('keydown', function (event) { (event.key === "Escape") && closeAllMenus() }, true)
  })(); 

  document.getElementsByClassName('menuLabel').forEach(function(node) {node.onclick = showMenu})

}

sample class.js

class Sample {
  constructor() {
    this._data = 'Some sample data';
  }
}

test-jsonplaceholders-users.json

[
    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
            "street": "Kulas Light",
            "suite": "Apt. 556",
            "city": "Gwenborough",
            "zipcode": "92998-3874",
            "geo": {
                "lat": "-37.3159",
                "lng": "81.1496"
            }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
            "name": "Romaguera-Crona",
            "catchPhrase": "Multi-layered client-server neural-net",
            "bs": "harness real-time e-markets"
        }
    },
    {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "Shanna@melissa.tv",
        "address": {
            "street": "Victor Plains",
            "suite": "Suite 879",
            "city": "Wisokyburgh",
            "zipcode": "90566-7771",
            "geo": {
                "lat": "-43.9509",
                "lng": "-34.4618"
            }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
            "name": "Deckow-Crist",
            "catchPhrase": "Proactive didactic contingency",
            "bs": "synergize scalable supply-chains"
        }
    },
    {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "Nathan@yesenia.net",
        "address": {
            "street": "Douglas Extension",
            "suite": "Suite 847",
            "city": "McKenziehaven",
            "zipcode": "59590-4157",
            "geo": {
                "lat": "-68.6102",
                "lng": "-47.0653"
            }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
            "name": "Romaguera-Jacobson",
            "catchPhrase": "Face to face bifurcated interface",
            "bs": "e-enable strategic applications"
        }
    },
    {
        "id": 4,
        "name": "Patricia Lebsack",
        "username": "Karianne",
        "email": "Julianne.OConner@kory.org",
        "address": {
            "street": "Hoeger Mall",
            "suite": "Apt. 692",
            "city": "South Elvis",
            "zipcode": "53919-4257",
            "geo": {
                "lat": "29.4572",
                "lng": "-164.2990"
            }
        },
        "phone": "493-170-9623 x156",
        "website": "kale.biz",
        "company": {
            "name": "Robel-Corkery",
            "catchPhrase": "Multi-tiered zero tolerance productivity",
            "bs": "transition cutting-edge web services"
        }
    },
    {
        "id": 5,
        "name": "Chelsey Dietrich",
        "username": "Kamren",
        "email": "Lucio_Hettinger@annie.ca",
        "address": {
            "street": "Skiles Walks",
            "suite": "Suite 351",
            "city": "Roscoeview",
            "zipcode": "33263",
            "geo": {
                "lat": "-31.8129",
                "lng": "62.5342"
            }
        },
        "phone": "(254)954-1289",
        "website": "demarco.info",
        "company": {
            "name": "Keebler LLC",
            "catchPhrase": "User-centric fault-tolerant solution",
            "bs": "revolutionize end-to-end systems"
        }
    },
    {
        "id": 6,
        "name": "Mrs. Dennis Schulist",
        "username": "Leopoldo_Corkery",
        "email": "Karley_Dach@jasper.info",
        "address": {
            "street": "Norberto Crossing",
            "suite": "Apt. 950",
            "city": "South Christy",
            "zipcode": "23505-1337",
            "geo": {
                "lat": "-71.4197",
                "lng": "71.7478"
            }
        },
        "phone": "1-477-935-8478 x6430",
        "website": "ola.org",
        "company": {
            "name": "Considine-Lockman",
            "catchPhrase": "Synchronised bottom-line interface",
            "bs": "e-enable innovative applications"
        }
    },
    {
        "id": 7,
        "name": "Kurtis Weissnat",
        "username": "Elwyn.Skiles",
        "email": "Telly.Hoeger@billy.biz",
        "address": {
            "street": "Rex Trail",
            "suite": "Suite 280",
            "city": "Howemouth",
            "zipcode": "58804-1099",
            "geo": {
                "lat": "24.8918",
                "lng": "21.8984"
            }
        },
        "phone": "210.067.6132",
        "website": "elvis.io",
        "company": {
            "name": "Johns Group",
            "catchPhrase": "Configurable multimedia task-force",
            "bs": "generate enterprise e-tailers"
        }
    },
    {
        "id": 8,
        "name": "Nicholas Runolfsdottir V",
        "username": "Maxime_Nienow",
        "email": "Sherwood@rosamond.me",
        "address": {
            "street": "Ellsworth Summit",
            "suite": "Suite 729",
            "city": "Aliyaview",
            "zipcode": "45169",
            "geo": {
                "lat": "-14.3990",
                "lng": "-120.7677"
            }
        },
        "phone": "586.493.6943 x140",
        "website": "jacynthe.com",
        "company": {
            "name": "Abernathy Group",
            "catchPhrase": "Implemented secondary concept",
            "bs": "e-enable extensible e-tailers"
        }
    },
    {
        "id": 9,
        "name": "Glenna Reichert",
        "username": "Delphine",
        "email": "Chaim_McDermott@dana.io",
        "address": {
            "street": "Dayna Park",
            "suite": "Suite 449",
            "city": "Bartholomebury",
            "zipcode": "76495-3109",
            "geo": {
                "lat": "24.6463",
                "lng": "-168.8889"
            }
        },
        "phone": "(775)976-6794 x41206",
        "website": "conrad.com",
        "company": {
            "name": "Yost and Sons",
            "catchPhrase": "Switchable contextually-based project",
            "bs": "aggregate real-time technologies"
        }
    },
    {
        "id": 10,
        "name": "Clementina DuBuque",
        "username": "Moriah.Stanton",
        "email": "Rey.Padberg@karina.biz",
        "address": {
            "street": "Kattie Turnpike",
            "suite": "Suite 198",
            "city": "Lebsackbury",
            "zipcode": "31428-2261",
            "geo": {
                "lat": "-38.2386",
                "lng": "57.2232"
            }
        },
        "phone": "024-648-3804",
        "website": "ambrose.net",
        "company": {
            "name": "Hoeger LLC",
            "catchPhrase": "Centralized empowering task-force",
            "bs": "target end-to-end models"
        }
    }
]

This is a test comment with markdown.