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

We code better now

Browse Source
This commit is contained in:
Daniel Kluge
2022-06-12 14:22:15 +02:00
parent 929519225a
commit 0a0020b5c0
12 changed files with 230 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pages/_app.tsx
View File

@ -2,11 +2,13 @@ import type { AppProps } from "next/app";
import Head from "next/head";
import "../styles/globals.css";
import "../styles/customAsciidoc.scss";
import { CommandsProvider } from "../components/contexts/CommandInterface";
import { ModalFunctionProvider } from "../components/contexts/ModalFunctions";
function MyApp({ Component, pageProps }: AppProps) {
return <>
<Head>
<meta charSet="utf-8"/>
<meta charSet="utf-8" />
<meta name="description" content="This is the homepage of C0ntroller." />
<meta name="keyword" content="private, homepage, cli, hacker, terminal, javascript, js, nextjs, react, responsive" />
<meta name="author" content="C0ntroller" />
@ -22,8 +24,8 @@ function MyApp({ Component, pageProps }: AppProps) {
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@ -32,7 +34,11 @@ function MyApp({ Component, pageProps }: AppProps) {
<meta name="msapplication-TileImage" content="/mstile-310x310.png" />
<meta name="theme-color" content="#444444" />
</Head>
<Component {...pageProps} />
<CommandsProvider>
<ModalFunctionProvider>
<Component {...pageProps} />
</ModalFunctionProvider>
</CommandsProvider>
</>;
}

31
pages/index.tsx
View File

@ -1,32 +1,47 @@
import type { NextPage } from "next";
import Head from "next/head";
import { GithubLogo, InstagramLogo, DiscordLogo, GameController } from "phosphor-react";
import { useRef, useState } from "react";
import { useEffect, useRef,useCallback } from "react";
import { useCommands } from "../components/contexts/CommandInterface";
import { useModalFunctions } from "../components/contexts/ModalFunctions";
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<Project|Diary|undefined>(undefined);
const [modalProjectType, setModalProjectType] = useState<"project"|"diary">("project");
const { modalFunctions } = useModalFunctions();
const { setContents } = useCommands();
const updateProjects = useCallback(async () => {
try {
const res = await fetch("/content/list.json");
const projects = await res.json();
setContents(projects);
} catch {}
}, [setContents]);
updateProjects();
const focusInput = () => { if (inputRef.current) inputRef.current.focus(); };
const hideModalOnEsc = (e: React.KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
setModalVisible(false);
if(modalFunctions.setVisible) modalFunctions.setVisible(false);
}
};
useEffect(() => {
const interval = setInterval(updateProjects, 30 * 1000);
return () => clearInterval(interval);
}, [updateProjects]);
return (<main onKeyDown={hideModalOnEsc} tabIndex={-1}>
<Head>
<title>c0ntroller.de</title>
</Head>
<ProjectModal visible={modalVisible} project={modalProject} projectType={modalProjectType} setVisible={setModalVisible}/>
<ProjectModal />
<div className={styles.container}>
<div className={styles.header}>
<span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
@ -49,7 +64,7 @@ const Home: NextPage = () => {
</span>
</a><span className={styles.spacer} onClick={focusInput}>&nbsp;</span>
</div>
<REPL inputRef={inputRef} modalManipulation={{setModalVisible, setModalProject, setModalProjectType}}/>
<REPL inputRef={inputRef} />
</div>
</main>);
};