Finish move from index to terminal

components/Terminal/ProjectModal.tsx

@@ -1,7 +1,8 @@
 import type { NextPage } from "next";
 import { useEffect, useRef, useState, isValidElement, useCallback } from "react";
 import { useRouter } from "next/router";
-import styles from "../../styles/ProjectModal.module.css";
+import styles from "../../styles/Terminal/ProjectModal.module.css";
+import asciidocStyles from "../../styles/Terminal/customAsciidoc.module.scss";
 import type { Project, Diary } from "../../lib/content/types";
 import { useCommands } from "../../lib/commands/ContextProvider";
 import { generateContent, projectEmpty } from "../../lib/content/generate";
@@ -108,7 +109,7 @@ const ProjectModal: NextPage = () => {
         </a>
         <div className={styles.modalContainer} onClick={(event) => event.stopPropagation()}>
             {nextPageSelector}
-            <div className={`${styles.modalText} asciidoc`} ref={containerRef} dangerouslySetInnerHTML={{ __html: HTMLContent ? HTMLContent : projectEmpty }}>
+            <div className={`${styles.modalText} ${asciidocStyles.asciidoc}`} ref={containerRef} dangerouslySetInnerHTML={{ __html: HTMLContent ? HTMLContent : projectEmpty }}>
 
             </div>
             {nextPageSelector}

components/Terminal/REPL/REPLHistory.tsx

@@ -1,7 +1,7 @@
 import { NextPage } from "next";
 import Link from "next/link";
 import type { BaseSyntheticEvent, MutableRefObject } from "react";
-import styles from "../../../styles/REPL/REPLHistory.module.css";
+import styles from "../../../styles/Terminal/REPL/REPLHistory.module.css";
 
 interface REPLHistoryParams {
     history: string[];

components/Terminal/REPL/REPLInput.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from "next";
 import { MutableRefObject, useState, createRef, useEffect } from "react";
 import { CommandInterface } from "../../../lib/commands";
-import styles from "../../../styles/REPL/REPLInput.module.css";
+import styles from "../../../styles/Terminal/REPL/REPLInput.module.css";
 import { useCommands } from "../../../lib/commands/ContextProvider";
 import { useModalFunctions } from "../contexts/ModalFunctions";
 

components/Terminal/REPL/index.tsx

@@ -1,9 +1,9 @@
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import REPLInput from "./REPLInput";
 import REPLHistory from "./REPLHistory";
-import styles from "../../../styles/REPL/REPLComplete.module.css";
+import styles from "../../../styles/Terminal/REPL/REPLComplete.module.css";
 import type { NextPage } from "next";
-import { useCommands } from "../../../lib/commands/ContextProvider";
+// import { useCommands } from "../../../lib/commands/ContextProvider";
 
 interface IREPLProps {
     inputRef: MutableRefObject<HTMLInputElement|null>;

components/Terminal/contexts/ModalFunctions.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 import type { PropsWithChildren } from "react";
-import type { Project, Diary } from "../../lib/content/types";
+import type { Project, Diary } from "../../../lib/content/types";
 
 interface ModalFunctions {
     setVisible?: CallableFunction;

lib/commands/definitions.ts

@@ -3,7 +3,7 @@ import type { Command, Flag } from "./types";
 import Color from "color";
 import { getColors, setColors } from "../colors";
 import Rainbow from "../colors";
-import styles from "../../styles/Random.module.scss";
+import styles from "../../styles/Terminal/Random.module.scss";
 
 function getCommandByName(name: string): Command | undefined {
     return commandList.find(cmd => cmd.name === name);

pages/_app.tsx

@@ -1,7 +1,7 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import "../styles/globals.css";
-import "../styles/customAsciidoc.scss";
+//import "../styles/customAsciidoc.scss";
 import { CommandsProvider } from "../lib/commands/ContextProvider";
 import { ModalFunctionProvider } from "../components/Terminal/contexts/ModalFunctions";
 

pages/index.tsx

@@ -9,6 +9,12 @@ import Spinner from "../components/Spinner";
 const Blog: NextPage<{}> = () => {
     const { data: projectList, error } = useSWR("/content/list.json", (...args) => fetch(...args).then(res => res.json()));
 
+    const generateCards = (type: string) => {
+        if (error) return <div>Error on fetching projects.</div>;
+        if (!projectList) return <Spinner size={200} color={"#fff"} />;
+        else return <div className="contentList">{(projectList as ContentList).filter(p => p.type === type).map(p => <ProjectCard key={p.name} title={p.name} description={p.desc.join(" ")} />)}</div>;
+    };
+
     return <>
         <Head>
             <title>c0ntroller.de</title>
@@ -18,11 +24,11 @@ const Blog: NextPage<{}> = () => {
         <p>Miaumiau Lorem ipsum</p>
         <h2>Projects</h2>
         {
-            projectList ? (projectList as ContentList).filter(p => p.type === "project").map(p => <ProjectCard key={p.name} title={p.name} description={p.desc.join(" ")} />) : <Spinner size={200} />
+            generateCards("project")
         }
         <h2>Diaries</h2>
         {
-            projectList ? (projectList as ContentList).filter(p => p.type === "diary").map(p => <ProjectCard key={p.name} title={p.name} description={p.desc.join(" ")} />) : <Spinner size={200} />
+            generateCards("diary")
         }
     </>;
 

pages/terminal.tsx

@@ -6,7 +6,7 @@ import { useCommands } from "../lib/commands/ContextProvider";
 import { useModalFunctions } from "../components/Terminal/contexts/ModalFunctions";
 import ProjectModal from "../components/Terminal/ProjectModal";
 import REPL from "../components/Terminal/REPL";
-import styles from "../styles/Home.module.css";
+import styles from "../styles/Terminal/Terminal.module.css";
 import type { ContentList } from "../lib/content/types";
 import { useRouter } from "next/router";
 import Rainbow from "../lib/colors";

styles/Terminal/Terminal.module.css

@@ -4,6 +4,8 @@
     height: 100vh;
     margin: 0;
     padding: 2px 10px 10px 10px;
+    color: var(--repl-color);
+    background: #000;
 }
 
 .header {

styles/globals.css

@@ -16,6 +16,4 @@
 body {
   margin: 0;
   padding: 0;
-  color: var(--repl-color);
-  background: #000;
 }