geoff
/
riot-starter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added routing example

This commit is contained in:
Geoff Doty 2019-06-19 17:45:10 -04:00
parent 7ea3b9aee9
commit fd8d03fc11
5 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/css/main.css
View File

@ -3,3 +3,5 @@ body {font-size: 1.2em;}
.header, .footer {
margin: 1.4em 0;
}
code {color: indianred}

5
app/js/app.js
View File

@ -43,6 +43,11 @@ route('/', function () {
riot.mount('#view', 'home');
});
// about page
route('/about', function () {
riot.mount('#view', 'about');
});
// [ start router ] ------------------------------
route.start(true);

42
app/tags/home.tag.html
View File

@ -1,21 +1,21 @@
<Home>
<section class="is-clear">
<h1>RiotJS Kickstarter</h1>
Built your next revolutionary <em>Single Page Application</em> (SPA) starting right here:
<blockquote>/app/tags/home.tag.html</blockquote>
This <strong>seed</strong> kicks your development into high gear with all tools you'll <em>need</em>, and very <em>little</em> you don't.
<ul>
<li><strong>* RiotJS+Compiler</strong> for rapid application prototyping</li>
<li><strong>* Router</strong> to manage url navigation</li>
<li><strong>* Grayscale CSS</strong> for minimal style</li>
</ul>
<strong>No bloat here.</strong>
<p>
</section>
</Home>
<Home>
<section class="">
<h1>RiotJS Kickstarter</h1>
Built your next revolutionary <em>Single Page Application</em> (SPA) starting right here:
<blockquote><code>/app/tags/home.tag.html</code> </blockquote>
This <strong>seed</strong> kicks your development into high gear with all tools you'll <em>need</em>, and very <em>little</em> you don't.
<ul>
<li><strong>* RiotJS+Compiler</strong> for rapid application prototyping</li>
<li><strong>* Router</strong> to manage url navigation</li>
<li><strong>* Grayscale CSS</strong> for minimal style</li>
</ul>
<strong>No bloat here.</strong>
<p>
</section>
</Home>

22
app/tags/layout/footer.tag.html
View File

@ -1,12 +1,12 @@
<Footer>
<section class="footer">
&copy;2018 Your Website |
All rights reserved. |
<a href="http://riotjs.com">RiotJS</a> &nbsp;
<a href="http://n2geoff.github.io/grayscale/">Grayscale CSS</a>
</section>
<style>
.footer {border-top: 1px solid #222; text-align: center; color: #ACACAC}
</style>
<Footer>
<section class="footer">
&copy;2019 Your Website |
All rights reserved. |
<a href="http://riotjs.com">RiotJS</a> &nbsp;
<a href="http://n2geoff.github.io/grayscale/">Grayscale CSS</a>
</section>
<style>
.footer {border-top: 1px solid #222; text-align: center; color: #ACACAC}
</style>
</Footer>

25
app/tags/layout/header.tag.html
View File

@ -1,13 +1,14 @@
<Header>
<section class="header">
<ul class="navbar">
<li class="nav is-large">RiotJS</li>
<li class="nav"><a href="#/">Home</a></li>
</ul>
</section>
<style>
/* scoped styles */
.header {border-bottom: 1px solid #222;}
</style>
<Header>
<section class="nav">
<div class="nav-section">
<div class="is-large">RiotJS</div>
<div class="content"><a href="#/">Home</a></div>
<div class=""><a href="#/about">About</a></div>
</div>
</section>
<style>
/* scoped styles */
.nav {border-bottom: 1px solid #222;}
</style>
</Header>