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