diff --git a/.gitignore b/.gitignore index dc35b31..d9240d1 100644 --- a/.gitignore +++ b/.gitignore @@ -37,5 +37,4 @@ dist-ssr *.njsproj *.sln *.sw? -temp -.env \ No newline at end of file +temp \ No newline at end of file diff --git a/directory/.env b/directory/.env new file mode 100644 index 0000000..6a0ab7e --- /dev/null +++ b/directory/.env @@ -0,0 +1 @@ +VITE_APP_TITLE="AKLive2D" \ No newline at end of file diff --git a/directory/index.html b/directory/index.html index 42d2087..e4c6a1c 100644 --- a/directory/index.html +++ b/directory/index.html @@ -7,6 +7,6 @@
- + diff --git a/directory/src/App.css b/directory/src/App.css index 2c5e2ef..6291c1f 100644 --- a/directory/src/App.css +++ b/directory/src/App.css @@ -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; } diff --git a/directory/src/App.jsx b/directory/src/App.jsx index 4ebc4bd..4f51250 100644 --- a/directory/src/App.jsx +++ b/directory/src/App.jsx @@ -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 ( -
-
- - - - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

-
+const routes = [ + { + path: "", + index: true, + name: "Home", + element: + }, { + path: "operator/:key", + index: false, + name: "Operator", + element: + } +] + +const router = createBrowserRouter( + createRoutesFromElements( + + } + errorElement={} + > + {routes.map((route) => { + return ( + + ) + })} + ) -} +); -export default App +ReactDOM.createRoot(document.getElementById('root')).render( + + + +) \ No newline at end of file diff --git a/directory/src/index.css b/directory/src/index.css deleted file mode 100644 index 917888c..0000000 --- a/directory/src/index.css +++ /dev/null @@ -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; - } -} diff --git a/directory/src/main.jsx b/directory/src/main.jsx deleted file mode 100644 index 5cc5991..0000000 --- a/directory/src/main.jsx +++ /dev/null @@ -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( - - - , -) diff --git a/directory/src/routes/error-page.jsx b/directory/src/routes/error-page.jsx new file mode 100644 index 0000000..cacf76e --- /dev/null +++ b/directory/src/routes/error-page.jsx @@ -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 ( +
+ error + +
+ ); +} \ No newline at end of file diff --git a/directory/src/routes/index.css b/directory/src/routes/index.css new file mode 100644 index 0000000..e69de29 diff --git a/directory/src/routes/index.jsx b/directory/src/routes/index.jsx new file mode 100644 index 0000000..eeaed1a --- /dev/null +++ b/directory/src/routes/index.jsx @@ -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 ( +
+
+ 1233 +
+
+ 22s +
+
+ ) +} \ No newline at end of file diff --git a/directory/src/routes/operator.css b/directory/src/routes/operator.css new file mode 100644 index 0000000..e69de29 diff --git a/directory/src/routes/operator.jsx b/directory/src/routes/operator.jsx new file mode 100644 index 0000000..92565c2 --- /dev/null +++ b/directory/src/routes/operator.jsx @@ -0,0 +1,19 @@ +import { + useState, + useEffect +} from 'react' +import './operator.css' + +export default function Operator(props) { + + return ( +
+
+ 1 +
+
+ 2 +
+
+ ) +} \ No newline at end of file diff --git a/directory/src/routes/root.css b/directory/src/routes/root.css new file mode 100644 index 0000000..6fb3e55 --- /dev/null +++ b/directory/src/routes/root.css @@ -0,0 +1,3 @@ +.main { + flex-grow: 1; +} \ No newline at end of file diff --git a/directory/src/routes/root.jsx b/directory/src/routes/root.jsx new file mode 100644 index 0000000..fbbad28 --- /dev/null +++ b/directory/src/routes/root.jsx @@ -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 ( + <> +
+
Nav button
+ +
+
+
+
Dynamic Compile
+
+ {/* All + Operator + Skill */} +
+
+ +
+ + + ) +} diff --git a/package.json b/package.json index 7d7ac74..47cc86a 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1391f0a..d24a862 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/vite.config.js b/vite.config.js index 9f10bb0..fce58b9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -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: {