parent
eac7a4f78e
commit
43bbe13ded
@ -0,0 +1,14 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<meta name="color-scheme" content="light dark" /> |
||||||
|
<title>Vite + Preact</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/index.tsx"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"private": true, |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vite build", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"preact": "^10.13.1" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@preact/preset-vite": "^2.5.0", |
||||||
|
"eslint": "^8.53.0", |
||||||
|
"eslint-config-preact": "^1.3.0", |
||||||
|
"typescript": "^5.2.2", |
||||||
|
"vite": "^4.3.2" |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,42 @@ |
|||||||
|
import { render } from 'preact'; |
||||||
|
import preactLogo from './assets/preact.svg'; |
||||||
|
import './style.css'; |
||||||
|
|
||||||
|
export function App() { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<a href="https://preactjs.com" target="_blank"> |
||||||
|
<img src={preactLogo} alt="Preact logo" height="160" width="160" /> |
||||||
|
</a> |
||||||
|
<h1>Get Started building Vite-powered Preact Apps </h1> |
||||||
|
<section> |
||||||
|
<Resource |
||||||
|
title="Learn Preact" |
||||||
|
description="If you're new to Preact, try the interactive tutorial to learn important concepts" |
||||||
|
href="https://preactjs.com/tutorial" |
||||||
|
/> |
||||||
|
<Resource |
||||||
|
title="Differences to React" |
||||||
|
description="If you're coming from React, you may want to check out our docs to see where Preact differs" |
||||||
|
href="https://preactjs.com/guide/v10/differences-to-react" |
||||||
|
/> |
||||||
|
<Resource |
||||||
|
title="Learn Vite" |
||||||
|
description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation" |
||||||
|
href="https://vitejs.dev" |
||||||
|
/> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function Resource(props) { |
||||||
|
return ( |
||||||
|
<a href={props.href} target="_blank" class="resource"> |
||||||
|
<h2>{props.title}</h2> |
||||||
|
<p>{props.description}</p> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
render(<App />, document.getElementById('app')); |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
:root { |
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
||||||
|
line-height: 1.5; |
||||||
|
font-weight: 400; |
||||||
|
|
||||||
|
color: #222; |
||||||
|
background-color: #ffffff; |
||||||
|
|
||||||
|
font-synthesis: none; |
||||||
|
text-rendering: optimizeLegibility; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
min-height: 100vh; |
||||||
|
} |
||||||
|
|
||||||
|
#app { |
||||||
|
max-width: 1280px; |
||||||
|
margin: 0 auto; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-bottom: 1.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
img:hover { |
||||||
|
filter: drop-shadow(0 0 2em #673ab8aa); |
||||||
|
} |
||||||
|
|
||||||
|
section { |
||||||
|
margin-top: 5rem; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
column-gap: 1.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.resource { |
||||||
|
padding: 0.75rem 1.5rem; |
||||||
|
border-radius: 0.5rem; |
||||||
|
text-align: left; |
||||||
|
text-decoration: none; |
||||||
|
color: #222; |
||||||
|
background-color: #f1f1f1; |
||||||
|
border: 1px solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.resource:hover { |
||||||
|
border: 1px solid #000; |
||||||
|
box-shadow: 0 25px 50px -12px #673ab888; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 639px) { |
||||||
|
#app { |
||||||
|
margin: 2rem; |
||||||
|
} |
||||||
|
section { |
||||||
|
margin-top: 5rem; |
||||||
|
grid-template-columns: 1fr; |
||||||
|
row-gap: 1rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) { |
||||||
|
:root { |
||||||
|
color: #ccc; |
||||||
|
background-color: #1a1a1a; |
||||||
|
} |
||||||
|
.resource { |
||||||
|
color: #ccc; |
||||||
|
background-color: #161616; |
||||||
|
} |
||||||
|
.resource:hover { |
||||||
|
border: 1px solid #bbb; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "ES2020", |
||||||
|
"module": "ESNext", |
||||||
|
"moduleResolution": "bundler", |
||||||
|
"noEmit": true, |
||||||
|
"allowJs": true, |
||||||
|
"checkJs": true, |
||||||
|
|
||||||
|
/* Preact Config */ |
||||||
|
"jsx": "react-jsx", |
||||||
|
"jsxImportSource": "preact", |
||||||
|
"skipLibCheck": true, |
||||||
|
"paths": { |
||||||
|
"react": ["./node_modules/preact/compat/"], |
||||||
|
"react-dom": ["./node_modules/preact/compat/"] |
||||||
|
} |
||||||
|
}, |
||||||
|
"include": ["node_modules/vite/client.d.ts", "**/*"] |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite'; |
||||||
|
import preact from '@preact/preset-vite'; |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [preact()], |
||||||
|
}); |
||||||
Loading…
Reference in new issue