u2ui 1.0.0

package/u2/tools/dev-iframe.js

@@ -0,0 +1,213 @@
+import '../../el/tooltip/tooltip.js';
+import '../../el/ico/ico.js';
+import '../../el/code/code.js';
+import '../../el/tabs/tabs.js';
+
+const toolTipCss = import.meta.resolve('../../el/tooltip/tooltip.css');
+const icoCss = import.meta.resolve('../../el/ico/ico.css');
+const codeCss = import.meta.resolve('../../el/code/code.css');
+const tabsCss = import.meta.resolve('../../el/tabs/tabs.css');
+
+document.head.insertAdjacentHTML('beforeend', `<link rel=stylesheet href="${toolTipCss}">`); // zzz if popover
+
+class DevIframe extends HTMLElement {
+    constructor() {
+        super();
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.innerHTML = 
+            `<style>
+            @import url("${icoCss}");
+            @import url("${codeCss}");
+            @import url("${tabsCss}");
+            @import url("${toolTipCss}"); /* todo when switch to popover as tooltips then stay */
+            :host {
+                display: flex;
+                flex-direction: column;
+                border: 1px solid #ccc;
+                background:var(--color-bg, white);
+                --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.33/svg/{icon_name}/baseline.svg';
+            }
+            #tools {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: stretch;
+                border-bottom: 1px solid #ccc;
+                background: #f8f8f8;
+            }
+            #tools > label, #tools > button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: .3rem;
+                font-size: 13px;
+                border: 1px solid #ccc;
+                padding: .3rem .5rem;
+                margin: -1px;
+                background: transparent;
+            }
+            #tools > button { margin-left:auto; }
+            #tools u2-ico { --size:1.6em; }
+            #wrap {
+                width:90%;
+                height:20rem;
+                margin:2rem auto;
+                align-self:center;
+                flex: 1 1 auto;
+                resize: both;
+                overflow:auto;
+                border:1px solid #ccc;
+                & > iframe {
+                    border: 0;
+                    width: 100%;
+                    height: 100%;
+                    display:block;
+                }
+            }
+            u2-code {
+                font-size: 13px;
+                line-height:1.7;
+            }
+            u2-tabs {
+                max-height: 30rem;
+            }
+            </style>
+            <form id=tools>
+                <label>
+                    <input type=checkbox name=js checked> Javascript
+                </label>
+                <label>
+                    <input type=checkbox name=u2css checked> U2 styles
+                </label>
+                <label>
+                    <u2-ico icon=contrast></u2-ico>
+                    <u2-tooltip>Color-Scheme</u2-tooltip>
+                    <select name=color-scheme>
+                        <option value="">auto
+                        <option value=light>light
+                        <option value=dark>dark
+                    </select>
+                </label>
+                <label>
+                    <u2-ico icon=text_rotation_down></u2-ico>
+                    <u2-tooltip>Writing mode</u2-tooltip>
+                    <select name=writing-mode>
+                        <option value=horizontal-tb>horizontal-tb
+                        <option value=vertical-rl>vertical-rl
+                        <option value=vertical-lr>vertical-lr
+                    </select>
+                </label>
+                <label>
+                    <u2-ico icon=format_textdirection_r_to_l></u2-ico>
+                    <u2-tooltip>Text Direction</u2-tooltip>
+                    <select name=direction>
+                        <option value=ltr>left to right</option>
+                        <option value=rtl>right to left</option>
+                    </select>
+                </label>
+                <button type=button onclick="this.getRootNode().host.requestFullscreen()">
+                    <u2-ico icon=fullscreen></u2-ico>
+                    <u2-tooltip>Fullscreen</u2-tooltip>
+                </button>
+            </form>
+            <div id=wrap>
+               <iframe src=""></iframe>
+            </div>
+            <u2-tabs>
+                <h2>HTML</h2>
+                <u2-code id=html trim editable xlanguage=html></u2-code>
+                <h2>CSS</h2>
+                <u2-code id=css trim editable xlanguage=css></u2-code>
+                <h2>JS</h2>
+                <u2-code id=js trim editable xlanguage=javascript></u2-code>
+            </u2-tabs>
+            `;
+
+        const frame = shadow.querySelector('iframe');
+        const form = shadow.querySelector('#tools');
+    
+        form.addEventListener('change', e => {
+            if (template) this.loadDoc(template.innerHTML);
+            else this.loadUrl(frame.src);
+        });
+
+        const template = this.querySelector(':scope > template');
+        if (template) frame.srcdoc = template.innerHTML;
+    }
+    loadUrl(url) { this.load({url}); }
+    loadDoc(doc) { this.load({doc}); }
+    load({url,doc} = {}) {
+        const shadow = this.shadowRoot;
+        const form = shadow.querySelector('#tools');
+        const frame = shadow.querySelector('iframe');
+
+        const data = Object.fromEntries(new FormData(form));
+    
+        let sandbox = 'allow-same-origin allow-modals allow-forms allow-popups';
+        if (data['js']) sandbox += ' allow-scripts';
+        frame.sandbox = sandbox;
+
+        setIframeSrc(frame, {
+            url,
+            doc,
+            callback: ({document}) => {
+                //this.dispatchEvent(new CustomEvent('dev-iframe-document-ready', { detail: { frame, document } }));
+                document.documentElement.style.writingMode = data['writing-mode'];
+                document.documentElement.dir = data['direction'];
+
+                document.documentElement.style.colorScheme = data['color-scheme'];
+                document.documentElement.setAttribute('data-theme', data['color-scheme']);
+                document.documentElement.setAttribute('u2-skin', data['color-scheme']);                
+
+                if (!data['u2css']) {
+                    document.querySelectorAll('link').forEach(link => {
+                        if (link.href.includes('/css/base/')) link.remove();
+                        if (link.href.includes('/css/classless/')) link.remove();
+                        if (link.href.includes('/css/classless/')) link.remove();
+                        if (link.href.includes('/attr/skin/skin.css')) link.remove();
+                    });
+                }
+
+                const htmlEl = document.querySelector('.main:not(script,style)');
+                const jsEl = document.querySelector('script.main');
+                const cssEl = document.querySelector('style.main');
+
+                htmlEl && shadow.querySelector('#html').setForeignElement(htmlEl);
+                jsEl && shadow.querySelector('#js').setForeignElement(jsEl);
+                cssEl && shadow.querySelector('#css').setForeignElement(cssEl);
+            }
+        });
+
+    }
+
+    static observedAttributes = ['src'];
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'src') {
+            const iframe = this.shadowRoot.querySelector('iframe');
+            if (iframe) this.loadUrl(newValue);
+        }
+    }
+}
+
+customElements.define('dev-iframe', DevIframe);
+
+
+
+function setIframeSrc(frame, {url,doc,callback} = {}) {
+    frame.contentDocument.isOld = true;
+    frame.onload = () => run();
+    //frame.src = url;
+    if (url) frame.src = url;
+    if (doc) frame.srcdoc = doc;
+    const interval = setInterval(() => {
+        if (frame.contentDocument.isOld) return;
+        if (frame.contentDocument.readyState !== 'interactive') return;
+        clearInterval(interval);
+        run();
+    }, 10);
+    let run = ()=>{
+        clearInterval(interval);
+        run = ()=>{}
+        callback?.({document: frame.contentDocument});
+    };
+}

package/u2/tools/dev-iframe.test.html

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <script src="../../u2/tests/test-init.js" type=module></script>
+
+    <link rel=stylesheet href="../../css/classless/full.css">
+
+    <script src="../tools/dev-iframe.js" type=module async></script>
+
+<body>
+
+<section>
+    <h2>App</h2>
+
+    <label style="text-align:center; padding:.6em">
+        <input id=set oninput="dFrame.setAttribute('src', this.value)" placeholder="https://url..." style="display:block; margin:auto; width:77%;" autofocus>
+    </label>
+    <dev-iframe id="dFrame"></dev-iframe>
+
+    <script>
+        set.addEventListener('input', function() {
+            dFrame.setAttribute('src', this.value);
+            localStorage.setItem('dev-iframe-app-url', this.value);
+        });
+        dFrame.setAttribute('src', localStorage.getItem('dev-iframe-app-url') || 'http://localhost/u2ui/u2/el/tree1/tests/test.html');
+        set.value = dFrame.getAttribute('src');
+    </script>
+
+
+</section>
+
+
+<section>
+
+    <h2>Template as document</h2>
+    <dev-iframe>
+        <template>
+            <link rel=stylesheet href="../../css/classless/full.css">
+            <script src="../auto.js" type=module async></script>
+            <style>
+                body {
+                    font-family: sans-serif;
+                    margin: 0;
+                    padding: 0;
+                }
+                h1 {
+                    background: #333;
+                    color: white;
+                    padding: 1em;
+                    margin: 0;
+                }
+                main {
+                    padding: 1em;
+                }
+            </style>
+            <h1>My App</h1>
+            <main class="main">
+                <p>My app is great!</p>
+            </main>
+            <style class="main">
+                main {
+                    background: #f8f8f8;
+                }
+            </style>
+
+            <script class=main>
+                document.querySelector('main').insertAdjacentHTML('beforeend', '<p>My app is still great!</p>');
+            </script>
+        </template>
+    </dev-iframe>
+
+</section>

package/u2/tools/eventsExplorer.js

@@ -0,0 +1,101 @@
+
+import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@main/mod.min.js';
+import {alert} from '../../js/dialog/dialog.js';
+
+function alertInit(el) { el.classList.add('backdropClose'); }
+
+export class EventsExplorer {
+    constructor(into, el, events) {
+        this.into = into;
+        this.el = el;
+        this.events = events;
+        this.into.innerHTML =
+            `<div style="display:flex; justify-content:end"><button class=-clearbtn>clear</button></div>
+            <div class=-listWrapper style="overflow:auto;max-height:18rem">
+                <table style="border-collapse:collapse">
+                    <thead>
+                        <tr>
+                            <th>Event
+                            <th>Target
+                            <th>Phase
+                    <tbody>
+                </table>
+            </div>`;
+        this.tbody = this.into.querySelector('tbody');
+
+        this.into.querySelector('.-clearbtn').addEventListener('click', () => this.clear() );
+    }
+    clear(){
+        this.tbody.innerHTML = '';
+    }
+    scrollToEnd(minPadding=230) {
+        const div = this.into.querySelector('.-listWrapper');
+        if (div.scrollTop + div.clientHeight < div.scrollHeight - minPadding) return;
+        div.scrollTop = div.scrollHeight;
+    }
+    start() {
+        this.clear();
+        let grow = 1;
+        let activeTr = null;
+        setInterval(() => {
+            if (!activeTr || grow > 10) return;
+            grow = Math.max(1, grow);
+            activeTr.style.borderBottomWidth = (grow+=0.01)+'px';
+            this.scrollToEnd(10);
+        },10);
+        let renderEvent = (event)=>{
+            let tr = document.createElement('tr');
+            activeTr = tr;
+            grow = 0;
+            tr.style.borderBottom = '0px solid black';
+
+            const tag = event.target.tagName?.toLowerCase() ?? (event.target.nodeType === 3 ? '[text]' : '[unknown]');
+            const klass = event.target.className?.trim().replace(/\s+/g, '.').replace(/^(.)/, '.$1') || null;
+            const id = event.target.id ? '#'+event.target.id : null;
+
+            const typeDot = `<span style="color:${stringToColor(event.type)}">⬤</span>`;
+            const targetDot = `<span style="color:${stringToColor(tag+id+klass)}">⬤</span>`;
+
+            tr.innerHTML = 
+                `<td>${typeDot} ${event.type}
+                 <td>${targetDot} ${id??klass??tag}
+                 <td>${event.eventPhase}<td class=-dump><button style="font-size:12px; margin:0">inspect</button>`;
+            tr.querySelector('.-dump').addEventListener('click', () => {
+                alert({body:dump(event, {depth:2, customRender:domRender, inherited:true}), init:alertInit});
+            });
+
+            this.tbody.append(tr);
+            this.scrollToEnd();
+        }
+        for (const ev of this.events) {
+            this.el.addEventListener(ev, renderEvent, true);
+        }
+    }
+}
+
+
+
+function fnv1aHash(str) {
+    let hash = 2166136261;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash ^ str.charCodeAt(i)) * 16777619;
+    }
+    return hash >>> 0; // Convert to unsigned 32-bit integer
+}
+
+function stringToColor(str) {
+    let hash = fnv1aHash(str);
+
+    let h = (hash >> 16) & 0xFF; // Extrahiere die höchsten 8 Bits für Hue
+    let s = (hash >> 8) & 0xFF; // Extrahiere die mittleren 8 Bits für Saturation
+    let l = hash & 0xFF; // Extrahiere die niedrigsten 8 Bits für Lightness
+
+    // Normalisiere die Werte in ihre jeweiligen Bereiche
+    h = (h % 360); // Hue zwischen 0 und 359
+    // Sättigung zwischen 60% und 100%
+    s = 60 + (s % 41);
+    // Helligkeit zwischen 30% und 50%, um extreme Dunkelheit/Helligkeit zu vermeiden
+    l = 30 + (l % 21);
+
+    return `hsl(${h}, ${s}%, ${l}%)`;
+}

package/u2/tools/logo/u1.svg

@@ -0,0 +1,9 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 114" width="259" height="114">
+	<title>u2-ui-logo-svg</title>
+	<style>
+		.s0 { fill: #532b6e } 
+		.s1 { fill: #7e40a9 } 
+	</style>
+	<path id="&lt;u2&gt; UI " class="s0" d="m35.5 77.4l-10.8 10.5-24.4-24.5 24.4-24.4 10.8 10.5-12.4 13.9zm223.3-13.9l-24.5 24.4-10.8-10.5 12.5-13.9-12.5-14 10.8-10.5z"/>
+	<path id="&lt;u2&gt; UI " class="s1" d="m141.7 108.3v0.2q0 1.6-1.9 3-1.9 1.2-4.5 1.2l-29 0.1q-3.3-0.1-4.9-2-1.7-1.8-2.1-4.6-3.5 3.5-9.2 5.6-5.6 1.9-12.1 1.9-8.1 0-14.9-2.9-6.6-3-8.5-7.8-0.5-1.2-0.9-2.3-0.3-1.2-0.5-2.6-0.1-0.8-0.3-1.6 0-1 0-1.7v-65.3l-1.6-0.9q-2.7 0-4.7-1.2-1.8-1.3-1.8-3.3 0-1.8 1.8-3 2-1.3 4.7-1.3h26.2q5.3 0 6.9 2.7 1.8 2.5 1.8 7v67q0 0.3 0.2 0.7 0.1 0.3 0.4 0.8 0.7 1.2 2.6 2.2 1.9 1.1 4 1 0.5 0 0.9 0 0.5-0.1 0.9-0.2 1.4-0.5 2.6-1.7 1.2-1.2 1.2-3.1v-66.7l-1.8-0.7q-2.5 0-4.4-1.4-1.9-1.3-1.9-3 0-1.9 1.9-3.3 1.9-1.3 4.4-1.3h27.9q5.5 0 7 2.2 1.5 2.1 1.7 4.7 0 0.4 0 0.9 0 0.4 0 0.9 0 0.3 0 0.6 0 0.1 0 0.4v73.5l1.5 1q2.7 0 4.5 1.3 1.9 1.2 1.9 3zm72.6-0.1v0.1q0 1.8-1.9 3.2-2 1.3-4.5 1.3l-40.5 0.2q-2.9-0.2-4.7-1.5-1.8-1.4-1.8-3.3 0-1.5 1.8-2.9 1.8-1.3 4.7-1.3l1.3-1v-74.5h-17.4q-2.7 0-4.6-1.2-1.9-1.3-1.8-3.3-0.1-1 1-1.8 1.1-0.8 2.4-1.3 0.9-0.5 1.7-0.6 0.9-0.3 1.3-0.5l43.8-18.6q1.2-0.4 2.3-0.6 1-0.3 1.9-0.3 3.2 0 5 2 1.9 1.9 1.9 4.9v95.8l1.7 1q2.5 0 4.5 1.3 1.9 1.4 1.9 2.9z"/>
+</svg>

package/u2/tools/logo/u1ui.svg

@@ -0,0 +1,6 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440 116" width="440" height="116">
+	<title>u2-ui-logo</title>
+	<path id="&lt;u2&gt; UI " fill="#532b6e" aria-label="&lt;u2&gt; UI"  d="M35.5 77.4L35.5 77.4L24.7 87.9L0.25 63.45L24.7 39L35.5 49.5L23.05 63.45L35.5 77.4ZM258.85 63.45L258.85 63.45L234.4 87.9L223.6 77.4L236.05 63.45L223.6 49.5L234.4 39L258.85 63.45Z" />
+	<path id="&lt;u2&gt; UI " fill="#7e40a9" aria-label="&lt;u2&gt; UI"  d="M141.7 108.3L141.7 108.45Q141.7 110.1 139.75 111.45Q137.95 112.65 135.25 112.65L106.3 112.8Q103 112.65 101.35 110.85Q99.7 109.05 99.25 106.2Q95.8 109.65 90.1 111.75Q84.55 113.7 77.95 113.7Q69.85 113.7 63.1 110.85Q56.5 107.85 54.55 103.05Q54.1 101.85 53.65 100.65Q53.35 99.45 53.2 98.1Q53.05 97.35 52.9 96.45Q52.9 95.55 52.9 94.8L52.9 29.55L51.25 28.65Q48.55 28.65 46.6 27.45Q44.8 26.1 44.8 24.15Q44.8 22.35 46.6 21.15Q48.55 19.8 51.25 19.8L77.5 19.8Q82.75 19.8 84.4 22.5Q86.2 25.05 86.2 29.55L86.2 96.45Q86.2 96.75 86.35 97.2Q86.5 97.5 86.8 97.95Q87.55 99.15 89.35 100.2Q91.3 101.25 93.4 101.25Q93.85 101.25 94.3 101.25Q94.75 101.1 95.2 100.95Q96.55 100.5 97.75 99.3Q98.95 98.1 98.95 96.15L98.95 29.55L97.15 28.8Q94.75 28.8 92.8 27.45Q90.85 26.1 90.85 24.45Q90.85 22.5 92.8 21.15Q94.75 19.8 97.15 19.8L125.05 19.8Q130.6 19.8 132.1 22.05Q133.6 24.15 133.75 26.7Q133.75 27.15 133.75 27.6Q133.75 28.05 133.75 28.5Q133.75 28.8 133.75 29.1Q133.75 29.25 133.75 29.55L133.75 103.05L135.25 103.95Q137.95 103.95 139.75 105.3Q141.7 106.5 141.7 108.3ZM214.3 108.15L214.3 108.3Q214.3 110.1 212.35 111.45Q210.4 112.8 207.85 112.8L167.35 112.95Q164.5 112.8 162.7 111.45Q160.9 110.1 160.9 108.15Q160.9 106.65 162.7 105.3Q164.5 103.95 167.35 103.95L168.7 103.05L168.7 28.5L151.3 28.5Q148.6 28.5 146.65 27.3Q144.85 25.95 144.85 24Q144.85 22.95 145.9 22.2Q146.95 21.45 148.3 20.85Q149.2 20.4 149.95 20.25Q150.85 19.95 151.3 19.8L195.1 1.2Q196.3 0.75 197.35 0.6Q198.4 0.3 199.3 0.3Q202.45 0.3 204.25 2.25Q206.2 4.2 206.2 7.2L206.2 103.05L207.85 103.95Q210.4 103.95 212.35 105.3Q214.3 106.65 214.3 108.15Z" />
+	<path id="&lt;u2&gt; UI " fill="#64a9df" aria-label="&lt;u2&gt; UI"  d="M385 6.15L385 6.15Q385 8.1 383.05 9.45Q381.25 10.65 378.55 10.65L377.05 11.55L377.05 94.5Q377.05 103.2 365.35 109.35Q353.65 115.5 337.3 115.5Q320.8 115.5 308.95 109.35Q297.25 103.2 297.25 94.5L297.25 11.55L295.75 10.65Q293.05 10.65 291.1 9.45Q289.3 8.1 289.3 6.15Q289.3 4.35 291.1 3.15Q293.05 1.8 295.75 1.8L336.25 1.8Q338.8 1.8 340.6 3.15Q342.55 4.35 342.55 6.15Q342.55 8.1 340.6 9.45Q338.8 10.65 336.25 10.65L334.6 11.55L334.6 90.3Q334.6 93.9 338.65 96.45Q342.7 99 348.25 99Q353.8 99 357.85 96.45Q362.05 93.9 362.05 90.45L362.05 11.55L360.55 10.65Q357.85 10.65 355.9 9.45Q354.1 8.1 354.1 6.15Q354.1 4.35 355.9 3.15Q357.85 1.8 360.55 1.8L378.55 1.8Q381.25 1.8 383.05 3.15Q385 4.35 385 6.15ZM440.05 108L440.05 108.15Q440.05 109.95 438.1 111.3Q436.15 112.65 433.6 112.65L393.1 112.8Q390.25 112.65 388.45 111.3Q386.65 109.95 386.65 108Q386.65 106.5 388.45 105.15Q390.25 103.8 393.1 103.8L394.45 103.05L394.45 11.55L392.95 10.65Q390.25 10.65 388.3 9.45Q386.5 8.1 386.5 6.15Q386.5 4.35 388.3 3.15Q390.25 1.95 392.95 1.95L433.3 1.95Q436 1.95 437.8 3.15Q439.75 4.35 439.75 6.15Q439.75 8.1 437.8 9.45Q436 10.65 433.3 10.65L431.8 11.55L431.8 103.05L433.6 103.8Q436.15 103.8 438.1 105.15Q440.05 106.5 440.05 108Z" />
+</svg>

package/u2/tools/update.repos.json.js

@@ -0,0 +1,234 @@
+// deno run -A --unstable ./u2/tools\update.repos.json.js
+
+const repos = {};
+
+import * as fs from 'https://deno.land/std@0.100.0/fs/mod.ts';
+
+let base = import.meta.resolve('../../');
+base = base.replace(/file:\/\/\//, '');
+//const base = './u2/';
+
+['attr', 'class', 'el', 'css', 'js'].forEach(async category=>{
+    repos[category] = {};
+    for await (const entry of Deno.readDir(base+category)) {
+        if (!entry.isDirectory) continue;
+        const name = entry.name;
+        const data = await writeReadMe(category, entry);
+
+        const css = fs.existsSync(`${base}${category}/${name}/${name}.css`);
+        const js = fs.existsSync(`${base}${category}/${name}/${name}.js`);
+        repos[category][name] = {
+            name,
+            description: data.description,
+            beta: data.description.includes('beta'),
+            deprecated: data.description.includes('deprecated'),
+            css, // todo: only set if not default for category
+            js,
+        };
+    }
+
+    // bug: hier wird bei jeder kategorie überschrieben
+    // todo: sollte nur einmal am ende gemacht werden
+    const str = JSON.stringify(repos, null, '  ');
+    const write = Deno.writeTextFile(base+"u2/projects.json", str);
+
+    write.then(() => console.log("File written!"));
+
+});
+
+console.log(repos);
+
+async function writeReadMe(category, entry) {
+    const readme = base+category+'/'+entry.name+'/README.md';
+    await fs.ensureFile(readme);
+    let text = await Deno.readTextFile(readme);
+    text = text.trim();
+
+    const parts = {};
+
+    // split by h2 headings
+    const rawParts = text.split(/[\n^]#{1,2} /);
+    const intro = rawParts.shift();
+
+    for (let part of rawParts) {
+        const lines = part.split('\n');
+        let firstLine = lines[0];
+        let content = lines.slice(1).join('\n').trim();
+        let title = firstLine.replaceAll('#', '').trim();
+        parts[title] = content;
+    }
+
+    // tmp:
+    delete parts.Demo;
+
+    parts.Usage = await UsagePart(category, entry);
+    parts.Install = installPart(category, entry);
+    parts.Demos = await demoPart(category, entry);
+    parts.About = aboutPart();
+
+
+    const orderedParts = {};
+    if (parts.Features) orderedParts.Features = parts.Features;
+    if (parts.Usage) orderedParts.Usage = parts.Usage;
+    if (parts.API) orderedParts.API = parts.API;
+    if (parts.Install) orderedParts.Install = parts.Install;
+    if (parts.Demos) orderedParts.Demos = parts.Demos;
+    for (let key of Object.keys(parts)) {
+        if (orderedParts[key]) continue;
+        if (key === 'About') continue;
+        if (key === 'Thanks') continue;
+        orderedParts[key] = parts[key];
+    }
+    if (parts.About) orderedParts.About = parts.About;
+    if (parts.Thanks) orderedParts.Thanks = parts.Thanks;
+
+    // // remove first 2 lines from into
+    // //let githubData = reposData.get(item);
+    // let introContent = intro.split('\n').slice(2).join('\n').trim();
+    // let content = dedent(`
+    //     # ${repoH1(item)}
+    //     ${githubData?.description}
+
+    //     ${introContent}
+    //     `)+'\n\n';
+    let content = intro.trim()+'\n\n';
+
+    Object.entries(orderedParts).forEach(([key, value])=>{
+        if (value) content += `## ${key}\n\n${value}\n\n`;
+    })
+
+    Deno.writeTextFile(readme, content);
+    return {description: intro.split('\n')[1]??''};
+}
+
+
+
+async function UsagePart(category, entry){
+    const name = entry.name;
+
+    let code = null
+    try {
+        code = await Deno.readTextFile(base+''+category+'/'+name+'/tests/minimal.html');
+    } catch(e) {
+        console.log(e)
+    }
+    if (code) code = code.split('<body>')[1];
+
+
+    let content = '';
+
+    if (code) {
+        let js = code.split(/<script[^>]*>/)?.[1]?.split?.('<\/script>')?.[0];
+        if (js) {
+            content += '```js\n'+dedent(js).trim()+'\n```\n\n';
+        }
+
+        let html = code.split(/<section[^>]*>/)[1].split('<\/section>')[0];
+        if (html) {
+            html = dedent(html);
+            content += '```html\n'+html+'\n```\n\n';
+        }
+
+        let css = code.split(/<style[^>]*>/)?.[1]?.split?.('<\/style>')?.[0];
+        if (css) {
+            content += '```css\n'+dedent(css).trim()+'\n```\n\n';
+        }
+    }
+
+    // if (name.endsWith('.js')) {
+    //     // let version = reposData.get(entry.name)?.release_latest.tag_name;
+    //     // version = version ? version.replace('v','') : 'x.x.x';
+    //     // let docUrl = `https://doc.deno.land/../../../${name}@${version}/${blankName}.js`;
+    //     let docUrl = `https://doc.deno.land/../../../${name}@x/${blankName}.js`;
+    //     content += '[doc]('+docUrl+')  \n';
+    // }
+
+    return content.trim();
+
+}
+
+
+function installPart(category, entry) {
+    const name = entry.name;
+    const baseUrl = 'https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/'+category+'/'+name+'/';
+
+    let html = '';
+    if (category === 'el') {
+        html = dedent(`
+        <link href="${baseUrl}${name}.min.css" rel=stylesheet>
+        <script src="${baseUrl}${name}.min.js" type=module async></script>`);
+    }
+    if (category === 'class') {
+        html = `<link href="${baseUrl}${name}.min.css" rel=stylesheet>`;
+    }
+    if (category === 'attr') {
+        html = `<script src="${baseUrl}${name}.min.js" type=module async></script>`;
+    }
+    if (category === 'js') {
+        const js = `import * as module from "${baseUrl}${name}.min.js"`;
+        return '```js\n'+js+'\n```';
+    }
+    return html ? '```html\n'+html+'\n```' : null;
+}
+
+// function repoH1(name){
+//     const blankName = name.replace(/\.[^.]+$/, '');
+//     if (name.endsWith('.el')) return `&lt;u2-${blankName}&gt; - element`;
+//     if (name.endsWith('.class')) return `.u2-${blankName} - class`;
+//     if (name.endsWith('.attr')) return `[u2-${blankName}] - attribute`;
+//     return name;
+// }
+
+async function demoPart(category, entry){
+    try {
+        let tests = [];
+        for await (const test of Deno.readDir(base+`${category}/${entry.name}/tests/`)) tests.push(test);
+
+        tests = tests.filter(test=>test.isFile && test.name.endsWith('.html'));
+        return tests.map(test=>{
+
+            return `[${test.name}](http://gcdn.li/u2ui/u2@main/${category}/${entry.name}/tests/${test.name})  `
+
+            //return `[${test.name}](https://raw.githack.com/u2ui/${entry.name}/main/tests/${test.name})  `
+
+            // alternatives:
+            // https://gitcdn.link/
+            // https://cdn.statically.io/gh/u2ui/ico.el/main/tests/ico-directory.html
+            // https://gitcdn.link/repo/u2ui/ico.el/main/tests/ico-directory.html
+            // https://www.gitcdn.xyz/repo/u2ui/ico.el/main/tests/ico-directory.html
+            // https://ghcdn.rawgit.org/u2ui/ico.el/main/tests/ico-directory.html
+            // https://combinatronics.com/u2ui/ico.el/main/tests/ico-directory.html
+            //return 'https://htmlpreview.github.io/?' + encodeURI(`https://github.com/u2ui/${entry.name}/blob/main/tests/${test.name}  `);
+        }).join('\n');
+    } catch(e) {
+        //console.log(e)
+    }
+}
+function aboutPart(){
+    return dedent(`
+        - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+        - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+        `);
+}
+
+
+/* helpers */
+function dedent(text) {
+    text = trimLines(text);
+    const lines = text.split('\n');
+    const secondLine = lines[0];
+    if (!secondLine) return text;
+    const indent = secondLine.match(/^\s*/)[0];
+    if (indent.length === 0) return text;
+    return lines.map(line=>line.replace(new RegExp(`^${indent}`), '')).join('\n').trim();
+}
+function trimLines(text){
+    const lines = text.split('\n');
+    while(1) {
+        const line = lines[0];
+        if (line==null) break;
+        if (line.match(/^\s*$/)) lines.shift();
+        else break;
+    }
+    return lines.join('\n');
+}

package/u2/u2.js

@@ -0,0 +1,14 @@
+
+let cachedRepos = null;
+export async function repos(){
+    if (!cachedRepos) {
+        cachedRepos = {};
+        const data = await fetch(import.meta.url + '/../projects.json').then(res=>res.json());
+        for (const category in data) {
+            for (const repo in data[category]) {
+                cachedRepos[category+'/'+repo] = data[category][repo];
+            }
+        }
+    }
+    return cachedRepos;
+}