chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): add directory page scaffold

Browse Source
This commit is contained in:
Haoyu Xu
2023-02-21 00:32:49 -05:00
parent bf5a154bc7
commit ef10b8fb55
17 changed files with 203 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -38,4 +38,3 @@ dist-ssr
*.sln
*.sw?
temp
.env

1
directory/.env Normal file
View File

@@ -0,0 +1 @@
VITE_APP_TITLE="AKLive2D"

2
directory/index.html
View File

@@ -7,6 +7,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/src/App.jsx"></script>
</body>
</html>

62
directory/src/App.css
View File

@@ -1,41 +1,25 @@
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Noto+Sans+SC&display=swap");
:root {
font-family: "Josefin Sans", "Noto Sans SC", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgba(255, 255, 255, 0.87);
background-color: #131313;
min-height: 100vh;
font-synthesis: none;
text-rendering: optimizeLegibility;
}
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
min-height: 100vh;
}

83
directory/src/App.jsx
View File

@@ -1,31 +1,60 @@
import { useState } from 'react'
import './App.css'
import React from 'react';
import ReactDOM from 'react-dom/client'
import {
createBrowserRouter,
createRoutesFromElements,
RouterProvider,
Route
} from "react-router-dom";
import Root from "@/routes/root";
import ErrorPage from "@/routes/error-page";
import Index from "@/routes/index";
import Operator from "@/routes/operator";
import '@/App.css';
import 'reset-css';
function App() {
const [count, setCount] = useState(0)
document.title = import.meta.env.VITE_APP_TITLE;
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
</a>
<a href="https://reactjs.org" target="_blank">
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
const routes = [
{
path: "",
index: true,
name: "Home",
element: <Index />
}, {
path: "operator/:key",
index: false,
name: "Operator",
element: <Operator />
}
]
const router = createBrowserRouter(
createRoutesFromElements(
<Route
path="/"
element={
<Root
title={import.meta.env.VITE_APP_TITLE}
/>
}
errorElement={<ErrorPage />}
>
{routes.map((route) => {
return (
<Route key={route.name}
index={route.index}
path={route.path}
element={route.element}
/>
)
})}
</Route>
)
}
);
export default App
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
)

70
directory/src/index.css
View File

@@ -1,70 +0,0 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

10
directory/src/main.jsx
View File

@@ -1,10 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

16
directory/src/routes/error-page.jsx Normal file
View File

@@ -0,0 +1,16 @@
import {
useNavigate,
useRouteError
} from "react-router-dom";
export default function ErrorPage() {
const error = useRouteError();
const navigate = useNavigate();
console.log(error)
return (
<section>
error
<button onClick={() => navigate(-1, { replace: true })}>Go Home</button>
</section>
);
}

0
directory/src/routes/index.css Normal file
View File

24
directory/src/routes/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import {
useState,
useEffect
} from 'react'
import './index.css'
export default function Index(props) {
useEffect(() => {
fetch("/_assets/directory.json").then(res => res.json()).then(data => {
console.log(data)
})
}, [])
return (
<section>
<section>
1233
</section>
<section>
22s
</section>
</section>
)
}

0
directory/src/routes/operator.css Normal file
View File

19
directory/src/routes/operator.jsx Normal file
View File

@@ -0,0 +1,19 @@
import {
useState,
useEffect
} from 'react'
import './operator.css'
export default function Operator(props) {
return (
<section>
<section>
1
</section>
<section>
2
</section>
</section>
)
}

3
directory/src/routes/root.css Normal file
View File

@@ -0,0 +1,3 @@
.main {
flex-grow: 1;
}

51
directory/src/routes/root.jsx Normal file
View File

@@ -0,0 +1,51 @@
import {
useState,
useEffect
} from 'react'
import {
Outlet,
Link,
NavLink,
useNavigation,
useLocation,
useNavigate,
} from "react-router-dom";
import './root.css'
export default function Root(props) {
return (
<>
<header>
<section>Nav button</section>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/operator/chen">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</nav>
</header>
<main className='main'>
<section>
<section>Dynamic Compile</section>
<section>
{/* <NavLink to="/home">All</NavLink>
<NavLink to="/about">Operator</NavLink>
<NavLink to="/contact">Skill</NavLink> */}
</section>
</section>
<Outlet />
</main>
<footer>
<section>
<p>Privacy Policy</p>
<p>Github</p>
<p>Contact Us</p>
</section>
<section>
<p>Spine Runtimes © 2013 - 2019, Esoteric Software LLC</p>
<p>Assets © 2017 - 2023 上海鹰角网络科技有限公司</p>
<p>Source Code © 2021 - 2023 Halyul</p>
</section>
</footer>
</>
)
}

1
package.json
View File

@@ -33,6 +33,7 @@
"react-dom": "^18.2.0",
"react-refresh": "^0.14.0",
"react-router-dom": "^6.8.1",
"reset-css": "^5.0.1",
"sharp": "^0.31.3",
"yaml": "^2.2.1"
}

6
pnpm-lock.yaml generated
View File

@@ -10,6 +10,7 @@ specifiers:
react-dom: ^18.2.0
react-refresh: ^0.14.0
react-router-dom: ^6.8.1
reset-css: ^5.0.1
sharp: ^0.31.3
vite: ^4.1.3
yaml: ^2.2.1
@@ -21,6 +22,7 @@ dependencies:
react-dom: 18.2.0_react@18.2.0
react-refresh: 0.14.0
react-router-dom: 6.8.1_biqbaboplfbrettd7655fr4n2y
reset-css: 5.0.1
sharp: 0.31.3
yaml: 2.2.1
@@ -737,6 +739,10 @@ packages:
util-deprecate: 1.0.2
dev: false
/reset-css/5.0.1:
resolution: {integrity: sha512-VyuJdNFfp5x/W6e5wauJM59C02Vs0P22sxzZGhQMPaqu/NGTeFxlBFOOw3eq9vQd19gIDdZp7zi89ylyKOJ33Q==}
dev: false
/resolve/1.22.1:
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
hasBin: true

3
vite.config.js
View File

@@ -19,7 +19,6 @@ class ViteRunner {
},
build: {
emptyOutDir: false,
chunkSizeWarningLimit: 10000,
},
}
@@ -113,6 +112,7 @@ class ViteRunner {
},
build: {
...this.#baseViteConfig.build,
chunkSizeWarningLimit: 10000,
outDir: path.resolve(__projetRoot, this.#globalConfig.folder.release, operatorName),
},
}
@@ -134,7 +134,6 @@ class ViteRunner {
resolve: {
alias: {
'@': path.resolve(directoryDir, './src'),
'!': path.resolve(__projetRoot, this.#globalConfig.folder.release, this.#globalConfig.folder.directory),
},
},
build: {