2022-06-14 19:07:21 +02:00
import type { NextPage , GetStaticProps } from "next" ;
2021-12-17 18:55:00 +01:00
import Head from "next/head" ;
2021-12-17 20:55:14 +01:00
import { GithubLogo , InstagramLogo , DiscordLogo , GameController } from "phosphor-react" ;
2022-06-12 14:22:15 +02:00
import { useEffect , useRef , useCallback } from "react" ;
2022-06-21 18:44:20 +02:00
import { useCommands } from "../lib/commands/ContextProvider" ;
2022-06-12 14:22:15 +02:00
import { useModalFunctions } from "../components/contexts/ModalFunctions" ;
2022-01-14 14:27:19 +01:00
import ProjectModal from "../components/ProjectModal" ;
2021-12-15 18:56:32 +01:00
import REPL from "../components/REPL" ;
2021-12-16 01:03:54 +01:00
import styles from "../styles/Home.module.css" ;
2021-11-30 23:48:54 +01:00
2022-06-14 19:07:21 +02:00
const Home : NextPage < { buildTime : string } > = ( { buildTime } ) = > {
2022-02-05 00:47:36 +01:00
const inputRef = useRef < HTMLInputElement > ( null ) ;
2022-06-12 14:22:15 +02:00
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 ] ) ;
2022-01-14 14:27:19 +01:00
const focusInput = ( ) = > { if ( inputRef . current ) inputRef . current . focus ( ) ; } ;
const hideModalOnEsc = ( e : React.KeyboardEvent ) = > {
if ( e . key === "Escape" ) {
e . preventDefault ( ) ;
2022-06-12 14:22:15 +02:00
if ( modalFunctions . setVisible ) modalFunctions . setVisible ( false ) ;
2022-01-14 14:27:19 +01:00
}
2022-01-14 17:17:55 +01:00
} ;
2022-01-14 14:27:19 +01:00
2022-06-12 14:22:15 +02:00
useEffect ( ( ) = > {
2022-06-14 23:18:00 +02:00
updateProjects ( ) . then ( ( ) = > { if ( modalFunctions . onContentReady ) modalFunctions . onContentReady ( ) ; } ) ;
2022-06-12 14:22:15 +02:00
const interval = setInterval ( updateProjects , 30 * 1000 ) ;
return ( ) = > clearInterval ( interval ) ;
2022-06-14 23:18:00 +02:00
} , [ updateProjects , modalFunctions ] ) ;
2022-06-12 14:22:15 +02:00
2022-02-05 00:11:59 +01:00
return ( < main onKeyDown = { hideModalOnEsc } tabIndex = { - 1 } >
2022-01-14 14:27:19 +01:00
< Head >
< title > c0ntroller . de < / title >
< / Head >
2022-06-12 14:22:15 +02:00
< ProjectModal / >
2022-01-14 14:27:19 +01:00
< div className = { styles . container } >
< div className = { styles . header } >
< span className = { styles . spacer } onClick = { focusInput } > & nbsp ; < / span >
2022-03-14 11:06:13 +01:00
< a href = "https://github.com/C0ntroller/c0ntroller.de" target = "_blank" rel = "noreferrer" > Source < / a >
2022-01-14 14:27:19 +01:00
< span className = { styles . divider } > | < / span >
2022-03-14 11:06:13 +01:00
< a href = "https://github.com/C0ntroller/c0ntroller.de/issues/new" target = "_blank" rel = "noreferrer" > Bug ? < / a >
2022-01-14 14:27:19 +01:00
< span className = { styles . divider } > | < / span >
2022-07-29 14:29:41 +02:00
< a href = "https://github.com/C0ntroller" target = "_blank" rel = "noreferrer" > < GithubLogo color = "var(--repl-color)" className = { styles . iconLink } alt = "Link to GitHub (Icon)" / > < / a >
2022-01-14 14:27:19 +01:00
< span className = { styles . divider } > | < / span >
2022-07-29 14:29:41 +02:00
< a href = "https://www.instagram.com/c0ntroller/" target = "_blank" rel = "noreferrer" > < InstagramLogo color = "var(--repl-color)" className = { styles . iconLink } alt = "Link to Instagram (Icon)" / > < / a >
2022-01-14 14:27:19 +01:00
< span className = { styles . divider } > | < / span >
2022-07-29 14:29:41 +02:00
< a href = "https://steamcommunity.com/id/c0ntroller/" target = "_blank" rel = "noreferrer" > < GameController color = "var(--repl-color)" className = { styles . iconLink } alt = "Link to Steam (Icon)" / > < / a >
2022-01-14 14:27:19 +01:00
< span className = { styles . divider } > | < / span >
2022-03-14 11:06:13 +01:00
< a href = "https://discordapp.com/users/224208617820127233" target = "_blank" rel = "noreferrer" >
2022-01-14 14:27:19 +01:00
< span className = { styles . tooltip } style = { { cursor : "pointer" } } >
2022-07-29 14:29:41 +02:00
< DiscordLogo color = "var(--repl-color)" className = { styles . iconLink } alt = "Discord Logo with a link and small popup. My Username is C0ntroller_Z#3883." / >
2022-01-14 14:27:19 +01:00
< span className = { styles . tooltiptext } >
C0ntroller_Z # 3883
< / span >
< / span >
2022-03-14 10:57:06 +01:00
< / a > < span className = { styles . spacer } onClick = { focusInput } > & nbsp ; < / span >
2022-01-14 14:27:19 +01:00
< / div >
2022-06-14 19:07:21 +02:00
< REPL inputRef = { inputRef } buildTime = { buildTime } / >
2022-01-14 14:27:19 +01:00
< / div >
< / main > ) ;
2021-12-14 23:45:00 +01:00
} ;
2021-11-30 23:48:54 +01:00
2022-06-14 19:07:21 +02:00
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
}
} ;
} ;
2021-12-14 23:45:00 +01:00
export default Home ;
