|
|
|
@ -1,13 +1,16 @@ |
|
|
|
css |
|
|
|
global css |
|
|
|
html, body m:0 p:0 |
|
|
|
body ff:mono bgc:gray9 |
|
|
|
a c:violet6 td:none td@hover:underline |
|
|
|
.active, .activated filter:brightness(130%) |
|
|
|
.active filter:brightness(130%) |
|
|
|
.activated bgc:violet3 |
|
|
|
.disabled, .disabled@hover filter:grayscale(100%) |
|
|
|
.zoomed scale:1.05 |
|
|
|
.button d:inline-block m:2px bgc:none c:violet7 td:none bxs:sm us:none |
|
|
|
.button@hover, .button.active bxs:md filter:hue-rotate(5deg) ml:0px pl:12px td:none |
|
|
|
.button@hover, .button.active bxs:md filter:hue-rotate(5deg) mb:0px pt:12px td:none |
|
|
|
.button, code, .bordered p:10px bd:2px solid violet5 rd:10px d:inline-block |
|
|
|
.bordered p:2.5px bw:1.5px c:violet9 |
|
|
|
.night filter:invert(100%) |
|
|
|
.night filter:invert(20%) |
|
|
|
.gradient |
|
|
|
bg:linear-gradient(to right,violet7,blue6,violet7) |
|
|
|
fw:normal |
|
|
|
@ -19,12 +22,12 @@ tag App |
|
|
|
d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto |
|
|
|
@lt-xs m:0 px:0 rd:0 |
|
|
|
|
|
|
|
<self.night=R.param('night')> |
|
|
|
<self.night=R.param('night') .zoomed=R.param('zoomed')> |
|
|
|
<param-preview> |
|
|
|
<h2.gradient> "pro-router-imba2: Imba2 integration with pro-router" |
|
|
|
<[d:flex flw:wrap w:100% jc:space-between]> |
|
|
|
<Menu> |
|
|
|
<pro-router[mx:40px maw:750px]> |
|
|
|
<app-menu> |
|
|
|
<pro-router[mx:40px]> |
|
|
|
### |
|
|
|
<pro-ref view="b" params={ project: 2}> "b/project/2" |
|
|
|
<pro-ref-f view="c" params={ book: 3}> "c/book/3" |
|
|
|
@ -32,104 +35,26 @@ tag App |
|
|
|
<input$v type='text' value=R.param('e') @keyup=R.write('e', $v.value)> |
|
|
|
### |
|
|
|
|
|
|
|
tag Menu |
|
|
|
<self[d:flex fld:column mx:auto mb: 50px]> |
|
|
|
tag app-menu |
|
|
|
<self[d:flex fld:row flw@lt-xs:wrap mx:auto mb: 50px jc:center]> |
|
|
|
<pro-ref.button view=v> v.toUpperCase! for v in R.views |
|
|
|
### |
|
|
|
<pro-ref.button view="foo"> 'WRONG WAY!' |
|
|
|
<pro-toggle.button param="night"> |
|
|
|
<label> "NIGHT" |
|
|
|
<input type='checkbox' checked=R.param('night')> |
|
|
|
### |
|
|
|
|
|
|
|
tag param-preview |
|
|
|
<self> "{R.view}: {JSON.stringify(R.params).replace(/"/g, ' ')}" |
|
|
|
|
|
|
|
extend tag view-home |
|
|
|
<self> |
|
|
|
"What is " |
|
|
|
<b> "pro-router" |
|
|
|
" you can see here: " |
|
|
|
<a href="http://router.maniak.pro"> "router.maniak.pro" |
|
|
|
<br> |
|
|
|
"What is " |
|
|
|
<a href="https://imba.io"> "imba" |
|
|
|
" you surely know." |
|
|
|
<br> |
|
|
|
"This package integrates both." |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
"Go to your project directory and run:" |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
<code> "npm install pro-router-imba2 --save" |
|
|
|
|
|
|
|
tag view-installation |
|
|
|
<self> |
|
|
|
"For your convenience package provides " |
|
|
|
<b> "vite plugin" |
|
|
|
" and installation command" |
|
|
|
"." |
|
|
|
<br> |
|
|
|
"Vite plugin will automatically define views for the router. Thanks to pro-router paradigm you will not write route definitions at all." |
|
|
|
<br> |
|
|
|
<br> |
|
|
|
"1. Create imba project (or go to directory of an existing one):" |
|
|
|
<br> |
|
|
|
<pre><code> |
|
|
|
""" |
|
|
|
npx imba create my-app |
|
|
|
cd my-app |
|
|
|
npm install |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"2. Install pro-router-imba2 and run development server:" |
|
|
|
<pre><code> |
|
|
|
""" |
|
|
|
npm install pro-router-imba2 --save |
|
|
|
npx pro-router init |
|
|
|
npm run dev |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"3. Add " |
|
|
|
<.bordered> "<pro-router>" |
|
|
|
" component to your app (in " |
|
|
|
<.bordered> "src/main.imba" |
|
|
|
" file)." |
|
|
|
<br> |
|
|
|
"The simplest application would look like this:" |
|
|
|
<imba-code file='src/main.imba'> |
|
|
|
""" |
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'pro-router'} |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"A bit more complex example:" |
|
|
|
<imba-code> |
|
|
|
""" |
|
|
|
{<c-tag-def> 'my-app'} |
|
|
|
{<c-tag> 'self'} |
|
|
|
{<c-tag> "pro-ref{<c-el> ' view'}{<c-op> '='}{<c-el> 'v'}"} {<c-op> 'for'} v {<c-op> 'in'} {<c-c> 'R'}{<c-op> '.'}views {<c-com> 'render menu'} |
|
|
|
{<c-tag> "pro-router"} {<c-com> 'slot for current view'} |
|
|
|
|
|
|
|
{<c-tag-def> 'view-home'} |
|
|
|
{<c-tag> 'self'} 'Hello World!' |
|
|
|
|
|
|
|
{<c-tag-def> 'view-another-view'} |
|
|
|
{<c-tag> 'self'} 'This is another view.' |
|
|
|
|
|
|
|
imba{<c-op> '.'}mount {<c-tag> 'my-app'} |
|
|
|
""" |
|
|
|
<br> |
|
|
|
"4. Everything is already set." |
|
|
|
|
|
|
|
tag imba-code < pre |
|
|
|
prop file |
|
|
|
css bgc:gray8 d:block |
|
|
|
code bd:0 rd:0 |
|
|
|
&.file bgc:amber3 d:block |
|
|
|
prop url |
|
|
|
css |
|
|
|
code d:block bd:0 rd:0 bgc:gray8 |
|
|
|
&.file bgc:amber3 |
|
|
|
&.content c:gray3 |
|
|
|
<self> |
|
|
|
&.url bgc:gray3 |
|
|
|
.url bgc:white c:gray7 rd:full p:4px |
|
|
|
<self[bgc:gray1 bd:1.1px solid gray3 fs:larger]> |
|
|
|
<code.file> file if file |
|
|
|
<code.url><.url> url if url |
|
|
|
<slot name='live'> |
|
|
|
<code.content><slot> |
|
|
|
|
|
|
|
tag c-el |
|
|
|
@ -143,12 +68,10 @@ tag c-com < c-el |
|
|
|
<self> |
|
|
|
"# " |
|
|
|
<slot> |
|
|
|
### |
|
|
|
tag c-class < c-el |
|
|
|
<self[c:amber4]> |
|
|
|
<c-dot> |
|
|
|
<slot> |
|
|
|
### |
|
|
|
tag c-str < c-el |
|
|
|
<self> "'{<[c:amber6 d:inline]><slot>}'" |
|
|
|
global css .c-br c:amber4 d:inline |
|
|
|
|
|
|
|
tag c-tag < c-el |
|
|
|
<self[c:white]> |
|
|
|
"<" |
|
|
|
@ -160,8 +83,14 @@ tag c-tag-def < c-el |
|
|
|
"tag " |
|
|
|
<[c:green5 d:inline]><slot> |
|
|
|
|
|
|
|
tag view-usage |
|
|
|
<self> "List of components" |
|
|
|
tag pro-tip |
|
|
|
<self[bgc:gray0 p:15px]> |
|
|
|
<[c:violet7 fw:bold txs:amber4 bdb:1.5px solid violet4]> "PRO TIP: " |
|
|
|
<slot> |
|
|
|
|
|
|
|
import './views/home.imba' |
|
|
|
import './views/installation.imba' |
|
|
|
import './views/usage.imba' |
|
|
|
|
|
|
|
tag view-examples |
|
|
|
<self> "Examples:" |
|
|
|
|
