Support diaries (kinda)

components/ProjectModal.tsx

@@ -2,17 +2,19 @@ import type { NextPage } from "next";
 import { useEffect, useRef, useState } from "react";
 import asciidoctor from "asciidoctor";
 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 {
-    project: string;
+    project: Project|Diary|undefined;
+    projectType: "project"|"diary";
     visible: boolean;
     setVisible: CallableFunction;
 }
 
 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 [projectData, setProjectData] = useState<string>(projectEmpty);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -29,24 +31,24 @@ Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/fron
     `;
 
     useEffect(() => {
-        if (project && project !== "") {
+        if (project && project.name) {
             // TODO
             // set Spinner
             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 !== 200) setProjectData(projectServerErrorHtml);
                 res.text().then(data => {
                     try {
                         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 {
                         setProjectData(projectServerErrorHtml);
                     }
                 });
             });
-        } else if (project === "") setProjectData(projectEmpty);
+        } else if (typeof project === "undefined") setProjectData(projectEmpty);
-    }, [project, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
+    }, [project, projectType, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
 
     useEffect(() => {
         if (projectData && containerRef.current && projectData !== "") {

components/REPL/REPLInput.tsx

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

components/REPL/index.tsx

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

lib/commands/definitions.ts

@@ -146,7 +146,9 @@ const project: Command = {
     execute: (flags, args, _raw, cmdIf) => {
         if (project.flags && checkFlagInclude(flags, project.flags.list)) {
             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;
         }
 
@@ -154,7 +156,8 @@ const project: Command = {
 
         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 [
             `Cannot find project ${args[0]}!`,
             "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;
 
-        cmdIf.callbacks.setModalProject(args[0]);
+        cmdIf.callbacks.setModalProjectType(ptype);
+        cmdIf.callbacks.setModalProject(pjt);
         cmdIf.callbacks.setModalVisible(true);
         return [];
     }

lib/commands/index.ts

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

lib/projects/types.ts

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

pages/index.tsx

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