-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(frontend): make 3 extra packages just so webpack doesn't import f…
…s ugh
- Loading branch information
Showing
75 changed files
with
4,335 additions
and
181 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
apps/converter-frontend/components/converted-block-local/converted-block-local.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { render } from '@testing-library/react' | ||
|
||
import ConvertedBlockLocal from './converted-block-local' | ||
|
||
describe('ConvertedBlockLocal', () => { | ||
it('should render successfully', () => { | ||
const { baseElement } = render(<ConvertedBlockLocal />) | ||
expect(baseElement).toBeTruthy() | ||
}) | ||
}) |
33 changes: 33 additions & 0 deletions
33
apps/converter-frontend/components/converted-block-local/converted-block-local.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { Code, Loader } from '@mantine/core' | ||
import React, { useEffect, useState } from 'react' | ||
import { jatsToTex } from '@jote/processors/jats-to-tex' | ||
import { VFile } from 'vfile' | ||
|
||
/* eslint-disable-next-line */ | ||
export interface ConvertedBlockLocalProps { | ||
input: ArrayBuffer | ||
converter: ( | ||
input: ArrayBuffer, | ||
options: { [key: string]: string } | ||
) => Promise<VFile> | ||
options?: { [key: string]: string } | ||
} | ||
|
||
export function ConvertedBlockLocal(props: ConvertedBlockLocalProps) { | ||
const { input, options = {}, converter } = props | ||
const [vfile, setVFile] = useState<VFile | null>(null) | ||
useEffect(() => { | ||
;(async () => { | ||
setVFile(await converter(input, options)) | ||
})() | ||
}, [input]) | ||
|
||
return ( | ||
<> | ||
{/* <Code></Code> */} | ||
<Code>{vfile ? String(vfile) : <Loader />}</Code> | ||
</> | ||
) | ||
} | ||
|
||
export default ConvertedBlockLocal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,252 @@ | ||
import React, { useEffect, useState } from 'react' | ||
import { | ||
AppShell, | ||
Burger, | ||
Button, | ||
Code, | ||
Container, | ||
Group, | ||
Header, | ||
MediaQuery, | ||
Navbar, | ||
Select, | ||
Text, | ||
Title, | ||
useMantineTheme, | ||
} from '@mantine/core' | ||
import { HStack, VStack } from '../components/stack/stack' | ||
import SelectItem from '../components/select-item/select-item' | ||
import { AiFillFileWord, AiOutlineUpload } from 'react-icons/ai' | ||
import { JATSIcon, TexIcon, WordIcon } from '../components/ext-icon/ext-icon' | ||
|
||
import { Dropzone } from '@mantine/dropzone' | ||
import ConvertedBlock from '../components/converted-block/converted-block' | ||
import ConvertedBlockLocal from '../components/converted-block-local/converted-block-local' | ||
import { jatsToTexConverter } from '../utils/converters/jatsToTex' | ||
import { docxToTexConverter } from '../utils/converters/docxToTex' | ||
import { docxToJatsConverter } from '../utils/converters/docxToJats' | ||
export default function Index() { | ||
const [thing, setThing] = useState<ArrayBuffer>() | ||
const [tex, setTex] = useState('') | ||
const [opened, setOpened] = useState(false) | ||
const theme = useMantineTheme() | ||
const [from, setFrom] = useState<'docx' | 'jats'>('docx') | ||
const [to, setTo] = useState<'jats' | 'tex'>('tex') | ||
|
||
// useEffect(() => { | ||
// if (!thing) return | ||
|
||
// fetch('/api/jats-to-tex', { | ||
// method: 'post', | ||
// headers: { | ||
// Accept: 'application/json, text/plain, */*', | ||
// 'Content-Type': 'application/json', | ||
// }, | ||
// body: JSON.stringify({ response: Buffer.from(thing).toString() }), | ||
// }) | ||
// .then((res) => res.text()) | ||
// .then((res) => setTex(res)) | ||
// .catch((e) => { | ||
// console.error(e) | ||
// setTex(e) | ||
// }) | ||
// }, [thing]) | ||
|
||
return ( | ||
<AppShell | ||
// navbarOffsetBreakpoint controls when navbar should no longer be offset with padding-left | ||
navbarOffsetBreakpoint="sm" | ||
// fixed prop on AppShell will be automatically added to Header and Navbar | ||
fixed | ||
navbar={ | ||
<Navbar | ||
padding="md" | ||
// Breakpoint at which navbar will be hidden if hidden prop is true | ||
hiddenBreakpoint="sm" | ||
// Hides navbar when viewport size is less than value specified in hiddenBreakpoint | ||
hidden={!opened} | ||
// when viewport size is less than theme.breakpoints.sm navbar width is 100% | ||
// viewport size > theme.breakpoints.sm – width is 300px | ||
// viewport size > theme.breakpoints.lg – width is 400px | ||
width={{ sm: 300, lg: 400 }} | ||
> | ||
<Navbar height={600} padding="xs" width={{ base: 300 }}> | ||
<Navbar.Section>Journal of Trial and Error</Navbar.Section> | ||
<Navbar.Section grow mt="lg"> | ||
<VStack> | ||
{['1', '2', '3', '4', '5'].map((num) => ( | ||
<HStack key={num}> | ||
<Text>Icon {num}</Text> | ||
<Text>Link {num}</Text> | ||
</HStack> | ||
))} | ||
</VStack> | ||
</Navbar.Section> | ||
<Navbar.Section>You!</Navbar.Section> | ||
</Navbar> | ||
</Navbar> | ||
} | ||
header={ | ||
<Header height={70} padding="md"> | ||
{/* Handle other responsive styles with MediaQuery component or createStyles function */} | ||
<div | ||
style={{ display: 'flex', alignItems: 'center', height: '100%' }} | ||
> | ||
<MediaQuery largerThan="sm" styles={{ display: 'none' }}> | ||
<Burger | ||
opened={opened} | ||
onClick={() => setOpened((o) => !o)} | ||
size="sm" | ||
color={theme.colors.gray[6]} | ||
mr="xl" | ||
/> | ||
</MediaQuery> | ||
|
||
<Text>Application header</Text> | ||
</div> | ||
</Header> | ||
} | ||
> | ||
<Title> Convert DOCX</Title> | ||
<Container> | ||
<HStack> | ||
<Text>Convert</Text> | ||
<Select | ||
itemComponent={SelectItem} | ||
placeholder="Input format" | ||
defaultValue="docx" | ||
onChange={(value: 'docx' | 'jats') => setFrom(value)} | ||
radius="md" | ||
data={[ | ||
{ | ||
value: 'docx', | ||
label: '.docx', | ||
description: 'You know', | ||
image: <WordIcon />, | ||
}, | ||
{ | ||
value: 'jats', | ||
label: 'JATS XML', | ||
description: 'Format used by academic publishers', | ||
image: <JATSIcon />, | ||
}, | ||
]} | ||
/> | ||
<Text>to</Text> | ||
<Select | ||
defaultValue="latex" | ||
radius="md" | ||
itemComponent={SelectItem} | ||
placeholder="Output format" | ||
onChange={(value: 'tex' | 'jats') => setTo(value)} | ||
data={[ | ||
{ value: 'tex', label: '.tex', image: <TexIcon /> }, | ||
{ value: 'jats', label: 'JATS XML', image: <JATSIcon /> }, | ||
]} | ||
/> | ||
<Button radius="md">Lets gooo</Button> | ||
</HStack> | ||
</Container> | ||
<Dropzone | ||
onDrop={async (files) => { | ||
const buf = await files[0].arrayBuffer() | ||
//const string = Buffer.from(buf).toString() | ||
console.log(buf) | ||
setThing(buf) | ||
}} | ||
> | ||
{(status) => ( | ||
<Group | ||
position="center" | ||
spacing="xl" | ||
style={{ minHeight: 220, pointerEvents: 'none' }} | ||
> | ||
<AiOutlineUpload | ||
//status={status} | ||
style={{ | ||
width: 80, | ||
height: 80, | ||
color: status ? 'green' : 'grey', | ||
}} | ||
/> | ||
|
||
<div> | ||
<Text size="xl" inline> | ||
Drag images here or click to select files | ||
</Text> | ||
<Text size="sm" color="dimmed" inline mt={7}> | ||
Attach as many files as you like, each file should not exceed | ||
5mb | ||
</Text> | ||
</div> | ||
</Group> | ||
)} | ||
</Dropzone> | ||
<Title>Input</Title> | ||
<Code | ||
style={{ | ||
maxHeight: '400px', | ||
overflow: 'scroll', | ||
}} | ||
> | ||
<pre | ||
style={{ | ||
maxHeight: '400px', | ||
overflow: 'scroll', | ||
}} | ||
> | ||
{thing && Buffer.from(thing).toString()} | ||
</pre> | ||
</Code> | ||
<Title>Output</Title> | ||
<Button | ||
onClick={() => | ||
fetch('/api/tex-to-pdf', { method: 'POST', body: tex }) | ||
.then((res) => res.blob()) | ||
.then((res) => { | ||
window.open(URL.createObjectURL(res)) | ||
}) | ||
.catch((e) => console.error(e)) | ||
} | ||
> | ||
Try make pdf | ||
</Button> | ||
<pre | ||
style={{ | ||
maxHeight: '400px', | ||
overflow: 'scroll', | ||
}} | ||
> | ||
{thing && ( | ||
<ConvertedBlockLocal | ||
input={thing} | ||
converter={ | ||
from === 'docx' | ||
? to === 'tex' | ||
? docxToTexConverter | ||
: docxToJatsConverter | ||
: jatsToTexConverter | ||
} | ||
/> | ||
)} | ||
</pre> | ||
|
||
{/* <Container> | ||
{[ | ||
'docx', | ||
'xml', | ||
'tex', | ||
'pdf', | ||
'xlxs', | ||
'png', | ||
'jpg', | ||
'svg', | ||
'html', | ||
'json', | ||
].map((filename: string) => ( | ||
<FileIcon extension={filename} {...(defaultStyles[filename] || {})} /> | ||
))} | ||
</Container> */} | ||
</AppShell> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import reoffParseReferences from 'reoff-parse-references-browser' | ||
import { rejourStringify } from 'rejour-stringify' | ||
import reoffCite from 'reoff-cite' | ||
import { reoffClean } from 'reoff-clean' | ||
import reoffParse from 'reoff-parse' | ||
import reoffRejour from 'reoff-rejour' | ||
import { VFile } from 'vfile' | ||
import { unified } from 'unified' | ||
import { docxToVFile } from 'docx-to-vfile' | ||
|
||
export async function docxToJatsConverter( | ||
input: ArrayBuffer, | ||
options: { | ||
citationType?: 'mendeley' | 'native' | 'citavi' | 'zotero' | 'endnote' | ||
url?: string | ||
mailto?: string | ||
} = {} | ||
): Promise<VFile> { | ||
const { citationType: type, url: apiUrl, mailto } = options | ||
|
||
const uint = new Uint8Array(input) | ||
const vfile = await docxToVFile(uint) | ||
|
||
const proc = unified() | ||
.use(reoffParse) | ||
.use(reoffClean, { | ||
rPrRemoveList: [ | ||
'w:lang', | ||
'w:shd', | ||
'w:szCs', | ||
'w:kern', | ||
'w:rFonts', | ||
'w:noProof', | ||
], | ||
}) | ||
.use(reoffParseReferences, { apiUrl: apiUrl || '/api/style', mailto }) | ||
.use(reoffCite, { type: type || 'mendeley' }) | ||
.use(reoffRejour) | ||
.use(rejourStringify) | ||
|
||
return proc.process(vfile) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import reoffParseReferences from 'reoff-parse-references-browser' | ||
import { rejourStringify } from 'rejour-stringify' | ||
import reoffCite from 'reoff-cite' | ||
import { reoffClean } from 'reoff-clean' | ||
import reoffParse from 'reoff-parse' | ||
import reoffRejour from 'reoff-rejour' | ||
import { VFile } from 'vfile' | ||
import { unified } from 'unified' | ||
import { docxToVFile } from 'docx-to-vfile' | ||
import rejourRelatex from 'rejour-relatex' | ||
import relatexStringify from 'relatex-stringify' | ||
|
||
export async function docxToTexConverter( | ||
input: ArrayBuffer, | ||
options: { | ||
citationType?: 'mendeley' | 'native' | 'citavi' | 'zotero' | 'endnote' | ||
url?: string | ||
mailto?: string | ||
} = {} | ||
): Promise<VFile> { | ||
const { citationType: type, url: apiUrl, mailto } = options | ||
|
||
const uint = new Uint8Array(input) | ||
const vfile = await docxToVFile(uint) | ||
|
||
const proc = unified() | ||
.use(reoffParse) | ||
.use(reoffClean, { | ||
rPrRemoveList: [ | ||
'w:lang', | ||
'w:shd', | ||
'w:szCs', | ||
'w:kern', | ||
'w:rFonts', | ||
'w:noProof', | ||
], | ||
}) | ||
.use(reoffParseReferences, { apiUrl: apiUrl || '/api/style', mailto }) | ||
.use(reoffCite, { type: type || 'mendeley' }) | ||
.use(reoffRejour) | ||
.use(rejourStringify) | ||
.use(rejourRelatex) | ||
.use(relatexStringify) | ||
|
||
return proc.process(vfile) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { jatsToTex } from '@jote/processors/jats-to-tex' | ||
import { VFile } from 'vfile' | ||
|
||
export async function jatsToTexConverter(input: ArrayBuffer): Promise<VFile> { | ||
return jatsToTex(Buffer.from(input).toString()) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"presets": [["@nrwl/web/babel", { "useBuiltIns": "usage" }]] | ||
} |
Oops, something went wrong.