Skip to content

Commit bdf30af

Browse files
ryansolidryansolid
committed
Basic article loading
1 parent b57ecf9 commit bdf30af

16 files changed

Lines changed: 559 additions & 443 deletions

‎package-lock.json‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@
2626
"devDependencies": {
2727
"@babel/core": "7.6.2",
2828
"@babel/plugin-syntax-dynamic-import": "7.2.0",
29-
"babel-preset-solid": "0.1.1",
30-
"rollup": "1.22.0",
29+
"babel-preset-solid": "0.2.1",
30+
"rollup": "1.26.0",
3131
"rollup-plugin-babel": "4.3.3",
3232
"rollup-plugin-clear": "^2.0.7",
3333
"rollup-plugin-node-resolve": "5.2.0",
3434
"rollup-plugin-serve": "^1.0.1",
3535
"rollup-plugin-terser": "5.1.2",
36-
"solid-js": "0.11.4"
36+
"solid-js": "0.13.0"
3737
}
3838
}

‎src/components/App.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const NavBar = lazy(() => import("./NavBar")),
99
Article = lazy(() => import("./Article"));
1010

1111
export default () => {
12-
const [CommonStore, UserStore, { match }] = useStore(
12+
const [CommonStore, UserStore, { match, getParams }] = useStore(
1313
"common",
1414
"user",
1515
"router"
@@ -18,17 +18,19 @@ export default () => {
1818
if (!CommonStore.state.token) CommonStore.setAppLoaded();
1919
else UserStore.pullUser().finally(() => CommonStore.setAppLoaded());
2020

21-
return <>
22-
<NavBar />
23-
<Show when={(CommonStore.state.appLoaded)}>
24-
<Switch>
25-
<Match when={(match(''))}><Home /></Match>
26-
<Match when={(match('editor'))}><Editor /></Match>
27-
<Match when={(match('settings'))}><Settings /></Match>
28-
<Match when={(match('login'))}><Auth /></Match>
29-
<Match when={(match('register'))}><Auth /></Match>
30-
<Match when={(match('article'))}><Article /></Match>
31-
</Switch>
32-
</Show>
33-
</>;
21+
return (
22+
<>
23+
<NavBar />
24+
<Show when={CommonStore.state.appLoaded}>
25+
<Switch>
26+
<Match when={match("")}><Home /></Match>
27+
<Match when={match("editor")}><Editor {...getParams()} /></Match>
28+
<Match when={match("settings")}><Settings /></Match>
29+
<Match when={match("login")}><Auth /></Match>
30+
<Match when={match("register")}><Auth /></Match>
31+
<Match when={match("article")}><Article {...getParams()} /></Match>
32+
</Switch>
33+
</Show>
34+
</>
35+
);
3436
};

‎src/components/Article.js‎

Lines changed: 120 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,139 @@
11
export default () => {
2-
return <div class="article-page">
3-
4-
<div class="banner">
5-
<div class="container">
6-
7-
<h1>How to build webapps that scale</h1>
8-
9-
<div class="article-meta">
10-
<a href=""><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
11-
<div class="info">
12-
<a href="" class="author">Eric Simons</a>
13-
<span class="date">January 20th</span>
2+
return (
3+
<div class="article-page">
4+
<div class="banner">
5+
<div class="container">
6+
<h1>How to build webapps that scale</h1>
7+
8+
<div class="article-meta">
9+
<a href="">
10+
<img src="http://i.imgur.com/Qr71crq.jpg" />
11+
</a>
12+
<div class="info">
13+
<a href="" class="author">
14+
Eric Simons
15+
</a>
16+
<span class="date">January 20th</span>
17+
</div>
18+
<button class="btn btn-sm btn-outline-secondary">
19+
<i class="ion-plus-round"></i>
20+
&nbsp; Follow Eric Simons <span class="counter">(10)</span>
21+
</button>
22+
&nbsp;&nbsp;
23+
<button class="btn btn-sm btn-outline-primary">
24+
<i class="ion-heart"></i>
25+
&nbsp; Favorite Post <span class="counter">(29)</span>
26+
</button>
1427
</div>
15-
<button class="btn btn-sm btn-outline-secondary">
16-
<i class="ion-plus-round"></i>
17-
&nbsp;
18-
Follow Eric Simons <span class="counter">(10)</span>
19-
</button>
20-
&nbsp;&nbsp;
21-
<button class="btn btn-sm btn-outline-primary">
22-
<i class="ion-heart"></i>
23-
&nbsp;
24-
Favorite Post <span class="counter">(29)</span>
25-
</button>
2628
</div>
27-
2829
</div>
29-
</div>
30-
31-
<div class="container page">
3230

33-
<div class="row article-content">
34-
<div class="col-md-12">
35-
<p>
36-
Web development technologies have evolved at an incredible clip over the past few years.
37-
</p>
38-
<h2 id="introducing-ionic">Introducing RealWorld.</h2>
39-
<p>It's a great solution for learning how other frameworks work.</p>
40-
</div>
41-
</div>
42-
43-
<hr />
44-
45-
<div class="article-actions">
46-
<div class="article-meta">
47-
<a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
48-
<div class="info">
49-
<a href="" class="author">Eric Simons</a>
50-
<span class="date">January 20th</span>
31+
<div class="container page">
32+
<div class="row article-content">
33+
<div class="col-md-12">
34+
<p>
35+
Web development technologies have evolved at an incredible clip
36+
over the past few years.
37+
</p>
38+
<h2 id="introducing-ionic">Introducing RealWorld.</h2>
39+
<p>It's a great solution for learning how other frameworks work.</p>
5140
</div>
52-
53-
<button class="btn btn-sm btn-outline-secondary">
54-
<i class="ion-plus-round"></i>
55-
&nbsp;
56-
Follow Eric Simons <span class="counter">(10)</span>
57-
</button>
58-
&nbsp;
59-
<button class="btn btn-sm btn-outline-primary">
60-
<i class="ion-heart"></i>
61-
&nbsp;
62-
Favorite Post <span class="counter">(29)</span>
63-
</button>
6441
</div>
65-
</div>
66-
67-
<div class="row">
6842

69-
<div class="col-xs-12 col-md-8 offset-md-2">
43+
<hr />
7044

71-
<form class="card comment-form">
72-
<div class="card-block">
73-
<textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
74-
</div>
75-
<div class="card-footer">
76-
<img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
77-
<button class="btn btn-sm btn-primary">
78-
Post Comment
79-
</button>
80-
</div>
81-
</form>
82-
83-
<div class="card">
84-
<div class="card-block">
85-
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
86-
</div>
87-
<div class="card-footer">
88-
<a href="" class="comment-author">
89-
<img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
45+
<div class="article-actions">
46+
<div class="article-meta">
47+
<a href="profile.html">
48+
<img src="http://i.imgur.com/Qr71crq.jpg" />
49+
</a>
50+
<div class="info">
51+
<a href="" class="author">
52+
Eric Simons
9053
</a>
91-
&nbsp;
92-
<a href="" class="comment-author">Jacob Schmidt</a>
93-
<span class="date-posted">Dec 29th</span>
54+
<span class="date">January 20th</span>
9455
</div>
56+
<button class="btn btn-sm btn-outline-secondary">
57+
<i class="ion-plus-round"></i>
58+
&nbsp; Follow Eric Simons <span class="counter">(10)</span>
59+
</button>
60+
&nbsp;
61+
<button class="btn btn-sm btn-outline-primary">
62+
<i class="ion-heart"></i>
63+
&nbsp; Favorite Post <span class="counter">(29)</span>
64+
</button>
9565
</div>
66+
</div>
9667

97-
<div class="card">
98-
<div class="card-block">
99-
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
68+
<div class="row">
69+
<div class="col-xs-12 col-md-8 offset-md-2">
70+
<form class="card comment-form">
71+
<div class="card-block">
72+
<textarea
73+
class="form-control"
74+
placeholder="Write a comment..."
75+
rows="3"
76+
></textarea>
77+
</div>
78+
<div class="card-footer">
79+
<img
80+
src="http://i.imgur.com/Qr71crq.jpg"
81+
class="comment-author-img"
82+
/>
83+
<button class="btn btn-sm btn-primary">Post Comment</button>
84+
</div>
85+
</form>
86+
87+
<div class="card">
88+
<div class="card-block">
89+
<p class="card-text">
90+
With supporting text below as a natural lead-in to additional
91+
content.
92+
</p>
93+
</div>
94+
<div class="card-footer">
95+
<a href="" class="comment-author">
96+
<img
97+
src="http://i.imgur.com/Qr71crq.jpg"
98+
class="comment-author-img"
99+
/>
100+
</a>
101+
&nbsp;
102+
<a href="" class="comment-author">
103+
Jacob Schmidt
104+
</a>
105+
<span class="date-posted">Dec 29th</span>
106+
</div>
100107
</div>
101-
<div class="card-footer">
102-
<a href="" class="comment-author">
103-
<img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
104-
</a>
105-
&nbsp;
106-
<a href="" class="comment-author">Jacob Schmidt</a>
107-
<span class="date-posted">Dec 29th</span>
108-
<span class="mod-options">
109-
<i class="ion-edit"></i>
110-
<i class="ion-trash-a"></i>
111-
</span>
108+
109+
<div class="card">
110+
<div class="card-block">
111+
<p class="card-text">
112+
With supporting text below as a natural lead-in to additional
113+
content.
114+
</p>
115+
</div>
116+
<div class="card-footer">
117+
<a href="" class="comment-author">
118+
<img
119+
src="http://i.imgur.com/Qr71crq.jpg"
120+
class="comment-author-img"
121+
/>
122+
</a>
123+
&nbsp;
124+
<a href="" class="comment-author">
125+
Jacob Schmidt
126+
</a>
127+
<span class="date-posted">Dec 29th</span>
128+
<span class="mod-options">
129+
<i class="ion-edit"></i>
130+
<i class="ion-trash-a"></i>
131+
</span>
132+
</div>
112133
</div>
113134
</div>
114135
</div>
115-
116136
</div>
117-
118137
</div>
119-
120-
</div>
121-
}
138+
);
139+
};

0 commit comments

Comments
 (0)