Added a solid frontend
This commit is contained in:
Imbus
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…
Add table
Add a link
Reference in a new issue