Skip to content

Commit e294607

Browse files
rschristianrschristian
authored
Merge pull request #3 from preactjs/refactor/restyle
refactor: Restyle templates
2 parents 8323cf9 + b3fd385 commit e294607

File tree

17 files changed

+447
-239
lines changed

17 files changed

+447
-239
lines changed

‎templates/base/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="color-scheme" content="light dark" />
78
<title>Vite + Preact</title>
89
</head>
910
<body>

‎templates/base/src/index.jsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import { render } from 'preact';
2-
import { useState } from 'preact/hooks';
32
import preactLogo from './assets/preact.svg';
4-
import viteLogo from '/vite.svg';
53
import './style.css';
64

75
export function App() {
8-
const [count, setCount] = useState(0);
6+
return (
7+
<div>
8+
<a href="https://preactjs.com" target="_blank">
9+
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
10+
</a>
11+
<h1>Get Started building Vite-powered Preact Apps </h1>
12+
<section>
13+
<Resource
14+
title="Learn Preact"
15+
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
16+
href="https://preactjs.com/tutorial"
17+
/>
18+
<Resource
19+
title="Differences to React"
20+
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
21+
href="https://preactjs.com/guide/v10/differences-to-react"
22+
/>
23+
<Resource
24+
title="Learn Vite"
25+
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
26+
href="https://vitejs.dev"
27+
/>
28+
</section>
29+
</div>
30+
);
31+
}
932

33+
function Resource(props) {
1034
return (
11-
<>
12-
<div>
13-
<a href="https://vitejs.dev" target="_blank">
14-
<img src={viteLogo} class="logo" alt="Vite logo" />
15-
</a>
16-
<a href="https://preactjs.com" target="_blank">
17-
<img src={preactLogo} class="logo preact" alt="Preact logo" />
18-
</a>
19-
</div>
20-
<h1>Vite + Preact</h1>
21-
<div class="card">
22-
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
23-
<p>
24-
Edit <code>src/app.jsx</code> and save to test HMR
25-
</p>
26-
</div>
27-
<p class="read-the-docs">Click on the Vite and Preact logos to learn more</p>
28-
</>
35+
<a href={props.href} target="_blank" class="resource">
36+
<h2>{props.title}</h2>
37+
<p>{props.description}</p>
38+
</a>
2939
);
3040
}
3141

‎templates/base/src/style.css‎

Lines changed: 48 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33
line-height: 1.5;
44
font-weight: 400;
55

6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
6+
color: #222;
7+
background-color: #ffffff;
98

109
font-synthesis: none;
1110
text-rendering: optimizeLegibility;
@@ -17,79 +16,67 @@
1716
body {
1817
margin: 0;
1918
display: flex;
20-
place-items: center;
21-
min-width: 320px;
19+
align-items: center;
2220
min-height: 100vh;
2321
}
2422

25-
a {
26-
font-weight: 500;
27-
color: #646cff;
28-
text-decoration: inherit;
29-
}
30-
a:hover {
31-
color: #535bf2;
23+
#app {
24+
max-width: 1280px;
25+
margin: 0 auto;
26+
text-align: center;
3227
}
3328

34-
h1 {
35-
font-size: 3.2em;
36-
line-height: 1.1;
29+
img {
30+
margin-bottom: 1.5rem;
3731
}
3832

39-
button {
40-
border-radius: 8px;
41-
border: 1px solid transparent;
42-
padding: 0.6em 1.2em;
43-
font-size: 1em;
44-
font-weight: 500;
45-
font-family: inherit;
46-
background-color: #1a1a1a;
47-
cursor: pointer;
48-
transition: border-color 0.25s;
49-
}
50-
button:hover {
51-
border-color: #646cff;
52-
}
53-
button:focus,
54-
button:focus-visible {
55-
outline: 4px auto -webkit-focus-ring-color;
33+
img:hover {
34+
filter: drop-shadow(0 0 2em #673ab8aa);
5635
}
5736

58-
@media (prefers-color-scheme: light) {
59-
:root {
60-
color: #213547;
61-
background-color: #ffffff;
62-
}
63-
a:hover {
64-
color: #747bff;
65-
}
66-
button {
67-
background-color: #f9f9f9;
68-
}
37+
section {
38+
margin-top: 5rem;
39+
display: grid;
40+
grid-template-columns: repeat(3, 1fr);
41+
column-gap: 1.5rem;
6942
}
7043

71-
#app {
72-
max-width: 1280px;
73-
margin: 0 auto;
74-
padding: 2rem;
75-
text-align: center;
44+
.resource {
45+
padding: 0.75rem 1.5rem;
46+
border-radius: 0.5rem;
47+
text-align: left;
48+
text-decoration: none;
49+
color: #222;
50+
background-color: #f1f1f1;
51+
border: 1px solid transparent;
7652
}
7753

78-
.logo {
79-
height: 6em;
80-
padding: 1.5em;
81-
}
82-
.logo:hover {
83-
filter: drop-shadow(0 0 2em #646cffaa);
84-
}
85-
.logo.preact:hover {
86-
filter: drop-shadow(0 0 2em #673ab8aa);
54+
.resource:hover {
55+
border: 1px solid #000;
56+
box-shadow: 0 25px 50px -12px #673ab888;
8757
}
8858

89-
.card {
90-
padding: 2em;
59+
@media (max-width: 639px) {
60+
#app {
61+
margin: 2rem;
62+
}
63+
section {
64+
margin-top: 5rem;
65+
grid-template-columns: 1fr;
66+
row-gap: 1rem;
67+
}
9168
}
9269

93-
.read-the-docs {
94-
color: #888;
70+
@media (prefers-color-scheme: dark) {
71+
:root {
72+
color: #ccc;
73+
background-color: #1a1a1a;
74+
}
75+
.resource {
76+
color: #ccc;
77+
background-color: #161616;
78+
}
79+
.resource:hover {
80+
border: 1px solid #bbb;
81+
}
9582
}

‎templates/config/router/components/Header.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useLocation } from 'preact-iso';
2+
3+
export function Header() {
4+
const { url } = useLocation();
5+
6+
return (
7+
<header>
8+
<nav>
9+
<a href="/" class={url == '/' && 'active'}>
10+
Home
11+
</a>
12+
<a href="/404" class={url == '/404' && 'active'}>
13+
404
14+
</a>
15+
</nav>
16+
</header>
17+
);
18+
}

‎templates/config/router/index.jsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import { render } from 'preact';
22
import { LocationProvider, Router, Route } from 'preact-iso';
3-
import { Home } from './pages/Home.jsx';
3+
4+
import { Header } from './components/Header.jsx';
5+
import { Home } from './pages/Home/index.jsx';
46
import { NotFound } from './pages/_404.jsx';
57
import './style.css';
68

79
export function App() {
810
return (
911
<LocationProvider>
10-
<Router>
11-
<Route path="/" component={Home} />
12-
<Route default component={NotFound} />
13-
</Router>
12+
<Header />
13+
<main>
14+
<Router>
15+
<Route path="/" component={Home} />
16+
<Route default component={NotFound} />
17+
</Router>
18+
</main>
1419
</LocationProvider>
1520
);
1621
}

‎templates/config/router/pages/Home.jsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎templates/config/router/pages/Home/index.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import preactLogo from '../../assets/preact.svg';
2+
import './style.css';
3+
4+
export function Home() {
5+
return (
6+
<div class="home">
7+
<a href="https://preactjs.com" target="_blank">
8+
<img src={preactLogo} alt="Preact logo" height="160" width="160" />
9+
</a>
10+
<h1>Get Started building Vite-powered Preact Apps </h1>
11+
<section>
12+
<Resource
13+
title="Learn Preact"
14+
description="If you're new to Preact, try the interactive tutorial to learn important concepts"
15+
href="https://preactjs.com/tutorial"
16+
/>
17+
<Resource
18+
title="Differences to React"
19+
description="If you're coming from React, you may want to check out our docs to see where Preact differs"
20+
href="https://preactjs.com/guide/v10/differences-to-react"
21+
/>
22+
<Resource
23+
title="Learn Vite"
24+
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
25+
href="https://vitejs.dev"
26+
/>
27+
</section>
28+
</div>
29+
);
30+
}
31+
32+
function Resource(props) {
33+
return (
34+
<a href={props.href} target="_blank" class="resource">
35+
<h2>{props.title}</h2>
36+
<p>{props.description}</p>
37+
</a>
38+
);
39+
}

‎templates/config/router/pages/Home/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
img {
2+
margin-bottom: 1.5rem;
3+
}
4+
5+
img:hover {
6+
filter: drop-shadow(0 0 2em #673ab8aa);
7+
}
8+
9+
.home section {
10+
margin-top: 5rem;
11+
display: grid;
12+
grid-template-columns: repeat(3, 1fr);
13+
column-gap: 1.5rem;
14+
}
15+
16+
.resource {
17+
padding: 0.75rem 1.5rem;
18+
border-radius: 0.5rem;
19+
text-align: left;
20+
text-decoration: none;
21+
color: #222;
22+
background-color: #f1f1f1;
23+
border: 1px solid transparent;
24+
}
25+
26+
.resource:hover {
27+
border: 1px solid #000;
28+
box-shadow: 0 25px 50px -12px #673ab888;
29+
}
30+
31+
@media (max-width: 639px) {
32+
.home section {
33+
margin-top: 5rem;
34+
grid-template-columns: 1fr;
35+
row-gap: 1rem;
36+
}
37+
}
38+
39+
@media (prefers-color-scheme: dark) {
40+
.resource {
41+
color: #ccc;
42+
background-color: #161616;
43+
}
44+
.resource:hover {
45+
border: 1px solid #bbb;
46+
}
47+
}

0 commit comments

Comments
 (0)