jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-28 14:45:52 -04:00
Code Issues Activity

re-add custom getLayout option removed in d50ae0f85a

Browse Source
This commit is contained in:
Jake Jarvis
2022-05-01 11:15:25 -04:00
parent d718555001
commit d8d7d7d775
5 changed files with 140 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
pages/y2k.tsx
View File

@@ -2,8 +2,10 @@ import { useEffect, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import dynamic from "next/dynamic";
import { NextSeo } from "next-seo";
import Layout from "../components/Layout";
import Terminal from "../components/Terminal";
import { styled } from "../lib/styles/stitches.config";
import type { ReactElement, ComponentProps } from "react";
// obviously, an interactive VNC display will not work even a little bit server-side
const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
@@ -11,10 +13,10 @@ const VNC = dynamic(() => import("../components/VNC"), { ssr: false });
// https://github.com/jakejarvis/y2k
const SOCKET_PROXY = "wss://y2k.jrvs.io";
const Wallpaper = styled("div", {
const Wallpaper = styled("main", {
display: "flex",
width: "100%",
minHeight: "450px",
minHeight: "500px",
padding: "1.5em 0",
justifyContent: "center",
alignItems: "center",
@@ -28,7 +30,7 @@ const DOS = styled(Terminal, {
maxWidth: "700px",
});
const Y2K = () => {
const Wrapper = ({ style, ...rest }: ComponentProps<typeof Wrapper>) => {
const [wallpaperUrl, setWallpaperUrl] = useState("");
// set a random retro Windows ME desktop tile for the entire content area
@@ -36,6 +38,10 @@ const Y2K = () => {
setWallpaperUrl(`/static/images/y2k/tiles/tile_${Math.floor(20 * Math.random())}.png`);
}, []);
return <Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "", ...style }} {...rest} />;
};
const Y2K = () => {
// print a fancy console message (in browser only) just for funsies
useEffect(() => {
console.log(
@@ -63,13 +69,20 @@ const Y2K = () => {
}}
/>
<Wallpaper style={{ backgroundImage: wallpaperUrl ? `url(${wallpaperUrl})` : "" }}>
<ErrorBoundary fallback={<DOS>Oh no, it looks like something's gone VERY wrong. Sorry about that!</DOS>}>
<VNC server={SOCKET_PROXY} />
</ErrorBoundary>
</Wallpaper>
<ErrorBoundary fallback={<DOS>Oh no, it looks like something's gone VERY wrong. Sorry about that!</DOS>}>
<VNC server={SOCKET_PROXY} />
</ErrorBoundary>
</>
);
};
// disable layout's default styles so the wallpaper component can go edge-to-edge:
Y2K.getLayout = (page: ReactElement) => {
return (
<Layout container={false}>
<Wrapper>{page}</Wrapper>
</Layout>
);
};
export default Y2K;