masi/lnreader-plugins
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix web ui & optimise publish plugin/prettier actions (#1344)

Browse Source 
* 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:
nyagami
2024-11-29 15:52:36 +07:00
committed by GitHub
parent 99c5fb5d8f
commit e0b7d7eccb
16 changed files with 1332 additions and 1399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/host_plugins.yml
+2 -2
View File
@@ -15,9 +15,9 @@ jobs:
token: ${{ secrets.REPO_SCOPED_TOKEN }}
- uses: actions/setup-node@v3
with:
node-version: '18'
node-version: '20'
- name: Install Dependencies
run: npm install
run: npm install --omit=dev --ignore-scripts
- name: Publish Plugins
run: |
.github/workflows/prettier.yml
+6 -1
View File
@@ -18,7 +18,12 @@ jobs:
node-version: '18'
- 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
run: npx prettier --check "./src/**/*.{ts,tsx,js,css}"
host.ps1
+1 -1
View File
@@ -20,7 +20,7 @@ git reset
rm -r -fo .js
npm run clearMultisrc
npm run generate
npx tsc -m node16
npx tsc --project tsconfig.production.json
npm run json
git add -f public/static .dist .js/src/plugins total.svg
git commit -m "chore: Publish Plugins"
host.sh
+1 -1
View File
@@ -20,7 +20,7 @@ git reset
rm -rf .js
npm run clearMultisrc
npm run generate
npx tsc -m node16
npx tsc --project tsconfig.production.json
npm run json
git add -f public/static .dist .js/src/plugins total.svg
git commit -m "chore: Publish Plugins"
package-lock.json
Generated
+967 -1231
View File
File diff suppressed because it is too large Load Diff
package.json
+21 -22
View File
@@ -22,48 +22,47 @@
"author": "LNReader",
"license": "MIT",
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@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"
"terser": "^5.36.0",
"typescript": "^5.7.2"
},
"devDependencies": {
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@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-config-prettier": "^6.11.3",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@types/react-window": "^1.8.8",
"@vitejs/plugin-react-swc": "^3.5.0",
"cheerio": "^1.0.0",
"concurrently": "^8.2.2",
"dayjs": "^1.11.13",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"globals": "^15.6.0",
"htmlparser2": "^9.1.0",
"http-proxy": "^1.18.1",
"husky": "^9.0.11",
"image-size": "^1.1.1",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5",
"terser": "^5.36.0",
"ts-node": "^10.9.2",
"typescript": "^5.5.2",
"protobufjs": "^7.4.0",
"react": "^18.3.1",
"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",
"urlencode": "^2.0.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": {
"**/*.{js,ts,jsx,tsx}": "prettier --write"
src/App.css
+2 -2
View File
@@ -1,8 +1,8 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
width: 100vw;
padding-bottom: 40px;
}
.logo {
src/App.tsx
+2 -1
View File
@@ -32,10 +32,11 @@ function App() {
<ThemeProvider theme={theme}>
<CssBaseline />
<Appbar />
<Container
sx={{
mt: 6,
width: { sm: 500, md: 1024, lg: '90vw' },
width: '90%',
}}
>
<HeadersSection />
src/components/Appbar/index.tsx
+34 -18
View File
@@ -5,16 +5,17 @@ import Toolbar from '@mui/material/Toolbar';
import {
Avatar,
Backdrop,
Button,
FormControl,
InputAdornment,
Link,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemText,
TextField,
Typography,
} from '@mui/material';
import { Search, Translate } from '@mui/icons-material';
import { Search } from '@mui/icons-material';
import { searchPlugins } from '@provider/plugins';
import { Plugin } from '@typings/plugin';
import { FixedSizeList, ListChildComponentProps } from 'react-window';
@@ -28,11 +29,12 @@ function renderPlugin(setListVisible: (v: boolean) => void) {
return function (props: ListChildComponentProps<Plugin.PluginBase[]>) {
const { index, style, data } = props;
const plugin = data[index];
const selectPlugin = useAppStore(state => state.selectPlugin);
const { selectPlugin, pluginItem } = useAppStore(state => state);
return (
<ListItem style={style} key={index} component="div" disablePadding>
<ListItemButton
selected={plugin.id === pluginItem?.id}
onClick={() => {
selectPlugin({
id: plugin.id,
@@ -67,14 +69,22 @@ export default function Appbar() {
}, [keyword]);
return (
<Box sx={{ display: 'flex' }}>
<AppBar position="fixed" color="inherit" elevation={0}>
<AppBar
sx={{ width: '100vw' }}
position="sticky"
color="inherit"
elevation={0}
>
<Toolbar>
<FormControl
sx={{
display: 'block',
position: 'relative',
zIndex: 10,
width: {
xs: '80%',
md: '40%',
},
}}
>
<TextField
@@ -90,7 +100,8 @@ export default function Appbar() {
</InputAdornment>
),
}}
sx={{ width: 434 }}
fullWidth
autoComplete="off"
onFocus={() => {
setListVisible(true);
if (searchedPlugins.length === 0)
@@ -100,7 +111,7 @@ export default function Appbar() {
{listVisible ? (
<FixedSizeList
height={400}
width={434}
width={'100%'}
itemData={searchedPlugins}
itemSize={46}
itemCount={searchedPlugins.length}
@@ -120,26 +131,31 @@ export default function Appbar() {
onClick={() => setListVisible(false)}
sx={{ zIndex: 9 }}
invisible={true}
></Backdrop>
<InputAdornment position="end">
<Button variant="contained" endIcon={<Translate />}>
Language
</Button>
</InputAdornment>
/>
{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
sx={{ mr: 1 }}
src={resovleIcon(plugin.icon)}
variant="square"
/>
<a href={plugin.site} target="_blank">
<Typography
sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}
>
{plugin.name} - v{plugin.version}
</a>
</Box>
</Typography>
</Link>
) : null}
</Toolbar>
</AppBar>
</Box>
);
}
src/components/accordions/Headers/index.tsx
+9 -2
View File
@@ -7,6 +7,7 @@ import {
MenuItem,
Select,
TextField,
Tooltip,
} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import useDebounce from '@hooks/useDebounce';
@@ -57,17 +58,21 @@ export default function HeadersSection() {
</Alert>
) : null}
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title={navigator.userAgent}>
<TextField
size="small"
InputProps={{
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">User Agent</InputAdornment>
),
},
}}
disabled
value={navigator.userAgent}
sx={{ width: '100%' }}
/>
</Tooltip>
<Checkbox
size="large"
checked={useUserAgent}
@@ -77,10 +82,12 @@ export default function HeadersSection() {
<Box sx={{ height: 10 }} />
<TextField
size="small"
InputProps={{
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">Cookies</InputAdornment>
),
},
}}
value={cookies}
onChange={e => {
src/components/accordions/ParseNovel/ChaptertList.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export default function ChapterList({
chapters: Plugin.ChapterItem[];
}) {
return (
<Paper style={{ height: 400, width: '100%', textAlign: 'left' }}>
<Paper style={{ height: 400, minWidth: 600, textAlign: 'left' }}>
<TableVirtuoso
data={chapters}
components={VirtuosoTableComponents}
src/components/accordions/ParseNovel/SourceNovelCard.tsx
+15 -10
View File
@@ -11,10 +11,10 @@ import {
Stack,
Tooltip,
Typography,
useTheme,
} from '@mui/material';
import CopiableItem from '@components/CopiableItem';
import PathItem from '@components/PathItem';
import Textarea from '@components/Textarea';
const FlexRow = ({ children }: { children: ReactNode }) => (
<Stack direction="row" gap={1} sx={{ alignItems: 'center' }}>
@@ -28,12 +28,12 @@ export default function SourceNovelCard({
sourceNovel: Plugin.SourceNovel;
}) {
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}>
<Tooltip title={sourceNovel.cover}>
<CardMedia
component="img"
sx={{ width: 200, height: '100%' }}
sx={{ width: 300, height: 400, objectFit: 'cover' }}
image={sourceNovel.cover}
/>
</Tooltip>
@@ -99,14 +99,19 @@ export default function SourceNovelCard({
</CardContent>
<CardContent>
<Typography>Summary</Typography>
<Textarea
sx={{ width: '100%' }}
maxRows={5}
value={sourceNovel.summary}
disabled
/>
<Typography
sx={{
overflowY: 'auto',
height: 300,
p: 2,
borderRadius: 2,
backgroundColor: 'rgba(0,0,0,0.1)',
}}
>
{sourceNovel.summary}
</Typography>
</CardContent>
</Box>
</Card>
</Box>
);
}
src/components/accordions/ParseNovel/index.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import { useAppStore } from '@store';
export default function ParseNovel() {
const plugin = useAppStore(state => state.plugin);
const [sourceNovel, setSouceNovel] = useState<
Plugin.SourceNovel | undefined
(Plugin.SourceNovel & { totalPages?: number }) | undefined
>();
const [chapters, setChapters] = useState<Plugin.ChapterItem[]>([]);
const [loading, setLoading] = useState(false);
@@ -37,6 +37,7 @@ export default function ParseNovel() {
};
return (
<AccordionContainer title="Parse Novel" loading={loading}>
<Box sx={{ overflowX: 'auto', width: '100%' }}>
<Stack direction={'row'} spacing={2}>
<TextField
value={novelPath}
@@ -56,15 +57,14 @@ export default function ParseNovel() {
<Box sx={{ height: 20 }} />
{chapters.length ? <ChapterList chapters={chapters} /> : null}
<Box sx={{ height: 20 }} />
{/* @ts-ignore */}
{sourceNovel?.totalPages ? (
<Pagination
// @ts-ignore
count={sourceNovel.totalPages}
onChange={(e, page) => fetchPage(page)}
variant="outlined"
/>
) : null}
</Box>
</AccordionContainer>
);
}
src/components/accordions/PopularNovels/index.tsx
+8 -3
View File
@@ -80,7 +80,13 @@ export default function PopularNovels() {
return (
<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>
<FormControlLabel
control={
@@ -140,13 +146,12 @@ export default function PopularNovels() {
sx={{
width: '100%',
overflowX: 'auto',
display: 'flex',
}}
>
<Stack sx={{ width: 'max-content' }} direction={'row'} spacing={2}>
{novels.map((novel, index) => (
<NovelItemCard key={'novelItem_' + index} item={novel} />
))}
</Stack>
</Box>
</AccordionContainer>
);
src/components/accordions/components/NovelItemCard.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import CopiableItem from '@components/CopiableItem';
import PathItem from '@components/PathItem';
export default function NovelItemCard({ item }: { item: Plugin.NovelItem }) {
return (
<Card sx={{ display: 'flex', p: 1 }}>
<Box sx={{ display: 'flex', p: 1 }}>
<CopiableItem content={item.cover}>
<Tooltip title={item.cover}>
<CardMedia
@@ -50,6 +50,6 @@ export default function NovelItemCard({ item }: { item: Plugin.NovelItem }) {
<PathItem path={item.path} />
</CardContent>
</Box>
</Card>
</Box>
);
}
tsconfig.production.json
+159
View File
@@ -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/**"
],
}