Added a solid frontend
This commit is contained in:
parent
368909aefd
commit
ad0dc74083
14 changed files with 2877 additions and 0 deletions
24
client-solid/.gitignore
vendored
Normal file
24
client-solid/.gitignore
vendored
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
17
client-solid/index.html
Normal file
17
client-solid/index.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-theme="dracula">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="shortcut icon"
|
||||||
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-1756clo' focusable='false' aria-hidden='true' viewBox='0 0 24 24' data-testid='AcUnitIcon'%3E%3Cpath d='M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z'%3E%3C/path%3E%3C/svg%3E" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>FrostByteSolid</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="min-h-screen">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
2547
client-solid/package-lock.json
generated
Normal file
2547
client-solid/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
25
client-solid/package.json
Normal file
25
client-solid/package.json
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"name": "client-solid",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@solidjs/router": "^0.8.3",
|
||||||
|
"solid-js": "^1.7.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"daisyui": "^3.9.3",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.5",
|
||||||
|
"vite-plugin-qrcode": "^0.2.2",
|
||||||
|
"vite-plugin-solid": "^2.7.0"
|
||||||
|
}
|
||||||
|
}
|
6
client-solid/postcss.config.js
Normal file
6
client-solid/postcss.config.js
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
95
client-solid/src/Root.tsx
Normal file
95
client-solid/src/Root.tsx
Normal file
|
@ -0,0 +1,95 @@
|
||||||
|
import { createSignal } from "solid-js";
|
||||||
|
import { createContext } from "solid-js";
|
||||||
|
|
||||||
|
import { createPost, getPosts, getPost } from "./api";
|
||||||
|
import { Post, NewPost } from "./api";
|
||||||
|
|
||||||
|
export const TestContext = createContext("Test123");
|
||||||
|
|
||||||
|
function Root() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<TestContext.Provider value="Test123">
|
||||||
|
<Primary />
|
||||||
|
</TestContext.Provider>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Menu() {
|
||||||
|
return (
|
||||||
|
<ul class="menu menu-horizontal bg-base-200 rounded-box space-x-1">
|
||||||
|
<li>
|
||||||
|
<a>Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>Boards</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a>New</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NewPostInputArea() {
|
||||||
|
const [content, setContent] = createSignal("");
|
||||||
|
return (
|
||||||
|
<div class="flex flex-col my-4">
|
||||||
|
<textarea
|
||||||
|
class="textarea textarea-bordered"
|
||||||
|
placeholder="Bio"
|
||||||
|
oninput={(input) => {
|
||||||
|
setContent(input.target.value);
|
||||||
|
}}
|
||||||
|
></textarea>
|
||||||
|
<button class="btn btn-primary self-end btn-sm mt-4" onclick={() => {
|
||||||
|
createPost({ content: content(), token: "" } as NewPost);
|
||||||
|
}}>Submit</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Posts() {
|
||||||
|
const [posts, setPosts] = createSignal([]);
|
||||||
|
|
||||||
|
getPosts().then((posts) => {
|
||||||
|
setPosts(posts as any);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class="flex flex-col my-4 space-y-2">
|
||||||
|
{posts().map((post) => {
|
||||||
|
return (
|
||||||
|
<PostSegment post={post}></PostSegment>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function PostSegment({ post }: { post: Post}) {
|
||||||
|
return (
|
||||||
|
<div class="card bg-base-200 shadow-lg compact text-base-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title">{post.content}</h2>
|
||||||
|
<p class="text-base-content">{post.uuid}</p>
|
||||||
|
<p>{post.votes.up}</p>
|
||||||
|
<p>{post.votes.down}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function Primary() {
|
||||||
|
return (
|
||||||
|
<div class="flex flex-col items-center my-6">
|
||||||
|
<Menu></Menu>
|
||||||
|
<NewPostInputArea></NewPostInputArea>
|
||||||
|
<Posts></Posts>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Root;
|
43
client-solid/src/api.ts
Normal file
43
client-solid/src/api.ts
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
const PORT = 3000;
|
||||||
|
const API_URL = `http://localhost:${PORT}/api/`;
|
||||||
|
const API_URL2 = new URL(API_URL);
|
||||||
|
|
||||||
|
export interface NewPost {
|
||||||
|
content: string;
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Votes {
|
||||||
|
up: number;
|
||||||
|
down: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Post extends NewPost {
|
||||||
|
uuid: string;
|
||||||
|
createdAt: string;
|
||||||
|
votes: Votes;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPosts(): Promise<Post[]> {
|
||||||
|
// const res = await fetch(`${API_URL}/posts`);
|
||||||
|
const res = await fetch(API_URL2.href);
|
||||||
|
const data = await res.json();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPost(id: string): Promise<Post> {
|
||||||
|
const res = await fetch(`${API_URL}/posts/${id}`);
|
||||||
|
const data = await res.json();
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createPost(post: NewPost): Promise<void> {
|
||||||
|
// await fetch(`${API_URL}`, {
|
||||||
|
await fetch(API_URL2.href, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(post),
|
||||||
|
});
|
||||||
|
}
|
3
client-solid/src/index.css
Normal file
3
client-solid/src/index.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
18
client-solid/src/index.tsx
Normal file
18
client-solid/src/index.tsx
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
/* @refresh reload */
|
||||||
|
import { render } from "solid-js/web";
|
||||||
|
|
||||||
|
import "./index.css";
|
||||||
|
import Root from "./Root";
|
||||||
|
|
||||||
|
import { Router } from "@solidjs/router";
|
||||||
|
|
||||||
|
const root = document.getElementById("root");
|
||||||
|
|
||||||
|
render(
|
||||||
|
() => (
|
||||||
|
<Router>
|
||||||
|
<Root />
|
||||||
|
</Router>
|
||||||
|
),
|
||||||
|
root!
|
||||||
|
);
|
1
client-solid/src/vite-env.d.ts
vendored
Normal file
1
client-solid/src/vite-env.d.ts
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
31
client-solid/tailwind.config.js
Normal file
31
client-solid/tailwind.config.js
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
daisyui: {
|
||||||
|
themes: [
|
||||||
|
{
|
||||||
|
mytheme: {
|
||||||
|
"primary": "#86e8d9",
|
||||||
|
"secondary": "#b5385d",
|
||||||
|
"accent": "#88ed5a",
|
||||||
|
"neutral": "#14171f",
|
||||||
|
"base-100": "#343154",
|
||||||
|
"info": "#9bc3e9",
|
||||||
|
"success": "#1f9363",
|
||||||
|
"warning": "#f2ce4a",
|
||||||
|
"error": "#e77d6a",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [require("daisyui")],
|
||||||
|
}
|
||||||
|
|
34
client-solid/tsconfig.json
Normal file
34
client-solid/tsconfig.json
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"ES2020",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "solid-js",
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
10
client-solid/tsconfig.node.json
Normal file
10
client-solid/tsconfig.node.json
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
23
client-solid/vite.config.ts
Normal file
23
client-solid/vite.config.ts
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import solid from 'vite-plugin-solid'
|
||||||
|
import { qrcode } from 'vite-plugin-qrcode'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
// build: {
|
||||||
|
// outDir: '../server/public' // Override default outDir('dist')
|
||||||
|
// },
|
||||||
|
plugins: [solid(), qrcode()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
open: true,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080/api',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false,
|
||||||
|
rewrite: (path): string => path.replace(/^\/api/, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in a new issue