From 6a8c1265fabfc0f959b5c315135c414c898184dc Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Mon, 13 Jun 2022 12:54:40 +0200 Subject: [PATCH] Diary page selector --- components/ProjectModal.tsx | 54 +++++++++++++++++++--------------- lib/content/generate.ts | 13 ++++---- styles/ProjectModal.module.css | 37 +++++++++++++++++++++++ styles/customAsciidoc.scss | 15 +++++++--- 4 files changed, 86 insertions(+), 33 deletions(-) diff --git a/components/ProjectModal.tsx b/components/ProjectModal.tsx index 7358fa7..a294bfe 100644 --- a/components/ProjectModal.tsx +++ b/components/ProjectModal.tsx @@ -1,52 +1,58 @@ import type { NextPage } from "next"; -import { useContext, useEffect, useRef, useState } from "react"; -import asciidoctor from "asciidoctor"; +import { useRef, useState } from "react"; import styles from "../styles/ProjectModal.module.css"; import type { Project, Diary } from "../lib/content/types"; import { useCommands } from "./contexts/CommandInterface"; import { generateContent, projectEmpty } from "../lib/content/generate"; import { useModalFunctions } from "./contexts/ModalFunctions"; -//import Link from "next/link"; const ProjectModal: NextPage = () => { const [visible, setVisible] = useState(false); - const [diaryPages, setDiaryPages] = useState([]); - const [content, setContent] = useState(projectEmpty); + const [currentContent, setCurrentContent] = useState(undefined); + const [currentPage, setCurrentPage] = useState(0); + const [HTMLContent, setHTMLContent] = useState(projectEmpty); - const setModalContent = async (content: Project|Diary, selectedPage?: number) => { - if (content.type === "diary") setDiaryPages(content.entries.map(entry => entry.title)); - setContent(await generateContent(content, selectedPage)); + const setModalContent = async (content: Project | Diary, selectedPage?: number) => { + setCurrentContent(content); + if (content.type === "diary") setCurrentPage(selectedPage === undefined ? 0 : selectedPage); + setHTMLContent(await generateContent(content, selectedPage)); }; const { updateCallbacks: updateCmdCallbacks } = useCommands(); const { updateCallbacks: updateModalCallbacks } = useModalFunctions(); - updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setContent }); - updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setContent }); + updateCmdCallbacks({ setModalVisible: setVisible, setModalContent, setModalHTML: setHTMLContent }); + updateModalCallbacks({ setVisible, setContent: setModalContent, setHtml: setHTMLContent }); const containerRef = useRef(null); - /*useEffect(() => { - console.log(content); - if (content && containerRef.current) { - containerRef.current.innerHTML = content; - } - }, [content]);*/ - if (!visible) return <>; + const nextPageSelector = (() => { + if (!currentContent || currentContent?.type !== "diary" || currentContent.entries.length === 0) return null; + + const prev = {currentPage > 0 ? setModalContent(currentContent, currentPage - 1)}>< {currentPage - 1 > 0 ? currentContent.entries[currentPage - 2].title : "Main page"} : null}; + const next = {currentPage < currentContent.entries.length ? setModalContent(currentContent, currentPage + 1)}>{currentContent.entries[currentPage].title} > : null}; + + const select = ( + + ); + + return
{prev}{currentPage > 0 ?   |   : null}{select}{currentPage < currentContent.entries.length ?   |   : null}{next}
; + })(); + return
setVisible(false)}>
X
- { - // TODO - // If diaryPages - // Show page selector - } -
- + {nextPageSelector} +
+
+ {nextPageSelector}
; }; diff --git a/lib/content/generate.ts b/lib/content/generate.ts index 655c933..a2ed445 100644 --- a/lib/content/generate.ts +++ b/lib/content/generate.ts @@ -26,21 +26,24 @@ async function generateProjectHTML(project: Project): Promise {
`; } async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise { - const resp = selectedPage === undefined ? await fetch(`/content/diaries/${diary.name}.adoc`) : await fetch(`/content/diaries/${diary.name}/${diary.entries[selectedPage].filename}.adoc`); + const page: number = Number.parseInt(selectedPage?.toString() || "0") - 1; + const resp = page === -1 ? await fetch(`/content/diaries/${diary.name}.adoc`) : await fetch(`/content/diaries/${diary.name}/${diary.entries[page].filename}.adoc`); if (resp.status !== 200) return projectServerErrorHtml; - const adDoc = ad.load(await resp.text(), { attributes: { showtitle: true } }); - const gitfile = selectedPage === undefined ? `${diary.name}.adoc` : `${diary.name}/${diary.entries[selectedPage].filename}.adoc`; + const rawAd = await resp.text(); + const pathsCorrected = rawAd.replace(/(image[:]{1,2})(.*\.[a-zA-Z]+)\[/g, "$1/content/diaries/$2["); + const adDoc = ad.load(pathsCorrected, { attributes: { showtitle: true } }); + const gitfile = page === -1 ? `${diary.name}.adoc` : `${diary.name}/${diary.entries[page].filename}.adoc`; return `${adDoc.convert(adDoc).toString()}
`; } \ No newline at end of file diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css index 31ab99a..b56a78f 100644 --- a/styles/ProjectModal.module.css +++ b/styles/ProjectModal.module.css @@ -74,3 +74,40 @@ border-radius: 20px; border: none; } + +.pageSelector { + display: flex; + flex-direction: row; + font-family: sans-serif; +} + +.pageSelector:last-of-type { + margin-top: 10px; +} + +.pageSelector select { + background: var(--modal-gray); /* Transparent does not work for the dropdown */ + color: var(--repl-color-link); + font-size: 1rem; +} + +.pageSelector a:link, .pageSelector a:visited, .pageSelector a:hover, .pageSelector a:active { + color: var(--repl-color-link); + text-decoration: none; +} + +.pageSelector a:hover { + text-decoration: underline; +} + +.leftSelectSpace, .rightSelectSpace { + flex-grow: 2; +} + +.leftSelectSpace { + text-align: right; +} + +.rightSelectSpace { + text-align: left; +} diff --git a/styles/customAsciidoc.scss b/styles/customAsciidoc.scss index 78231c7..8f57911 100644 --- a/styles/customAsciidoc.scss +++ b/styles/customAsciidoc.scss @@ -1,15 +1,19 @@ .asciidoc { - /*@import "../node_modules/@asciidoctor/core/dist/css/asciidoctor.css";*/ + font-family: sans-serif; + @import "./asciidocBootSlate"; + h1 { color: var(--repl-color-link, #2ac02a); font-size: 3em; } + h2, h3 { font-weight: bold; text-decoration: underline; } + h2, h3, h4, @@ -17,18 +21,21 @@ h6 { color: var(--repl-color, #188a18); } - font-family: sans-serif; + #preamble { font-style: italic; font-size: 120%; } + .paragraph { line-height: 1.3; } - tbody>tr:nth-of-type(odd), #footer { + + tbody>tr:nth-of-type(odd), + #footer { background-color: #1f2420; } - + tbody>tr:hover { background-color: #364239; }