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 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);
}, [project, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
} else if (typeof project === "undefined") setProjectData(projectEmpty);
}, [project, projectType, projectEmpty, projectNotFoundHtml, projectServerErrorHtml]);
useEffect(() => {
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 { 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) => {

1
components/REPL/index.tsx
View File

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

10
lib/commands/definitions.ts
View File

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

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";
interface CommandInterfaceCallbacks {
setModalVisible: CallableFunction,
setModalProject: CallableFunction
setModalVisible: 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;
}

19
lib/projects/types.ts
View File

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

8
pages/index.tsx
View File

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