Skip to content

Commit 37e2f7b

Browse files
developitdevelopit
committed
Initial commit of bootstrapped sourcecode! 🚀
1 parent 03d4b5e commit 37e2f7b

File tree

17 files changed

+260
-0
lines changed

17 files changed

+260
-0
lines changed

‎src/assets/.gitkeep

Whitespace-only changes.

‎src/components/app.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { h, Component } from 'preact';
2+
import { Router } from 'preact-router';
3+
import { bind } from 'decko';
4+
5+
import Header from './header';
6+
import Home from './home';
7+
import Profile from './profile';
8+
9+
10+
export default class App extends Component {
11+
/** Gets fired when the route changes.
12+
* @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
13+
* @param {string} event.url The newly routed URL
14+
*/
15+
@bind
16+
handleRoute(e) {
17+
this.currentUrl = e.url;
18+
}
19+
20+
render() {
21+
return (
22+
<div id="app">
23+
<Header />
24+
<Router onChange={this.handleRoute}>
25+
<Home path="/" />
26+
<Profile path="/profile/" user="me" />
27+
<Profile path="/profile/:user" />
28+
</Router>
29+
</div>
30+
);
31+
}
32+
}

‎src/components/header/index.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { h, Component } from 'preact';
2+
import { Link } from 'preact-router';
3+
import style from './style';
4+
5+
export default class Header extends Component {
6+
render() {
7+
return (
8+
<header class={style.header}>
9+
<h1>App</h1>
10+
<nav>
11+
<Link href="/">Home</Link>
12+
<Link href="/profile">Me</Link>
13+
<Link href="/profile/john">John</Link>
14+
</nav>
15+
</header>
16+
);
17+
}
18+
}

‎src/components/header/style.less

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import '~style/helpers';
2+
3+
.header {
4+
position: fixed;
5+
left: 0;
6+
top: 0;
7+
width: 100%;
8+
height: 56px;
9+
padding: 0;
10+
background: #673AB7;
11+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
12+
z-index: 50;
13+
14+
h1 {
15+
float: left;
16+
margin: 0;
17+
padding: 0 15px;
18+
font-size: 24px;
19+
line-height: 56px;
20+
font-weight: 400;
21+
color: #FFF;
22+
}
23+
24+
nav {
25+
float: right;
26+
font-size: 100%;
27+
28+
a {
29+
display: inline-block;
30+
height: 56px;
31+
line-height: 56px;
32+
padding: 0 15px;
33+
min-width: 50px;
34+
text-align: center;
35+
background: rgba(255,255,255,0);
36+
text-decoration: none;
37+
color: #EEE;
38+
will-change: background-color;
39+
40+
&:hover, &:active {
41+
background: rgba(255,255,255,0.3);
42+
}
43+
}
44+
}
45+
}

‎src/components/home/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { h, Component } from 'preact';
2+
import { Link } from 'preact-router';
3+
import style from './style';
4+
5+
export default class Home extends Component {
6+
render() {
7+
return (
8+
<div class={style.home}>
9+
<h1>Home</h1>
10+
<p>This is the Home component.</p>
11+
</div>
12+
);
13+
}
14+
}

‎src/components/home/style.less

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import '~style/helpers';
2+
3+
.home {
4+
padding: 56px 20px;
5+
min-height: 100%;
6+
width: 100%;
7+
}

‎src/components/profile/index.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { h, Component } from 'preact';
2+
import { Link } from 'preact-router';
3+
import style from './style';
4+
5+
export default class Profile extends Component {
6+
state = {
7+
count: 0
8+
};
9+
10+
// gets called when this route is navigated to
11+
componentDidMount() {
12+
// start a timer for the clock:
13+
this.timer = setInterval(::this.updateTime, 1000);
14+
this.updateTime();
15+
16+
// every time we get remounted, increment a counter:
17+
this.setState({ count: this.state.count+1 });
18+
}
19+
20+
// gets called just before navigating away from the route
21+
componentWillUnmount() {
22+
clearInterval(this.timer);
23+
}
24+
25+
// update the current time
26+
updateTime() {
27+
let time = new Date().toLocaleString();
28+
this.setState({ time });
29+
}
30+
31+
// Note: `user` comes from the URL, courtesy of our router
32+
render({ user }, { time, count }) {
33+
return (
34+
<div class={style.profile}>
35+
<h1>Profile: { user }</h1>
36+
<p>This is the user profile for a user named { user }.</p>
37+
38+
<div>Current time: { time }</div>
39+
<div>Profile route mounted { count } times.</div>
40+
</div>
41+
);
42+
}
43+
}

‎src/components/profile/style.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import '~style/helpers';
2+
3+
.profile {
4+
padding: 56px 20px;
5+
min-height: 100%;
6+
width: 100%;
7+
background: #EEE;
8+
}

‎src/config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"key": "value"
3+
}

‎src/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>preact-boilerplate</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="format-detection" content="telephone=no">
10+
{% if (o.htmlWebpackPlugin.files.favicon) { %}
11+
<link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
12+
{% } %}
13+
{% if (o.htmlWebpackPlugin.files.icon) { %}
14+
<link rel="icon" sizes="192x192" href="{%=o.htmlWebpackPlugin.files.icon%}">
15+
{% } %}
16+
{% for (var css in o.htmlWebpackPlugin.files.css) { %}
17+
<link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
18+
{% } %}
19+
</head>
20+
<body>
21+
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
22+
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
23+
{% } %}
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)