Skip to content

Commit c1176a5

Browse files
katywingskatywings
committed
chore: implement solid example
1 parent ba5147a commit c1176a5

15 files changed

Lines changed: 1098 additions & 106 deletions

File tree

‎examples/vite-ssr-solidstart/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# SolidStart
2+
3+
Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
4+
5+
## Creating a project
6+
7+
```bash
8+
# create a new project in the current directory
9+
npm init solid@latest
10+
11+
# create a new project in my-app
12+
npm init solid@latest my-app
13+
```
14+
15+
## Developing
16+
17+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
18+
19+
```bash
20+
npm run dev
21+
22+
# or start the server and open the app in a new browser tab
23+
npm run dev -- --open
24+
```
25+
26+
## Building
27+
28+
Solid apps are built with _presets_, which optimise your project for deployment to different environments.
29+
30+
By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

‎examples/vite-ssr-solidstart/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"private": true,
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vite dev",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"@solidjs/meta": "^0.29.4",
10+
"@solidjs/router": "^0.15.4",
11+
"@solidjs/start": "^2.0.0-alpha.2",
12+
"nitro": "^3.0.260311-beta",
13+
"solid-js": "^1.9.11",
14+
"vite": "^8.0.0"
15+
},
16+
"engines": {
17+
"node": ">=22"
18+
}
19+
}

‎examples/vite-ssr-solidstart/public/favicon.ico‎

664 Bytes
Binary file not shown.

‎examples/vite-ssr-solidstart/src/app.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
font-family:
3+
Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
4+
}
5+
6+
a {
7+
margin-right: 1rem;
8+
}
9+
10+
main {
11+
text-align: center;
12+
padding: 1em;
13+
margin: 0 auto;
14+
}
15+
16+
h1 {
17+
color: #335d92;
18+
text-transform: uppercase;
19+
font-size: 4rem;
20+
font-weight: 100;
21+
line-height: 1.1;
22+
margin: 4rem auto;
23+
max-width: 14rem;
24+
}
25+
26+
p {
27+
max-width: 14rem;
28+
margin: 2rem auto;
29+
line-height: 1.35;
30+
}
31+
32+
@media (min-width: 480px) {
33+
h1 {
34+
max-width: none;
35+
}
36+
37+
p {
38+
max-width: none;
39+
}
40+
}

‎examples/vite-ssr-solidstart/src/app.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { MetaProvider, Title } from "@solidjs/meta";
2+
import { Router } from "@solidjs/router";
3+
import { FileRoutes } from "@solidjs/start/router";
4+
import { Suspense } from "solid-js";
5+
import "./app.css";
6+
7+
export default function App() {
8+
return (
9+
<Router
10+
root={(props) => (
11+
<MetaProvider>
12+
<Title>SolidStart - Basic</Title>
13+
<a href="/">Index</a>
14+
<a href="/about">About</a>
15+
<Suspense>{props.children}</Suspense>
16+
</MetaProvider>
17+
)}
18+
>
19+
<FileRoutes />
20+
</Router>
21+
);
22+
}

‎examples/vite-ssr-solidstart/src/components/Counter.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.increment {
2+
font-family: inherit;
3+
font-size: inherit;
4+
padding: 1em 2em;
5+
color: #335d92;
6+
background-color: rgba(68, 107, 158, 0.1);
7+
border-radius: 2em;
8+
border: 2px solid rgba(68, 107, 158, 0);
9+
outline: none;
10+
width: 200px;
11+
font-variant-numeric: tabular-nums;
12+
cursor: pointer;
13+
}
14+
15+
.increment:focus {
16+
border: 2px solid #335d92;
17+
}
18+
19+
.increment:active {
20+
background-color: rgba(68, 107, 158, 0.2);
21+
}

‎examples/vite-ssr-solidstart/src/components/Counter.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { createSignal } from "solid-js";
2+
import "./Counter.css";
3+
4+
export default function Counter() {
5+
const [count, setCount] = createSignal(0);
6+
return (
7+
<button class="increment" onClick={() => setCount(count() + 1)} type="button">
8+
Clicks: {count()}
9+
</button>
10+
);
11+
}

‎examples/vite-ssr-solidstart/src/entry-client.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// @refresh reload
2+
import { mount, StartClient } from "@solidjs/start/client";
3+
4+
mount(() => <StartClient />, document.getElementById("app")!);

‎examples/vite-ssr-solidstart/src/entry-server.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// @refresh reload
2+
import { createHandler, StartServer } from "@solidjs/start/server";
3+
4+
export default createHandler(() => (
5+
<StartServer
6+
document={({ assets, children, scripts }) => (
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<link rel="icon" href="/favicon.ico" />
12+
{assets}
13+
</head>
14+
<body>
15+
<div id="app">{children}</div>
16+
{scripts}
17+
</body>
18+
</html>
19+
)}
20+
/>
21+
));

‎examples/vite-ssr-solidstart/src/routes/[...404].tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Title } from "@solidjs/meta";
2+
import { HttpStatusCode } from "@solidjs/start";
3+
4+
export default function NotFound() {
5+
return (
6+
<main>
7+
<Title>Not Found</Title>
8+
<HttpStatusCode code={404} />
9+
<h1>Page Not Found</h1>
10+
<p>
11+
Visit{" "}
12+
<a href="https://start.solidjs.com" target="_blank">
13+
start.solidjs.com
14+
</a>{" "}
15+
to learn how to build SolidStart apps.
16+
</p>
17+
</main>
18+
);
19+
}

0 commit comments

Comments
 (0)