From 995cfc5aeab1fa00246d84441ea7d5e59e6c32bf Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Fri, 30 Sep 2022 19:23:14 +0200 Subject: [PATCH] Move index to /terminal --- components/Blog/Card.tsx | 11 ++ components/Blog/Navigation.tsx | 6 +- components/Spinner.tsx | 4 +- components/{ => Terminal}/ProjectModal.tsx | 10 +- .../{ => Terminal}/REPL/REPLHistory.tsx | 2 +- components/{ => Terminal}/REPL/REPLInput.tsx | 6 +- components/{ => Terminal}/REPL/index.tsx | 4 +- .../contexts/ModalFunctions.tsx | 0 pages/_app.tsx | 2 +- pages/blog.tsx | 15 --- pages/index.tsx | 109 ++++-------------- pages/terminal.tsx | 98 ++++++++++++++++ styles/Blog/Card.module.scss | 5 + 13 files changed, 154 insertions(+), 118 deletions(-) create mode 100644 components/Blog/Card.tsx rename components/{ => Terminal}/ProjectModal.tsx (94%) rename components/{ => Terminal}/REPL/REPLHistory.tsx (98%) rename components/{ => Terminal}/REPL/REPLInput.tsx (97%) rename components/{ => Terminal}/REPL/index.tsx (90%) rename components/{ => Terminal}/contexts/ModalFunctions.tsx (100%) delete mode 100644 pages/blog.tsx create mode 100644 pages/terminal.tsx create mode 100644 styles/Blog/Card.module.scss diff --git a/components/Blog/Card.tsx b/components/Blog/Card.tsx new file mode 100644 index 0000000..05cd573 --- /dev/null +++ b/components/Blog/Card.tsx @@ -0,0 +1,11 @@ +import type { NextPage } from "next"; +import styles from "../../styles/Blog/Card.module.scss"; + +const ProjectCard: NextPage<{ title: string, description: string }> = ({ title, description}) => { + return
+
{title}
+
{description}
+
; +}; + +export default ProjectCard; \ No newline at end of file diff --git a/components/Blog/Navigation.tsx b/components/Blog/Navigation.tsx index 932602a..bddb7c2 100644 --- a/components/Blog/Navigation.tsx +++ b/components/Blog/Navigation.tsx @@ -1,7 +1,11 @@ import type { NextPage } from "next"; const Navigation: NextPage<{}> = () => { - return <>; + return ; }; export default Navigation; diff --git a/components/Spinner.tsx b/components/Spinner.tsx index e223e1c..2e6405a 100644 --- a/components/Spinner.tsx +++ b/components/Spinner.tsx @@ -1,7 +1,7 @@ import type { NextPage } from "next"; import styles from "../styles/Spinner.module.scss"; -const Spinner: NextPage<{size: number}> = ({ size }) => { +const Spinner: NextPage<{size: number, color?: string}> = ({ size, color }) => { const diameterY = 300; const padding = 25; @@ -12,7 +12,7 @@ const Spinner: NextPage<{size: number}> = ({ size }) => { const vbSizeY = diameterY + (2 * padding); return
- +
; }; diff --git a/components/ProjectModal.tsx b/components/Terminal/ProjectModal.tsx similarity index 94% rename from components/ProjectModal.tsx rename to components/Terminal/ProjectModal.tsx index 9ff6437..d6e3c51 100644 --- a/components/ProjectModal.tsx +++ b/components/Terminal/ProjectModal.tsx @@ -1,12 +1,12 @@ 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 type { Project, Diary } from "../lib/content/types"; -import { useCommands } from "../lib/commands/ContextProvider"; -import { generateContent, projectEmpty } from "../lib/content/generate"; +import styles from "../../styles/ProjectModal.module.css"; +import type { Project, Diary } from "../../lib/content/types"; +import { useCommands } from "../../lib/commands/ContextProvider"; +import { generateContent, projectEmpty } from "../../lib/content/generate"; import { useModalFunctions } from "./contexts/ModalFunctions"; -import Spinner from "./Spinner"; +import Spinner from "../Spinner"; import { renderToStaticMarkup } from "react-dom/server"; // Code Highlighting diff --git a/components/REPL/REPLHistory.tsx b/components/Terminal/REPL/REPLHistory.tsx similarity index 98% rename from components/REPL/REPLHistory.tsx rename to components/Terminal/REPL/REPLHistory.tsx index a980fe7..a559d61 100644 --- a/components/REPL/REPLHistory.tsx +++ b/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/REPL/REPLHistory.module.css"; interface REPLHistoryParams { history: string[]; diff --git a/components/REPL/REPLInput.tsx b/components/Terminal/REPL/REPLInput.tsx similarity index 97% rename from components/REPL/REPLInput.tsx rename to components/Terminal/REPL/REPLInput.tsx index 8258200..e0865a0 100644 --- a/components/REPL/REPLInput.tsx +++ b/components/Terminal/REPL/REPLInput.tsx @@ -1,8 +1,8 @@ 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 { useCommands } from "../../lib/commands/ContextProvider"; +import { CommandInterface } from "../../../lib/commands"; +import styles from "../../../styles/REPL/REPLInput.module.css"; +import { useCommands } from "../../../lib/commands/ContextProvider"; import { useModalFunctions } from "../contexts/ModalFunctions"; interface REPLInputParams { diff --git a/components/REPL/index.tsx b/components/Terminal/REPL/index.tsx similarity index 90% rename from components/REPL/index.tsx rename to components/Terminal/REPL/index.tsx index 613240b..0516c22 100644 --- a/components/REPL/index.tsx +++ b/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/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; diff --git a/components/contexts/ModalFunctions.tsx b/components/Terminal/contexts/ModalFunctions.tsx similarity index 100% rename from components/contexts/ModalFunctions.tsx rename to components/Terminal/contexts/ModalFunctions.tsx diff --git a/pages/_app.tsx b/pages/_app.tsx index 0f040c1..5788baf 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,7 +3,7 @@ import Head from "next/head"; import "../styles/globals.css"; import "../styles/customAsciidoc.scss"; import { CommandsProvider } from "../lib/commands/ContextProvider"; -import { ModalFunctionProvider } from "../components/contexts/ModalFunctions"; +import { ModalFunctionProvider } from "../components/Terminal/contexts/ModalFunctions"; function MyApp({ Component, pageProps }: AppProps) { return <> diff --git a/pages/blog.tsx b/pages/blog.tsx deleted file mode 100644 index 56f28c8..0000000 --- a/pages/blog.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { NextPage } from "next"; -import Head from "next/head"; - -const Blog: NextPage<{}> = () => { - - return <> - - c0ntroller.de - - Hello - ; - -}; - -export default Blog; \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 4d2f5f8..ecb969b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,98 +1,31 @@ -import type { NextPage, GetStaticProps } from "next"; +import type { NextPage } from "next"; import Head from "next/head"; -import { GithubLogo, InstagramLogo, DiscordLogo, GameController, Envelope } from "phosphor-react"; -import { useEffect, useRef,useCallback } from "react"; -import { useCommands } from "../lib/commands/ContextProvider"; -import { useModalFunctions } from "../components/contexts/ModalFunctions"; -import ProjectModal from "../components/ProjectModal"; -import REPL from "../components/REPL"; -import styles from "../styles/Home.module.css"; +import useSWR from "swr"; import type { ContentList } from "../lib/content/types"; -import { useRouter } from "next/router"; -import Rainbow from "../lib/colors"; +import Navigation from "../components/Blog/Navigation"; +import ProjectCard from "../components/Blog/Card"; +import Spinner from "../components/Spinner"; -const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => { - const inputRef = useRef(null); - const { modalFunctions } = useModalFunctions(); - const { setContents } = useCommands(); - const router = useRouter(); +const Blog: NextPage<{}> = () => { + const { data: projectList, error } = useSWR("/content/list.json", (...args) => fetch(...args).then(res => res.json())); - const updateProjects = useCallback(async () => { - try { - const res = await fetch("/content/list.json"); - const projects: ContentList = await res.json(); - projects.sort((a, b) => { - return a.name.localeCompare(b.name); - }); - setContents(projects); - } catch {} - }, [setContents]); - - const focusInput = () => { if (inputRef.current) inputRef.current.focus(); }; - - const hideModalOnEsc = (e: React.KeyboardEvent) => { - if (e.key === "Escape") { - e.preventDefault(); - if(modalFunctions.setVisible) modalFunctions.setVisible(false); - } - }; - - useEffect(() => { - updateProjects().then(() => { if (modalFunctions.onContentReady) modalFunctions.onContentReady(); }); - const interval = setInterval(updateProjects, 30 * 1000); - return () => clearInterval(interval); - }, [updateProjects, modalFunctions]); - - useEffect(() => { - if ("rainbow" in router.query) { - Rainbow.start(); - } - }, [router]); - - return (
+ return <> c0ntroller.de - -
-
-   - Source - | - Bug? - | - - | - - | - - | - - | - - - - - C0ntroller_Z#3883 - - - -   -
- -
-
); -}; - -export const getStaticProps: GetStaticProps = async (_context) => { - const date = new Date(); - const padD = (n: number) => n.toString().padStart(2, "0"); - const buildTime = `${date.getUTCFullYear()}${padD(date.getUTCDate())}${padD(date.getUTCMonth() + 1)}-${padD(date.getUTCHours())}${padD(date.getUTCMinutes())}`; - return { - props: { - buildTime + +

Hello there!

+

Miaumiau Lorem ipsum

+

Projects

+ { + projectList ? (projectList as ContentList).filter(p => p.type === "project").map(p => ) : } - }; +

Diaries

+ { + projectList ? (projectList as ContentList).filter(p => p.type === "diary").map(p => ) : + } + ; + }; -export default Home; +export default Blog; \ No newline at end of file diff --git a/pages/terminal.tsx b/pages/terminal.tsx new file mode 100644 index 0000000..dd62295 --- /dev/null +++ b/pages/terminal.tsx @@ -0,0 +1,98 @@ +import type { NextPage, GetStaticProps } from "next"; +import Head from "next/head"; +import { GithubLogo, InstagramLogo, DiscordLogo, GameController, Envelope } from "phosphor-react"; +import { useEffect, useRef,useCallback } from "react"; +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 type { ContentList } from "../lib/content/types"; +import { useRouter } from "next/router"; +import Rainbow from "../lib/colors"; + +const Home: NextPage<{ buildTime: string }> = ({ buildTime }) => { + const inputRef = useRef(null); + const { modalFunctions } = useModalFunctions(); + const { setContents } = useCommands(); + const router = useRouter(); + + const updateProjects = useCallback(async () => { + try { + const res = await fetch("/content/list.json"); + const projects: ContentList = await res.json(); + projects.sort((a, b) => { + return a.name.localeCompare(b.name); + }); + setContents(projects); + } catch {} + }, [setContents]); + + const focusInput = () => { if (inputRef.current) inputRef.current.focus(); }; + + const hideModalOnEsc = (e: React.KeyboardEvent) => { + if (e.key === "Escape") { + e.preventDefault(); + if(modalFunctions.setVisible) modalFunctions.setVisible(false); + } + }; + + useEffect(() => { + updateProjects().then(() => { if (modalFunctions.onContentReady) modalFunctions.onContentReady(); }); + const interval = setInterval(updateProjects, 30 * 1000); + return () => clearInterval(interval); + }, [updateProjects, modalFunctions]); + + useEffect(() => { + if ("rainbow" in router.query) { + Rainbow.start(); + } + }, [router]); + + return (
+ + c0ntroller.de + + +
+
+   + Source + | + Bug? + | + + | + + | + + | + + | + + + + + C0ntroller_Z#3883 + + + +   +
+ +
+
); +}; + +export const getStaticProps: GetStaticProps = async (_context) => { + const date = new Date(); + const padD = (n: number) => n.toString().padStart(2, "0"); + const buildTime = `${date.getUTCFullYear()}${padD(date.getUTCDate())}${padD(date.getUTCMonth() + 1)}-${padD(date.getUTCHours())}${padD(date.getUTCMinutes())}`; + return { + props: { + buildTime + } + }; +}; + +export default Home; diff --git a/styles/Blog/Card.module.scss b/styles/Blog/Card.module.scss new file mode 100644 index 0000000..b110966 --- /dev/null +++ b/styles/Blog/Card.module.scss @@ -0,0 +1,5 @@ +.card { + border: 1px solid gray; + border-radius: 5px; + max-width: 200px; +} \ No newline at end of file