diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 4dabfd5..0000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - 'eslint:recommended', - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, -} \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..a799da1 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,15 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended" + ], + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + } +} diff --git a/directory/Version b/directory/Version index e92964f..c678b02 100644 --- a/directory/Version +++ b/directory/Version @@ -1 +1 @@ -1.0.17 \ No newline at end of file +1.0.18 \ No newline at end of file diff --git a/directory/src/App.jsx b/directory/src/App.jsx index 88d7860..4c0bd4d 100644 --- a/directory/src/App.jsx +++ b/directory/src/App.jsx @@ -2,40 +2,20 @@ 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 Root from "@/routes/Root"; +import Error from "@/routes/Error"; import routes from "@/routes"; -import '@/App.css'; +import '@/App.scss'; import 'reset-css'; -const router = createBrowserRouter( - createRoutesFromElements( - - } - errorElement={} - > - {routes.map((route) => { - return ( - - ) - })} - - ) -); +const router = createBrowserRouter([{ + path: "/", + element: , + errorElement: , + children: routes.filter((item) => item.routeable), +},]); ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/directory/src/App.css b/directory/src/App.scss similarity index 71% rename from directory/src/App.css rename to directory/src/App.scss index 920b6ba..db90372 100644 --- a/directory/src/App.css +++ b/directory/src/App.scss @@ -3,17 +3,17 @@ @import 'https://fonts.cdnfonts.com/css/geometos'; :root { - --text-color: rgba(255 255 255 87%); + --text-color: rgba(255, 255, 255, 87%); --text-color-full: #fff; --secondary-text-color: #686a72; - --date-color: rgba(255 255 255 20%); + --date-color: rgba(255, 255, 255, 20%); --border-color: #707070; --link-highlight-color: #33b5e5; - --drawer-background-color: rgba(0 0 0 88%); + --drawer-background-color: rgba(0, 0, 0, 88%); --root-background-color: #131313; - --home-item-hover-background-color: rgba(67 67 67 30%); - --home-item-background-linear-gradient-color: rgba(255 255 255 10%); - --home-item-outline-color: rgba(214 214 214 30%); + --home-item-hover-background-color: rgba(67, 67, 67, 30%); + --home-item-background-linear-gradient-color: rgba(255, 255, 255, 10%); + --home-item-outline-color: rgba(214, 214, 214, 30%); --button-color: #666; font-family: Geometos, "Noto Sans SC", sans-serif; diff --git a/directory/src/component/main_border.jsx b/directory/src/component/border.jsx similarity index 61% rename from directory/src/component/main_border.jsx rename to directory/src/component/border.jsx index 4ec1133..d97bba9 100644 --- a/directory/src/component/main_border.jsx +++ b/directory/src/component/border.jsx @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classes from './main_border.module.scss'; +import classes from './scss/border.module.scss'; -export default function MainBorder(props) { +export default function Border(props) { return (
{props.children}
) } -MainBorder.propTypes = { +Border.propTypes = { children: PropTypes.node, }; \ No newline at end of file diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx index 4adb0a6..307ccce 100644 --- a/directory/src/component/dropdown.jsx +++ b/directory/src/component/dropdown.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types'; -import classes from './dropdown.module.scss' +import classes from './scss/dropdown.module.scss' export default function Dropdown(props) { const [hidden, setHidden] = useState(true) diff --git a/directory/src/component/popup.jsx b/directory/src/component/popup.jsx index b51f5ec..d1e081c 100644 --- a/directory/src/component/popup.jsx +++ b/directory/src/component/popup.jsx @@ -1,9 +1,9 @@ import React, { useState, } from 'react' -import classes from './popup.module.scss'; +import classes from './scss/popup.module.scss'; import ReturnButton from '@/component/return_button'; -import MainBorder from '@/component/main_border'; +import Border from '@/component/border'; import PropTypes from 'prop-types'; export default function Popup(props) { @@ -20,7 +20,7 @@ export default function Popup(props) {
{props.title}
- +
{props.children}
diff --git a/directory/src/component/return_button.jsx b/directory/src/component/return_button.jsx index e0480df..f61598d 100644 --- a/directory/src/component/return_button.jsx +++ b/directory/src/component/return_button.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classes from './return_button.module.scss' +import classes from './scss/return_button.module.scss' export default function ReturnButton(props) { diff --git a/directory/src/component/main_border.module.scss b/directory/src/component/scss/border.module.scss similarity index 100% rename from directory/src/component/main_border.module.scss rename to directory/src/component/scss/border.module.scss diff --git a/directory/src/component/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss similarity index 99% rename from directory/src/component/dropdown.module.scss rename to directory/src/component/scss/dropdown.module.scss index a5c3cab..9536ff4 100644 --- a/directory/src/component/dropdown.module.scss +++ b/directory/src/component/scss/dropdown.module.scss @@ -68,7 +68,7 @@ &:hover, &:focus, - &:active { + &.active { .text { color: currentColor; } diff --git a/directory/src/component/popup.module.scss b/directory/src/component/scss/popup.module.scss similarity index 100% rename from directory/src/component/popup.module.scss rename to directory/src/component/scss/popup.module.scss index 17a2be8..22234d8 100644 --- a/directory/src/component/popup.module.scss +++ b/directory/src/component/scss/popup.module.scss @@ -41,6 +41,13 @@ align-items: center; text-transform: uppercase; font-family: "Geometos", "Noto Sans SC", sans-serif; + .return-button { + color: var(--button-color); + transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; + &:hover { + color: var(--text-color); + } + } } .text { flex-grow: 1; @@ -66,13 +73,6 @@ opacity: 0.5; visibility: visible; } - .return-button { - color: var(--button-color); - transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; - &:hover { - color: var(--text-color); - } - } } &.active { opacity: 1; diff --git a/directory/src/component/return_button.module.scss b/directory/src/component/scss/return_button.module.scss similarity index 100% rename from directory/src/component/return_button.module.scss rename to directory/src/component/scss/return_button.module.scss diff --git a/directory/src/component/switch.module.scss b/directory/src/component/scss/switch.module.scss similarity index 100% rename from directory/src/component/switch.module.scss rename to directory/src/component/scss/switch.module.scss diff --git a/directory/src/component/switch.jsx b/directory/src/component/switch.jsx index 563837d..c02a531 100644 --- a/directory/src/component/switch.jsx +++ b/directory/src/component/switch.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import classes from './switch.module.scss'; +import classes from './scss/switch.module.scss'; import { useI18n } from '@/state/language' diff --git a/directory/src/routes/error-page.jsx b/directory/src/routes/Error.jsx similarity index 89% rename from directory/src/routes/error-page.jsx rename to directory/src/routes/Error.jsx index b8b1029..33c46e9 100644 --- a/directory/src/routes/error-page.jsx +++ b/directory/src/routes/Error.jsx @@ -9,7 +9,8 @@ import { useNavigate, useRouteError } from "react-router-dom"; -import './error-page.css' +import header from '@/scss/root/header.module.scss' +import classes from '@/scss/error/Error.module.scss' import { useAtom } from 'jotai' import { atomWithStorage } from 'jotai/utils'; import Switch from '@/component/switch'; @@ -27,7 +28,8 @@ const obj = config.files[Math.floor((Math.random() * config.files.length))] const filename = obj.key.replace("#", "%23") const padding = obj.paddings -export default function ErrorPage() { +export default function Error() { + // eslint-disable-next-line no-unused-vars const _trackEvt = useUmami('/error') const error = useRouteError(); const navigate = useNavigate(); @@ -52,8 +54,8 @@ export default function ErrorPage() { useEffect(() => { console.log(error) fetch(`/${import.meta.env.VITE_DIRECTORY_FOLDER}/${filename}.json`).then(res => res.json()).then(data => { - setSpineData(data) - }) + setSpineData(data) + }) }, [error]) useEffect(() => { @@ -130,10 +132,9 @@ export default function ErrorPage() { }, [playVoice, spineData]); return ( -
-
+
+
navigate(-1, { replace: true })} /> setVoiceOn(!voiceOn)} />
-
+
{ content.map((item, index) => { return ( -
+
diff --git a/directory/src/routes/root.jsx b/directory/src/routes/Root.jsx similarity index 74% rename from directory/src/routes/root.jsx rename to directory/src/routes/Root.jsx index 0182657..2899546 100644 --- a/directory/src/routes/root.jsx +++ b/directory/src/routes/Root.jsx @@ -10,9 +10,12 @@ import { Link, NavLink, useNavigate, - ScrollRestoration, + ScrollRestoration } from "react-router-dom"; -import './root.css' +import classes from '@/scss/root/Root.module.scss' +import header from '@/scss/root/header.module.scss' +import footer from '@/scss/root/footer.module.scss' +import drawer from '@/scss/root/drawer.module.scss' import routes from '@/routes' import { useConfig } from '@/state/config'; import { useHeader } from '@/state/header'; @@ -25,7 +28,7 @@ import { useBackgrounds } from '@/state/background'; import Dropdown from '@/component/dropdown'; import Popup from '@/component/popup'; import ReturnButton from '@/component/return_button'; -import MainBorder from '@/component/main_border'; +import Border from '@/component/border'; import CharIcon from '@/component/char_icon'; const currentYear = new Date().getFullYear() @@ -77,39 +80,39 @@ export default function Root() { return ( <> -
+
toggleDrawer()} > -
-
-
+
+
+
-
-
+
+
{extraArea}
-