diff --git a/package.json b/package.json index 3dd7ae1..8b0e85c 100644 --- a/package.json +++ b/package.json @@ -11,5 +11,6 @@ }, "lint-staged": { "*.{js,json,md,yml,ts,tsx,jsx,css,scss}": "prettier --write" - } + }, + "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748" } diff --git a/solid-start/bare/.gitignore b/solid-start/bare/.gitignore new file mode 100644 index 0000000..86c8db6 --- /dev/null +++ b/solid-start/bare/.gitignore @@ -0,0 +1,6 @@ +.env +!.env.example +.vinxi/ +node_modules/ +.output/ +dist/ diff --git a/solid-start/bare/README.md b/solid-start/bare/README.md new file mode 100644 index 0000000..128403d --- /dev/null +++ b/solid-start/bare/README.md @@ -0,0 +1,30 @@ +# SolidStart + +Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com); + +## Creating a project + +```bash +# create a new project in the current directory +npm init solid@latest + +# create a new project in my-app +npm init solid@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +Solid apps are built with _presets_, which optimise your project for deployment to different environments. + +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`. diff --git a/solid-start/bare/app.config.ts b/solid-start/bare/app.config.ts new file mode 100644 index 0000000..de7f831 --- /dev/null +++ b/solid-start/bare/app.config.ts @@ -0,0 +1,3 @@ +import { defineConfig } from "@solidjs/start/config"; + +export default defineConfig({}); diff --git a/solid-start/bare/package.json b/solid-start/bare/package.json new file mode 100644 index 0000000..eb9f58a --- /dev/null +++ b/solid-start/bare/package.json @@ -0,0 +1,17 @@ +{ + "name": "example-bare", + "type": "module", + "scripts": { + "dev": "vinxi dev", + "build": "vinxi build", + "start": "vinxi start" + }, + "dependencies": { + "@solidjs/start": "^1.1.0", + "solid-js": "^1.9.5", + "vinxi": "^0.5.7" + }, + "engines": { + "node": ">=22" + } +} diff --git a/solid-start/bare/public/favicon.ico b/solid-start/bare/public/favicon.ico new file mode 100644 index 0000000..fb282da Binary files /dev/null and b/solid-start/bare/public/favicon.ico differ diff --git a/solid-start/bare/src/app.css b/solid-start/bare/src/app.css new file mode 100644 index 0000000..a4d2e55 --- /dev/null +++ b/solid-start/bare/src/app.css @@ -0,0 +1,61 @@ +body { + font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +a { + margin-right: 1rem; +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h1 { + color: #335d92; + text-transform: uppercase; + font-size: 4rem; + font-weight: 100; + line-height: 1.1; + margin: 4rem auto; + max-width: 14rem; +} + +p { + max-width: 14rem; + margin: 2rem auto; + line-height: 1.35; +} + +@media (min-width: 480px) { + h1 { + max-width: none; + } + + p { + max-width: none; + } +} + +.increment { + font-family: inherit; + font-size: inherit; + padding: 1em 2em; + color: #335d92; + background-color: rgba(68, 107, 158, 0.1); + border-radius: 2em; + border: 2px solid rgba(68, 107, 158, 0); + outline: none; + width: 200px; + font-variant-numeric: tabular-nums; + cursor: pointer; +} + +.increment:focus { + border: 2px solid #335d92; +} + +.increment:active { + background-color: rgba(68, 107, 158, 0.2); +} diff --git a/solid-start/bare/src/app.tsx b/solid-start/bare/src/app.tsx new file mode 100644 index 0000000..bf5aa6a --- /dev/null +++ b/solid-start/bare/src/app.tsx @@ -0,0 +1,22 @@ +import { createSignal } from "solid-js"; +import "./app.css"; + +export default function App() { + const [count, setCount] = createSignal(0); + + return ( +
+

Hello world!

+ +

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+
+ ); +} diff --git a/solid-start/bare/src/entry-client.tsx b/solid-start/bare/src/entry-client.tsx new file mode 100644 index 0000000..0ca4e3c --- /dev/null +++ b/solid-start/bare/src/entry-client.tsx @@ -0,0 +1,4 @@ +// @refresh reload +import { mount, StartClient } from "@solidjs/start/client"; + +mount(() => , document.getElementById("app")!); diff --git a/solid-start/bare/src/entry-server.tsx b/solid-start/bare/src/entry-server.tsx new file mode 100644 index 0000000..401eff8 --- /dev/null +++ b/solid-start/bare/src/entry-server.tsx @@ -0,0 +1,21 @@ +// @refresh reload +import { createHandler, StartServer } from "@solidjs/start/server"; + +export default createHandler(() => ( + ( + + + + + + {assets} + + +
{children}
+ {scripts} + + + )} + /> +)); diff --git a/solid-start/bare/src/global.d.ts b/solid-start/bare/src/global.d.ts new file mode 100644 index 0000000..dc6f10c --- /dev/null +++ b/solid-start/bare/src/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/solid-start/bare/tsconfig.json b/solid-start/bare/tsconfig.json new file mode 100644 index 0000000..7d5871a --- /dev/null +++ b/solid-start/bare/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + "allowJs": true, + "strict": true, + "noEmit": true, + "types": ["vinxi/types/client"], + "isolatedModules": true, + "paths": { + "~/*": ["./src/*"] + } + } +} diff --git a/solid-start/basic/.gitignore b/solid-start/basic/.gitignore new file mode 100644 index 0000000..86c8db6 --- /dev/null +++ b/solid-start/basic/.gitignore @@ -0,0 +1,6 @@ +.env +!.env.example +.vinxi/ +node_modules/ +.output/ +dist/ diff --git a/solid-start/basic/README.md b/solid-start/basic/README.md new file mode 100644 index 0000000..128403d --- /dev/null +++ b/solid-start/basic/README.md @@ -0,0 +1,30 @@ +# SolidStart + +Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com); + +## Creating a project + +```bash +# create a new project in the current directory +npm init solid@latest + +# create a new project in my-app +npm init solid@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +Solid apps are built with _presets_, which optimise your project for deployment to different environments. + +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`. diff --git a/solid-start/basic/app.config.ts b/solid-start/basic/app.config.ts new file mode 100644 index 0000000..de7f831 --- /dev/null +++ b/solid-start/basic/app.config.ts @@ -0,0 +1,3 @@ +import { defineConfig } from "@solidjs/start/config"; + +export default defineConfig({}); diff --git a/solid-start/basic/package.json b/solid-start/basic/package.json new file mode 100644 index 0000000..7d2dd1e --- /dev/null +++ b/solid-start/basic/package.json @@ -0,0 +1,20 @@ +{ + "name": "example-basic", + "type": "module", + "scripts": { + "dev": "vinxi dev", + "build": "vinxi build", + "start": "vinxi start", + "version": "vinxi version" + }, + "dependencies": { + "@solidjs/meta": "^0.29.4", + "@solidjs/router": "^0.15.0", + "@solidjs/start": "^1.1.0", + "solid-js": "^1.9.5", + "vinxi": "^0.5.7" + }, + "engines": { + "node": ">=22" + } +} diff --git a/solid-start/basic/public/favicon.ico b/solid-start/basic/public/favicon.ico new file mode 100644 index 0000000..fb282da Binary files /dev/null and b/solid-start/basic/public/favicon.ico differ diff --git a/solid-start/basic/src/app.css b/solid-start/basic/src/app.css new file mode 100644 index 0000000..8596998 --- /dev/null +++ b/solid-start/basic/src/app.css @@ -0,0 +1,39 @@ +body { + font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +} + +a { + margin-right: 1rem; +} + +main { + text-align: center; + padding: 1em; + margin: 0 auto; +} + +h1 { + color: #335d92; + text-transform: uppercase; + font-size: 4rem; + font-weight: 100; + line-height: 1.1; + margin: 4rem auto; + max-width: 14rem; +} + +p { + max-width: 14rem; + margin: 2rem auto; + line-height: 1.35; +} + +@media (min-width: 480px) { + h1 { + max-width: none; + } + + p { + max-width: none; + } +} diff --git a/solid-start/basic/src/app.tsx b/solid-start/basic/src/app.tsx new file mode 100644 index 0000000..d1359c8 --- /dev/null +++ b/solid-start/basic/src/app.tsx @@ -0,0 +1,22 @@ +import { MetaProvider, Title } from "@solidjs/meta"; +import { Router } from "@solidjs/router"; +import { FileRoutes } from "@solidjs/start/router"; +import { Suspense } from "solid-js"; +import "./app.css"; + +export default function App() { + return ( + ( + + SolidStart - Basic + Index + About + {props.children} + + )} + > + + + ); +} diff --git a/solid-start/basic/src/components/Counter.css b/solid-start/basic/src/components/Counter.css new file mode 100644 index 0000000..220e179 --- /dev/null +++ b/solid-start/basic/src/components/Counter.css @@ -0,0 +1,21 @@ +.increment { + font-family: inherit; + font-size: inherit; + padding: 1em 2em; + color: #335d92; + background-color: rgba(68, 107, 158, 0.1); + border-radius: 2em; + border: 2px solid rgba(68, 107, 158, 0); + outline: none; + width: 200px; + font-variant-numeric: tabular-nums; + cursor: pointer; +} + +.increment:focus { + border: 2px solid #335d92; +} + +.increment:active { + background-color: rgba(68, 107, 158, 0.2); +} \ No newline at end of file diff --git a/solid-start/basic/src/components/Counter.tsx b/solid-start/basic/src/components/Counter.tsx new file mode 100644 index 0000000..091fc5d --- /dev/null +++ b/solid-start/basic/src/components/Counter.tsx @@ -0,0 +1,11 @@ +import { createSignal } from "solid-js"; +import "./Counter.css"; + +export default function Counter() { + const [count, setCount] = createSignal(0); + return ( + + ); +} diff --git a/solid-start/basic/src/entry-client.tsx b/solid-start/basic/src/entry-client.tsx new file mode 100644 index 0000000..0ca4e3c --- /dev/null +++ b/solid-start/basic/src/entry-client.tsx @@ -0,0 +1,4 @@ +// @refresh reload +import { mount, StartClient } from "@solidjs/start/client"; + +mount(() => , document.getElementById("app")!); diff --git a/solid-start/basic/src/entry-server.tsx b/solid-start/basic/src/entry-server.tsx new file mode 100644 index 0000000..401eff8 --- /dev/null +++ b/solid-start/basic/src/entry-server.tsx @@ -0,0 +1,21 @@ +// @refresh reload +import { createHandler, StartServer } from "@solidjs/start/server"; + +export default createHandler(() => ( + ( + + + + + + {assets} + + +
{children}
+ {scripts} + + + )} + /> +)); diff --git a/solid-start/basic/src/global.d.ts b/solid-start/basic/src/global.d.ts new file mode 100644 index 0000000..dc6f10c --- /dev/null +++ b/solid-start/basic/src/global.d.ts @@ -0,0 +1 @@ +/// diff --git a/solid-start/basic/src/routes/[...404].tsx b/solid-start/basic/src/routes/[...404].tsx new file mode 100644 index 0000000..4ea71ec --- /dev/null +++ b/solid-start/basic/src/routes/[...404].tsx @@ -0,0 +1,19 @@ +import { Title } from "@solidjs/meta"; +import { HttpStatusCode } from "@solidjs/start"; + +export default function NotFound() { + return ( +
+ Not Found + +

Page Not Found

+

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+
+ ); +} diff --git a/solid-start/basic/src/routes/about.tsx b/solid-start/basic/src/routes/about.tsx new file mode 100644 index 0000000..c1c2dcf --- /dev/null +++ b/solid-start/basic/src/routes/about.tsx @@ -0,0 +1,10 @@ +import { Title } from "@solidjs/meta"; + +export default function About() { + return ( +
+ About +

About

+
+ ); +} diff --git a/solid-start/basic/src/routes/index.tsx b/solid-start/basic/src/routes/index.tsx new file mode 100644 index 0000000..5d557d8 --- /dev/null +++ b/solid-start/basic/src/routes/index.tsx @@ -0,0 +1,19 @@ +import { Title } from "@solidjs/meta"; +import Counter from "~/components/Counter"; + +export default function Home() { + return ( +
+ Hello World +

Hello world!

+ +

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+
+ ); +} diff --git a/solid-start/basic/tsconfig.json b/solid-start/basic/tsconfig.json new file mode 100644 index 0000000..7d5871a --- /dev/null +++ b/solid-start/basic/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "jsx": "preserve", + "jsxImportSource": "solid-js", + "allowJs": true, + "strict": true, + "noEmit": true, + "types": ["vinxi/types/client"], + "isolatedModules": true, + "paths": { + "~/*": ["./src/*"] + } + } +} diff --git a/solid-start/with-auth/.env.example b/solid-start/with-auth/.env.example new file mode 100644 index 0000000..81cb71f --- /dev/null +++ b/solid-start/with-auth/.env.example @@ -0,0 +1,6 @@ +# Generate using `openssl rand -hex 32` +SESSION_SECRET = myverylongsessionsecretkeythatishouldchange + +# Get credentials by creating an application at https://discord.com/developers/applications +DISCORD_ID = +DISCORD_SECRET = diff --git a/solid-start/with-auth/.gitignore b/solid-start/with-auth/.gitignore new file mode 100644 index 0000000..86c8db6 --- /dev/null +++ b/solid-start/with-auth/.gitignore @@ -0,0 +1,6 @@ +.env +!.env.example +.vinxi/ +node_modules/ +.output/ +dist/ diff --git a/solid-start/with-auth/README.md b/solid-start/with-auth/README.md new file mode 100644 index 0000000..42bfa99 --- /dev/null +++ b/solid-start/with-auth/README.md @@ -0,0 +1,41 @@ +# SolidStart Template + +The **with-auth** example demonstrates native, context-based authentication featuring OAuth and email-password login. + +## Installation + +Generate the **with-auth** template using your preferred package manager + +```bash +# using npm +npm create solid@latest -- -s -t with-auth +``` + +```bash +# using pnpm +pnpm create solid@latest -s -t with-auth +``` + +```bash +# using bun +bun create solid@latest --s --t with-auth +``` + +## Configuration + +1. Rename `.env.example` to `.env` + +2. For Discord OAuth2 to work, update `.env` with your credentials: + + ```dotenv + DISCORD_ID=your-discord-client-id + DISCORD_SECRET=your-discord-client-secret + ``` + + - Create a Discord application at [discord.com/developers/applications](https://discord.com/developers/applications) to get your Client ID and Secret. + - In the app's **OAuth2 → URL Generator** or **Redirects** section, add the following redirect URI: + ``` + http://localhost:3000/api/oauth/discord + ``` + +3. To configure additional providers, refer to the [start-oauth](https://github.com/thomasbuilds/start-oauth#README) documentation diff --git a/solid-start/with-auth/app.config.ts b/solid-start/with-auth/app.config.ts new file mode 100644 index 0000000..1405382 --- /dev/null +++ b/solid-start/with-auth/app.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "@solidjs/start/config"; +import tailwindcss from "@tailwindcss/vite"; + +export default defineConfig({ + ssr: true, // false for client-side rendering only + server: { preset: "" }, // your deployment + vite: { plugins: [tailwindcss()] } +}); diff --git a/solid-start/with-auth/package.json b/solid-start/with-auth/package.json new file mode 100644 index 0000000..00d3a6f --- /dev/null +++ b/solid-start/with-auth/package.json @@ -0,0 +1,25 @@ +{ + "name": "example-with-auth", + "type": "module", + "scripts": { + "dev": "vinxi dev", + "build": "vinxi build", + "start": "vinxi start" + }, + "dependencies": { + "@solidjs/meta": "^0.29.4", + "@solidjs/router": "^0.15.3", + "@solidjs/start": "^1.1.7", + "solid-js": "^1.9.9", + "start-oauth": "^1.3.0", + "unstorage": "1.17.1", + "vinxi": "^0.5.8" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.13", + "tailwindcss": "^4.1.13" + }, + "engines": { + "node": ">=22" + } +} diff --git a/solid-start/with-auth/public/favicon.svg b/solid-start/with-auth/public/favicon.svg new file mode 100644 index 0000000..e9a615c --- /dev/null +++ b/solid-start/with-auth/public/favicon.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/solid-start/with-auth/src/app.css b/solid-start/with-auth/src/app.css new file mode 100644 index 0000000..591cb19 --- /dev/null +++ b/solid-start/with-auth/src/app.css @@ -0,0 +1,17 @@ +@import "tailwindcss"; + +#app { + user-select: none; +} + +main { + @apply flex flex-col items-center justify-center min-h-screen bg-gray-50 gap-8 px-4; +} + +h1 { + @apply uppercase text-6xl text-sky-700 font-thin; +} + +button { + cursor: pointer; +} diff --git a/solid-start/with-auth/src/app.tsx b/solid-start/with-auth/src/app.tsx new file mode 100644 index 0000000..8a2ec4c --- /dev/null +++ b/solid-start/with-auth/src/app.tsx @@ -0,0 +1,33 @@ +import { type RouteDefinition, Router } from "@solidjs/router"; +import { FileRoutes } from "@solidjs/start/router"; +import { MetaProvider } from "@solidjs/meta"; +import { Suspense } from "solid-js"; +import { querySession } from "./auth"; +import Auth from "./components/Context"; +import Nav from "./components/Nav"; +import ErrorNotification from "./components/Error"; +import "./app.css"; + +export const route: RouteDefinition = { + preload: ({ location }) => querySession(location.pathname) +}; + +export default function App() { + return ( + ( + + + +