|
1 |
| -<div class="bg-secondary"> |
2 |
| - <h4>Parent</h4> |
3 |
| - <h5>YIELD PARENT IN CHILD-PARENT.html</h5> |
4 |
| - Test |
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en" class="h-100"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | + <title>PostHTML X Components</title> |
| 7 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> |
| 8 | + <style> |
| 9 | + .doc-shadow { |
| 10 | + box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, |
| 11 | + rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, |
| 12 | + rgba(0, 0, 0, 0.1) 0px 1px 2px -1px !important; |
| 13 | + } |
| 14 | + </style> |
| 15 | + </head> |
| 16 | + <body class="d-flex flex-column h-100 bg-light"> |
| 17 | + <header class="py-3 mb-4"> |
| 18 | + <div class="container-lg"> |
| 19 | + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between"> |
| 20 | + <a href="index.html" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none h5"><x-components/></a> |
| 21 | + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> |
| 22 | + <li> |
| 23 | + <a class="nav-link px-2 link-dark" href="index.html">Home</a> |
| 24 | + </li> |
| 25 | + <li> |
| 26 | + <a class="nav-link px-2 link-dark" href="docs.html">Docs</a> |
| 27 | + </li> |
| 28 | + <li> |
| 29 | + <a class="nav-link px-2 link-dark" href="https://github.com/posthtml" target="_blank">PostHTML</a> |
| 30 | + </li> |
| 31 | + <li> |
| 32 | + <a class="nav-link px-2 link-dark d-block d-md-none" href="https://www.npmjs.com/package/posthtml-component" target="_blank">NPM</a> |
| 33 | + </li> |
| 34 | + <li> |
| 35 | + <a class="nav-link px-2 link-dark d-block d-md-none" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a> |
| 36 | + </li> |
| 37 | + </ul> |
| 38 | + <div class="col-md-3 text-end d-none d-md-block"> |
| 39 | + <a class="btn btn-light bg-white doc-shadow border-white me-3" href="https://www.npmjs.com/package/posthtml-component" target="_blank">NPM</a> |
| 40 | + <a class="btn btn-light bg-white doc-shadow border-white" href="https://github.com/thewebartisan7/posthtml-components" target="_blank">GitHub</a> |
| 41 | + </div> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + </header> |
| 45 | + <main class="flex-shrink-0"> |
| 46 | + <div class="container-lg"> |
| 47 | + <div class="row"> |
| 48 | + <div class="col-lg-8"> |
| 49 | + <h1 class="display-1 fw-bold mb-4">Demo</h1> |
| 50 | + <div class="wrapper"> |
| 51 | + <div class="demo my-demo" something="alocal"> |
| 52 | + <h1>anObjectDefault</h1> |
| 53 | + <p> |
| 54 | + <strong>first</strong> |
| 55 | + : First default item |
| 56 | + </p> |
| 57 | + <p> |
| 58 | + <strong>second</strong> |
| 59 | + : Second default item |
| 60 | + </p> |
| 61 | + <h1>anObjectOverride</h1> |
| 62 | + <p> |
| 63 | + <strong>third</strong> |
| 64 | + : Third override item |
| 65 | + </p> |
| 66 | + <p> |
| 67 | + <strong>fourth</strong> |
| 68 | + : Fourth override item |
| 69 | + </p> |
| 70 | + <h1>anObjectMerged</h1> |
| 71 | + <p> |
| 72 | + <strong>first</strong> |
| 73 | + : First merged item |
| 74 | + </p> |
| 75 | + <p> |
| 76 | + <strong>second</strong> |
| 77 | + : Second merged item |
| 78 | + </p> |
| 79 | + <p> |
| 80 | + <strong>anObjectMerged1</strong> |
| 81 | + : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"} |
| 82 | + </p> |
| 83 | + <p> |
| 84 | + <strong>third</strong> |
| 85 | + : Third merged item |
| 86 | + </p> |
| 87 | + <p> |
| 88 | + <strong>fourth</strong> |
| 89 | + : Fourth merged item |
| 90 | + </p> |
| 91 | + <h1>aStringDefault</h1> |
| 92 | + <p>My default string</p> |
| 93 | + <h1>aStringOverride</h1> |
| 94 | + <p>My override string changed</p> |
| 95 | + <hr> |
| 96 | + <h1>post</h1> |
| 97 | + My post title My post body |
| 98 | + <p> |
| 99 | + <strong>1</strong> |
| 100 | + : My comment 1 |
| 101 | + </p> |
| 102 | + <p> |
| 103 | + <strong>2</strong> |
| 104 | + : My comment 2 |
| 105 | + </p> |
| 106 | + <p> |
| 107 | + <strong>1</strong> |
| 108 | + : My comment 1 new |
| 109 | + </p> |
| 110 | + <p> |
| 111 | + <strong>3</strong> |
| 112 | + : My comment 3 |
| 113 | + </p> |
| 114 | + <h1>anArrayOfObjects</h1> |
| 115 | + <p> |
| 116 | + <strong>0</strong> |
| 117 | + : {"id":1,"title":"My default title 1"} |
| 118 | + </p> |
| 119 | + <p> |
| 120 | + <strong>1</strong> |
| 121 | + : {"id":2,"title":"My default title 2"} |
| 122 | + </p> |
| 123 | + <p> |
| 124 | + <strong>2</strong> |
| 125 | + : {"id":1,"title":"My new title 1"} |
| 126 | + </p> |
| 127 | + <p> |
| 128 | + <strong>3</strong> |
| 129 | + : {"id":2,"title":"My new title 2","somethingnew":"New"} |
| 130 | + </p> |
| 131 | + <h1>anArray</h1> |
| 132 | + <p> |
| 133 | + <strong>0</strong> |
| 134 | + : first |
| 135 | + </p> |
| 136 | + <p> |
| 137 | + <strong>1</strong> |
| 138 | + : second |
| 139 | + </p> |
| 140 | + <p> |
| 141 | + <strong>2</strong> |
| 142 | + : first |
| 143 | + </p> |
| 144 | + <p> |
| 145 | + <strong>3</strong> |
| 146 | + : third |
| 147 | + </p> |
| 148 | + <p> |
| 149 | + <strong>4</strong> |
| 150 | + : fourth |
| 151 | + </p> |
| 152 | + <p> |
| 153 | + <strong>5</strong> |
| 154 | + : ten |
| 155 | + </p> |
| 156 | + <hr> |
| 157 | + <h1>aComputed</h1> |
| 158 | + <p>Yes</p> |
| 159 | + My filled slot |
| 160 | + Hello |
| 161 | + </div> |
| 162 | + </div> |
| 163 | + <hr> |
| 164 | + <div class="bg-secondary"> |
| 165 | + <h4>Parent</h4> |
| 166 | + <h5>YIELD PARENT IN CHILD-PARENT.html</h5> |
| 167 | + Test |
5 | 168 |
|
6 | 169 |
|
7 | 170 |
|
8 | 171 |
|
9 | 172 | SLOT PARENT INSIDE CHILD-PARENT.html
|
10 |
| -</div> |
11 |
| -<div class="bg-warning"> |
12 |
| - <h4>Child</h4> |
13 |
| - <h5>YIELD CHILD INSIDE CHILD-PARENT.html</h5> |
14 |
| - SLOT CHILD INSIDE CHILD-PARENT.html |
15 |
| -</div> |
16 |
| -<div class="bg-secondary"> |
17 |
| - <h4>Parent</h4> |
18 |
| - <h5>YIELD PARENT IN TEST.html</h5> |
19 |
| - undefined |
20 |
| - |
21 |
| - |
| 173 | + </div> |
| 174 | + <div class="bg-warning"> |
| 175 | + <h4>Child</h4> |
| 176 | + <h5>YIELD CHILD INSIDE CHILD-PARENT.html</h5> |
| 177 | + SLOT CHILD INSIDE CHILD-PARENT.html |
| 178 | + </div> |
| 179 | + <div class="bg-secondary"> |
| 180 | + <h4>Parent</h4> |
| 181 | + <h5>YIELD PARENT IN TEST.html</h5> |
| 182 | + undefined |
| 183 | + |
| 184 | + |
22 | 185 |
|
23 | 186 |
|
24 |
| - SLOT PARENT INSIDE TEST.html |
25 |
| -</div> |
26 |
| -<div class="bg-warning"> |
27 |
| - <h4>Child</h4> |
28 |
| - <h5>YIELD CHILD INSIDE TEST.html</h5> |
29 |
| - SLOT CHILD INSIDE TEST.html |
30 |
| -</div> |
| 187 | + SLOT PARENT INSIDE TEST.html |
| 188 | + </div> |
| 189 | + <div class="bg-warning"> |
| 190 | + <h4>Child</h4> |
| 191 | + <h5>YIELD CHILD INSIDE TEST.html</h5> |
| 192 | + SLOT CHILD INSIDE TEST.html |
| 193 | + </div> |
| 194 | + </div> |
| 195 | + </div> |
| 196 | + </div> |
| 197 | + </main> |
| 198 | + <footer class="footer mt-auto py-3"> |
| 199 | + <div class="container-lg"> |
| 200 | + <div class="text-muted text-center"> |
| 201 | + Handcrafted with |
| 202 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill d-inline mx-1 text-danger" viewbox="0 0 16 16"> |
| 203 | + <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path> |
| 204 | + </svg> |
| 205 | + and |
| 206 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cup-hot-fill d-inline mx-1 text-warning" viewbox="0 0 16 16"> |
| 207 | + <path fill-rule="evenodd" d="M.5 6a.5.5 0 0 0-.488.608l1.652 7.434A2.5 2.5 0 0 0 4.104 16h5.792a2.5 2.5 0 0 0 2.44-1.958l.131-.59a3 3 0 0 0 1.3-5.854l.221-.99A.5.5 0 0 0 13.5 6H.5ZM13 12.5a2.01 2.01 0 0 1-.316-.025l.867-3.898A2.001 2.001 0 0 1 13 12.5Z"></path> |
| 208 | + <path d="m4.4.8-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 3.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 3.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 3 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 4.4.8Zm3 0-.003.004-.014.019a4.167 4.167 0 0 0-.204.31 2.327 2.327 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.31 3.31 0 0 1-.202.388 5.444 5.444 0 0 1-.253.382l-.018.025-.005.008-.002.002A.5.5 0 0 1 6.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 6.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 6 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 7.4.8Zm3 0-.003.004-.014.019a4.077 4.077 0 0 0-.204.31 2.337 2.337 0 0 0-.141.267c-.026.06-.034.092-.037.103v.004a.593.593 0 0 0 .091.248c.075.133.178.272.308.445l.01.012c.118.158.26.347.37.543.112.2.22.455.22.745 0 .188-.065.368-.119.494a3.198 3.198 0 0 1-.202.388 5.385 5.385 0 0 1-.252.382l-.019.025-.005.008-.002.002A.5.5 0 0 1 9.6 4.2l.003-.004.014-.019a4.149 4.149 0 0 0 .204-.31 2.06 2.06 0 0 0 .141-.267c.026-.06.034-.092.037-.103a.593.593 0 0 0-.09-.252A4.334 4.334 0 0 0 9.6 2.8l-.01-.012a5.099 5.099 0 0 1-.37-.543A1.53 1.53 0 0 1 9 1.5c0-.188.065-.368.119-.494.059-.138.134-.274.202-.388a5.446 5.446 0 0 1 .253-.382l.025-.035A.5.5 0 0 1 10.4.8Z"></path> |
| 209 | + </svg> |
| 210 | + in Swiss Alp by |
| 211 | + <a href="https://github.com/thewebartisan7" class="text-muted text-decoration-none fst-italic" target="_blank">@thewebartisan7</a> |
| 212 | + </div> |
| 213 | + </div> |
| 214 | + </footer> |
| 215 | + <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog"> |
| 216 | + <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom"> |
| 217 | + <div class="modal-content modal-content-custom"> |
| 218 | + <div class="modal-header"> |
| 219 | + <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5> |
| 220 | + <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| 221 | + </div> |
| 222 | + <!-- /.modal-header --> |
| 223 | + <div class="modal-body"> |
| 224 | + <h3 id="1.0.0-beta.4-(2022-10-23)" tabindex="-1"> |
| 225 | + <a class="header-anchor" href="#1.0.0-beta.4-(2022-10-23)">#</a> |
| 226 | + 1.0.0-beta.4 (2022-10-23) |
| 227 | + </h3> |
| 228 | + <ul> |
| 229 | + <li>Refactor with underscore.js</li> |
| 230 | + <li>Optionally set attributes to any nodes not only the first one</li> |
| 231 | + <li>Added more docs</li> |
| 232 | + </ul> |
| 233 | + <h3 id="1.0.0-beta.3-(2022-10-21)" tabindex="-1"> |
| 234 | + <a class="header-anchor" href="#1.0.0-beta.3-(2022-10-21)">#</a> |
| 235 | + 1.0.0-beta.3 (2022-10-21) |
| 236 | + </h3> |
| 237 | + <ul> |
| 238 | + <li>Apply additional plugins to tree</li> |
| 239 | + </ul> |
| 240 | + <h3 id="1.0.0-beta.2-(2022-10-20)" tabindex="-1"> |
| 241 | + <a class="header-anchor" href="#1.0.0-beta.2-(2022-10-20)">#</a> |
| 242 | + 1.0.0-beta.2 (2022-10-20) |
| 243 | + </h3> |
| 244 | + <ul> |
| 245 | + <li>First beta release</li> |
| 246 | + </ul> |
| 247 | + </div> |
| 248 | + <!-- /.modal-body --> |
| 249 | + <div class="modal-footer"> |
| 250 | + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
| 251 | + </div> |
| 252 | + <!-- /.modal-footer --> |
| 253 | + </div> |
| 254 | + <!-- /.modal-content --> |
| 255 | + </div> |
| 256 | + <!-- /.modal-dialog --> |
| 257 | + </div> |
| 258 | + <!-- /.modal --> |
| 259 | + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script> |
| 260 | + </body> |
| 261 | +</html> |
0 commit comments