Skip to content

Commit 3d4262b

Browse files
typicodetypicode
authored
Merge pull request #1723 from typicode/redesign/index-page
2 parents e98d8a0 + 6869a03 commit 3d4262b

File tree

1 file changed

+109
-67
lines changed

1 file changed

+109
-67
lines changed

‎views/index.html‎

Lines changed: 109 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,137 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>JSON Server</title>
67
<style>
7-
html {
8-
font-size: 16px;
9-
line-height: 1.5;
10-
background-color: #fff;
11-
color: #000;
8+
:root {
9+
--fg: #111;
10+
--muted: #999;
11+
--line: #e5e5e5;
1212
}
13-
1413
body {
15-
margin: 0 auto;
16-
max-width: 720px;
17-
padding: 0 16px;
18-
font-family: sans-serif;
14+
margin: 40px auto;
15+
max-width: 400px;
16+
padding: 0 24px;
17+
font-family:
18+
ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
19+
background-color: #fff;
20+
color: var(--fg);
21+
line-height: 1.5;
22+
font-size: 14px;
1923
}
20-
2124
a {
22-
color: #db2777;
23-
text-decoration: none;
25+
color: inherit;
2426
}
25-
2627
header {
27-
margin-bottom: 32px;
28-
padding: 16px 0;
28+
margin-bottom: 40px;
29+
color: var(--muted);
2930
}
30-
31-
nav {
31+
.topbar {
3232
display: flex;
3333
justify-content: space-between;
34+
align-items: baseline;
35+
margin-bottom: 12px;
36+
padding-top: 12px;
37+
border-top: 1px solid var(--line);
3438
}
35-
36-
nav div a {
37-
margin-left: 16px;
39+
.topbar a {
40+
text-decoration: none;
41+
transition: color 0.1s ease;
3842
}
39-
40-
ul {
41-
margin: 0;
42-
padding: 0;
43-
list-style: none;
43+
.topbar a:first-child {
44+
color: var(--fg);
4445
}
45-
46-
li {
46+
.topbar a:hover {
47+
color: #6366f1;
48+
}
49+
.section-title {
4750
margin-bottom: 8px;
51+
color: var(--muted);
4852
}
49-
50-
/* Dark mode styles */
51-
@media (prefers-color-scheme: dark) {
52-
html {
53-
background-color: #1e293b;
54-
color: #fff;
55-
}
56-
57-
a {
58-
}
53+
.list {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 4px;
57+
}
58+
.list a {
59+
display: flex;
60+
justify-content: space-between;
61+
align-items: center;
62+
padding: 8px 0;
63+
text-decoration: none;
64+
transition: color 0.1s ease;
65+
}
66+
.list a:hover {
67+
color: #6366f1;
68+
}
69+
.meta {
70+
color: var(--muted);
71+
font-size: 13px;
72+
}
73+
.empty {
74+
color: var(--muted);
75+
}
76+
footer {
77+
margin-top: 48px;
78+
padding-top: 12px;
79+
border-top: 1px solid var(--line);
80+
color: var(--muted);
81+
font-size: 13px;
82+
}
83+
.heart {
84+
position: fixed;
85+
bottom: 20px;
86+
right: 24px;
87+
display: inline-flex;
88+
align-items: center;
89+
justify-content: center;
90+
width: 32px;
91+
height: 32px;
92+
border-radius: 50%;
93+
color: #fff;
94+
background-color: #111;
95+
text-decoration: none;
96+
transition: transform 0.15s ease;
97+
}
98+
.heart:hover {
99+
transform: scale(1.1);
59100
}
60101
</style>
61102
</head>
62103

63104
<body>
105+
<% const resources = Object.entries(it.data ?? {}); %>
106+
64107
<header>
65-
<nav>
66-
<strong>JSON Server</strong>
67-
<div>
68-
<a href="https://github.com/typicode/json-server">Docs</a>
69-
<a href="https://github.com/sponsors/typicode">♡ Sponsor</a>
70-
</div>
71-
</nav>
108+
<div class="topbar">
109+
<a href="https://github.com/typicode/json-server" target="_blank">json-server</a>
110+
<a href="https://github.com/typicode/json-server" target="_blank">README</a>
111+
</div>
112+
<div class="intro">Available REST resources from db.json.</div>
72113
</header>
73-
<main class="my-12">
74-
<p
75-
class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-transparent bg-clip-text"
76-
>
77-
✧*｡٩(ˊᗜˋ*)و✧*｡
78-
</p>
79-
<% if (Object.keys(it.data).length===0) { %>
80-
<p>No resources found in JSON file</p>
81-
<% } %> <% Object.entries(it.data).forEach(function([name]) { %>
82-
<ul>
83-
<li>
84-
<a href="<%= name %>">/<%= name %></a>
85-
<span>
86-
<% if (Array.isArray(it.data[name])) { %> - <%= it.data[name].length %> <%=
87-
it.data[name].length> 1 ? 'items' : 'item' %>
88-
</span>
89-
<% } %>
90-
</li>
91-
</ul>
92-
<% }) %>
93-
</main>
114+
115+
<div class="section-title">Resources</div>
116+
117+
<div class="list">
118+
<% if (resources.length === 0) { %>
119+
<span class="empty">No resources in db.json.</span>
120+
<% } else { %> <% resources.forEach(function([name, value]) { const isCollection =
121+
Array.isArray(value); %>
122+
<a href="/<%= name %>">
123+
<span>/<%= name %></span>
124+
<span class="meta">
125+
<% if (isCollection) { %> <%= value.length %> items <% } else { %> object <% } %>
126+
</span>
127+
</a>
128+
<% }) %> <% } %>
129+
</div>
130+
131+
<footer>
132+
<span>To replace this page, create public/index.html.</span>
133+
</footer>
134+
135+
<a href="https://github.com/sponsors/typicode" target="_blank" class="heart">❤</a>
94136
</body>
95137
</html>

0 commit comments

Comments
 (0)