solid start
This commit is contained in:
parent
4dc0ddabbb
commit
967033ba4d
29 changed files with 3707 additions and 0 deletions
24
solid_start/.gitignore
vendored
Normal file
24
solid_start/.gitignore
vendored
Normal file
|
@ -0,0 +1,24 @@
|
|||
|
||||
dist
|
||||
.solid
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
netlify
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
*.launch
|
||||
.settings/
|
||||
|
||||
# Temp
|
||||
gitignore
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
27
solid_start/package.json
Normal file
27
solid_start/package.json
Normal file
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "solid_start",
|
||||
"scripts": {
|
||||
"dev": "solid-start dev",
|
||||
"build": "solid-start build",
|
||||
"start": "solid-start start"
|
||||
},
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.24",
|
||||
"solid-start-node": "^0.2.26",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.3.9"
|
||||
},
|
||||
"dependencies": {
|
||||
"@solidjs/meta": "^0.28.5",
|
||||
"@solidjs/router": "^0.8.2",
|
||||
"solid-js": "^1.7.6",
|
||||
"solid-start": "^0.2.26",
|
||||
"undici": "^5.22.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
3267
solid_start/pnpm-lock.yaml
generated
Normal file
3267
solid_start/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
6
solid_start/postcss.config.cjs
Normal file
6
solid_start/postcss.config.cjs
Normal file
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
6
solid_start/public/about.txt
Normal file
6
solid_start/public/about.txt
Normal file
|
@ -0,0 +1,6 @@
|
|||
This favicon was generated using the following graphics from Twitter Twemoji:
|
||||
|
||||
- Graphics Title: 1f37b.svg
|
||||
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
|
||||
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f37b.svg
|
||||
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
BIN
solid_start/public/android-chrome-192x192.png
Normal file
BIN
solid_start/public/android-chrome-192x192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
solid_start/public/android-chrome-512x512.png
Normal file
BIN
solid_start/public/android-chrome-512x512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
BIN
solid_start/public/apple-touch-icon.png
Normal file
BIN
solid_start/public/apple-touch-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
BIN
solid_start/public/favicon-16x16.png
Normal file
BIN
solid_start/public/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 685 B |
BIN
solid_start/public/favicon-32x32.png
Normal file
BIN
solid_start/public/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
BIN
solid_start/public/favicon.ico
Normal file
BIN
solid_start/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
1
solid_start/public/site.webmanifest
Normal file
1
solid_start/public/site.webmanifest
Normal file
|
@ -0,0 +1 @@
|
|||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
9
solid_start/readme.md
Normal file
9
solid_start/readme.md
Normal file
|
@ -0,0 +1,9 @@
|
|||
# Doordesk
|
||||
|
||||
`pnpm install`
|
||||
|
||||
`pnpm run dev`
|
||||
|
||||
`pnpm run build`
|
||||
|
||||
`pnpm run start`
|
13
solid_start/src/components/Counter.tsx
Normal file
13
solid_start/src/components/Counter.tsx
Normal file
|
@ -0,0 +1,13 @@
|
|||
import { createSignal } from "solid-js";
|
||||
|
||||
export default function Counter() {
|
||||
const [count, setCount] = createSignal(0);
|
||||
return (
|
||||
<button
|
||||
class="w-[200px] rounded-full bg-gray-700 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
|
||||
onClick={() => setCount(count() + 1)}
|
||||
>
|
||||
Clicks: {count()}
|
||||
</button>
|
||||
);
|
||||
}
|
18
solid_start/src/components/Post.tsx
Normal file
18
solid_start/src/components/Post.tsx
Normal file
|
@ -0,0 +1,18 @@
|
|||
import type { Article } from "~/routes";
|
||||
|
||||
export default function Post(props: Article) {
|
||||
console.log(props)
|
||||
return (
|
||||
<main class="bg-zinc-900 mx-auto text-zinc-300 p-4 my-5 max-w-prose">
|
||||
<p class="text-right">
|
||||
{props.article.date}
|
||||
</p>
|
||||
<h1 class="max-6-xs text-4xl text-red-600 font-thin uppercase">
|
||||
{props.article.title}
|
||||
</h1>
|
||||
<p class="my-4">
|
||||
{props.article.url}
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
3
solid_start/src/entry-client.tsx
Normal file
3
solid_start/src/entry-client.tsx
Normal file
|
@ -0,0 +1,3 @@
|
|||
import { mount, StartClient } from "solid-start/entry-client";
|
||||
|
||||
mount(() => <StartClient />, document);
|
9
solid_start/src/entry-server.tsx
Normal file
9
solid_start/src/entry-server.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import {
|
||||
StartServer,
|
||||
createHandler,
|
||||
renderAsync,
|
||||
} from "solid-start/entry-server";
|
||||
|
||||
export default createHandler(
|
||||
renderAsync((event) => <StartServer event={event} />)
|
||||
);
|
3
solid_start/src/root.css
Normal file
3
solid_start/src/root.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
68
solid_start/src/root.tsx
Normal file
68
solid_start/src/root.tsx
Normal file
|
@ -0,0 +1,68 @@
|
|||
// @refresh reload
|
||||
import { Suspense } from "solid-js";
|
||||
import {
|
||||
useLocation,
|
||||
A,
|
||||
Body,
|
||||
ErrorBoundary,
|
||||
FileRoutes,
|
||||
Head,
|
||||
Html,
|
||||
Meta,
|
||||
Routes,
|
||||
Scripts,
|
||||
Title,
|
||||
} from "solid-start";
|
||||
import "./root.css";
|
||||
|
||||
export default function Root() {
|
||||
const location = useLocation();
|
||||
const active = (path: string) =>
|
||||
path == location.pathname
|
||||
? "border-sky-600"
|
||||
: "border-transparent hover:border-sky-600";
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<Title>doordesk</Title>
|
||||
<Meta charset="utf-8" />
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<Body class="bg-zinc-950">
|
||||
<Suspense>
|
||||
<ErrorBoundary>
|
||||
<nav class="bg-gradient-to-b from-zinc-800 to-zinc-900">
|
||||
<ul class="container flex items-center p-3 text-gray-200">
|
||||
<li class={`border-b-2} mx-1.5 sm:mx-6`}>
|
||||
DoorDesk
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/">Home</A>
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/blog")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/blog">Blog</A>
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/projects")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/projects">Projects</A>
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/games")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/games">Games</A>
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/cartman")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/cartman">Cartman</A>
|
||||
</li>
|
||||
<li class={`border-b-2 ${active("/about")} mx-1.5 sm:mx-6`}>
|
||||
<A href="/about">About</A>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<Routes>
|
||||
<FileRoutes />
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
</Suspense>
|
||||
<Scripts />
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
}
|
31
solid_start/src/routes/[...404].tsx
Normal file
31
solid_start/src/routes/[...404].tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
Not Found
|
||||
</h1>
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<A href="/" class="text-sky-600 hover:underline">
|
||||
Home
|
||||
</A>
|
||||
{" - "}
|
||||
<A href="/about" class="text-sky-600 hover:underline">
|
||||
About Page
|
||||
</A>
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
31
solid_start/src/routes/about.tsx
Normal file
31
solid_start/src/routes/about.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
About!
|
||||
</h1>
|
||||
<Counter />
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<A href="/" class="text-sky-600 hover:underline">
|
||||
Home
|
||||
</A>
|
||||
{" - "}
|
||||
<span>About Page</span>
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
31
solid_start/src/routes/blog.tsx
Normal file
31
solid_start/src/routes/blog.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
Blog!
|
||||
</h1>
|
||||
<Counter />
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<span>Home</span>
|
||||
{" - "}
|
||||
<A href="/about" class="text-sky-600 hover:underline">
|
||||
About Page
|
||||
</A>{" "}
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
31
solid_start/src/routes/cartman.tsx
Normal file
31
solid_start/src/routes/cartman.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
Cartman!
|
||||
</h1>
|
||||
<Counter />
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<span>Home</span>
|
||||
{" - "}
|
||||
<A href="/about" class="text-sky-600 hover:underline">
|
||||
About Page
|
||||
</A>{" "}
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
31
solid_start/src/routes/games.tsx
Normal file
31
solid_start/src/routes/games.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
Games!
|
||||
</h1>
|
||||
<Counter />
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<span>Home</span>
|
||||
{" - "}
|
||||
<A href="/about" class="text-sky-600 hover:underline">
|
||||
About Page
|
||||
</A>{" "}
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
36
solid_start/src/routes/index.tsx
Normal file
36
solid_start/src/routes/index.tsx
Normal file
|
@ -0,0 +1,36 @@
|
|||
import { For, Accessor, createResource } from "solid-js"
|
||||
import { useRouteData } from "solid-start";
|
||||
import Post from "~/components/Post"
|
||||
|
||||
|
||||
export type Article = {
|
||||
content_type: string;
|
||||
title: string;
|
||||
date: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
|
||||
export function routeData() {
|
||||
const [blogPosts] = createResource(async () => {
|
||||
const response = await fetch("http://127.0.0.1:9696/dennis/blog")
|
||||
return await response.json() as Article[];
|
||||
});
|
||||
|
||||
return { blogPosts };
|
||||
};
|
||||
|
||||
|
||||
export default function Home() {
|
||||
const { blogPosts } = useRouteData<typeof routeData>();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul>
|
||||
<For each={blogPosts()}>
|
||||
{(post) => <li><Post article={post} /></li>}
|
||||
</For>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
};
|
31
solid_start/src/routes/projects.tsx
Normal file
31
solid_start/src/routes/projects.tsx
Normal file
|
@ -0,0 +1,31 @@
|
|||
import { A } from "solid-start";
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main class="text-center mx-auto text-gray-700 p-4">
|
||||
<h1 class="max-6-xs text-6xl text-sky-700 font-thin uppercase my-16">
|
||||
Projects!
|
||||
</h1>
|
||||
<Counter />
|
||||
<p class="mt-8">
|
||||
Visit{" "}
|
||||
<a
|
||||
href="https://solidjs.com"
|
||||
target="_blank"
|
||||
class="text-sky-600 hover:underline"
|
||||
>
|
||||
solidjs.com
|
||||
</a>{" "}
|
||||
to learn how to build Solid apps.
|
||||
</p>
|
||||
<p class="my-4">
|
||||
<span>Home</span>
|
||||
{" - "}
|
||||
<A href="/about" class="text-sky-600 hover:underline">
|
||||
About Page
|
||||
</A>{" "}
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
8
solid_start/tailwind.config.cjs
Normal file
8
solid_start/tailwind.config.cjs
Normal file
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
};
|
17
solid_start/tsconfig.json
Normal file
17
solid_start/tsconfig.json
Normal file
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"jsxImportSource": "solid-js",
|
||||
"jsx": "preserve",
|
||||
"strict": true,
|
||||
"types": ["solid-start/env"],
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
6
solid_start/vite.config.ts
Normal file
6
solid_start/vite.config.ts
Normal file
|
@ -0,0 +1,6 @@
|
|||
import solid from "solid-start/vite";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solid()],
|
||||
});
|
Loading…
Add table
Reference in a new issue