Skip to content

Commit 8578d72

Browse files
rschristianrschristian
committed
chore: Sync with template now that we've readded learning resources
1 parent 11ce96d commit 8578d72

File tree

7 files changed

+149
-93
lines changed

7 files changed

+149
-93
lines changed

‎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>

‎src/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+
}

‎src/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
}

‎src/pages/Home.jsx‎

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

‎src/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+
}

‎src/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+
}

‎src/style.css‎

Lines changed: 34 additions & 59 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;
@@ -16,80 +15,56 @@
1615

1716
body {
1817
margin: 0;
18+
}
19+
20+
#app {
1921
display: flex;
20-
place-items: center;
21-
min-width: 320px;
22+
flex-direction: column;
2223
min-height: 100vh;
2324
}
2425

25-
a {
26-
font-weight: 500;
27-
color: #646cff;
28-
text-decoration: inherit;
29-
}
30-
a:hover {
31-
color: #535bf2;
26+
header {
27+
display: flex;
28+
justify-content: flex-end;
29+
background-color: #673ab8;
3230
}
3331

34-
h1 {
35-
font-size: 3.2em;
36-
line-height: 1.1;
32+
header nav {
33+
display: flex;
3734
}
3835

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;
36+
header a {
37+
color: #fff;
38+
padding: 0.75rem;
39+
text-decoration: none;
4940
}
50-
button:hover {
51-
border-color: #646cff;
52-
}
53-
button:focus,
54-
button:focus-visible {
55-
outline: 4px auto -webkit-focus-ring-color;
41+
42+
header a.active {
43+
background-color: #0005;
5644
}
5745

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-
}
46+
header a:hover {
47+
background-color: #0008;
6948
}
7049

71-
#app {
50+
main {
51+
flex: auto;
52+
display: flex;
53+
align-items: center;
7254
max-width: 1280px;
7355
margin: 0 auto;
74-
padding: 2rem;
7556
text-align: center;
7657
}
7758

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);
87-
}
88-
89-
.card {
90-
padding: 2em;
59+
@media (max-width: 639px) {
60+
main {
61+
margin: 2rem;
62+
}
9163
}
9264

93-
.read-the-docs {
94-
color: #888;
65+
@media (prefers-color-scheme: dark) {
66+
:root {
67+
color: #ccc;
68+
background-color: #1a1a1a;
69+
}
9570
}

0 commit comments

Comments
 (0)