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

Support diaries (kinda)

Browse Source
This commit is contained in:
Daniel Kluge 2022-03-15 17:21:10 +01:00
parent 1cad1235f2
commit 86490a3a44
7 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/ProjectModal.tsx
View File

@ -2,17 +2,19 @@ import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import asciidoctor from "asciidoctor"; import asciidoctor from "asciidoctor";
import styles from "../styles/ProjectModal.module.css"; import styles from "../styles/ProjectModal.module.css";
import Link from "next/link"; import type { Project, Diary } from "../lib/projects/types";
//import Link from "next/link";
interface ModalInput { interface ModalInput {
project: string; project: Project|Diary|undefined;
projectType: "project"|"diary";
visible: boolean; visible: boolean;
setVisible: CallableFunction; setVisible: CallableFunction;
} }
const ad = asciidoctor(); const ad = asciidoctor();
const ProjectModal: NextPage<ModalInput> = ({ project, visible, setVisible }) => { const ProjectModal: NextPage<ModalInput> = ({ project, projectType, visible, setVisible }) => {
const projectEmpty = "<div>Kein Projekt ausgewählt.</div>"; const projectEmpty = "<div>Kein Projekt ausgewählt.</div>";
const [projectData, setProjectData] = useState<string>(projectEmpty); const [projectData, setProjectData] = useState<string>(projectEmpty);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@ -29,24 +31,24 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
`; `;
useEffect(() => { useEffect(() => {
if (project && project !== "") { if (project && project.name) {
// TODO // TODO
// set Spinner // set Spinner
setProjectData("Loading..."); setProjectData("Loading...");
fetch(`/api/projects/${project}`).then((res) => { fetch(`/api/${projectType === "diary" ? "diaries" : "projects"}/${project.name}`).then((res) => {
if (res.status === 404) setProjectData(projectNotFoundHtml); if (res.status === 404) setProjectData(projectNotFoundHtml);
if (res.status !== 200) setProjectData(projectServerErrorHtml); if (res.status !== 200) setProjectData(projectServerErrorHtml);
res.text().then(data => { res.text().then(data => {
try { try {
const adDoc = ad.load(data, { attributes: { showtitle: true } }); const adDoc = ad.load(data, { attributes: { showtitle: true } });
setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime"))); setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project.name, adDoc.getAttribute("docdatetime")));
} catch { } catch {
setProjectData(projectServerErrorHtml); setProjectData(projectServerErrorHtml);
} }
}); });
}); });
} else if (project === "") setProjectData(projectEmpty); } else if (typeof project === "undefined") setProjectData(projectEmpty);
}, [project, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]); }, [project, projectType, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
useEffect(() => { useEffect(() => {
if (projectData && containerRef.current && projectData !== "") { if (projectData && containerRef.current && projectData !== "") {

7
components/REPL/REPLInput.tsx
View File

@ -3,7 +3,7 @@ import useSWR from "swr";
import { MutableRefObject, useState, createRef, useEffect } from "react"; import { MutableRefObject, useState, createRef, useEffect } from "react";
import { CommandInterface } from "../../lib/commands"; import { CommandInterface } from "../../lib/commands";
import styles from "../../styles/REPL/REPLInput.module.css"; import styles from "../../styles/REPL/REPLInput.module.css";
import { Project } from "../../lib/projects/types"; import type { ProjectList } from "../../lib/projects/types";
interface REPLInputParams { interface REPLInputParams {
historyCallback: CallableFunction; historyCallback: CallableFunction;
@ -12,10 +12,11 @@ interface REPLInputParams {
modalManipulation: { modalManipulation: {
setModalVisible: CallableFunction; setModalVisible: CallableFunction;
setModalProject: CallableFunction; setModalProject: CallableFunction;
setModalProjectType: CallableFunction;
} }
} }
async function fetchProjects(endpoint: string): Promise<Project[]> { async function fetchProjects(endpoint: string): Promise<ProjectList> {
const res = await fetch(endpoint); const res = await fetch(endpoint);
return res.json(); return res.json();
} }
@ -28,7 +29,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
const [inCmdHistory, setInCmdHistory] = useState<number>(-1); const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
const [cmdHistory, setCmdHistory] = useState<string[]>([]); const [cmdHistory, setCmdHistory] = useState<string[]>([]);
const [usrInputTmp, setUsrInputTmp] = useState<string>(""); const [usrInputTmp, setUsrInputTmp] = useState<string>("");
const [cmdIf, setCmdIf] = useState<CommandInterface>(new CommandInterface(modalManipulation, [])); const [cmdIf, setCmdIf] = useState<CommandInterface>(new CommandInterface(modalManipulation, {projects: [], diaries: []}));
const { data: projects, error: projectsError } = useSWR("/api/projects?swr=1", fetchProjects); const { data: projects, error: projectsError } = useSWR("/api/projects?swr=1", fetchProjects);
const setInput = (inputRef: HTMLInputElement, input: string) => { const setInput = (inputRef: HTMLInputElement, input: string) => {

1
components/REPL/index.tsx
View File

@ -9,6 +9,7 @@ interface IREPLProps {
modalManipulation: { modalManipulation: {
setModalVisible: CallableFunction; setModalVisible: CallableFunction;
setModalProject: CallableFunction; setModalProject: CallableFunction;
setModalProjectType: CallableFunction;
} }
} }

10
lib/commands/definitions.ts
View File

@ -146,7 +146,9 @@ const project: Command = {
execute: (flags, args, _raw, cmdIf) => { execute: (flags, args, _raw, cmdIf) => {
if (project.flags && checkFlagInclude(flags, project.flags.list)) { if (project.flags && checkFlagInclude(flags, project.flags.list)) {
const result = ["Found the following projects:"]; const result = ["Found the following projects:"];
cmdIf.projects.forEach(project => result.push(`\t${project.name}\t${project.short}`)); cmdIf.projects.projects.forEach(project => result.push(`\t${project.name}\t${project.short_desc}`));
result.push("And the following diaries:");
cmdIf.projects.diaries.forEach(diary => result.push(`\t${diary.name}\t${diary.short_desc}`));
return result; return result;
} }
@ -154,7 +156,8 @@ const project: Command = {
if (args[0] === "this") args[0] = "homepage"; if (args[0] === "this") args[0] = "homepage";
const pjt = cmdIf.projects.find(p => p.name === args[0]); let [pjt, ptype] = [cmdIf.projects.projects.find(p => p.name === args[0]), "project"];
if (!pjt) [pjt, ptype] = [cmdIf.projects.diaries.find(p => p.name === args[0]), "diary"];
if (!pjt) return [ if (!pjt) return [
`Cannot find project ${args[0]}!`, `Cannot find project ${args[0]}!`,
"You can see available projects using 'project -l'." "You can see available projects using 'project -l'."
@ -170,7 +173,8 @@ const project: Command = {
} }
if (project.flags && checkFlagInclude(flags, project.flags.minimal)) return pjt.desc; if (project.flags && checkFlagInclude(flags, project.flags.minimal)) return pjt.desc;
cmdIf.callbacks.setModalProject(args[0]); cmdIf.callbacks.setModalProjectType(ptype);
cmdIf.callbacks.setModalProject(pjt);
cmdIf.callbacks.setModalVisible(true); cmdIf.callbacks.setModalVisible(true);
return []; return [];
} }

11
lib/commands/index.ts
View File

@ -1,16 +1,17 @@
import { Project } from "../projects/types"; import type { ProjectList } from "../projects/types";
import { printSyntax, commandList } from "./definitions"; import { printSyntax, commandList } from "./definitions";
interface CommandInterfaceCallbacks { interface CommandInterfaceCallbacks {
setModalVisible: CallableFunction, setModalVisible: CallableFunction;
setModalProject: CallableFunction setModalProject: CallableFunction;
setModalProjectType: CallableFunction;
} }
export class CommandInterface { export class CommandInterface {
callbacks: CommandInterfaceCallbacks; callbacks: CommandInterfaceCallbacks;
projects: Project[]; projects: ProjectList;
constructor(callbacks: CommandInterfaceCallbacks, projects: Project[]) { constructor(callbacks: CommandInterfaceCallbacks, projects: ProjectList) {
this.callbacks = callbacks; this.callbacks = callbacks;
this.projects = projects; this.projects = projects;
} }

19
lib/projects/types.ts
View File

@ -1,7 +1,24 @@
export interface ProjectList {
projects: Project[];
diaries: Diary[];
}
export interface Project { export interface Project {
name: string; name: string;
desc: string[]; desc: string[];
short: string; short_desc: string;
more?: string; more?: string;
repo?: string; repo?: string;
} }
export interface Diary {
name: string;
desc: string[];
short_desc: string;
more?: string;
repo?: string;
entries: {
title: string;
path: string;
}[];
}

8
pages/index.tsx
View File

@ -4,12 +4,14 @@ import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor
import { useRef, useState } from "react"; import { useRef, useState } from "react";
import ProjectModal from "../components/ProjectModal"; import ProjectModal from "../components/ProjectModal";
import REPL from "../components/REPL"; import REPL from "../components/REPL";
import type { Project, Diary } from "../lib/projects/types";
import styles from "../styles/Home.module.css"; import styles from "../styles/Home.module.css";
const Home: NextPage = () => { const Home: NextPage = () => {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const [modalVisible, setModalVisible] = useState<boolean>(false); const [modalVisible, setModalVisible] = useState<boolean>(false);
const [modalProject, setModalProject] = useState<string>(""); const [modalProject, setModalProject] = useState<Project|Diary|undefined>(undefined);
const [modalProjectType, setModalProjectType] = useState<"project"|"diary">("project");
const focusInput = () => { if (inputRef.current) inputRef.current.focus(); }; const focusInput = () => { if (inputRef.current) inputRef.current.focus(); };
@ -24,7 +26,7 @@ const Home: NextPage = () => {
<Head> <Head>
<title>c0ntroller.de</title> <title>c0ntroller.de</title>
</Head> </Head>
<ProjectModal visible={modalVisible} project={modalProject} setVisible={setModalVisible}/> <ProjectModal visible={modalVisible} project={modalProject} projectType={modalProjectType} setVisible={setModalVisible}/>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.header}> <div className={styles.header}>
<span className={styles.spacer} onClick={focusInput}>&nbsp;</span> <span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
@ -47,7 +49,7 @@ const Home: NextPage = () => {
</span> </span>
</a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span> </a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</div> </div>
<REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject}}/> <REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject, setModalProjectType}}/>
</div> </div>
</main>); </main>);
}; };