solid start

This commit is contained in:
Adam 2023-06-16 00:05:37 -04:00
parent 4dc0ddabbb
commit 967033ba4d
29 changed files with 3707 additions and 0 deletions

24
solid_start/.gitignore vendored Normal file
View 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
View 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

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

View 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/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 685 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View 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
View file

@ -0,0 +1,9 @@
# Doordesk
`pnpm install`
`pnpm run dev`
`pnpm run build`
`pnpm run start`

View 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>
);
}

View 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>
);
}

View file

@ -0,0 +1,3 @@
import { mount, StartClient } from "solid-start/entry-client";
mount(() => <StartClient />, document);

View 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
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

68
solid_start/src/root.tsx Normal file
View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
);
}

View 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>
</>
)
};

View 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>
);
}

View 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
View 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/*"]
}
}
}

View file

@ -0,0 +1,6 @@
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [solid()],
});