Fix web ui & optimise publish plugin/prettier actions (#1344)
* fix: display selected plugin * fix: app bar responsive * fix: sticky header * added user-agent tooltip * fix: responsive pop * responsivve parsenovel * chatper list responsive * update dependecies * update npm i action * test * skip prepare * add terser to deps * update tsc command * remove ts-node * fix: tsc options * separate tsconfig for publish plugins * revert host_plugins.yml * test only terser & typescipt * revert github action file * cheapter prettier action
This commit is contained in:
@@ -15,9 +15,9 @@ jobs:
|
|||||||
token: ${{ secrets.REPO_SCOPED_TOKEN }}
|
token: ${{ secrets.REPO_SCOPED_TOKEN }}
|
||||||
- uses: actions/setup-node@v3
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: '18'
|
node-version: '20'
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: npm install
|
run: npm install --omit=dev --ignore-scripts
|
||||||
|
|
||||||
- name: Publish Plugins
|
- name: Publish Plugins
|
||||||
run: |
|
run: |
|
||||||
|
|||||||
@@ -18,7 +18,12 @@ jobs:
|
|||||||
node-version: '18'
|
node-version: '18'
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: npm ci
|
run: |
|
||||||
|
rm package.json
|
||||||
|
rm package-lock.json
|
||||||
|
npm init -y
|
||||||
|
npm pkg set type="module"
|
||||||
|
npm i prettier
|
||||||
|
|
||||||
- name: Prettier
|
- name: Prettier
|
||||||
run: npx prettier --check "./src/**/*.{ts,tsx,js,css}"
|
run: npx prettier --check "./src/**/*.{ts,tsx,js,css}"
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ git reset
|
|||||||
rm -r -fo .js
|
rm -r -fo .js
|
||||||
npm run clearMultisrc
|
npm run clearMultisrc
|
||||||
npm run generate
|
npm run generate
|
||||||
npx tsc -m node16
|
npx tsc --project tsconfig.production.json
|
||||||
npm run json
|
npm run json
|
||||||
git add -f public/static .dist .js/src/plugins total.svg
|
git add -f public/static .dist .js/src/plugins total.svg
|
||||||
git commit -m "chore: Publish Plugins"
|
git commit -m "chore: Publish Plugins"
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ git reset
|
|||||||
rm -rf .js
|
rm -rf .js
|
||||||
npm run clearMultisrc
|
npm run clearMultisrc
|
||||||
npm run generate
|
npm run generate
|
||||||
npx tsc -m node16
|
npx tsc --project tsconfig.production.json
|
||||||
npm run json
|
npm run json
|
||||||
git add -f public/static .dist .js/src/plugins total.svg
|
git add -f public/static .dist .js/src/plugins total.svg
|
||||||
git commit -m "chore: Publish Plugins"
|
git commit -m "chore: Publish Plugins"
|
||||||
|
|||||||
Generated
+967
-1231
File diff suppressed because it is too large
Load Diff
+21
-22
@@ -22,48 +22,47 @@
|
|||||||
"author": "LNReader",
|
"author": "LNReader",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.11.4",
|
"terser": "^5.36.0",
|
||||||
"@emotion/styled": "^11.11.5",
|
"typescript": "^5.7.2"
|
||||||
"@fontsource/roboto": "^5.0.13",
|
|
||||||
"@mui/icons-material": "^5.15.20",
|
|
||||||
"@mui/material": "^5.15.20",
|
|
||||||
"@reduxjs/toolkit": "^2.2.5",
|
|
||||||
"cheerio": "^1.0.0-rc.12",
|
|
||||||
"dayjs": "^1.11.10",
|
|
||||||
"htmlparser2": "^9.1.0",
|
|
||||||
"protobufjs": "^7.2.6",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-redux": "^9.1.2",
|
|
||||||
"react-virtuoso": "^4.7.11",
|
|
||||||
"react-window": "^1.8.10",
|
|
||||||
"sanitize-html": "^2.12.1",
|
|
||||||
"urlencode": "^2.0.0",
|
|
||||||
"zustand": "^4.5.4"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@emotion/react": "^11.13.5",
|
||||||
|
"@emotion/styled": "^11.13.5",
|
||||||
"@eslint/js": "^9.5.0",
|
"@eslint/js": "^9.5.0",
|
||||||
|
"@fontsource/roboto": "^5.1.0",
|
||||||
|
"@mui/icons-material": "^6.1.9",
|
||||||
|
"@mui/material": "^6.1.9",
|
||||||
|
"@reduxjs/toolkit": "^2.4.0",
|
||||||
"@types/eslint__js": "^8.42.3",
|
"@types/eslint__js": "^8.42.3",
|
||||||
"@types/eslint-config-prettier": "^6.11.3",
|
"@types/eslint-config-prettier": "^6.11.3",
|
||||||
"@types/react": "^18.2.66",
|
"@types/react": "^18.2.66",
|
||||||
"@types/react-dom": "^18.2.22",
|
"@types/react-dom": "^18.2.22",
|
||||||
"@types/react-window": "^1.8.8",
|
"@types/react-window": "^1.8.8",
|
||||||
"@vitejs/plugin-react-swc": "^3.5.0",
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||||
|
"cheerio": "^1.0.0",
|
||||||
"concurrently": "^8.2.2",
|
"concurrently": "^8.2.2",
|
||||||
|
"dayjs": "^1.11.13",
|
||||||
"eslint": "^8.57.0",
|
"eslint": "^8.57.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"globals": "^15.6.0",
|
"globals": "^15.6.0",
|
||||||
|
"htmlparser2": "^9.1.0",
|
||||||
"http-proxy": "^1.18.1",
|
"http-proxy": "^1.18.1",
|
||||||
"husky": "^9.0.11",
|
"husky": "^9.0.11",
|
||||||
"image-size": "^1.1.1",
|
"image-size": "^1.1.1",
|
||||||
"lint-staged": "^15.2.2",
|
"lint-staged": "^15.2.2",
|
||||||
"prettier": "^3.2.5",
|
"prettier": "^3.2.5",
|
||||||
"terser": "^5.36.0",
|
"protobufjs": "^7.4.0",
|
||||||
"ts-node": "^10.9.2",
|
"react": "^18.3.1",
|
||||||
"typescript": "^5.5.2",
|
"react-dom": "^18.3.1",
|
||||||
|
"react-redux": "^9.1.2",
|
||||||
|
"react-virtuoso": "^4.12.2",
|
||||||
|
"react-window": "^1.8.10",
|
||||||
|
"sanitize-html": "^2.13.1",
|
||||||
"typescript-eslint": "^7.14.1",
|
"typescript-eslint": "^7.14.1",
|
||||||
|
"urlencode": "^2.0.0",
|
||||||
"vite": "^5.2.0",
|
"vite": "^5.2.0",
|
||||||
"vite-plugin-node-polyfills": "^0.22.0"
|
"vite-plugin-node-polyfills": "^0.22.0",
|
||||||
|
"zustand": "^5.0.1"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"**/*.{js,ts,jsx,tsx}": "prettier --write"
|
"**/*.{js,ts,jsx,tsx}": "prettier --write"
|
||||||
|
|||||||
+2
-2
@@ -1,8 +1,8 @@
|
|||||||
#root {
|
#root {
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
width: 100vw;
|
||||||
|
padding-bottom: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
|||||||
+2
-1
@@ -32,10 +32,11 @@ function App() {
|
|||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
<Appbar />
|
<Appbar />
|
||||||
|
|
||||||
<Container
|
<Container
|
||||||
sx={{
|
sx={{
|
||||||
mt: 6,
|
mt: 6,
|
||||||
width: { sm: 500, md: 1024, lg: '90vw' },
|
width: '90%',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<HeadersSection />
|
<HeadersSection />
|
||||||
|
|||||||
@@ -5,16 +5,17 @@ import Toolbar from '@mui/material/Toolbar';
|
|||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
Backdrop,
|
Backdrop,
|
||||||
Button,
|
|
||||||
FormControl,
|
FormControl,
|
||||||
InputAdornment,
|
InputAdornment,
|
||||||
|
Link,
|
||||||
ListItem,
|
ListItem,
|
||||||
ListItemAvatar,
|
ListItemAvatar,
|
||||||
ListItemButton,
|
ListItemButton,
|
||||||
ListItemText,
|
ListItemText,
|
||||||
TextField,
|
TextField,
|
||||||
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { Search, Translate } from '@mui/icons-material';
|
import { Search } from '@mui/icons-material';
|
||||||
import { searchPlugins } from '@provider/plugins';
|
import { searchPlugins } from '@provider/plugins';
|
||||||
import { Plugin } from '@typings/plugin';
|
import { Plugin } from '@typings/plugin';
|
||||||
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
import { FixedSizeList, ListChildComponentProps } from 'react-window';
|
||||||
@@ -28,11 +29,12 @@ function renderPlugin(setListVisible: (v: boolean) => void) {
|
|||||||
return function (props: ListChildComponentProps<Plugin.PluginBase[]>) {
|
return function (props: ListChildComponentProps<Plugin.PluginBase[]>) {
|
||||||
const { index, style, data } = props;
|
const { index, style, data } = props;
|
||||||
const plugin = data[index];
|
const plugin = data[index];
|
||||||
const selectPlugin = useAppStore(state => state.selectPlugin);
|
const { selectPlugin, pluginItem } = useAppStore(state => state);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ListItem style={style} key={index} component="div" disablePadding>
|
<ListItem style={style} key={index} component="div" disablePadding>
|
||||||
<ListItemButton
|
<ListItemButton
|
||||||
|
selected={plugin.id === pluginItem?.id}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
selectPlugin({
|
selectPlugin({
|
||||||
id: plugin.id,
|
id: plugin.id,
|
||||||
@@ -67,14 +69,22 @@ export default function Appbar() {
|
|||||||
}, [keyword]);
|
}, [keyword]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ display: 'flex' }}>
|
<AppBar
|
||||||
<AppBar position="fixed" color="inherit" elevation={0}>
|
sx={{ width: '100vw' }}
|
||||||
|
position="sticky"
|
||||||
|
color="inherit"
|
||||||
|
elevation={0}
|
||||||
|
>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<FormControl
|
<FormControl
|
||||||
sx={{
|
sx={{
|
||||||
display: 'block',
|
display: 'block',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
zIndex: 10,
|
zIndex: 10,
|
||||||
|
width: {
|
||||||
|
xs: '80%',
|
||||||
|
md: '40%',
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
@@ -90,7 +100,8 @@ export default function Appbar() {
|
|||||||
</InputAdornment>
|
</InputAdornment>
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
sx={{ width: 434 }}
|
fullWidth
|
||||||
|
autoComplete="off"
|
||||||
onFocus={() => {
|
onFocus={() => {
|
||||||
setListVisible(true);
|
setListVisible(true);
|
||||||
if (searchedPlugins.length === 0)
|
if (searchedPlugins.length === 0)
|
||||||
@@ -100,7 +111,7 @@ export default function Appbar() {
|
|||||||
{listVisible ? (
|
{listVisible ? (
|
||||||
<FixedSizeList
|
<FixedSizeList
|
||||||
height={400}
|
height={400}
|
||||||
width={434}
|
width={'100%'}
|
||||||
itemData={searchedPlugins}
|
itemData={searchedPlugins}
|
||||||
itemSize={46}
|
itemSize={46}
|
||||||
itemCount={searchedPlugins.length}
|
itemCount={searchedPlugins.length}
|
||||||
@@ -120,26 +131,31 @@ export default function Appbar() {
|
|||||||
onClick={() => setListVisible(false)}
|
onClick={() => setListVisible(false)}
|
||||||
sx={{ zIndex: 9 }}
|
sx={{ zIndex: 9 }}
|
||||||
invisible={true}
|
invisible={true}
|
||||||
></Backdrop>
|
/>
|
||||||
<InputAdornment position="end">
|
|
||||||
<Button variant="contained" endIcon={<Translate />}>
|
|
||||||
Language
|
|
||||||
</Button>
|
|
||||||
</InputAdornment>
|
|
||||||
{plugin ? (
|
{plugin ? (
|
||||||
<Box sx={{ pl: 2, display: 'flex', alignItems: 'center' }}>
|
<Link
|
||||||
|
sx={{
|
||||||
|
pl: 2,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
textDecoration: 'none',
|
||||||
|
}}
|
||||||
|
href={plugin.site}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<Avatar
|
<Avatar
|
||||||
sx={{ mr: 1 }}
|
sx={{ mr: 1 }}
|
||||||
src={resovleIcon(plugin.icon)}
|
src={resovleIcon(plugin.icon)}
|
||||||
variant="square"
|
variant="square"
|
||||||
/>
|
/>
|
||||||
<a href={plugin.site} target="_blank">
|
<Typography
|
||||||
|
sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}
|
||||||
|
>
|
||||||
{plugin.name} - v{plugin.version}
|
{plugin.name} - v{plugin.version}
|
||||||
</a>
|
</Typography>
|
||||||
</Box>
|
</Link>
|
||||||
) : null}
|
) : null}
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
MenuItem,
|
MenuItem,
|
||||||
Select,
|
Select,
|
||||||
TextField,
|
TextField,
|
||||||
|
Tooltip,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import Checkbox from '@mui/material/Checkbox';
|
import Checkbox from '@mui/material/Checkbox';
|
||||||
import useDebounce from '@hooks/useDebounce';
|
import useDebounce from '@hooks/useDebounce';
|
||||||
@@ -57,17 +58,21 @@ export default function HeadersSection() {
|
|||||||
</Alert>
|
</Alert>
|
||||||
) : null}
|
) : null}
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Tooltip title={navigator.userAgent}>
|
||||||
<TextField
|
<TextField
|
||||||
size="small"
|
size="small"
|
||||||
InputProps={{
|
slotProps={{
|
||||||
|
input: {
|
||||||
startAdornment: (
|
startAdornment: (
|
||||||
<InputAdornment position="start">User Agent</InputAdornment>
|
<InputAdornment position="start">User Agent</InputAdornment>
|
||||||
),
|
),
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
disabled
|
disabled
|
||||||
value={navigator.userAgent}
|
value={navigator.userAgent}
|
||||||
sx={{ width: '100%' }}
|
sx={{ width: '100%' }}
|
||||||
/>
|
/>
|
||||||
|
</Tooltip>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
size="large"
|
size="large"
|
||||||
checked={useUserAgent}
|
checked={useUserAgent}
|
||||||
@@ -77,10 +82,12 @@ export default function HeadersSection() {
|
|||||||
<Box sx={{ height: 10 }} />
|
<Box sx={{ height: 10 }} />
|
||||||
<TextField
|
<TextField
|
||||||
size="small"
|
size="small"
|
||||||
InputProps={{
|
slotProps={{
|
||||||
|
input: {
|
||||||
startAdornment: (
|
startAdornment: (
|
||||||
<InputAdornment position="start">Cookies</InputAdornment>
|
<InputAdornment position="start">Cookies</InputAdornment>
|
||||||
),
|
),
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
value={cookies}
|
value={cookies}
|
||||||
onChange={e => {
|
onChange={e => {
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export default function ChapterList({
|
|||||||
chapters: Plugin.ChapterItem[];
|
chapters: Plugin.ChapterItem[];
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Paper style={{ height: 400, width: '100%', textAlign: 'left' }}>
|
<Paper style={{ height: 400, minWidth: 600, textAlign: 'left' }}>
|
||||||
<TableVirtuoso
|
<TableVirtuoso
|
||||||
data={chapters}
|
data={chapters}
|
||||||
components={VirtuosoTableComponents}
|
components={VirtuosoTableComponents}
|
||||||
|
|||||||
@@ -11,10 +11,10 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Typography,
|
Typography,
|
||||||
|
useTheme,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import CopiableItem from '@components/CopiableItem';
|
import CopiableItem from '@components/CopiableItem';
|
||||||
import PathItem from '@components/PathItem';
|
import PathItem from '@components/PathItem';
|
||||||
import Textarea from '@components/Textarea';
|
|
||||||
|
|
||||||
const FlexRow = ({ children }: { children: ReactNode }) => (
|
const FlexRow = ({ children }: { children: ReactNode }) => (
|
||||||
<Stack direction="row" gap={1} sx={{ alignItems: 'center' }}>
|
<Stack direction="row" gap={1} sx={{ alignItems: 'center' }}>
|
||||||
@@ -28,12 +28,12 @@ export default function SourceNovelCard({
|
|||||||
sourceNovel: Plugin.SourceNovel;
|
sourceNovel: Plugin.SourceNovel;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Card sx={{ display: 'flex', p: 1, width: '100%', textAlign: 'left' }}>
|
<Box sx={{ display: 'flex', p: 1, width: '100%', textAlign: 'left' }}>
|
||||||
<CopiableItem content={sourceNovel.cover}>
|
<CopiableItem content={sourceNovel.cover}>
|
||||||
<Tooltip title={sourceNovel.cover}>
|
<Tooltip title={sourceNovel.cover}>
|
||||||
<CardMedia
|
<CardMedia
|
||||||
component="img"
|
component="img"
|
||||||
sx={{ width: 200, height: '100%' }}
|
sx={{ width: 300, height: 400, objectFit: 'cover' }}
|
||||||
image={sourceNovel.cover}
|
image={sourceNovel.cover}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@@ -99,14 +99,19 @@ export default function SourceNovelCard({
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography>Summary</Typography>
|
<Typography>Summary</Typography>
|
||||||
<Textarea
|
<Typography
|
||||||
sx={{ width: '100%' }}
|
sx={{
|
||||||
maxRows={5}
|
overflowY: 'auto',
|
||||||
value={sourceNovel.summary}
|
height: 300,
|
||||||
disabled
|
p: 2,
|
||||||
/>
|
borderRadius: 2,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.1)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sourceNovel.summary}
|
||||||
|
</Typography>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Box>
|
</Box>
|
||||||
</Card>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { useAppStore } from '@store';
|
|||||||
export default function ParseNovel() {
|
export default function ParseNovel() {
|
||||||
const plugin = useAppStore(state => state.plugin);
|
const plugin = useAppStore(state => state.plugin);
|
||||||
const [sourceNovel, setSouceNovel] = useState<
|
const [sourceNovel, setSouceNovel] = useState<
|
||||||
Plugin.SourceNovel | undefined
|
(Plugin.SourceNovel & { totalPages?: number }) | undefined
|
||||||
>();
|
>();
|
||||||
const [chapters, setChapters] = useState<Plugin.ChapterItem[]>([]);
|
const [chapters, setChapters] = useState<Plugin.ChapterItem[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -37,6 +37,7 @@ export default function ParseNovel() {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<AccordionContainer title="Parse Novel" loading={loading}>
|
<AccordionContainer title="Parse Novel" loading={loading}>
|
||||||
|
<Box sx={{ overflowX: 'auto', width: '100%' }}>
|
||||||
<Stack direction={'row'} spacing={2}>
|
<Stack direction={'row'} spacing={2}>
|
||||||
<TextField
|
<TextField
|
||||||
value={novelPath}
|
value={novelPath}
|
||||||
@@ -56,15 +57,14 @@ export default function ParseNovel() {
|
|||||||
<Box sx={{ height: 20 }} />
|
<Box sx={{ height: 20 }} />
|
||||||
{chapters.length ? <ChapterList chapters={chapters} /> : null}
|
{chapters.length ? <ChapterList chapters={chapters} /> : null}
|
||||||
<Box sx={{ height: 20 }} />
|
<Box sx={{ height: 20 }} />
|
||||||
{/* @ts-ignore */}
|
|
||||||
{sourceNovel?.totalPages ? (
|
{sourceNovel?.totalPages ? (
|
||||||
<Pagination
|
<Pagination
|
||||||
// @ts-ignore
|
|
||||||
count={sourceNovel.totalPages}
|
count={sourceNovel.totalPages}
|
||||||
onChange={(e, page) => fetchPage(page)}
|
onChange={(e, page) => fetchPage(page)}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
</Box>
|
||||||
</AccordionContainer>
|
</AccordionContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,7 +80,13 @@ export default function PopularNovels() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<AccordionContainer title="Popular Novels" loading={loading}>
|
<AccordionContainer title="Popular Novels" loading={loading}>
|
||||||
<Stack direction={'row'} spacing={2} alignItems={'center'}>
|
<Stack
|
||||||
|
direction={'row'}
|
||||||
|
useFlexGap
|
||||||
|
sx={{ flexWrap: 'wrap' }}
|
||||||
|
spacing={2}
|
||||||
|
alignItems={'center'}
|
||||||
|
>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
control={
|
control={
|
||||||
@@ -140,13 +146,12 @@ export default function PopularNovels() {
|
|||||||
sx={{
|
sx={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
overflowX: 'auto',
|
overflowX: 'auto',
|
||||||
|
display: 'flex',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Stack sx={{ width: 'max-content' }} direction={'row'} spacing={2}>
|
|
||||||
{novels.map((novel, index) => (
|
{novels.map((novel, index) => (
|
||||||
<NovelItemCard key={'novelItem_' + index} item={novel} />
|
<NovelItemCard key={'novelItem_' + index} item={novel} />
|
||||||
))}
|
))}
|
||||||
</Stack>
|
|
||||||
</Box>
|
</Box>
|
||||||
</AccordionContainer>
|
</AccordionContainer>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import CopiableItem from '@components/CopiableItem';
|
|||||||
import PathItem from '@components/PathItem';
|
import PathItem from '@components/PathItem';
|
||||||
export default function NovelItemCard({ item }: { item: Plugin.NovelItem }) {
|
export default function NovelItemCard({ item }: { item: Plugin.NovelItem }) {
|
||||||
return (
|
return (
|
||||||
<Card sx={{ display: 'flex', p: 1 }}>
|
<Box sx={{ display: 'flex', p: 1 }}>
|
||||||
<CopiableItem content={item.cover}>
|
<CopiableItem content={item.cover}>
|
||||||
<Tooltip title={item.cover}>
|
<Tooltip title={item.cover}>
|
||||||
<CardMedia
|
<CardMedia
|
||||||
@@ -50,6 +50,6 @@ export default function NovelItemCard({ item }: { item: Plugin.NovelItem }) {
|
|||||||
<PathItem path={item.path} />
|
<PathItem path={item.path} />
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Box>
|
</Box>
|
||||||
</Card>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,159 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "react",
|
||||||
|
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||||
|
/* Projects */
|
||||||
|
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||||
|
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||||
|
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||||
|
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||||
|
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||||
|
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||||
|
/* Language and Environment */
|
||||||
|
"target": "ES5" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||||
|
// "lib": [
|
||||||
|
// "es2016",
|
||||||
|
// "dom",
|
||||||
|
// "es5"
|
||||||
|
// ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
|
||||||
|
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||||
|
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||||
|
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||||
|
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||||
|
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||||
|
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||||
|
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||||
|
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||||
|
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||||
|
/* Modules */
|
||||||
|
"module": "CommonJS" /* Specify what module code is generated. */,
|
||||||
|
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||||
|
"moduleResolution": "node10" /* Specify how TypeScript looks up a file from a given module specifier. */,
|
||||||
|
"baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
|
||||||
|
"paths": {
|
||||||
|
"@libs/*": [
|
||||||
|
"./src/libs/*"
|
||||||
|
],
|
||||||
|
"@icons/*": [
|
||||||
|
"./src/icons/*"
|
||||||
|
],
|
||||||
|
"@components/*": [
|
||||||
|
"./src/components/*"
|
||||||
|
],
|
||||||
|
"@redux/*": [
|
||||||
|
"./src/redux/*"
|
||||||
|
],
|
||||||
|
"@provider/*": [
|
||||||
|
"./src/provider/*"
|
||||||
|
],
|
||||||
|
"@plugins/*": [
|
||||||
|
"./src/plugins/*"
|
||||||
|
],
|
||||||
|
"@hooks/*": [
|
||||||
|
"./src/hooks/*"
|
||||||
|
],
|
||||||
|
"@scripts/*": [
|
||||||
|
"./scripts/*"
|
||||||
|
],
|
||||||
|
"@typings/*": [
|
||||||
|
"./src/types/*"
|
||||||
|
],
|
||||||
|
"@store": [
|
||||||
|
"./src/store"
|
||||||
|
]
|
||||||
|
} /* Specify a set of entries that re-map imports to additional lookup locations. */,
|
||||||
|
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||||
|
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||||
|
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||||
|
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||||
|
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||||
|
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||||
|
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||||
|
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||||
|
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||||
|
"resolveJsonModule": true /* Enable importing .json files. */,
|
||||||
|
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||||
|
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||||
|
/* JavaScript Support */
|
||||||
|
// "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
|
||||||
|
// "checkJs": true /* Enable error reporting in type-checked JavaScript files. */,
|
||||||
|
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||||
|
/* Emit */
|
||||||
|
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||||
|
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||||
|
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||||
|
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||||
|
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||||
|
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||||
|
"outDir": "./.js/" /* Specify an output folder for all emitted files. */,
|
||||||
|
// "removeComments": true, /* Disable emitting comments. */
|
||||||
|
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||||
|
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||||
|
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
||||||
|
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||||
|
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||||
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||||
|
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||||
|
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||||
|
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||||
|
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||||
|
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||||
|
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||||
|
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||||
|
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": false,
|
||||||
|
/* Interop Constraints */
|
||||||
|
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||||
|
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||||
|
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
|
||||||
|
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||||
|
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||||
|
/* Type Checking */
|
||||||
|
"strict": true /* Enable all strict type-checking options. */,
|
||||||
|
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||||
|
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||||
|
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||||
|
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||||
|
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||||
|
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||||
|
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||||
|
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||||
|
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||||
|
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||||
|
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||||
|
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||||
|
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||||
|
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||||
|
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||||
|
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||||
|
/* Completeness */
|
||||||
|
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||||
|
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
|
||||||
|
"noCheck": true,
|
||||||
|
"noResolve": true,
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"./src/plugins/**/*.broken.ts",
|
||||||
|
"./.js/**/*",
|
||||||
|
"scripts/**",
|
||||||
|
"docs/**",
|
||||||
|
"./src/*.*",
|
||||||
|
"./*.*",
|
||||||
|
"public/**",
|
||||||
|
".github/**",
|
||||||
|
".husky/**",
|
||||||
|
"node_modules/**",
|
||||||
|
"./src/components/**",
|
||||||
|
"./src/hooks/**",
|
||||||
|
"./src/libs/**",
|
||||||
|
"./src/provider/**",
|
||||||
|
"./src/store/**",
|
||||||
|
"./src/types/**"
|
||||||
|
],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user