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 { .header, .footer {
margin: 1.4em 0; margin: 1.4em 0;
} }
code {color: indianred}

5
app/js/app.js
View File

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

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

@ -1,21 +1,21 @@
<Home> <Home>
<section class="is-clear"> <section class="">
<h1>RiotJS Kickstarter</h1> <h1>RiotJS Kickstarter</h1>
Built your next revolutionary <em>Single Page Application</em> (SPA) starting right here: Built your next revolutionary <em>Single Page Application</em> (SPA) starting right here:
<blockquote>/app/tags/home.tag.html</blockquote> <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. 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> <ul>
<li><strong>* RiotJS+Compiler</strong> for rapid application prototyping</li> <li><strong>* RiotJS+Compiler</strong> for rapid application prototyping</li>
<li><strong>* Router</strong> to manage url navigation</li> <li><strong>* Router</strong> to manage url navigation</li>
<li><strong>* Grayscale CSS</strong> for minimal style</li> <li><strong>* Grayscale CSS</strong> for minimal style</li>
</ul> </ul>
<strong>No bloat here.</strong> <strong>No bloat here.</strong>
<p> <p>
</section> </section>
</Home> </Home>

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

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

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

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