jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-10 15:42:58 -05:00
Code Issues Activity

remove per-page getLayout option (maybe temporarily?)

Browse Source
This commit is contained in:
Jake Jarvis
2022-04-19 17:38:20 -04:00
parent d5690d2972
commit d50ae0f85a
10 changed files with 228 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Captcha/Captcha.tsx
View File

@@ -1,5 +1,4 @@
import { memo } from "react";
import Head from "next/head";
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { useHasMounted } from "../../hooks/use-has-mounted";
import { useTheme } from "../../hooks/use-theme";
@@ -26,25 +25,18 @@ const Captcha = ({ size = "normal", theme, className, ...rest }: CaptchaProps) =
const { resolvedTheme } = useTheme();
return (
<>
<Head>
<link rel="preconnect" href="https://js.hcaptcha.com" />
<link rel="preconnect" href="https://newassets.hcaptcha.com" />
</Head>
<div className={className}>
{hasMounted && (
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
{...rest}
/>
)}
</div>
</>
<div className={className}>
{hasMounted && (
<HCaptcha
sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY}
reCaptchaCompat={false}
tabIndex={0}
size={size}
theme={theme || (resolvedTheme === "dark" ? "dark" : "light")}
{...rest}
/>
)}
</div>
);
};

29
components/Header/Header.tsx
View File

@@ -11,6 +11,14 @@ const Wrapper = styled("header", {
borderBottom: "1px solid $kindaLight",
backgroundColor: "$backgroundHeader",
// stick to the top of the page when scrolling
position: "sticky",
top: 0,
// blurry glass-like background effect (except on firefox...?)
backdropFilter: "saturate(180%) blur(5px)",
zIndex: 9999,
// light-dark theme switch fading
transition: "background 0.25s ease, border 0.25s ease",
@@ -18,19 +26,6 @@ const Wrapper = styled("header", {
padding: "0.75em 1.25em",
height: "5.9em",
},
variants: {
sticky: {
true: {
position: "sticky",
top: 0,
// blurry glass-like background effect (except on firefox)
backdropFilter: "saturate(180%) blur(5px)",
zIndex: 9999,
},
},
},
});
const Nav = styled("nav", {
@@ -52,12 +47,10 @@ const ResponsiveMenu = styled(Menu, {
},
});
export type HeaderProps = ComponentProps<typeof Wrapper> & {
sticky?: boolean;
};
export type HeaderProps = ComponentProps<typeof Wrapper>;
const Header = ({ sticky, ...rest }: HeaderProps) => (
<Wrapper sticky={sticky} {...rest}>
const Header = ({ ...rest }: HeaderProps) => (
<Wrapper {...rest}>
<Nav>
<Selfie />
<ResponsiveMenu />

20
components/Layout/Layout.tsx
View File

@@ -28,12 +28,9 @@ const FlexedFooter = styled(Footer, {
flex: 1,
});
export type LayoutProps = ComponentProps<typeof Flex> & {
container?: boolean; // pass false to disable default `<main>` container styles with padding, etc.
stickyHeader?: boolean; // pass false to override default stickiness of header when scrolling
};
export type LayoutProps = ComponentProps<typeof Flex>;
const Layout = ({ container = true, stickyHeader = true, children, ...rest }: LayoutProps) => {
const Layout = ({ children, ...rest }: LayoutProps) => {
const { resolvedTheme } = useTheme();
return (
@@ -44,16 +41,11 @@ const Layout = ({ container = true, stickyHeader = true, children, ...rest }: La
</Head>
<Flex {...rest}>
<Header sticky={stickyHeader} />
<Header />
{/* passing `container={false}` to Layout allows 100% control of the content area on a per-page basis */}
{container ? (
<Default>
<Container>{children}</Container>
</Default>
) : (
<>{children}</>
)}
<Default>
<Container>{children}</Container>
</Default>
<FlexedFooter />
</Flex>

2
components/VNC/VNC.tsx
View File

@@ -73,7 +73,7 @@ const VNC = ({ server }: VNCProps) => {
// unassign event listener
router.events.off("routeChangeStart", disconnectVM);
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
}, [router.events]);
useEffect(() => {
if (loaded) {

43
components/Wallpaper/Wallpaper.tsx
View File

@@ -1,43 +0,0 @@
import { useEffect, useRef } from "react";
import { styled } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
import type { VariantProps } from "@stitches/react";
const Wrapper = styled("main", {
width: "100%",
minHeight: "400px",
variants: {
tile: {
true: {
backgroundRepeat: "repeat",
backgroundPosition: "center",
},
},
},
});
export type WallpaperProps = ComponentProps<typeof Wrapper> & {
image: string;
tile?: boolean;
};
const Wallpaper = ({ image, tile, ...rest }: WallpaperProps) => {
const bgRef = useRef<VariantProps<typeof Wrapper>>(null);
useEffect(() => {
// @ts-ignore
bgRef.current.style.backgroundImage = `url(${image})`;
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<Wrapper
tile={tile}
// @ts-ignore
ref={bgRef}
{...rest}
/>
);
};
export default Wallpaper;

2
components/Wallpaper/index.ts
View File

@@ -1,2 +0,0 @@
export * from "./Wallpaper";
export { default } from "./Wallpaper";