usbharu
/
Hideout
mirror of https://github.com/usbharu/Hideout.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

feat: サイドバー、ログインフォームを作成

This commit is contained in:
usbharu 2023-06-28 18:36:38 +09:00
parent 7caae2cbaa
commit cd442d7f51
Signed by: usbharu
GPG Key ID: 6556747BF94EEBC8
13 changed files with 369 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -38,3 +38,4 @@ out/
/src/main/resources/static/
/node_modules/
/src/main/web/generated/
/stats.html

247
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "hideout",
"version": "1.0.0",
"dependencies": {
"@solid-primitives/context": "^0.2.1",
"@solid-primitives/storage": "^1.3.11",
"@solidjs/router": "^0.8.2",
"@suid/icons-material": "^0.6.3",
@ -17,6 +18,7 @@
"devDependencies": {
"@openapitools/openapi-generator-cli": "^2.6.0",
"@suid/vite-plugin": "^0.1.3",
"rollup-plugin-visualizer": "^5.9.2",
"typescript": "^5.0.4",
"vite": "^4.2.1",
"vite-plugin-solid": "^2.7.0"
@ -1273,6 +1275,14 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@solid-primitives/context": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.2.1.tgz",
"integrity": "sha512-XIIwCOWpRKDersgkR9LNFXaJHIV8QlCFo/tq5bV0cAOZklcwOFcqi2bN+uWgEIQSWGjWXU2kc1H1/TzgYzVDlg==",
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/storage": {
"version": "1.3.11",
"resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.11.tgz",
@ -1992,6 +2002,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -2392,6 +2411,21 @@
"node": ">=8"
}
},
"node_modules/is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true,
"bin": {
"is-docker": "cli.js"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@ -2434,6 +2468,18 @@
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"dependencies": {
"is-docker": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/iterare": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/iterare/-/iterare-1.2.1.tgz",
@ -2723,6 +2769,23 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/open": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
"dev": true,
"dependencies": {
"define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/ora": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@ -2846,6 +2909,18 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
},
"node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/postcss": {
"version": "8.4.24",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@ -2938,6 +3013,73 @@
"fsevents": "~2.3.2"
}
},
"node_modules/rollup-plugin-visualizer": {
"version": "5.9.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz",
"integrity": "sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==",
"dev": true,
"dependencies": {
"open": "^8.4.0",
"picomatch": "^2.3.1",
"source-map": "^0.7.4",
"yargs": "^17.5.1"
},
"bin": {
"rollup-plugin-visualizer": "dist/bin/cli.js"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"rollup": "2.x || 3.x"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/rollup-plugin-visualizer/node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
"dev": true,
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.1",
"wrap-ansi": "^7.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/rollup-plugin-visualizer/node_modules/yargs": {
"version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
"dev": true,
"dependencies": {
"cliui": "^8.0.1",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.1.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/rollup-plugin-visualizer/node_modules/yargs-parser": {
"version": "21.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
"dev": true,
"engines": {
"node": ">=12"
}
},
"node_modules/run-async": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@ -3034,6 +3176,15 @@
"solid-js": "^1.3"
}
},
"node_modules/source-map": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
"dev": true,
"engines": {
"node": ">= 8"
}
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -4227,6 +4378,12 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
},
"@solid-primitives/context": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.2.1.tgz",
"integrity": "sha512-XIIwCOWpRKDersgkR9LNFXaJHIV8QlCFo/tq5bV0cAOZklcwOFcqi2bN+uWgEIQSWGjWXU2kc1H1/TzgYzVDlg==",
"requires": {}
},
"@solid-primitives/storage": {
"version": "1.3.11",
"resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.11.tgz",
@ -4759,6 +4916,12 @@
"clone": "^1.0.2"
}
},
"define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -5050,6 +5213,12 @@
}
}
},
"is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true
},
"is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@ -5074,6 +5243,15 @@
"integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
"dev": true
},
"is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
"dev": true,
"requires": {
"is-docker": "^2.0.0"
}
},
"iterare": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/iterare/-/iterare-1.2.1.tgz",
@ -5274,6 +5452,17 @@
"mimic-fn": "^2.1.0"
}
},
"open": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
"dev": true,
"requires": {
"define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
}
},
"ora": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@ -5366,6 +5555,12 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
"dev": true
},
"picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
"postcss": {
"version": "8.4.24",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@ -5425,6 +5620,52 @@
"fsevents": "~2.3.2"
}
},
"rollup-plugin-visualizer": {
"version": "5.9.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz",
"integrity": "sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==",
"dev": true,
"requires": {
"open": "^8.4.0",
"picomatch": "^2.3.1",
"source-map": "^0.7.4",
"yargs": "^17.5.1"
},
"dependencies": {
"cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
"dev": true,
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.1",
"wrap-ansi": "^7.0.0"
}
},
"yargs": {
"version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
"dev": true,
"requires": {
"cliui": "^8.0.1",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.1.1"
}
},
"yargs-parser": {
"version": "21.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
"dev": true
}
}
},
"run-async": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@ -5497,6 +5738,12 @@
"@babel/types": "^7.21.2"
}
},
"source-map": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
"dev": true
},
"source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

2
package.json
View File

@ -2,6 +2,7 @@
"name": "hideout",
"version": "1.0.0",
"dependencies": {
"@solid-primitives/context": "^0.2.1",
"@solid-primitives/storage": "^1.3.11",
"@solidjs/router": "^0.8.2",
"@suid/icons-material": "^0.6.3",
@ -11,6 +12,7 @@
"devDependencies": {
"@openapitools/openapi-generator-cli": "^2.6.0",
"@suid/vite-plugin": "^0.1.3",
"rollup-plugin-visualizer": "^5.9.2",
"typescript": "^5.0.4",
"vite": "^4.2.1",
"vite-plugin-solid": "^2.7.0"

28
src/main/web/App.tsx
View File

@ -1,24 +1,32 @@
import {Component} from "solid-js";
import {Component, createSignal, lazy} from "solid-js";
import {Route, Router, Routes} from "@solidjs/router";
import {TopPage} from "./pages/TopPage";
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@suid/material";
import {createCookieStorage} from "@solid-primitives/storage";
import {ApiProvider, useApi} from "./lib/ApiProvider";
import {Configuration, DefaultApi} from "./generated";
import {LoginPage} from "./pages/LoginPage";
export const App: Component = () => {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const [cookie,setCookie] = createCookieStorage()
const [api,setApi] = createSignal(new DefaultApi(new Configuration({basePath:window.location.origin+"/api/internal/v1/",apiKey:cookie.key as string})))
const theme = createTheme({
palette: {
mode: prefersDarkMode() ? 'dark' : 'light',
}
})
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Router>
<Routes>
<Route path="/" component={TopPage}/>
</Routes>
</Router>
</ThemeProvider>
<ApiProvider api={api()}>
<ThemeProvider theme={theme}>
<CssBaseline/>
<Router>
<Routes>
<Route path="/" component={TopPage}/>
<Route path="/login" component={LoginPage}/>
</Routes>
</Router>
</ThemeProvider>
</ApiProvider>
)
}

14
src/main/web/atoms/SidebarButton.tsx Normal file
View File

@ -0,0 +1,14 @@
import {ParentComponent} from "solid-js";
import {Button, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText} from "@suid/material";
import {Link} from "@solidjs/router";
export const SidebarButton: ParentComponent<{ text: string,linkTo:string }> = (props) => {
return (
<ListItem>
<ListItemButton component={Link} href={props.linkTo}>
<ListItemIcon>{props.children}</ListItemIcon>
<ListItemText primary={props.text}/>
</ListItemButton>
</ListItem>
)
}

8
src/main/web/lib/ApiProvider.tsx Normal file
View File

@ -0,0 +1,8 @@
import {createContextProvider} from "@solid-primitives/context";
import {createSignal} from "solid-js";
import {DefaultApi, DefaultApiInterface} from "../generated";
export const [ApiProvider,useApi] = createContextProvider((props:{api:DefaultApiInterface}) => {
const [api,setApi] = createSignal(props.api);
return api
},()=>new DefaultApi());

11
src/main/web/organisms/PostForm.tsx
View File

@ -1,15 +1,18 @@
import {Component} from "solid-js";
import {Component, createSignal} from "solid-js";
import {Button, IconButton, Paper, Stack, TextField, Typography} from "@suid/material";
import {Avatar} from "../atoms/Avatar";
import {AddPhotoAlternate, Poll, Public} from "@suid/icons-material";
import {useApi} from "../lib/ApiProvider";
export const PostForm: Component<{ label: string }> = (props) => {
const [text, setText] = createSignal("")
const api = useApi()
return (
<Paper sx={{width: "100%"}}>
<Stack>
<Stack direction={"row"} spacing={2} sx={{padding: 2}}>
<Avatar src={""}/>
<TextField label={props.label} multiline rows={4} variant={"standard"} fullWidth/>
<TextField label={props.label} multiline rows={4} variant={"standard"} onChange={(event)=>setText(event.target.value)} fullWidth/>
</Stack>
<Stack direction={"row"} justifyContent={"space-between"} sx={{padding: 2}}>
<Stack direction={"row"} justifyContent={"flex-start"} alignItems={"center"}>
@ -27,7 +30,9 @@ export const PostForm: Component<{ label: string }> = (props) => {
<Typography>
aaa
</Typography>
<Button variant={"contained"}>
<Button variant={"contained"} onClick={() => {
api().postsPost({text: text()}).then(()=>setText(""))
}}>
投稿する
</Button>
</Stack>

39
src/main/web/pages/LoginPage.tsx Normal file
View File

@ -0,0 +1,39 @@
import {Button, Card, CardContent, CardHeader, Modal, Stack, TextField} from "@suid/material";
import {Component, createSignal} from "solid-js";
export const LoginPage:Component = () => {
const [username,setUsername] = createSignal("")
const [password,setPassword] = createSignal("")
return (
<Modal open>
<Card>
<CardHeader/>
<CardContent>
<Stack spacing={3}>
<TextField
value={username()}
onChange={(event)=>setUsername(event.target.value)}
label="Username"
type="text"
autoComplete="username"
variant="standard"
/>
<TextField
value={password()}
onChange={(event)=>setPassword(event.target.value)}
label="Password"
type="password"
autoComplete="current-password"
variant="standard"
/>
<Button type={"submit"} onClick={()=>{
console.log(username() +" " + password())}}>Login</Button>
</Stack>
</CardContent>
</Card>
</Modal>
)
}

14
src/main/web/pages/TopPage.tsx
View File

@ -1,21 +1,23 @@
import {Component, createResource} from "solid-js";
import {Component} from "solid-js";
import {MainPage} from "../templates/MainPage";
import {PostForm} from "../organisms/PostForm";
import {Stack} from "@suid/material";
import {DefaultApi} from "../generated";
import {PostResponse} from "../generated";
import {PostList} from "../templates/PostList";
import {ApiWrapper} from "../lib/ApiWrapper";
import {useApi} from "../lib/ApiProvider";
import {createStore} from "solid-js/store";
export const TopPage: Component = () => {
const api = new ApiWrapper(new DefaultApi())
const [posts] = createResource(api.postsGet);
const api = useApi()
const [posts, setPosts] = createStore<PostResponse[]>([])
api().postsGet().then((res)=>setPosts(res))
return (
<MainPage>
<Stack spacing={1} alignItems={"stretch"}>
<PostForm label={"投稿する"}/>
<PostList posts={posts() ?? []}/>
<PostList posts={posts}/>
</Stack>
</MainPage>
)

8
src/main/web/templates/MainPage.tsx
View File

@ -1,20 +1,20 @@
import {ParentComponent} from "solid-js";
import {createSignal, ParentComponent} from "solid-js";
import {Grid} from "@suid/material";
import {Sidebar} from "./Sidebar";
export const MainPage: ParentComponent = (props) => {
return (
<Grid container spacing={2}>
<Grid container spacing={2} wrap={"nowrap"}>
<Grid item xs={0} md={3}>
<Sidebar/>
</Grid>
<Grid item xs={12} md={5}>
<Grid item xs={12} md={6}>
{props.children}
</Grid>
<Grid item xs={0} md={3}>
</Grid>
</Grid>
)
}

2
src/main/web/templates/PostList.tsx
View File

@ -3,7 +3,7 @@ import {CircularProgress} from "@suid/material";
import {Post} from "../organisms/Post";
import {PostResponse} from "../generated";
export const PostList: Component<{ posts: PostResponse[] }> = (props) => {
export const PostList: Component<{ posts: PostResponse[] | undefined }> = (props) => {
return (
<For each={props.posts} fallback={<CircularProgress/>}>
{

13
src/main/web/templates/Sidebar.tsx
View File

@ -1,10 +1,13 @@
import {Component} from "solid-js";
import {Stack} from "@suid/material";
import {Button, List, Stack} from "@suid/material";
import {Home} from "@suid/icons-material";
import {SidebarButton} from "../atoms/SidebarButton";
export const Sidebar: Component = () => {
export const Sidebar: Component = (props) => {
return (
<Stack>
</Stack>
<List>
<SidebarButton text={"AP"} linkTo={"/"}></SidebarButton>
<SidebarButton text={"Home"} linkTo={"/"}><Home/></SidebarButton>
</List>
)
}

10
vite.config.ts
View File

@ -1,9 +1,10 @@
import {defineConfig} from 'vite';
import {defineConfig, splitVendorChunkPlugin} from 'vite';
import solidPlugin from 'vite-plugin-solid';
import suidPlugin from "@suid/vite-plugin";
import visualizer from "rollup-plugin-visualizer";
export default defineConfig({
plugins: [solidPlugin(),suidPlugin()],
plugins: [solidPlugin(),suidPlugin(),splitVendorChunkPlugin()],
server: {
port: 3000,
proxy: {
@ -14,5 +15,10 @@ export default defineConfig({
build: {
target: 'esnext',
outDir: '../resources/static',
rollupOptions:{
plugins: [
visualizer()
]
}
},
});