| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous"> | |
| <style> | |
| /* debug */ | |
| li { |
| <template> | |
| <input type="text" | |
| value.bind="myValue | numberFormat:'0,0[.]00' & updateTrigger:'change'" | |
| change.delegate="myValueChanged($event.target.value)" > | |
| </template> |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <!--atlas styles--> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous"> | |
| <!--docs styles--> |
| <template> | |
| <div with.bind="person" element.ref="el"> | |
| ${firstName} ${middleName} ${lastName} | |
| </div> | |
| app.el = ${el}<br/> | |
| person.el = ${person.el} | |
| </template> |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microsoft/atlas-css@3.3.0/dist/index.css" integrity="sha256-E2LVl9IuSYhXWHhuC1nbPvSpU0skk7qdAuH+30qeY/U=" crossorigin="anonymous"> | |
| <style> | |
| /* debug */ | |
| li { |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <script type="module"> | |
| import { Validator } from 'https://cdn.jsdelivr.net/npm/@cfworker/json-schema@1.9.0/dist/index.js'; | |
| const validator = new Validator({ type: 'number' }); | |
| let result = validator.validate(1); | |
| document.body.insertAdjacentHTML('beforeend', `<pre><code>${JSON.stringify(result, null, 2)}</code></pre>`); |
Remove right rail scrollbar. This enables the subsequent experiments and gives us right-rail content that will work on any page, regardless of experiment outcomes. This also gives us what we need for air-gapped environments.
Implement new version of "in this article". Shows first N sections, and remaining count.
N should be a little flexible so that we never end up in a state where it shows less than "and 2 more".
In this article:
- Lorem
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="https://design.docs.microsoft.com/index.ed466f8c.css"> | |
| </head> | |
| <body> | |
| <div class="columns"> | |
| <div class="display-flex"> <!-- put the column size classes here, for example, "is-6-widescreen is-9-desktop" ---> |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>GistRun</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <h1>Hello world!</h1> | |
| <form id="myForm"> |
| <template> | |
| <require from="./grid/grid"></require> | |
| <require from="./grid/cell-template"></require> | |
| <require from="./grid/row-template"></require> | |
| <grid class="table" items.bind="people"> | |
| <row-template> | |
| <div class="tr"> | |
| <content></content> | |
| </div> |