glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-11 13:19:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

nuxt rewrite

Browse Source
This commit is contained in:
glax
2025-09-25 22:19:06 +02:00
parent ee56a59aef
commit 7cdf77cb52
63 changed files with 395 additions and 11065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
tranga-website/.gitignore vendored
View File

@@ -1,24 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

54
tranga-website/README.md
View File

@@ -1,54 +0,0 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
});
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
});
```

19
tranga-website/eslint.config.js
View File

@@ -1,19 +0,0 @@
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: { ecmaVersion: 2020, globals: globals.browser },
plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
},
}
);

20
tranga-website/index.html
View File

@@ -1,20 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/png"
href="/blahaj.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Tranga</title>
</head>
<body>
<div id="root"></div>
<script
type="module"
src="/src/main.tsx"></script>
</body>
</html>

7216
tranga-website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

39
tranga-website/package.json
View File

@@ -1,39 +0,0 @@
{
"name": "tranga-website",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint . --fix",
"swagger-api": "swagger-typescript-api generate -p http://127.0.0.1:6531/swagger/v2/swagger.json -o ./src/api --modular && prettier ./src/api --write",
"prettier:check": "prettier . --check",
"prettier": "prettier . --write"
},
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"@fontsource/inter": "^5.2.5",
"@mui/icons-material": "^7.0.1",
"@mui/joy": "^5.0.0-beta.52",
"@uiw/react-markdown-preview": "^5.1.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"prettier": "3.6.2",
"swagger-typescript-api": "^13.2.7",
"typescript": "~5.7.2",
"typescript-eslint": "^8.24.1",
"vite": "^6.2.0"
}
}

13
tranga-website/src/App.css
View File

@@ -1,13 +0,0 @@
.app {
position: absolute;
height: 100%;
top: 0;
width: 100%;
left: 0;
}
.app-content {
position: absolute;
width: 100%;
left: 0;
}

82
tranga-website/src/App.tsx
View File

@@ -1,82 +0,0 @@
import Sheet from '@mui/joy/Sheet';
import Header from './Header.tsx';
import Settings from './Components/Settings/Settings.tsx';
import ApiProvider, { ApiContext } from './contexts/ApiContext.tsx';
import { useContext, useEffect, useState } from 'react';
import { ApiConfig } from './api/http-client.ts';
import MangaProvider from './contexts/MangaContext.tsx';
import MangaList from './Components/Mangas/MangaList.tsx';
import { Search } from './Search.tsx';
import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
import LibraryProvider from './contexts/FileLibraryContext.tsx';
import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
import TButton from './Components/Inputs/TButton.tsx';
export function App() {
const [apiUri, setApiUri] = useState<string>(
localStorage.getItem('apiUri') ??
window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/api'
);
const [apiConfig, setApiConfig] = useState<ApiConfig>({ baseUrl: apiUri });
useEffect(() => {
setApiConfig({ baseUrl: apiUri });
}, [apiUri]);
const Api = useContext(ApiContext);
const [searchOpen, setSearchOpen] = useState<boolean>(false);
const [downloadDrawerOpen, setDownloadDrawerOpen] = useState(false);
const [selectedMangaKey, setSelectedMangaKey] = useState<string>();
const [downloadSectionOpen, setDownloadSectionOpen] = useState(false);
function openMangaDownloadDrawer(mangaKey: string, downloadSectionOpen?: boolean) {
setDownloadDrawerOpen(true);
setSelectedMangaKey(mangaKey);
setDownloadSectionOpen(downloadSectionOpen ?? false);
}
const removeManga = async (mangaKey?: string): Promise<void> => {
if (!mangaKey) return Promise.reject();
try {
const r = await Api.mangaDelete(mangaKey);
if (r.ok) return Promise.resolve();
else return Promise.reject();
} catch (reason) {
return await Promise.reject(reason);
}
};
return (
<ApiProvider apiConfig={apiConfig}>
<MangaConnectorProvider>
<LibraryProvider>
<MangaProvider>
<Sheet className={'app'}>
<Header>
<Settings setApiUri={setApiUri} />
</Header>
<Sheet className={'app-content'}>
<MangaList
mangaOnClick={(m) => openMangaDownloadDrawer(m.key)}
openSearch={() => setSearchOpen(true)}
/>
<Search
open={searchOpen}
setOpen={setSearchOpen}
mangaOnClick={(m) => openMangaDownloadDrawer(m.key, true)}
/>
<MangaDetail
open={downloadDrawerOpen}
setOpen={setDownloadDrawerOpen}
mangaKey={selectedMangaKey}
downloadOpen={downloadSectionOpen}>
<TButton onClick={() => removeManga(selectedMangaKey)}>Remove</TButton>
</MangaDetail>
</Sheet>
</Sheet>
</MangaProvider>
</LibraryProvider>
</MangaConnectorProvider>
</ApiProvider>
);
}

33
tranga-website/src/Components/Inputs/TButton.tsx
View File

@@ -1,33 +0,0 @@
import { Button } from '@mui/joy';
import TProps, { TColor, TDisabled, TState } from './TProps.ts';
import { MouseEventHandler, ReactNode, useState } from 'react';
export default function TButton(props: TButtonProps) {
const [state, setState] = useState<TState>(TState.clean);
const clicked: MouseEventHandler<HTMLAnchorElement> = (e) => {
setState(TState.busy);
e.preventDefault();
if (props.onClick)
props
.onClick()
.then(() => setState(TState.success))
.catch(() => setState(TState.failure));
};
return (
<Button
color={TColor(state)}
disabled={props.disabled ?? TDisabled(state)}
aria-disabled={props.disabled ?? TDisabled(state)}
onClick={clicked}
className={'t-loadable'}>
{props.children}
</Button>
);
}
export interface TButtonProps extends TProps {
children?: ReactNode;
onClick?: () => Promise<void>;
}

35
tranga-website/src/Components/Inputs/TCheckbox.tsx
View File

@@ -1,35 +0,0 @@
import { Checkbox } from '@mui/joy';
import TProps, { TColor, TDisabled, TState } from './TProps.ts';
import { ChangeEvent, ReactNode, useState } from 'react';
export default function TCheckbox(props: TCheckboxProps) {
const [state, setState] = useState<TState>(TState.clean);
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
setState(TState.busy);
e.preventDefault();
if (props.onCheckChanged)
props
.onCheckChanged(e.target.checked)
.then(() => setState(TState.success))
.catch(() => setState(TState.failure));
};
return (
<Checkbox
color={TColor(state)}
disabled={props.disabled ?? TDisabled(state)}
aria-disabled={props.disabled ?? TDisabled(state)}
onChange={onChange}
className={'t-loadable'}
defaultChecked={props.defaultChecked}
label={props.label}
/>
);
}
export interface TCheckboxProps extends TProps {
label?: ReactNode;
defaultChecked?: boolean;
onCheckChanged?: (value: boolean) => Promise<void>;
}

87
tranga-website/src/Components/Inputs/TInput.tsx
View File

@@ -1,87 +0,0 @@
import { Button, Input } from '@mui/joy';
import { MouseEventHandler, useEffect, useState } from 'react';
import * as React from 'react';
import TProps, { TColor, TDisabled, TState } from './TProps.ts';
import './loadingBorder.css';
export default function TInput(props: TInputProps) {
const [state, setState] = useState<TState>(TState.clean);
const [value, setValue] = useState<string | number | undefined>(props.defaultValue);
const [initialValue, setInitialValue] = useState<string | number | undefined>(props.defaultValue);
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
const inputValueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
setValue(e.target.value);
clearTimeout(timerRef.current);
if (!props.autoSubmit) return;
timerRef.current = setTimeout(() => {
submit();
}, props.actionDelay ?? 1500);
};
const submitClicked: MouseEventHandler<HTMLAnchorElement> = (e) => {
e.preventDefault();
submit();
};
const keyDownHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') submit();
};
const submit = () => {
setState(TState.busy);
clearTimeout(timerRef.current);
if (props.onSubmit)
props
.onSubmit(value)
.then(() => {
setState(TState.success);
setInitialValue(value);
})
.catch(() => setState(TState.failure));
};
useEffect(() => {
if (value == initialValue) {
setState(TState.clean);
}
}, [value, initialValue]);
return (
<Input
color={TColor(state)}
disabled={props.disabled ?? TDisabled(state)}
aria-disabled={props.disabled ?? TDisabled(state)}
placeholder={props.placeholder}
value={value}
onChange={inputValueChanged}
onKeyDown={keyDownHandler}
className={'t-loadable'}
endDecorator={
props.submitButtonHidden ? null : (
<Button
onClick={submitClicked}
disabled={props.disabled ?? TDisabled(state)}
aria-disabled={props.disabled ?? TDisabled(state)}
className={'t-loadable'}>
{props.submitButtonText ?? 'Submit'}
</Button>
)
}
/>
);
}
export interface TInputProps extends TProps {
placeholder?: string;
defaultValue?: string | number;
actionDelay?: number;
autoSubmit?: boolean;
submitButtonHidden?: boolean;
submitButtonText?: string;
onSubmit?: (value?: string | number) => Promise<void>;
}

37
tranga-website/src/Components/Inputs/TProps.ts
View File

@@ -1,37 +0,0 @@
import { ColorPaletteProp } from '@mui/joy';
export enum TState {
clean,
dirty,
busy,
success,
failure,
}
export const TDisabled = (state: TState): boolean => {
switch (state) {
case TState.busy:
return true;
default:
return false;
}
};
export const TColor = (state: TState): ColorPaletteProp => {
switch (state) {
case TState.clean:
return 'primary';
case TState.dirty:
return 'warning';
case TState.busy:
return 'neutral';
case TState.success:
return 'success';
case TState.failure:
return 'warning';
}
};
export default interface TProps {
disabled?: boolean;
}

54
tranga-website/src/Components/Inputs/loadingBorder.css
View File

@@ -1,54 +0,0 @@
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.t-loadable[aria-disabled='true'] {
--border-radius: 5px;
--border-size: 2px;
--border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
border: none;
z-index: 0;
&::before {
content: '';
display: block;
background: var(--border-bg);
width: calc(100% * 1.41421356237);
padding-bottom: calc(100% * 1.41421356237);
position: absolute;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
border-radius: 100%;
z-index: -1 !important;
animation: spin 5s linear infinite;
}
&--reverse::before {
animation-direction: reverse;
}
&::after {
content: '';
position: absolute;
inset: var(--border-size);
z-index: -1;
border-radius: calc(var(--border-radius) - var(--border-size));
background: var(--joy-palette-primary-500);
}
}
.t-loadable[aria-disabled='true']:has(input)::after {
background: black;
}
.t-loadable[aria-disabled='true']:is(button) {
color: var(--joy-palette-text-primary);
}

85
tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx
View File

@@ -1,85 +0,0 @@
import { ReactNode, useContext, useEffect, useState } from 'react';
import { Chapter, Manga, MangaConnector, MangaConnectorId } from '../../../api/data-contracts.ts';
import { Accordion, AccordionDetails, AccordionSummary, Box, Table, Typography } from '@mui/joy';
import { ApiContext } from '../../../contexts/ApiContext.tsx';
import { MangaConnectorContext } from '../../../contexts/MangaConnectorContext.tsx';
import MangaConnectorIcon from '../MangaConnectorIcon.tsx';
import TCheckbox from '../../Inputs/TCheckbox.tsx';
export default function ChaptersSection(props: ChaptersSectionProps): ReactNode {
const Api = useContext(ApiContext);
const MangaConnectors = useContext(MangaConnectorContext);
const [chapters, setChapters] = useState<Chapter[]>([]);
useEffect(() => {
if (!props.manga) return;
Api.mangaChaptersList(props.manga.key).then((data) => {
if (!data.ok) return;
setChapters(data.data);
});
}, [props]);
const chapterConnectorCheckbox = (chapter: Chapter, connector: MangaConnector): ReactNode => {
const id = chapter.mangaConnectorIds.find((id) => id.mangaConnectorName == connector.key);
if (!id) return null;
return (
<TCheckbox
onCheckChanged={(value) => setDownloadingFrom(id, value)}
defaultChecked={id.useForDownload}
/>
);
};
const setDownloadingFrom = (id: MangaConnectorId, value: boolean): Promise<void> => {
console.log(id, value);
return Promise.reject();
};
return (
<Accordion sx={{ maxHeight: '50vh' }}
expanded={props.expanded}
onChange={(_, expanded) => props.onExpanded(expanded)}>
<AccordionSummary>
<Typography level={'h3'}>Chapters</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography level={'body-md'}>Set source for chapter</Typography>
<Box sx={{ overflowY: 'scroll' }}>
<Table stickyHeader={true}>
<thead>
<tr>
<th>Vol</th>
<th>Ch</th>
<th>Title</th>
{MangaConnectors.map((con) => (
<th>
<MangaConnectorIcon mangaConnector={con} />
{con.name}
</th>
))}
</tr>
</thead>
<tbody>
{chapters.map((ch) => (
<tr>
<td>{ch.volume}</td>
<td>{ch.chapterNumber}</td>
<td>{ch.title}</td>
{MangaConnectors.map((con) => (
<td>{chapterConnectorCheckbox(ch, con)}</td>
))}
</tr>
))}
</tbody>
</Table>
</Box>
</AccordionDetails>
</Accordion>
);
}
export interface ChaptersSectionProps {
manga?: Manga;
expanded: boolean;
onExpanded: (expanded: boolean) => void;
}

119
tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx
View File

@@ -1,119 +0,0 @@
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Checkbox,
List,
ListItem,
Option,
Select,
Stack,
Typography,
} from '@mui/joy';
import { ReactNode, useContext, useEffect, useState } from 'react';
import TButton from '../../Inputs/TButton.tsx';
import MangaConnectorIcon from '../MangaConnectorIcon.tsx';
import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
import { ApiContext } from '../../../contexts/ApiContext.tsx';
export function DownloadSection(props: DownloadSectionProps): ReactNode {
const Api = useContext(ApiContext);
const Libraries = useContext(FileLibraryContext);
const [manga, setManga] = useState<Manga>();
const [library, setLibrary] = useState<FileLibrary | undefined>();
const [downloadFromMap, setDownloadFromMap] = useState<Map<MangaConnectorId, boolean>>(new Map());
useEffect(() => {
const newMap = new Map();
setLibrary(Libraries.find((library) => library.key == manga?.fileLibraryId));
manga?.mangaConnectorIds.forEach((id) => {
newMap.set(id, id.useForDownload);
});
setDownloadFromMap(newMap);
}, [manga, Libraries]);
useEffect(() => {
setManga(props.manga);
}, [props]);
const onLibraryChange = (_: any, value: string | null) => {
setLibrary(Libraries.find((library) => library.key == value));
};
const setDownload = async (): Promise<void> => {
if (!manga) return Promise.reject();
if (library) {
const s = await Api.mangaChangeLibraryCreate(manga.key, library?.key)
.then((result) => result.ok)
.catch(() => false);
if (!s) return Promise.reject();
}
for (const kv of downloadFromMap) {
const s = await Api.mangaSetAsDownloadFromCreate(manga?.key, kv[0].mangaConnectorName, kv[1])
.then((result) => result.ok)
.catch(() => false);
if (!s) return Promise.reject();
}
return Promise.resolve();
};
return (
<Accordion
expanded={props.expanded}
onChange={(_, expanded) => props.onExpanded(expanded)}>
<AccordionSummary>
<Typography level={'h3'}>Download</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack
direction={'column'}
gap={2}
sx={{ flexBasis: 0 }}>
<Box>
<Typography>Select a Library to Download to:</Typography>
<Select
placeholder={'Select a Library'}
value={library?.key}
onChange={onLibraryChange}>
{Libraries.map((l) => (
<Option
key={l.key}
value={l.key}>
{l.libraryName} ({l.basePath})
</Option>
))}
</Select>
</Box>
<Box>
<Typography>Select which connectors you want to download this Manga from:</Typography>
<List>
{props.manga?.mangaConnectorIds.map((id) => (
<ListItem key={id.key}>
<Checkbox
defaultChecked={id.useForDownload}
onChange={(c) => downloadFromMap.set(id, c.target.checked)}
label={
<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
<MangaConnectorIcon mangaConnectorName={id.mangaConnectorName} />
<Typography>{id.mangaConnectorName}</Typography>
</div>
}
/>
</ListItem>
))}
</List>
</Box>
<TButton onClick={setDownload}>Download All</TButton>
</Stack>
</AccordionDetails>
</Accordion>
);
}
export interface DownloadSectionProps {
manga?: Manga;
expanded: boolean;
onExpanded: (expanded: boolean) => void;
}

69
tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx
View File

@@ -1,69 +0,0 @@
import { ReactNode, useContext, useEffect, useState } from 'react';
import { FileLibrary, Manga } from '../../../api/data-contracts.ts';
import { Accordion, AccordionDetails, AccordionSummary, Option, Select, Stack, Typography } from '@mui/joy';
import { ApiContext } from '../../../contexts/ApiContext.tsx';
import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
import TButton from '../../Inputs/TButton.tsx';
export function LibrarySection(props: LibrarySectionProps): ReactNode {
const Api = useContext(ApiContext);
const Libraries = useContext(FileLibraryContext);
const [library, setLibrary] = useState<FileLibrary | undefined>();
useEffect(() => {
if (!props.manga) return;
setLibrary(Libraries.find((library) => library.key == props.manga?.fileLibraryId));
}, [props]);
const onLibraryChange = (_: any, value: string | null) => {
setLibrary(Libraries.find((library) => library.key == value));
};
const submit = async (): Promise<void> => {
if (!props.manga || !library) return Promise.reject();
try {
const result = await Api.mangaChangeLibraryCreate(props.manga?.key, library?.key);
if (!result.ok) return Promise.reject();
else return Promise.resolve();
} catch (reason) {
return await Promise.reject(reason);
}
};
return (
<Accordion sx={{ maxHeight: '50vh' }}
expanded={props.expanded}
onChange={(_, expanded) => props.onExpanded(expanded)}>
<AccordionSummary>
<Typography level={'h3'}>Library</Typography>
</AccordionSummary>
<AccordionDetails>
<Stack
direction={'row'}
gap={2}>
<Select
placeholder={'Select a Library'}
value={library?.key}
onChange={onLibraryChange}
sx={{ flexGrow: 1 }}>
{Libraries.map((l) => (
<Option
key={l.key}
value={l.key}>
{l.libraryName} ({l.basePath})
</Option>
))}
</Select>
<TButton onClick={submit}>Move Manga to Library</TButton>
</Stack>
</AccordionDetails>
</Accordion>
);
}
export interface LibrarySectionProps {
manga?: Manga;
expanded: boolean;
onExpanded: (expanded: boolean) => void;
}

135
tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
View File

@@ -1,135 +0,0 @@
import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
import { AccordionGroup, Card, CardCover, Chip, Modal, ModalDialog, Stack, Typography, useTheme } from '@mui/joy';
import ModalClose from '@mui/joy/ModalClose';
import { Manga } from '../../../api/data-contracts.ts';
import { ApiContext } from '../../../contexts/ApiContext.tsx';
import { MangaContext } from '../../../contexts/MangaContext.tsx';
import MarkdownPreview from '@uiw/react-markdown-preview';
import { DownloadSection } from './DownloadSection.tsx';
import ChaptersSection from './ChaptersSection.tsx';
import { LibrarySection } from './LibrarySection.tsx';
export default function MangaDetail(props: MangaDetailProps): ReactNode {
const Api = useContext(ApiContext);
const Manga = useContext(MangaContext);
const theme = useTheme();
const [manga, setManga] = useState<Manga | undefined>(props.manga);
useEffect(() => {
if (!props.open) return;
if (!props.mangaKey) return;
if (props.manga != undefined) return;
Manga.GetManga(props.mangaKey).then(setManga);
}, [Api, Manga, props]);
const [expanded, setExpanded] = useState(props.downloadOpen ? 1 : 0);
return (
<Modal
open={props.open}
onClose={() => props.setOpen(false)}>
<ModalDialog>
<ModalClose />
<Typography
level={'h3'}
sx={{ width: '100%' }}>
{manga?.name}
</Typography>
<Stack
direction={'row'}
gap={1}>
<Card
className={'manga-card'}
sx={{ flexShrink: 0 }}>
<CardCover className={'manga-card-cover'}>
<img src={manga ? `${Api.baseUrl}/v2/Manga/${manga.key}/Cover/Medium` : '/blahaj.png'} />
</CardCover>
</Card>
<Stack
direction={'column'}
gap={2}
sx={{ flexShrink: 1 }}>
<Stack
direction={'row'}
gap={0.5}
flexWrap={'wrap'}>
{manga?.tags.map((tag) => (
<Chip
key={tag}
size={'sm'}
sx={{ backgroundColor: theme.palette.primary.plainColor }}>
{tag}
</Chip>
))}
{manga?.authors.map((author) => (
<Chip
key={author.key}
size={'sm'}
sx={{ backgroundColor: theme.palette.success.plainColor }}>
{author.name}
</Chip>
))}
{manga?.links.map((link) => (
<Chip
key={link.provider}
size={'sm'}
sx={{ backgroundColor: theme.palette.neutral.plainColor }}>
<a href={link.url}>{link.provider}</a>
</Chip>
))}
</Stack>
<MarkdownPreview
source={manga?.description}
style={{
backgroundColor: 'transparent',
color: theme.palette.text.primary,
overflowY: 'auto',
}}
/>
<Stack
direction={'row-reverse'}
gap={1}>
{props.children}
</Stack>
</Stack>
</Stack>
<AccordionGroup>
<DownloadSection
expanded={expanded == 1}
onExpanded={(e) => {
if (e) setExpanded(1);
else setExpanded(0);
}}
manga={manga}
/>
<LibrarySection
expanded={expanded == 2}
onExpanded={(e) => {
if (e) setExpanded(2);
else setExpanded(0);
}}
manga={manga}
/>
<ChaptersSection
expanded={expanded == 3}
onExpanded={(e) => {
if (e) setExpanded(3);
else setExpanded(0);
}}
manga={manga}
/>
</AccordionGroup>
</ModalDialog>
</Modal>
);
}
export interface MangaDetailProps {
manga?: Manga;
mangaKey?: string;
open: boolean;
setOpen: Dispatch<boolean>;
downloadOpen?: boolean;
children?: ReactNode;
}

21
tranga-website/src/Components/Mangas/MangaCard.css
View File

@@ -1,21 +0,0 @@
.manga-card-badge {
margin: 16px 18px 0 0;
}
.manga-card {
width: 220px;
height: 300px;
}
.manga-card-cover {
}
.manga-card-cover-blur {
background: linear-gradient(150deg, rgba(245, 169, 184, 0.8) 50%, rgba(91, 206, 250, 0.3));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px) brightness(70%);
-webkit-backdrop-filter: blur(2px) brightness(70%);
}
.manga-card-content {
}

65
tranga-website/src/Components/Mangas/MangaCard.tsx
View File

@@ -1,65 +0,0 @@
import { Badge, Card, CardContent, CardCover, ColorPaletteProp, Skeleton, Typography } from '@mui/joy';
import { EventHandler, ReactNode, useContext } from 'react';
import './MangaCard.css';
import MangaConnectorIcon from './MangaConnectorIcon.tsx';
import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
import { ApiContext } from '../../contexts/ApiContext.tsx';
export default function MangaCard(props: MangaCardProps): ReactNode {
const Api = useContext(ApiContext);
return (
<Badge
badgeContent={props.manga?.mangaConnectorIds.map((id) => (
<MangaConnectorIcon mangaConnectorName={id.mangaConnectorName} />
))}
className={'manga-card-badge'}
color={releaseColor(props.manga?.releaseStatus ?? MangaReleaseStatus.Unreleased)}>
<Card
className={'manga-card'}
onClick={props.onClick}>
<CardCover className={'manga-card-cover'}>
<img
src={
props.manga && props.manga.key != 'Search'
? `${Api.baseUrl}/v2/Manga/${props.manga?.key}/Cover/Medium`
: '/blahaj.png'
}
/>
</CardCover>
<CardCover className={'manga-card-cover-blur'} />
<CardContent className={'manga-card-content'}>
<Typography level={'h4'}>
{props.manga?.name ?? <Skeleton>{stringWithRandomLength()}</Skeleton>}
</Typography>
</CardContent>
</Card>
</Badge>
);
}
export interface MangaCardProps {
manga?: Manga | MinimalManga;
onClick?: EventHandler<any>;
}
const stringWithRandomLength = (): string => {
return 'wow';
};
const releaseColor = (status: MangaReleaseStatus): ColorPaletteProp => {
switch (status) {
case MangaReleaseStatus.Cancelled:
return 'danger';
case MangaReleaseStatus.Completed:
return 'success';
case MangaReleaseStatus.Unreleased:
return 'neutral';
case MangaReleaseStatus.Continuing:
return 'primary';
case MangaReleaseStatus.OnHiatus:
return 'neutral';
default:
return 'neutral';
}
};

40
tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
View File

@@ -1,40 +0,0 @@
import { ReactNode, useContext, useEffect, useState } from 'react';
import { MangaConnector } from '../../api/data-contracts.ts';
import { Tooltip } from '@mui/joy';
import { ApiContext } from '../../contexts/ApiContext.tsx';
export default function MangaConnectorIcon({
mangaConnector,
mangaConnectorName,
}: {
mangaConnector?: MangaConnector;
mangaConnectorName?: string;
}): ReactNode {
const Api = useContext(ApiContext);
const [connector, setConnector] = useState<MangaConnector | undefined>(mangaConnector);
useEffect(() => {
if (mangaConnector) {
setConnector(mangaConnector);
return;
}
if (!mangaConnectorName) return;
Api.mangaConnectorDetail(mangaConnectorName).then((result) => {
if (result.ok) {
setConnector(result.data);
}
});
}, [Api, mangaConnectorName, mangaConnector]);
return (
<Tooltip title={connector?.name ?? 'loading'}>
<img
src={connector?.iconUrl ?? '/blahaj.png'}
width={'25px'}
height={'25px'}
style={{ borderRadius: '100%' }}
/>
</Tooltip>
);
}

0
tranga-website/src/Components/Mangas/MangaList.css
View File

84
tranga-website/src/Components/Mangas/MangaList.tsx
View File

@@ -1,84 +0,0 @@
import { Stack } from '@mui/joy';
import './MangaList.css';
import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import MangaCard from './MangaCard.tsx';
export default function MangaList(props: MangaListProps): ReactNode {
const Api = useContext(ApiContext);
const [downloadingManga, setDownloadingManga] = useState<MinimalManga[]>([]);
const [interval, setIntervalState] = useState<number>();
useEffect(() => {
if (interval) {
clearInterval(interval);
setIntervalState(undefined);
}
if (!Api) return;
updateDownloadingManga();
setIntervalState(setInterval(updateDownloadingManga, 5000));
}, [Api]);
const updateDownloadingManga = () => {
Api.mangaDownloadingList().then((data) => {
if (data.ok) {
setDownloadingManga(data.data);
}
});
};
return (
<MangaCardList
manga={downloadingManga}
mangaOnClick={props.mangaOnClick}>
<MangaCard
onClick={props.openSearch}
manga={{
name: 'Search',
description: 'Search for a new Manga',
releaseStatus: MangaReleaseStatus.Continuing,
mangaConnectorIds: [],
key: 'Search',
}}
/>
</MangaCardList>
);
}
export interface MangaListProps {
openSearch: () => void;
mangaOnClick?: Dispatch<Manga | MinimalManga>;
}
export function MangaCardList(props: MangaCardListProps): ReactNode {
return (
<Stack
className={'manga-list'}
direction={'row'}
flexWrap={'wrap'}
sx={{
mx: 'calc(-1 * var(--ModalDialog-padding))',
px: 'var(--ModalDialog-padding)',
overflowY: 'scroll',
justifyItems: 'space-between',
}}>
{props.children}
{props.manga.map((m) => (
<MangaCard
key={m.key}
manga={m}
onClick={() => {
if (props.mangaOnClick) props.mangaOnClick(m);
}}
/>
))}
</Stack>
);
}
export interface MangaCardListProps {
manga: (Manga | MinimalManga)[];
children?: ReactNode;
mangaOnClick?: Dispatch<Manga | MinimalManga>;
}

38
tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
View File

@@ -1,38 +0,0 @@
import { ReactNode, useContext } from 'react';
import { SettingsContext, SettingsItem } from './Settings.tsx';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import MarkdownPreview from '@uiw/react-markdown-preview';
import TInput from '../Inputs/TInput.tsx';
export default function ChapterNamingScheme(): ReactNode {
const settings = useContext(SettingsContext);
const Api = useContext(ApiContext);
const schemeChanged = async (value: string | number | readonly string[] | undefined) => {
if (typeof value != 'string') return Promise.reject();
try {
const response = await Api.settingsChapterNamingSchemePartialUpdate(value);
if (response.ok) return Promise.resolve();
else return Promise.reject();
} catch {
return await Promise.reject();
}
};
return (
<SettingsItem title={'Chapter Naming Scheme'}>
<MarkdownPreview
style={{ backgroundColor: 'transparent' }}
source={
'Placeholders:\n * %M Obj Name\n * %V Volume\n * %C Chapter\n * %T Title\n * %A Author (first in list)\n * %I Chapter Internal ID\n * %i Obj Internal ID\n * %Y Year (Obj)\n *\n * ?_(...) replace _ with a value from above:\n * Everything inside the braces will only be added if the value of %_ is not null'
}
/>
<TInput
defaultValue={settings?.chapterNamingScheme as string}
placeholder={'Scheme'}
onSubmit={schemeChanged}
actionDelay={5000}
/>
</SettingsItem>
);
}

14
tranga-website/src/Components/Settings/Download.tsx
View File

@@ -1,14 +0,0 @@
import { SettingsItem } from './Settings.tsx';
import ImageCompression from './ImageCompression.tsx';
import DownloadLanguage from './DownloadLanguage.tsx';
import ChapterNamingScheme from './ChapterNamingScheme.tsx';
export default function Download() {
return (
<SettingsItem title={'Download'}>
<ImageCompression />
<DownloadLanguage />
<ChapterNamingScheme />
</SettingsItem>
);
}

30
tranga-website/src/Components/Settings/DownloadLanguage.tsx
View File

@@ -1,30 +0,0 @@
import { ReactNode, useContext } from 'react';
import { SettingsContext, SettingsItem } from './Settings.tsx';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import TInput from '../Inputs/TInput.tsx';
export default function DownloadLanguage(): ReactNode {
const settings = useContext(SettingsContext);
const Api = useContext(ApiContext);
const languageChanged = async (value: string | number | readonly string[] | undefined) => {
if (typeof value != 'string') return Promise.reject();
try {
const response = await Api.settingsDownloadLanguagePartialUpdate(value);
if (response.ok) return Promise.resolve();
else return Promise.reject();
} catch {
return await Promise.reject();
}
};
return (
<SettingsItem title={'Download Language'}>
<TInput
defaultValue={settings?.downloadLanguage as string}
placeholder={"Language code (f.e. 'en')"}
onSubmit={languageChanged}
/>
</SettingsItem>
);
}

30
tranga-website/src/Components/Settings/FlareSolverr.tsx
View File

@@ -1,30 +0,0 @@
import { ReactNode, useContext } from 'react';
import { SettingsContext, SettingsItem } from './Settings.tsx';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import TInput from '../Inputs/TInput.tsx';
export default function FlareSolverr(): ReactNode {
const settings = useContext(SettingsContext);
const Api = useContext(ApiContext);
const uriChanged = async (value: string | number | readonly string[] | undefined) => {
if (typeof value != 'string') return Promise.reject();
try {
const response = await Api.settingsFlareSolverrUrlCreate(value);
if (response.ok) return Promise.resolve();
else return Promise.reject();
} catch (reason) {
return await Promise.reject(reason);
}
};
return (
<SettingsItem title={'FlareSolverr'}>
<TInput
placeholder={'FlareSolverr URL'}
defaultValue={settings?.flareSolverrUrl as string}
onSubmit={uriChanged}
/>
</SettingsItem>
);
}

16
tranga-website/src/Components/Settings/ImageCompression.tsx
View File

@@ -1,16 +0,0 @@
import { ReactNode, useContext } from 'react';
import { SettingsContext, SettingsItem } from './Settings.tsx';
import { Slider } from '@mui/joy';
export default function ImageCompression(): ReactNode {
const settings = useContext(SettingsContext);
return (
<SettingsItem title={'Image Compression'}>
<Slider
sx={{ marginTop: '20px' }}
valueLabelDisplay={'auto'}
defaultValue={settings?.imageCompression}></Slider>
</SettingsItem>
);
}

61
tranga-website/src/Components/Settings/LibraryRefresh.tsx
View File

@@ -1,61 +0,0 @@
import { ChangeEventHandler, ReactNode, useContext, useState } from 'react';
import { SettingsContext, SettingsItem } from './Settings.tsx';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import TButton from '../Inputs/TButton.tsx';
import { LibraryRefreshSetting, PatchLibraryRefreshRecord } from '../../api/data-contracts.ts';
import { Input, Radio, RadioGroup, Typography } from '@mui/joy';
export default function LibraryRefresh(): ReactNode {
const settings = useContext(SettingsContext);
const [value, setValue] = useState<PatchLibraryRefreshRecord>({
setting: settings?.libraryRefreshSetting ?? LibraryRefreshSetting.AfterAllFinished,
refreshLibraryWhileDownloadingEveryMinutes: settings?.refreshLibraryWhileDownloadingEveryMinutes,
});
const Api = useContext(ApiContext);
const updateSetting = async () => {
try {
const response = await Api.settingsLibraryRefreshPartialUpdate(value);
if (response.ok) return Promise.resolve();
else return Promise.reject();
} catch {
return await Promise.reject();
}
};
const onSettingChanged: ChangeEventHandler<HTMLInputElement> = (e) => {
setValue({ ...value, setting: LibraryRefreshSetting[e.target.value as keyof typeof LibraryRefreshSetting] });
};
const onMinutesChanged: ChangeEventHandler<HTMLInputElement> = (e) => {
setValue({ ...value, refreshLibraryWhileDownloadingEveryMinutes: e.target.valueAsNumber });
};
return (
<SettingsItem title={'Library Refresh'}>
<Typography level={'body-md'}>Refresh after</Typography>
<RadioGroup
value={value.setting}
onChange={onSettingChanged}>
{Object.keys(LibraryRefreshSetting).map((e) => (
<Radio
key={e}
value={e}
label={e}
/>
))}
</RadioGroup>
<Typography level={'body-md'}>
When {LibraryRefreshSetting.WhileDownloading} refresh every x-minutes:
</Typography>
<Input
value={value.refreshLibraryWhileDownloadingEveryMinutes ?? undefined}
onChange={onMinutesChanged}
type={'number'}
/>
<TButton onClick={updateSetting}>Update</TButton>
</SettingsItem>
);
}

24
tranga-website/src/Components/Settings/Maintenance.tsx
View File

@@ -1,24 +0,0 @@
import { SettingsItem } from './Settings.tsx';
import { useContext } from 'react';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import TButton from '../Inputs/TButton.tsx';
export default function Maintenance() {
const Api = useContext(ApiContext);
const cleanUnusedManga = async (): Promise<void> => {
try {
const result = await Api.maintenanceCleanupNoDownloadMangaCreate();
if (result.ok) return Promise.resolve();
else return Promise.reject();
} catch (reason) {
return await Promise.reject(reason);
}
};
return (
<SettingsItem title={'Maintenance'}>
<TButton onClick={cleanUnusedManga}>Cleanup unused Manga</TButton>
</SettingsItem>
);
}

11
tranga-website/src/Components/Settings/Services.tsx
View File

@@ -1,11 +0,0 @@
import { SettingsItem } from './Settings.tsx';
import FlareSolverr from './FlareSolverr.tsx';
import { ReactNode } from 'react';
export default function Services(): ReactNode {
return (
<SettingsItem title={'Services'}>
<FlareSolverr />
</SettingsItem>
);
}

0
tranga-website/src/Components/Settings/Settings.css
View File

95
tranga-website/src/Components/Settings/Settings.tsx
View File

@@ -1,95 +0,0 @@
import ModalClose from '@mui/joy/ModalClose';
import {
Accordion,
AccordionDetails,
AccordionGroup,
AccordionSummary,
Button,
DialogContent,
DialogTitle,
Modal,
ModalDialog,
Stack,
} from '@mui/joy';
import './Settings.css';
import * as React from 'react';
import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
import { SxProps } from '@mui/joy/styles/types';
import ImageCompression from './ImageCompression.tsx';
import FlareSolverr from './FlareSolverr.tsx';
import DownloadLanguage from './DownloadLanguage.tsx';
import ChapterNamingScheme from './ChapterNamingScheme.tsx';
import Maintenance from './Maintenance.tsx';
import { ApiContext } from '../../contexts/ApiContext.tsx';
import { TrangaSettings } from '../../api/data-contracts.ts';
import TInput from '../Inputs/TInput.tsx';
import LibraryRefresh from './LibraryRefresh.tsx';
export const SettingsContext = createContext<TrangaSettings | undefined>(undefined);
export default function Settings({ setApiUri }: { setApiUri: (uri: string) => void }) {
const Api = useContext(ApiContext);
const [settings, setSettings] = useState<TrangaSettings>();
const [open, setOpen] = React.useState(false);
useEffect(() => {
Api.settingsList().then((response) => {
setSettings(response.data);
});
}, [Api]);
const apiUriChanged = (value: string | number | readonly string[] | undefined) => {
if (typeof value != 'string') return Promise.reject();
setApiUri(value);
return Promise.resolve();
};
const ModalStyle: SxProps = { width: '80%', height: '80%' };
return (
<SettingsContext.Provider value={settings}>
<Button onClick={() => setOpen(true)}>Settings</Button>
<Modal
open={open}
onClose={() => setOpen(false)}>
<ModalDialog sx={ModalStyle}>
<ModalClose />
<DialogTitle>Settings</DialogTitle>
<DialogContent>
<AccordionGroup>
<SettingsItem title={'ApiUri'}>
<TInput
placeholder={'http(s)://'}
defaultValue={Api.baseUrl}
onSubmit={apiUriChanged}
/>
</SettingsItem>
<ImageCompression />
<FlareSolverr />
<DownloadLanguage />
<ChapterNamingScheme />
<Maintenance />
<LibraryRefresh />
</AccordionGroup>
</DialogContent>
</ModalDialog>
</Modal>
</SettingsContext.Provider>
);
}
export function SettingsItem({ title, children }: { title: string; children: ReactNode }) {
return (
<Accordion>
<AccordionSummary>{title}</AccordionSummary>
<AccordionDetails>
<Stack
gap={1}
direction="column">
{children}
</Stack>
</AccordionDetails>
</Accordion>
);
}

11
tranga-website/src/Header.css
View File

@@ -1,11 +0,0 @@
.header {
position: sticky !important;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 10px;
display: flex;
flex-flow: row nowrap;
}

74
tranga-website/src/Header.tsx
View File

@@ -1,74 +0,0 @@
import Sheet from '@mui/joy/Sheet';
import { Link, Stack, Typography } from '@mui/joy';
import { ReactElement, ReactNode, useContext } from 'react';
import './Header.css';
import { Article, GitHub } from '@mui/icons-material';
import { ApiContext } from './contexts/ApiContext.tsx';
export default function Header({ children }: { children?: ReactNode }): ReactElement {
const Api = useContext(ApiContext);
return (
<Sheet className={'header'}>
<Stack
direction={'row'}
spacing={2}
sx={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}
useFlexGap>
<Stack
sx={{ flexGrow: 1, flexBasis: 1 }}
direction={'row'}
spacing={2}>
{children}
</Stack>
<Stack
sx={{ flexGrow: 1, height: '100%', flexBasis: 1, justifyContent: 'center' }}
direction={'row'}>
<img
src={'/blahaj.png'}
style={{ cursor: 'grab', maxHeight: '100%' }}
/>
<Typography
level={'h2'}
sx={{
background:
'linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
fontWeight: 'bold',
cursor: 'default',
}}>
Tranga
</Typography>
</Stack>
<Stack
sx={{ flexGrow: 1, flexBasis: 1, justifyContent: 'flex-end' }}
direction={'row'}
spacing={2}>
<Link
target={'_blank'}
href={'https://github.com/C9Glax/tranga'}
color={'neutral'}
height={'min-content'}>
<GitHub /> Server
</Link>
<Link
target={'_blank'}
href={'https://github.com/C9Glax/tranga-website'}
color={'neutral'}
height={'min-content'}>
<GitHub /> Website
</Link>
<Link
target={'_blank'}
href={Api.baseUrl + '/swagger'}
color={'neutral'}
height={'min-content'}>
<Article />
Swagger
</Link>
</Stack>
</Stack>
</Sheet>
);
}

120
tranga-website/src/Search.tsx
View File

@@ -1,120 +0,0 @@
import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
import {
List,
ListItem,
ListItemDecorator,
Modal,
ModalDialog,
Step,
StepIndicator,
Stepper,
Typography,
} from '@mui/joy';
import ModalClose from '@mui/joy/ModalClose';
import { MangaConnectorContext } from './contexts/MangaConnectorContext.tsx';
import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
import TInput from './Components/Inputs/TInput.tsx';
import { ApiContext } from './contexts/ApiContext.tsx';
import { MangaCardList } from './Components/Mangas/MangaList.tsx';
import { MangaConnector, MinimalManga } from './api/data-contracts.ts';
export function Search(props: SearchModalProps): ReactNode {
const Api = useContext(ApiContext);
const MangaConnectors = useContext(MangaConnectorContext);
useEffect(() => {
if (props.open) {
setSelectedConnector(undefined);
setSearchResults([]);
}
}, [props]);
const [selectedConnector, setSelectedConnector] = useState<MangaConnector>();
const [searchResults, setSearchResults] = useState<MinimalManga[]>([]);
const startSearch = async (value: string | number | readonly string[] | undefined): Promise<void> => {
if (typeof value != 'string') return Promise.reject();
setSearchResults([]);
if (isUrl(value)) {
try {
const result = await Api.searchUrlCreate(value);
if (result.ok) {
setSearchResults([result.data]);
return Promise.resolve();
} else return Promise.reject();
} catch (reason) {
return await Promise.reject(reason);
}
} else {
if (!selectedConnector) return Promise.reject();
try {
const result2 = await Api.searchDetail(selectedConnector?.key, value);
if (result2.ok) {
setSearchResults(result2.data);
return Promise.resolve();
} else return Promise.reject();
} catch (reason1) {
return await Promise.reject(reason1);
}
}
};
return (
<Modal
open={props.open}
onClose={() => props.setOpen(false)}>
<ModalDialog sx={{ width: '90vw' }}>
<ModalClose />
<Stepper>
<Step
orientation={'vertical'}
indicator={<StepIndicator>1</StepIndicator>}>
<Typography level={'title-lg'}>Select a connector</Typography>
<List>
{MangaConnectors.map((c) => (
<ListItem
key={c.key}
onClick={() => setSelectedConnector(c)}>
<ListItemDecorator>
<MangaConnectorIcon mangaConnector={c} />
</ListItemDecorator>
<Typography sx={c.key == selectedConnector?.key ? { fontWeight: 'bold' } : {}}>
{c.name}
</Typography>
</ListItem>
))}
</List>
</Step>
<Step
orientation={'vertical'}
indicator={<StepIndicator>2</StepIndicator>}>
<Typography level={'title-lg'}>Enter a search term or URL</Typography>
<TInput
placeholder={'Manga-name or URL'}
onSubmit={startSearch}
/>
</Step>
</Stepper>
<MangaCardList
manga={searchResults}
mangaOnClick={props.mangaOnClick}
/>
</ModalDialog>
</Modal>
);
}
export interface SearchModalProps {
open: boolean;
setOpen: Dispatch<boolean>;
mangaOnClick?: (manga: MinimalManga) => void;
}
function isUrl(str: string): boolean {
try {
new URL(str);
return true;
} catch {
return false;
}
}

1166
tranga-website/src/api/V2.ts
View File

File diff suppressed because it is too large Load Diff

555
tranga-website/src/api/data-contracts.ts
View File

@@ -1,555 +0,0 @@
/* eslint-disable */
/* tslint:disable */
// @ts-nocheck
/*
* ---------------------------------------------------------------
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
* ## ##
* ## AUTHOR: acacode ##
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
* ---------------------------------------------------------------
*/
export enum WorkerExecutionState {
Failed = 'Failed',
Cancelled = 'Cancelled',
Created = 'Created',
Waiting = 'Waiting',
Running = 'Running',
Completed = 'Completed',
}
export enum RequestType {
Default = 'Default',
MangaDexFeed = 'MangaDexFeed',
MangaImage = 'MangaImage',
MangaCover = 'MangaCover',
MangaDexImage = 'MangaDexImage',
MangaInfo = 'MangaInfo',
}
export enum MangaReleaseStatus {
Continuing = 'Continuing',
Completed = 'Completed',
OnHiatus = 'OnHiatus',
Cancelled = 'Cancelled',
Unreleased = 'Unreleased',
}
export enum LibraryType {
Komga = 'Komga',
Kavita = 'Kavita',
}
export enum LibraryRefreshSetting {
AfterAllFinished = 'AfterAllFinished',
AfterMangaFinished = 'AfterMangaFinished',
AfterEveryChapter = 'AfterEveryChapter',
WhileDownloading = 'WhileDownloading',
}
export enum CoverSize {
Original = 'Original',
Large = 'Large',
Medium = 'Medium',
Small = 'Small',
}
/** API.Schema.MangaContext.AltTitle DTO */
export interface AltTitle {
/**
* Language of the Title
* @minLength 1
*/
language: string;
/**
* Title
* @minLength 1
*/
title: string;
}
/** The API.Schema.MangaContext.Author DTO */
export interface Author {
/**
* Name of the Author.
* @minLength 1
*/
name: string;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
/** API.Schema.MangaContext.Chapter DTO */
export interface Chapter {
/**
* Identifier of the Manga this Chapter belongs to
* @minLength 1
*/
mangaId: string;
/**
* Volume number
* @format int32
*/
volume: number;
/**
* Chapter number
* @minLength 1
*/
chapterNumber: string;
/**
* Title of the Chapter
* @minLength 1
*/
title: string;
/** Whether Chapter is Downloaded (on disk) */
downloaded: boolean;
/** Ids of the Manga on MangaConnectors */
mangaConnectorIds: MangaConnectorId[];
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface CreateGotifyConnectorRecord {
/**
* The Name of the Notification Connector
* @minLength 1
*/
name: string;
/**
* The Url of the Instance
* @format uri
* @minLength 1
*/
url: string;
/**
* The Apptoken used for authentication
* @minLength 1
*/
appToken: string;
/**
* The Priority of Notifications
* @format int32
*/
priority: number;
}
export interface CreateLibraryConnectorRecord {
libraryType: LibraryType;
/**
* The Url of the Library instance
* @format uri
* @minLength 1
*/
url: string;
/**
* The Username to authenticate to the Library instance
* @minLength 1
*/
username: string;
/**
* The Password to authenticate to the Library instance
* @minLength 1
*/
password: string;
}
export interface CreateLibraryRecord {
/**
* The directory Path of the library
* @minLength 1
*/
basePath: string;
/**
* The Name of the library
* @minLength 1
*/
libraryName: string;
}
export interface CreateNotificationConnectorRecord {
/**
* The Name of the Notification Connector
* @minLength 1
*/
name: string;
/**
* The Url of the Instance
* @format uri
* @minLength 1
*/
url: string;
/**
* The HTTP Request Method to use for notifications
* @minLength 1
*/
httpMethod: string;
/**
* The Request Body to use to send notifications
* @minLength 1
*/
body: string;
/** The Request Headers to use to send notifications */
headers: Record<string, string>;
}
export interface CreateNtfyConnectorRecord {
/**
* The Name of the Notification Connector
* @minLength 1
*/
name: string;
/**
* The Url of the Instance
* @format uri
* @minLength 1
*/
url: string;
/**
* The Priority of Notifications
* @format int32
*/
priority: number;
/**
* The Username used for authentication
* @minLength 1
*/
username: string;
/**
* The Password used for authentication
* @minLength 1
*/
password: string;
/**
* The Topic of Notifications
* @minLength 1
*/
topic: string;
}
export interface CreatePushoverConnectorRecord {
/**
* The Name of the Notification Connector
* @minLength 1
*/
name: string;
/**
* The Apptoken used for authentication
* @minLength 1
*/
appToken: string;
/**
* The Username used for authentication
* @minLength 1
*/
username: string;
}
export interface FileLibrary {
/**
* The directory Path of the library
* @minLength 1
*/
basePath: string;
/**
* The Name of the library
* @minLength 1
*/
libraryName: string;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface LibraryConnector {
/**
* The Url of the Library instance
* @format uri
* @minLength 1
*/
baseUrl: string;
type: LibraryType;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
/** API.Schema.MangaContext.Link DTO */
export interface Link {
/**
* Name of the Provider
* @minLength 1
*/
provider: string;
/**
* Url
* @minLength 1
*/
url: string;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
/** API.Schema.MangaContext.Manga DTO */
export interface Manga {
/**
* Chapter cutoff for Downloads (Chapters before this will not be downloaded)
* @format float
*/
ignoreChaptersBefore: number;
/**
* Release Year
* @format int32
*/
year?: number | null;
/** Release Language */
originalLanguage?: string | null;
/** Keys of ChapterDTOs */
chapterIds: string[];
/** Author-names */
authors: Author[];
/** Manga Tags */
tags: string[];
/** Links for more Metadata */
links: Link[];
/** Alt Titles of Manga */
altTitles: AltTitle[];
/**
* Id of the Library the Manga gets downloaded to
* @minLength 1
*/
fileLibraryId: string;
/**
* Name of the Manga
* @minLength 1
*/
name: string;
/**
* Description of the Manga
* @minLength 1
*/
description: string;
releaseStatus: MangaReleaseStatus;
/** Ids of the Manga on MangaConnectors */
mangaConnectorIds: MangaConnectorId[];
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface MangaConnector {
name?: string | null;
/** Whether Connector is used for Searches and Downloads */
enabled: boolean;
/** Languages supported by the Connector */
supportedLanguages: string[];
/**
* Url of the Website Icon
* @minLength 1
*/
iconUrl: string;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
/** API.Schema.MangaContext.MangaConnectorId`1 DTO */
export interface MangaConnectorId {
/**
* Name of the Connector
* @minLength 1
*/
mangaConnectorName: string;
/**
* Key of the referenced DTO
* @minLength 1
*/
foreignKey: string;
/** Website Link for reference, if any */
websiteUrl?: string | null;
/** Whether this Link is used for downloads */
useForDownload: boolean;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface MetadataEntry {
mangaId?: string | null;
metadataFetcherName?: string | null;
identifier?: string | null;
}
export interface MetadataSearchResult {
identifier?: string | null;
name?: string | null;
url?: string | null;
description?: string | null;
coverUrl?: string | null;
}
/** Shortened Version of API.Controllers.DTOs.Manga */
export interface MinimalManga {
/**
* Name of the Manga
* @minLength 1
*/
name: string;
/**
* Description of the Manga
* @minLength 1
*/
description: string;
releaseStatus: MangaReleaseStatus;
/** Ids of the Manga on MangaConnectors */
mangaConnectorIds: MangaConnectorId[];
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface NotificationConnector {
/**
* The Name of the Notification Connector
* @minLength 1
*/
name: string;
/**
* The Url of the Instance
* @format uri
* @minLength 1
*/
url: string;
/**
* The HTTP Request Method to use for notifications
* @minLength 1
*/
httpMethod: string;
/**
* The Request Body to use to send notifications
* @minLength 1
*/
body: string;
/** The Request Headers to use to send notifications */
headers: Record<string, string>;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}
export interface PatchLibraryRefreshRecord {
setting: LibraryRefreshSetting;
/**
* When API.Workers.LibraryRefreshSetting.WhileDownloading is selected, update the time between refreshes
* @format int32
*/
refreshLibraryWhileDownloadingEveryMinutes?: number | null;
}
export interface ProblemDetails {
type?: string | null;
title?: string | null;
/** @format int32 */
status?: number | null;
detail?: string | null;
instance?: string | null;
[key: string]: any;
}
export interface TrangaSettings {
defaultDownloadLocation?: string | null;
userAgent?: string | null;
/** @format int32 */
imageCompression?: number;
blackWhiteImages?: boolean;
flareSolverrUrl?: string | null;
/**
* Placeholders:
* %M Obj Name
* %V Volume
* %C Chapter
* %T Title
* %A Author (first in list)
* %I Chapter Internal ID
* %i Obj Internal ID
* %Y Year (Obj)
*
* ?_(...) replace _ with a value from above:
* Everything inside the braces will only be added if the value of %_ is not null
*/
chapterNamingScheme?: string | null;
/** @format int32 */
workCycleTimeoutMs?: number;
requestLimits?: {
/** @format int32 */
Default?: number;
/** @format int32 */
MangaDexFeed?: number;
/** @format int32 */
MangaImage?: number;
/** @format int32 */
MangaCover?: number;
/** @format int32 */
MangaDexImage?: number;
/** @format int32 */
MangaInfo?: number;
} | null;
downloadLanguage?: string | null;
/** @format int32 */
maxConcurrentDownloads?: number;
/** @format int32 */
maxConcurrentWorkers?: number;
libraryRefreshSetting?: LibraryRefreshSetting;
/** @format int32 */
refreshLibraryWhileDownloadingEveryMinutes?: number;
}
/** API.Workers.BaseWorker DTO */
export interface Worker {
/** Workers this worker depends on having ran. */
dependencies: string[];
/** Workers that have not yet ran, that need to run for this Worker to run. */
missingDependencies: string[];
/** Worker can run. */
dependenciesFulfilled: boolean;
state: WorkerExecutionState;
/**
* Unique Identifier of the DTO
* @minLength 16
* @maxLength 64
*/
key: string;
}

227
tranga-website/src/api/http-client.ts
View File

@@ -1,227 +0,0 @@
/* eslint-disable */
/* tslint:disable */
// @ts-nocheck
/*
* ---------------------------------------------------------------
* ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API ##
* ## ##
* ## AUTHOR: acacode ##
* ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
* ---------------------------------------------------------------
*/
export type QueryParamsType = Record<string | number, any>;
export type ResponseFormat = keyof Omit<Body, 'body' | 'bodyUsed'>;
export interface FullRequestParams extends Omit<RequestInit, 'body'> {
/** set parameter to `true` for call `securityWorker` for this request */
secure?: boolean;
/** request path */
path: string;
/** content type of request body */
type?: ContentType;
/** query params */
query?: QueryParamsType;
/** format of response (i.e. response.json() -> format: "json") */
format?: ResponseFormat;
/** request body */
body?: unknown;
/** base url */
baseUrl?: string;
/** request cancellation token */
cancelToken?: CancelToken;
}
export type RequestParams = Omit<FullRequestParams, 'body' | 'method' | 'query' | 'path'>;
export interface ApiConfig<SecurityDataType = unknown> {
baseUrl?: string;
baseApiParams?: Omit<RequestParams, 'baseUrl' | 'cancelToken' | 'signal'>;
securityWorker?: (securityData: SecurityDataType | null) => Promise<RequestParams | void> | RequestParams | void;
customFetch?: typeof fetch;
}
export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
data: D;
error: E;
}
type CancelToken = Symbol | string | number;
export enum ContentType {
Json = 'application/json',
JsonApi = 'application/vnd.api+json',
FormData = 'multipart/form-data',
UrlEncoded = 'application/x-www-form-urlencoded',
Text = 'text/plain',
}
export class HttpClient<SecurityDataType = unknown> {
public baseUrl: string = '';
private securityData: SecurityDataType | null = null;
private securityWorker?: ApiConfig<SecurityDataType>['securityWorker'];
private abortControllers = new Map<CancelToken, AbortController>();
private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);
private baseApiParams: RequestParams = {
credentials: 'same-origin',
headers: {},
redirect: 'follow',
referrerPolicy: 'no-referrer',
};
constructor(apiConfig: ApiConfig<SecurityDataType> = {}) {
Object.assign(this, apiConfig);
}
public setSecurityData = (data: SecurityDataType | null) => {
this.securityData = data;
};
protected encodeQueryParam(key: string, value: any) {
const encodedKey = encodeURIComponent(key);
return `${encodedKey}=${encodeURIComponent(typeof value === 'number' ? value : `${value}`)}`;
}
protected addQueryParam(query: QueryParamsType, key: string) {
return this.encodeQueryParam(key, query[key]);
}
protected addArrayQueryParam(query: QueryParamsType, key: string) {
const value = query[key];
return value.map((v: any) => this.encodeQueryParam(key, v)).join('&');
}
protected toQueryString(rawQuery?: QueryParamsType): string {
const query = rawQuery || {};
const keys = Object.keys(query).filter((key) => 'undefined' !== typeof query[key]);
return keys
.map((key) =>
Array.isArray(query[key]) ? this.addArrayQueryParam(query, key) : this.addQueryParam(query, key)
)
.join('&');
}
protected addQueryParams(rawQuery?: QueryParamsType): string {
const queryString = this.toQueryString(rawQuery);
return queryString ? `?${queryString}` : '';
}
private contentFormatters: Record<ContentType, (input: any) => any> = {
[ContentType.Json]: (input: any) =>
input !== null && (typeof input === 'object' || typeof input === 'string') ? JSON.stringify(input) : input,
[ContentType.JsonApi]: (input: any) =>
input !== null && (typeof input === 'object' || typeof input === 'string') ? JSON.stringify(input) : input,
[ContentType.Text]: (input: any) =>
input !== null && typeof input !== 'string' ? JSON.stringify(input) : input,
[ContentType.FormData]: (input: any) =>
Object.keys(input || {}).reduce((formData, key) => {
const property = input[key];
formData.append(
key,
property instanceof Blob
? property
: typeof property === 'object' && property !== null
? JSON.stringify(property)
: `${property}`
);
return formData;
}, new FormData()),
[ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
};
protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
return {
...this.baseApiParams,
...params1,
...(params2 || {}),
headers: {
...(this.baseApiParams.headers || {}),
...(params1.headers || {}),
...((params2 && params2.headers) || {}),
},
};
}
protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
if (this.abortControllers.has(cancelToken)) {
const abortController = this.abortControllers.get(cancelToken);
if (abortController) {
return abortController.signal;
}
return void 0;
}
const abortController = new AbortController();
this.abortControllers.set(cancelToken, abortController);
return abortController.signal;
};
public abortRequest = (cancelToken: CancelToken) => {
const abortController = this.abortControllers.get(cancelToken);
if (abortController) {
abortController.abort();
this.abortControllers.delete(cancelToken);
}
};
public request = async <T = any, E = any>({
body,
secure,
path,
type,
query,
format,
baseUrl,
cancelToken,
...params
}: FullRequestParams): Promise<HttpResponse<T, E>> => {
const secureParams =
((typeof secure === 'boolean' ? secure : this.baseApiParams.secure) &&
this.securityWorker &&
(await this.securityWorker(this.securityData))) ||
{};
const requestParams = this.mergeRequestParams(params, secureParams);
const queryString = query && this.toQueryString(query);
const payloadFormatter = this.contentFormatters[type || ContentType.Json];
const responseFormat = format || requestParams.format;
return this.customFetch(`${baseUrl || this.baseUrl || ''}${path}${queryString ? `?${queryString}` : ''}`, {
...requestParams,
headers: {
...(requestParams.headers || {}),
...(type && type !== ContentType.FormData ? { 'Content-Type': type } : {}),
},
signal: (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) || null,
body: typeof body === 'undefined' || body === null ? null : payloadFormatter(body),
}).then(async (response) => {
const r = response.clone() as HttpResponse<T, E>;
r.data = null as unknown as T;
r.error = null as unknown as E;
const data = !responseFormat
? r
: await response[responseFormat]()
.then((data) => {
if (r.ok) {
r.data = data;
} else {
r.error = data;
}
return r;
})
.catch((e) => {
r.error = e;
return r;
});
if (cancelToken) {
this.abortControllers.delete(cancelToken);
}
if (!response.ok) throw data;
return data;
});
};
}

14
tranga-website/src/contexts/ApiContext.tsx
View File

@@ -1,14 +0,0 @@
import { V2 } from '../api/V2.ts';
import { createContext, ReactNode, useEffect, useState } from 'react';
import { ApiConfig } from '../api/http-client.ts';
export const ApiContext = createContext<V2>(new V2());
export default function ApiProvider({ apiConfig, children }: { apiConfig: ApiConfig; children: ReactNode }) {
const [api, setApi] = useState<V2>(new V2(apiConfig));
useEffect(() => {
setApi(new V2(apiConfig));
}, [apiConfig]);
return <ApiContext value={api}>{children}</ApiContext>;
}

21
tranga-website/src/contexts/FileLibraryContext.tsx
View File

@@ -1,21 +0,0 @@
import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
import { FileLibrary } from '../api/data-contracts.ts';
import { ApiContext } from './ApiContext.tsx';
export const FileLibraryContext = createContext<FileLibrary[]>([]);
export default function LibraryProvider({ children }: { children: ReactNode }): ReactNode {
const Api = useContext(ApiContext);
const [state, setState] = useState<FileLibrary[]>([]);
useEffect(() => {
Api.fileLibraryList().then((result) => {
if (result.ok) {
setState(result.data);
}
});
}, [Api]);
return <FileLibraryContext value={state}>{children}</FileLibraryContext>;
}

21
tranga-website/src/contexts/MangaConnectorContext.tsx
View File

@@ -1,21 +0,0 @@
import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
import { MangaConnector } from '../api/data-contracts.ts';
import { ApiContext } from './ApiContext.tsx';
export const MangaConnectorContext = createContext<MangaConnector[]>([]);
export default function MangaConnectorProvider({ children }: { children: ReactNode }) {
const Api = useContext(ApiContext);
const [state, setState] = useState<MangaConnector[]>([]);
useEffect(() => {
Api.mangaConnectorList().then((result) => {
if (result.ok) {
setState(result.data);
}
});
}, [Api]);
return <MangaConnectorContext value={state}>{children}</MangaConnectorContext>;
}

37
tranga-website/src/contexts/MangaContext.tsx
View File

@@ -1,37 +0,0 @@
import { createContext, ReactNode, useContext } from 'react';
import { ApiContext } from './ApiContext.tsx';
import { Manga } from '../api/data-contracts.ts';
import { V2 } from '../api/V2.ts';
export const MangaContext = createContext<M>({ GetManga: () => Promise.reject() });
const manga: Map<string, Manga> = new Map();
const promises: Map<string, Promise<Manga | undefined>> = new Map();
export default function MangaProvider({ children }: { children: ReactNode }) {
const Api = useContext(ApiContext);
return <MangaContext value={{ GetManga: (k) => getManga(k, Api) }}>{children}</MangaContext>;
}
function getManga(key: string, Api: V2): Promise<Manga | undefined> {
if (manga.has(key)) return Promise.resolve(manga.get(key));
if (promises.has(key)) return promises.get(key)!;
const newPromise = Api.mangaDetail(key)
.then((data) => {
if (data.ok) {
manga.set(key, data.data);
return data.data;
} else return undefined;
})
.catch(() => {
return undefined;
});
promises.set(key, newPromise);
return newPromise;
}
export interface M {
GetManga(key: string): Promise<Manga | undefined>;
}

0
tranga-website/src/index.css
View File

25
tranga-website/src/main.tsx
View File

@@ -1,25 +0,0 @@
import { createRoot } from 'react-dom/client';
import './index.css';
import { App } from './App.tsx';
// @ts-expect-error font
import '@fontsource/inter';
import { CssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline';
import { StrictMode } from 'react';
import { trangaTheme } from './theme.ts';
export default function MyApp() {
return (
<StrictMode>
<CssVarsProvider theme={trangaTheme}>
{/* must be used under CssVarsProvider */}
<CssBaseline />
{/* The rest of your application */}
<App />
</CssVarsProvider>
</StrictMode>
);
}
createRoot(document.getElementById('root')!).render(<MyApp />);

85
tranga-website/src/theme.ts
View File

@@ -1,85 +0,0 @@
import { extendTheme } from '@mui/joy/styles';
export const trangaTheme = extendTheme({
colorSchemes: {
light: {
palette: {
primary: {
'50': '#FCE5EA',
'100': '#FBDDE3',
'200': '#F9CBD4',
'300': '#F7BAC6',
'400': '#F5A9B8',
'500': '#F5A9B8',
'600': '#C48793',
'700': '#AC7681',
'800': '#93656E',
'900': '#7B555C',
},
neutral: {
'50': '#E6E6E6',
'100': '#CCCCCC',
'200': '#B3B3B3',
'300': '#999999',
'400': '#808080',
'500': '#666666',
'600': '#4C4C4C',
'700': '#333333',
'800': '#191919',
'900': '#000',
plainColor: 'var(--joy-palette-neutral-50)',
plainHoverBg: 'var(--joy-palette-neutral-700)',
outlinedColor: 'var(--joy-palette-neutral-50)',
},
success: {
'50': '#cef0fe',
'100': '#bdebfd',
'200': '#9de2fc',
'300': '#7cd8fb',
'400': '#5bcefa',
'500': '#5bcefa',
'600': '#49a5c8',
'700': '#4090af',
'800': '#2e677d',
'900': '#245264',
},
danger: {
'50': '#f2c0b3',
'100': '#ea9680',
'200': '#e68166',
'300': '#dd5733',
'400': '#d52d00',
'500': '#d52d00',
'600': '#aa2400',
'700': '#951f00',
'800': '#6b1700',
'900': '#400d00',
},
warning: {
'50': '#ffebdd',
'100': '#ffd7bb',
'200': '#ffc29a',
'300': '#ffae78',
'400': '#ff9a56',
'500': '#ff9a56',
'600': '#cc7b45',
'700': '#995c34',
'800': '#663e22',
'900': '#331f11',
},
background: {
body: 'var(--joy-palette-neutral-900)',
surface: 'var(--joy-palette-neutral-900)',
popup: 'var(--joy-palette-neutral-800)',
},
text: {
primary: 'var(--joy-palette-neutral-50)',
secondary: 'var(--joy-palette-success-200)',
tertiary: 'var(--joy-palette-primary-200)',
icon: 'var(--joy-palette-primary-50)',
},
},
},
dark: { palette: {} },
},
});

1
tranga-website/src/vite-env.d.ts vendored
View File

@@ -1 +0,0 @@
/// <reference types="vite/client" />

26
tranga-website/tsconfig.app.json
View File

@@ -1,26 +0,0 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

1
tranga-website/tsconfig.json
View File

@@ -1 +0,0 @@
{ "files": [], "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }] }

24
tranga-website/tsconfig.node.json
View File

@@ -1,24 +0,0 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

5
tranga-website/vite.config.ts
View File

@@ -1,5 +0,0 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vite.dev/config/
export default defineConfig({ plugins: [react()], server: { host: '127.0.0.1' } });

3
tranga-website/.prettierrc → website/.prettierrc
View File

@@ -6,6 +6,5 @@
"semi": true, "semi": true,
"bracketSpacing": true, "bracketSpacing": true,
"objectWrap": "collapse", "objectWrap": "collapse",
"bracketSameLine": true, "bracketSameLine": true
"singleAttributePerLine": true
} }

7
website/app/assets/css/main.css Normal file
View File

@@ -0,0 +1,7 @@
@import 'tailwindcss';
@import '@nuxt/ui';
@theme {
--color-pink: #f5a9b8;
--color-blue: #5bcefa;
}

37
website/app/components/AddLibraryModal.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<UModal v-bind="$props" title="Add Library">
<template #body>
<div class="flex flex-col gap-2">
<UFormField label="Library Name" required>
<UInput v-model="name" placeholder="Name for the library" class="w-full" :disabled="busy" />
</UFormField>
<UFormField label="Directory Path" required>
<UInput v-model="path" placeholder="Path for the library" class="w-full" :disabled="busy" />
</UFormField>
<UButton icon="i-lucide-plus" @click="onAddClick" :loading="busy">Add</UButton>
</div>
</template>
</UModal>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
const name = ref('');
const path = ref('');
const model = computed((): components['schemas']['CreateLibraryRecord'] => {
return { basePath: path.value, libraryName: name.value };
});
const config = useRuntimeConfig();
const busy = ref(false);
const onAddClick = () => {
busy.value = true;
$fetch(new Request(`${config.public.openFetch.api.baseURL}v2/FileLibrary`), { method: 'PUT', body: model.value })
.then(() => emit('change'))
.finally(() => (busy.value = false));
};
const emit = defineEmits(['change']);
</script>

31
website/app/components/FileLibraries.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<UPageList divide>
<UPageCard
v-for="l in fileLibraries"
variant="ghost"
icon="i-lucide-library-big"
:title="l.libraryName"
:description="l.basePath"
orientation="horizontal">
<UButton color="warning" @click="deleteLibrary(l)" :loading="busy">Delete</UButton>
</UPageCard>
</UPageList>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
type FileLibrary = components['schemas']['FileLibrary'];
const { data: fileLibraries, refresh } = useApi('/v2/FileLibrary');
const config = useRuntimeConfig();
const busy = ref(false);
const deleteLibrary = (l: FileLibrary) => {
busy.value = true;
$fetch(new Request(`${config.public.openFetch.api.baseURL}v2/FileLibrary/${l.key}`), { method: 'DELETE' }).finally(
() => {
refresh();
busy.value = false;
}
);
};
</script>

48
website/app/components/MangaCard.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<UCard
v-if="!expanded"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
class="relative h-[350px] mt-2"
@click="$emit('click')">
<MangaCover :manga="manga" blur />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
</div>
</UCard>
<UCard
v-else
orientation="horizontal"
reverse
class="relative max-w-[600px] w-full h-[350px] mt-2"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
@click="$emit('click')">
<div class="flex flex-row w-full h-full basis-auto">
<MangaCover :manga="manga" class="shrink-0" />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
</div>
<div class="flex flex-col h-[350px] shrink mx-2">
<p class="font-semibold text-xl">{{ manga.name }}</p>
<p class="max-h-30 overflow-y-hidden grow">{{ manga.description }}</p>
</div>
</div>
<div class="absolute bottom-0 w-full p-2 flex flex-row justify-end">
<slot name="actions" v-bind="manga" />
</div>
</UCard>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
import type { PageCardProps } from '#ui/components/PageCard.vue';
type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga'];
defineProps<MangaCardProps>();
defineEmits(['click']);
export interface MangaCardProps extends PageCardProps {
manga: Manga | MinimalManga;
expanded?: boolean;
}
</script>

28
website/app/components/MangaCover.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="relative w-[240px] h-[350px] rounded-lg overflow-clip">
<div
v-if="blur"
class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip"
style="
background: linear-gradient(150deg, rgba(245, 169, 184, 0.3) 50%, rgba(91, 206, 250, 0.2));
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px) brightness(70%);
-webkit-backdrop-filter: blur(2px) brightness(70%);
">
<p class="p-3 text-xl font-semibold max-h-full overflow-clip">{{ manga?.name }}</p>
</div>
<LazyNuxtImg
v-if="manga || mangaId"
:src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga ? manga.key : mangaId}/Cover/Medium`"
class="w-full h-full object-cover" />
<USkeleton v-else class="w-full h-full object-cover" />
</div>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
type Manga = components['schemas']['Manga'];
type MinimalManga = components['schemas']['MinimalManga'];
defineProps<{ manga?: Manga | MinimalManga; mangaId?: string; blur?: boolean }>();
</script>

46
website/app/components/MangaDetailPage.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<UPage class="p-4 h-full">
<template #left>
<div class="flex flex-col gap-2 border-r-2 pr-4">
<MangaCover :manga="manga" class="self-center" />
<p v-if="manga" class="font-semibold text-xl">
{{ manga.name }}
<MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
</p>
<USkeleton v-else class="text-xl h-20 w-full" />
<div v-if="manga" class="flex flex-row gap-1 flex-wrap">
<UBadge variant="outline" v-for="author in manga.authors" color="neutral">{{ author.name }}</UBadge>
<UBadge variant="outline" v-for="tag in manga.tags">{{ tag }}</UBadge>
<NuxtLink v-for="link in manga.links" :to="link.url">
<UBadge variant="outline" color="warning">{{ link.provider }}</UBadge>
</NuxtLink>
</div>
<USkeleton v-else class="w-full h-lh" />
<p v-if="manga" class="max-h-30 overflow-y-hidden grow">
{{ manga.description }}
</p>
<USkeleton v-else class="w-full h-30" />
</div>
</template>
<UPageBody class="mt-0 relative">
<div>
<UButton variant="soft" to="/" icon="i-lucide-arrow-left">Back</UButton>
<p v-if="title" class="text-3xl">{{ title }}</p>
</div>
<slot />
</UPageBody>
</UPage>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
type Manga = components['schemas']['Manga'];
export interface MangaDetailPageProps {
manga?: Manga;
title?: string;
}
defineProps<MangaDetailPageProps>();
</script>

25
website/app/components/MangaconnectorIcon.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="w-6 h-6 inline-block align-middle m-1">
<NuxtLink :href="$props.websiteUrl ?? ''">
<NuxtImg
v-if="mangaConnector"
:src="mangaConnector?.iconUrl"
:class="[
'w-full rounded-full outline-2 -outline-offset-1',
props.useForDownload ? 'outline-green-500' : 'outline-red-500',
]" />
<p v-else>{{ mangaConnectorName }}</p>
</NuxtLink>
</div>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
type MangaConnectorId = components['schemas']['MangaConnectorId'];
const props = defineProps<MangaConnectorId>();
const { data: mangaConnector } = useApi('/v2/MangaConnector/{MangaConnectorName}', {
path: { MangaConnectorName: props.mangaConnectorName },
});
</script>

20
website/app/pages/index.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
<MangaCard
v-for="(m, i) in manga"
:manga="m"
:expanded="i === expanded"
@click="expanded = expanded === i ? -1 : i">
<template #actions="manga">
<UButton :to="`manga/${manga.key}`">Details</UButton>
</template>
</MangaCard>
</UPageBody>
</template>
<script setup lang="ts">
const { data: manga } = useApi('/v2/Manga/Downloading');
const expanded = ref(-1);
</script>
<style scoped></style>

11
website/app/pages/manga/[mangaId].vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<MangaDetailPage :manga="manga"> </MangaDetailPage>
</template>
<script setup lang="ts">
import MangaDetailPage from '~/components/MangaDetailPage.vue';
const route = useRoute();
const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: route.params.mangaId as string } });
</script>

109
website/app/pages/search.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 ' }">
<UButton variant="ghost" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
<div class="flex flex-row w-full h-full justify-between gap-4">
<UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled />
<UCard class="grow">
<div class="flex flex-col justify-between gap-2">
<UInput v-model="query" class="w-full" :disabled="busy" />
<div class="flex gap-1 w-full justify-center">
<UButton
v-for="c in connectors"
@click="connectorClick(c)"
:color="connector?.key == c.key ? 'success' : 'neutral'"
:disabled="busy">
<template #leading>
<NuxtImg :src="c.iconUrl" class="h-lh" />
</template>
{{ c.name }}
</UButton>
<UButton color="secondary" :disabled="busy" @click="performSearch" :loading="busy"
>Search</UButton
>
</div>
</div>
</UCard>
</div>
<p v-if="searchResult" class="text-lg">Result for '{{ searchQuery }}'</p>
<div v-if="searchResult" class="relative flex flex-row flex-wrap gap-6 mt-0">
<MangaCard
v-for="(m, i) in searchResult"
:manga="m"
:expanded="i === expanded"
@click="expanded = expanded === i ? -1 : i">
<template #actions="manga">
<UButton :to="`manga/${manga.key}`">Download</UButton>
</template>
</MangaCard>
</div>
</UPageSection>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
import type { StepperItem } from '@nuxt/ui';
type MangaConnector = components['schemas']['MangaConnector'];
type MinimalManga = components['schemas']['MinimalManga'];
const { data: connectors } = useApi('/v2/MangaConnector');
const query = ref<string>();
const connector = ref<MangaConnector>();
const activeStep = ref(0);
const busy = ref<boolean>(false);
watch(query, (v) => {
if (!v) activeStep.value = 0;
else activeStep.value = 1;
});
const isUrl = (input: string): boolean => {
try {
new URL(input);
return true;
} catch {
return false;
}
};
const connectorClick = (c: MangaConnector) => {
connector.value = c;
performSearch();
};
const searchResult = ref<MinimalManga[]>();
const expanded = ref(-1);
const searchQuery = ref<string>('');
const performSearch = () => {
if (!query.value) return;
busy.value = true;
searchQuery.value = query.value;
search(query.value)
.then((data) => {
searchResult.value = data;
activeStep.value = 2;
})
.finally(() => (busy.value = false));
};
const config = useRuntimeConfig();
const search = async (query: string): Promise<MinimalManga[]> => {
if (isUrl(query)) {
return await $fetch(new Request(`${config.public.openFetch.api.baseURL}v2/Search/Url`), {
method: 'POST',
body: query,
});
} else if (connector.value) {
return await $fetch(
new Request(`${config.public.openFetch.api.baseURL}v2/Search/${connector.value.name}/${query}`)
);
}
return Promise.reject();
};
const items = ref<StepperItem[]>([
{ title: 'Query', description: 'The name or URL', icon: 'i-lucide-search' },
{ title: 'Site', description: 'Select the site on which to search', icon: 'i-lucide-panel-top' },
{ title: 'Results', icon: 'i-lucide-logs' },
]);
</script>

32
website/app/pages/settings.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<UPageSection title="Settings"> </UPageSection>
<UPageSection title="Libraries" orientation="horizontal">
<FileLibraries />
<UButton icon="i-lucide-plus" @click="() => addLibraryModal.open()" class="w-fit">Add</UButton>
</UPageSection>
<UPageSection title="Maintenance" orientation="horizontal">
<div class="flex flex-col gap-1 items-end basis-1">
<UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" @click="cleanUpDatabase" class="w-fit"
>Clean database</UButton
>
</div>
</UPageSection>
</template>
<script setup lang="ts">
import { LazyAddLibraryModal } from '#components';
const overlay = useOverlay();
const config = useRuntimeConfig();
const addLibraryModal = overlay.create(LazyAddLibraryModal);
import FileLibraries from '~/components/FileLibraries.vue';
const cleanUpDatabaseBusy = ref(false);
const cleanUpDatabase = () => {
cleanUpDatabaseBusy.value = true;
$fetch(`${config.public.openFetch.api.baseURL}v2/Maintenance/CleanupNoDownloadManga`).finally(
() => (cleanUpDatabaseBusy.value = false)
);
};
</script>

0
tranga-website/public/blahaj.png → website/public/blahaj.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 124 KiB