docs

2025-06-27 01:13:12 +00:00 · 2021-10-29 17:09:15 +03:00
parent 1e8ae99d39
commit b3479dbdbd
35 changed files with 857 additions and 166 deletions
--- a/docs/android-chrome-192x192.png
+++ b/docs/android-chrome-192x192.png
--- a/docs/android-chrome-512x512.png
+++ b/docs/android-chrome-512x512.png
--- a/docs/apple-touch-icon.png
+++ b/docs/apple-touch-icon.png
--- a/docs/browserconfig.xml
+++ b/docs/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffc40d</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/docs/favicon-16x16.png
+++ b/docs/favicon-16x16.png
--- a/docs/favicon-32x32.png
+++ b/docs/favicon-32x32.png
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/img/logo.png
+++ b/docs/img/logo.png
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,112 @@
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta charset="UTF-8" content="">
+
+
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#ffc40d">
+    <meta name="theme-color" content="#ffffff">
+
+    
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+    <link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+
+    <!--IUI 2.0 -->
+    <link href="../css/iui.css" rel="stylesheet" />
+    <script src="../src/iui.js" type="module"></script>
+    
+    <script src="js/docs.js"></script>
+
+    <style>
+        body {
+            font-family: Segoe UI;
+        }
+
+        pre {
+            border: 3px solid #c2c2c2;
+            box-shadow: green;
+            margin: 0;
+            padding: 10px;
+            background: #f8f8f8;
+        }
+
+        .top {
+            border-bottom: 1px solid silver;
+            flex: 1;
+            padding: 2px 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .header {
+            height: 110px;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <i-app>
+        <div class="header">
+            <div class="top">
+                <img src="img/logo.png" style="height: 40;">
+                <h2>Docs</h2>
+                
+            </div>
+            <div style="padding: 10px;">
+                <i-location></i-location>
+            </div>
+        </div>
+
+        <div style="display: flex">
+            <i-navbar style="padding: 10px">
+
+            </i-navbar>
+            <i-router type="hash" style="height: 100vh; width: 100vw;">
+                <i-route name="getting-started" caption="Getting started" :content="load(this)">
+                    <i-route name="install" caption="Install" :content="load(this)">
+                    </i-route>
+
+                    <i-route name="first" caption="First App" :content="load(this)">
+                    </i-route>
+
+                    <i-route name="declarative" caption="Declarative Rendering" :content="load(this)">
+                    </i-route>
+                    <i-route name="data-flow" caption="Data Flow" :content="load(this)">
+                    </i-route>
+
+
+                </i-route>
+
+
+
+                <i-route name="getting-started2" caption="Getting started">
+                    Getting started
+                
+                    <i-route name="install" caption="Install">
+                        
+                    </i-route>
+
+                    <i-index></i-index>
+                </i-route>
+
+
+            </i-router>
+        </div>
+    </i-app>
+</body>
+</html>
--- a/docs/js/docs.js
+++ b/docs/js/docs.js
@ -0,0 +1,16 @@
+
+
+marked.setOptions({
+    highlight: function(code, lang) {
+        return hljs.highlight(lang, code).value;
+    }
+});    
+
+async function load(route) {
+    var link = "md/" + route.link + ".md";
+    let content = await fetch(link);
+    if (content.status != 200)
+        return "Not found " + content.url;
+    var md = marked(await content.text());
+    return md;
+}
--- a/docs/md/getting-started.md
+++ b/docs/md/getting-started.md
@ -0,0 +1,17 @@
+# Compatibility
+IUI depends on Web Components (customElement) to render its widgets.
+
+*PC*
+
+| Chrome | Firefox | Edge | IE | Opera | Safari |
+|:------:|:--------|:----:|:--:|:-----:|--------|
+| 54     | 79      | 63   | No | 41    | 10.1   |
+ ------------------------------------------------
+
+*Mobile*
+
+| Android WebView  | Chrome Android | Firefox Android | Safari iOS | Samsung Internet |
+| :--------------: | :-------------:| :--------------:|:----------:| :--------------: |
+| 54               |    54          |       63        | 10.3       | 6.0              | 
+ -------------------------------------------------------------------------------------
+
--- a/docs/md/getting-started/data-flow.md
+++ b/docs/md/getting-started/data-flow.md
@ -0,0 +1,12 @@
+# Data flow
+
+When the :data attribute is set to an element any other attribute and child will be able to access this field directly using the variable *data* or the shortended *d*.
+
+
+<i-codepreview>
+    <div :data="{name: 'Ahmed Zamil', job: 'Developer'} ">
+        My name is ${d.name} and I work as a ${d.job}.
+    </div>
+</i-codepreview>
+
+ 
--- a/docs/md/getting-started/declarative.md
+++ b/docs/md/getting-started/declarative.md
@ -0,0 +1,51 @@
+# Declarative Rendering
+
+# Text nodes
+Text nodes are enclosed with `${...}`
+<i-codepreview>
+    ${ navigator.userAgent }
+</i-codepreview>
+
+# Fields
+ starts with `:`
+<i-codepreview>
+    <input :value="navigator.userAgent">
+</i-codepreview>
+ 
+# Attributes
+ starts with `::`
+<i-codepreview>
+    <input ::placeholder="navigator.appName">
+</i-codepreview>
+ 
+# Asynchronous
+
+*Promise*
+Promises are automatically resolved.
+
+<i-codepreview>
+    ${fetch("md/hello.md")}
+</i-codepreview>
+
+*Await*
+To use await in text nodes **async** attribute must be added to the parent element
+
+
+<i-codepreview>
+    <div async>
+        ${await (await fetch("md/hello.md")).text()}
+    </div>
+</i-codepreview>
+
+In attributes, the attribute name must be preceded with **async:**
+
+<i-codepreview>
+<input async:value = "await (await fetch('md/hello.md')).text()">
+</i-codepreview>
+
+Attributes are similar they must start with *async::*
+
+
+<i-codepreview>
+<input async::placeholder = "await (await fetch('md/hello.md')).text()">
+</i-codepreview>
--- a/docs/md/getting-started/first.md
+++ b/docs/md/getting-started/first.md
@ -0,0 +1,14 @@
+
+```html
+<html>
+    <head>
+        <link href="node_modules/css/iui.css" rel="stylesheet" />
+        <script src="node_modules/src/iui.js" type="module"></script>
+    </head>
+    <body>
+        <i-app>
+            Current time: ${new Date()}
+        </i-app>
+    </body>
+</html>
+```
--- a/docs/md/getting-started/install.md
+++ b/docs/md/getting-started/install.md
@ -0,0 +1,15 @@
+
+NPM
+
+```html
+npm install @esiur/iui
+```
+
+Include in web page
+
+# 
+```html
+    <link href="node_modules/css/iui.css" rel="stylesheet" />
+    <script src="node_modules/src/iui.js" type="module"></script>
+```
+
--- a/docs/md/hello.md
+++ b/docs/md/hello.md
@ -0,0 +1 @@
+Hello World !
--- a/docs/mstile-150x150.png
+++ b/docs/mstile-150x150.png
--- a/docs/safari-pinned-tab.svg
+++ b/docs/safari-pinned-tab.svg
@ -0,0 +1,73 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="554.000000pt" height="554.000000pt" viewBox="0 0 554.000000 554.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,554.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M368 4131 c-18 -15 -59 -36 -91 -45 -32 -9 -60 -23 -63 -31 -3 -8 -1
+-30 6 -49 10 -32 14 -34 43 -29 18 2 48 1 67 -4 l35 -9 27 -120 c23 -97 26
+-123 16 -142 -9 -17 -9 -25 0 -34 7 -7 12 -36 12 -66 0 -42 3 -53 14 -49 11 4
+20 -26 40 -131 14 -75 22 -139 18 -142 -8 -6 -14 -70 -6 -70 2 0 9 10 14 23 6
+16 9 5 9 -45 1 -36 5 -68 10 -70 5 -1 11 -21 13 -43 3 -22 3 -32 1 -22 -2 9
+-9 17 -14 17 -12 0 -12 -35 0 -58 22 -41 33 -103 27 -139 -9 -46 -9 -45 3
+-108 5 -27 10 -77 11 -110 0 -33 9 -102 19 -152 10 -51 14 -93 10 -93 -4 0 -7
+-33 -8 -72 -2 -137 -9 -191 -25 -200 -13 -7 -14 -13 -6 -29 6 -11 9 -23 6 -27
+-3 -4 -1 -14 4 -21 4 -8 4 -28 -1 -45 -6 -20 -6 -45 2 -73 6 -24 8 -50 3 -60
+-4 -10 -9 -29 -11 -43 -1 -14 -7 -58 -13 -98 -6 -45 -7 -79 -1 -90 7 -13 -2
+-36 -35 -92 -24 -41 -45 -78 -46 -82 -2 -5 -34 -17 -71 -27 -104 -30 -142 -52
+-142 -80 0 -14 11 -32 27 -44 24 -18 32 -19 67 -9 25 8 65 10 109 6 42 -4 89
+-2 118 5 39 9 89 9 242 -4 173 -14 195 -14 222 0 17 9 30 18 30 21 0 14 -25
+50 -44 64 -41 28 -116 103 -136 135 -11 17 -29 62 -40 98 -12 37 -25 67 -30
+67 -6 0 -10 8 -10 18 -1 9 -8 35 -16 57 -26 66 -34 133 -21 162 9 21 8 27 -7
+38 -16 12 -17 20 -5 107 6 51 12 128 13 171 0 43 6 81 11 85 6 4 11 48 11 97
+1 50 9 140 17 200 9 61 16 128 16 150 0 73 41 488 62 620 49 313 128 547 208
+619 27 24 27 38 -2 72 l-23 26 -127 -12 c-70 -7 -148 -10 -174 -6 -30 4 -51 2
+-61 -6 -19 -16 -212 -25 -212 -10 0 11 -68 62 -82 62 -4 0 -22 -13 -40 -29z
+m414 -136 c14 -6 15 -96 1 -175 -5 -33 -7 -31 -19 33 -7 37 -20 82 -28 99 -9
+17 -16 35 -16 40 0 9 41 11 62 3z"/>
+<path d="M4578 4132 c-18 -15 -59 -36 -91 -46 -61 -18 -73 -31 -63 -69 10 -39
+22 -50 42 -40 12 7 35 6 64 -2 l45 -11 27 -124 c20 -92 24 -126 15 -132 -9 -5
+-8 -16 1 -42 7 -20 11 -40 8 -45 -10 -16 6 -72 19 -68 13 6 69 -264 57 -273
+-8 -6 -14 -70 -6 -70 2 0 9 10 14 23 6 16 9 3 9 -51 1 -46 5 -71 11 -67 6 4
+10 -5 10 -19 0 -14 -4 -26 -10 -26 -12 0 -13 -52 -2 -65 5 -6 15 -29 22 -53
+11 -35 11 -52 2 -89 -8 -29 -9 -49 -3 -57 9 -11 15 -65 25 -216 2 -30 6 -62 9
+-70 19 -55 6 -368 -16 -382 -13 -8 -11 -67 3 -82 4 -4 3 -22 -2 -39 -8 -22 -8
+-43 2 -80 9 -37 10 -51 1 -56 -6 -4 -11 -21 -11 -37 0 -27 -13 -127 -20 -149
+-2 -5 0 -22 4 -37 6 -22 0 -42 -33 -101 -23 -41 -47 -79 -54 -84 -6 -5 -42
+-18 -78 -27 -126 -33 -158 -73 -97 -119 24 -18 32 -19 67 -9 25 8 65 10 109 6
+42 -4 89 -2 119 5 39 10 88 9 240 -4 174 -15 195 -15 222 -1 28 15 29 18 20
+46 -6 16 -15 30 -19 30 -17 0 -132 114 -155 154 -13 23 -29 61 -35 86 -7 25
+-17 52 -24 60 -14 16 -51 133 -60 188 -3 17 0 44 6 58 10 22 10 28 -6 40 -18
+12 -18 19 -6 111 7 54 12 128 11 164 -2 45 2 71 11 79 8 8 12 31 10 64 -2 28
+4 108 13 176 9 69 19 159 21 200 5 105 42 500 55 590 44 306 128 571 208 658
+24 26 29 37 22 55 -18 47 -30 50 -166 37 -69 -7 -146 -10 -172 -6 -29 4 -51 2
+-60 -6 -19 -15 -213 -24 -213 -10 0 11 -68 62 -82 62 -4 0 -22 -13 -40 -28z
+m416 -138 c8 -3 13 -11 11 -17 -2 -7 -6 -52 -9 -101 -3 -49 -7 -91 -9 -92 -2
+-2 -9 29 -16 69 -6 39 -18 83 -26 97 -8 14 -14 31 -15 38 0 12 37 16 64 6z"/>
+<path d="M2026 4021 c-3 -5 -10 -73 -16 -152 -6 -79 -15 -160 -21 -179 -5 -19
+-16 -156 -24 -305 -43 -769 -92 -1280 -151 -1578 -30 -155 -36 -170 -80 -224
+-67 -82 -138 -133 -246 -176 -109 -45 -125 -62 -92 -98 21 -24 72 -25 169 -3
+87 19 217 21 450 5 266 -18 542 -19 588 -3 31 12 37 18 37 43 0 25 -7 32 -47
+52 -39 18 -59 39 -110 112 -127 184 -236 437 -287 666 -49 218 -51 313 -28
+1069 l20 685 -24 33 c-38 50 -121 82 -138 53z m52 -2214 c23 -63 42 -121 42
+-130 0 -21 -20 -21 -65 -3 -49 21 -65 59 -65 161 0 82 1 85 23 85 19 0 28 -15
+65 -113z"/>
+<path d="M3392 3958 c-44 -86 -49 -144 -30 -348 11 -118 10 -129 -10 -190 -56
+-169 -75 -369 -62 -628 10 -179 34 -447 49 -542 6 -36 4 -66 -5 -96 -7 -23
+-16 -87 -19 -141 -14 -192 -49 -301 -140 -428 -52 -73 -170 -185 -195 -185
+-10 0 -47 -9 -83 -20 -100 -31 -138 -93 -77 -125 49 -25 109 -28 170 -8 49 16
+80 17 290 12 240 -5 285 -1 295 31 5 15 18 18 87 19 45 1 84 4 88 6 3 2 71 -6
+150 -17 l144 -21 18 23 c36 44 18 61 -84 80 -27 5 -62 17 -80 26 -49 25 -123
+99 -169 170 -39 61 -43 74 -66 212 -88 556 -140 1078 -150 1518 l-6 272 32 7
+c34 7 40 25 14 46 -31 26 -54 97 -59 187 -3 48 -7 97 -10 109 -10 52 -71 72
+-92 31z m62 -2411 c20 -119 20 -117 -4 -88 -17 19 -20 38 -20 109 0 47 2 83 4
+81 3 -2 12 -48 20 -102z m186 -69 c21 -23 27 -58 10 -58 -5 0 -12 11 -16 24
+-3 14 -12 27 -20 30 -16 6 -19 26 -4 26 5 0 18 -10 30 -22z m-470 -98 c0 -5
+-7 -10 -16 -10 -8 0 -12 5 -9 10 3 6 10 10 16 10 5 0 9 -4 9 -10z"/>
+</g>
+</svg>
--- a/docs/site.webmanifest
+++ b/docs/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}