c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Diary page selector

Browse Source
This commit is contained in:
Daniel Kluge 2022-06-13 12:54:40 +02:00
parent bd3fe1518d
commit 6a8c1265fa
4 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
components/ProjectModal.tsx
View File

@ -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<boolean>(false);
const [diaryPages, setDiaryPages] = useState<string[]>([]);
const [content, setContent] = useState<string>(projectEmpty);
const [currentContent, setCurrentContent] = useState<Project | Diary | undefined>(undefined);
const [currentPage, setCurrentPage] = useState<number>(0);
const [HTMLContent, setHTMLContent] = useState<string>(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<HTMLDivElement>(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 = <span className={styles.leftSelectSpace}>{currentPage > 0 ? <a href="#" onClick={() => setModalContent(currentContent, currentPage - 1)}>&lt; {currentPage - 1 > 0 ? currentContent.entries[currentPage - 2].title : "Main page"}</a> : null}</span>;
const next = <span className={styles.rightSelectSpace}>{currentPage < currentContent.entries.length ? <a href="#" onClick={() => setModalContent(currentContent, currentPage + 1)}>{currentContent.entries[currentPage].title} &gt;</a> : null}</span>;
const select = (
<select onChange={(e) => setModalContent(currentContent, Number.parseInt(e.target.value))} value={currentPage}>
<option key={-1} value={0}>Main page</option>
{currentContent.entries.map((entry, i) => <option key={i} value={i + 1}>{entry.title}</option>)}
</select>
);
return <div className={styles.pageSelector}>{prev}{currentPage > 0 ? <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> : null}{select}{currentPage < currentContent.entries.length ? <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span> : null}{next}</div>;
})();
return <div className={styles.modal}>
<a onClick={() => setVisible(false)}>
<div className={styles.modalClose}><div className={styles.modalCloseAlign}>X</div></div>
</a>
<div className={styles.modalContainer}>
{
// TODO
// If diaryPages
// Show page selector
}
<div className={`${styles.modalText} asciidoc`} ref={containerRef} dangerouslySetInnerHTML={{__html: content ? content : projectEmpty}}>
{nextPageSelector}
<div className={`${styles.modalText} asciidoc`} ref={containerRef} dangerouslySetInnerHTML={{ __html: HTMLContent ? HTMLContent : projectEmpty }}>
</div>
{nextPageSelector}
</div>
</div>;
};

13
lib/content/generate.ts
View File

@ -26,21 +26,24 @@ async function generateProjectHTML(project: Project): Promise<string> {
<hr>
<div id="footer">
<div id="footer-text">
Last updated: ${adDoc.getAttribute("docdatetime")} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-content/src/branch/senpai/projects/${project.name}.adoc">Document source</a>
Last updated: ${adDoc.getAttribute("docdatetime")} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-content/src/branch/senpai/projects/${project.name}.adoc" target="_blank">Document source</a>
</div>
</div>`;
}
async function generateDiaryHTML(diary: Diary, selectedPage?: number): Promise<string> {
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()}
<hr>
<div id="footer">
<div id="footer-text">
Last updated: ${adDoc.getAttribute("docdatetime")} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-content/src/branch/senpai/diaries/${gitfile}">Document source</a>
Last updated: ${adDoc.getAttribute("docdatetime")} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-content/src/branch/senpai/diaries/${gitfile}" target="_blank">Document source</a>
</div>
</div>`;
}

37
styles/ProjectModal.module.css
View File

@ -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;
}

15
styles/customAsciidoc.scss
View File

@ -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;
}