2022-02-09 22:23:08 +00:00
|
|
|
import type { NextPage } from "next";
|
2022-02-10 11:31:38 +00:00
|
|
|
import { useState, useRef } from "react";
|
2022-02-09 22:23:08 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import BookInfoInput from "../components/BookInfoInput";
|
|
|
|
|
import DocReceiver from "../components/DocReceiver";
|
|
|
|
|
import { bookRequest } from "../lib/fetchers";
|
2022-02-10 11:31:38 +00:00
|
|
|
import FormatGuideModal from "../components/FormatGuideModal";
|
2022-09-16 13:46:06 +00:00
|
|
|
import Script from "next/script";
|
2022-02-09 22:23:08 +00:00
|
|
|
|
|
|
|
|
// TODO: Make Title Required
|
2022-02-10 06:13:32 +00:00
|
|
|
// TODO: Have author field in there
|
2022-02-09 22:23:08 +00:00
|
|
|
// TODO: Allow Word File straight w/ images etc upload
|
|
|
|
|
// TDOO: Add language selection option (Pashto, Arabic, Farsi, Urdu)
|
|
|
|
|
|
|
|
|
|
const Home: NextPage = () => {
|
|
|
|
|
const mdRef = useRef<any>(null);
|
2022-02-10 11:31:38 +00:00
|
|
|
const [showFormatGuide, setShowFormatGuide] = useState<boolean>(false);
|
|
|
|
|
const [submissionStatus, setSubmissionStatus] = useState<string>("");
|
2022-02-09 22:23:08 +00:00
|
|
|
function handleReceiveText(m: string) {
|
|
|
|
|
mdRef.current.value = m;
|
|
|
|
|
}
|
|
|
|
|
function clearText() {
|
|
|
|
|
mdRef.current.value = "";
|
|
|
|
|
}
|
|
|
|
|
function handleSubmit(info: { frontmatter: Frontmatter, cover: File | undefined }) {
|
|
|
|
|
const content = mdRef.current.value as string;
|
2022-02-10 07:34:15 +00:00
|
|
|
if (!content) {
|
|
|
|
|
alert("Please enter some content for the book");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!info.frontmatter.title) {
|
|
|
|
|
alert("Please enter a title for the book");
|
|
|
|
|
return;
|
|
|
|
|
}
|
2022-02-10 11:31:38 +00:00
|
|
|
setSubmissionStatus("");
|
2022-02-09 22:23:08 +00:00
|
|
|
bookRequest({
|
|
|
|
|
...info,
|
|
|
|
|
content,
|
|
|
|
|
}, {
|
2022-02-10 11:31:38 +00:00
|
|
|
complete: () => setSubmissionStatus("Done"),
|
|
|
|
|
progress: (p) => setSubmissionStatus(p < 100 ? `Uploading ${p}%...` : "Processing..."),
|
|
|
|
|
error: () => setSubmissionStatus("Error"),
|
2022-02-09 22:23:08 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return (
|
2022-02-10 11:31:38 +00:00
|
|
|
<div className="container" style={{ marginBottom: "50px", maxWidth: "950px" }}>
|
2022-02-09 22:23:08 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>RTL EPUB Maker</title>
|
|
|
|
|
<meta name="description" content="Easily create EPUB e-book files with proper RTL support" />
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossOrigin="anonymous" />
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
2022-09-16 13:46:06 +00:00
|
|
|
<Script
|
|
|
|
|
src="https://www.googletagmanager.com/gtag/js?id=G-4L08QX2FXM"
|
|
|
|
|
strategy="afterInteractive"
|
|
|
|
|
/>
|
|
|
|
|
<Script id="google-analytics" strategy="afterInteractive">{`
|
|
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
|
|
function gtag(){dataLayer.push(arguments);}
|
|
|
|
|
gtag('js', new Date());
|
|
|
|
|
|
|
|
|
|
gtag('config', 'G-4L08QX2FXM', { 'anonymize_ip': true });
|
|
|
|
|
`}</Script>
|
2022-02-09 22:23:08 +00:00
|
|
|
<h1 className="mt-3">RTL EPUB Maker 📚</h1>
|
2022-02-10 11:31:38 +00:00
|
|
|
<p className="lead mb-4">Easily create EPUB e-book files with proper RTL support</p>
|
|
|
|
|
<h4 className="mb-3">Book Content</h4>
|
2022-02-09 22:23:08 +00:00
|
|
|
<DocReceiver handleReceiveText={handleReceiveText}/>
|
|
|
|
|
<div className="mt-3">
|
2022-02-10 11:31:38 +00:00
|
|
|
<label htmlFor="mdTextarea" className="form-label d-flex flex-row justify-content-between align-items-center">
|
|
|
|
|
<div>Text in Markdown</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button type="button" className="btn btn-sm btn-light" onClick={() => setShowFormatGuide(true)}>
|
|
|
|
|
📖 Formatting Guide
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
|
|
|
|
<textarea
|
|
|
|
|
placeholder="or paste book content here..."
|
|
|
|
|
spellCheck="false"
|
|
|
|
|
dir="rtl"
|
|
|
|
|
ref={mdRef}
|
|
|
|
|
className="form-control"
|
|
|
|
|
id="mdTextarea"
|
|
|
|
|
rows={15}
|
|
|
|
|
/>
|
2022-02-09 22:23:08 +00:00
|
|
|
</div>
|
|
|
|
|
<div style={{ textAlign: "right" }}>
|
2022-02-09 23:15:20 +00:00
|
|
|
<button type="button" className="btn btn-sm btn-light mt-2" onClick={clearText}>Clear</button>
|
2022-02-09 22:23:08 +00:00
|
|
|
</div>
|
2022-02-10 06:13:32 +00:00
|
|
|
<h4>Book Metadata</h4>
|
2022-02-09 22:23:08 +00:00
|
|
|
<BookInfoInput handleSubmit={handleSubmit} />
|
2022-02-10 11:31:38 +00:00
|
|
|
<div>
|
|
|
|
|
<samp>{submissionStatus}</samp>
|
|
|
|
|
</div>
|
2022-02-09 22:23:08 +00:00
|
|
|
<div className="text-center mt-4 text-muted">
|
2022-09-16 14:06:21 +00:00
|
|
|
<p className="lead">Made by <a className="em-link" href="https://lingdocs.com">LingDocs</a></p>
|
2022-02-09 22:23:08 +00:00
|
|
|
<p>Submissions are private. Nothing is kept on the server. See the <a className="em-link" href="https://github.com/lingdocs/rtl-epub-maker">source code here</a>.</p>
|
|
|
|
|
</div>
|
2022-02-10 11:31:38 +00:00
|
|
|
<FormatGuideModal show={showFormatGuide} onHide={() => setShowFormatGuide(false)} />
|
2022-02-09 22:23:08 +00:00
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Home
|
