adding more dumb easter eggs 🐣

components/Figure/Figure.tsx

@@ -1,5 +1,5 @@
 import innerText from "react-innertext";
-import Image, { CustomImageProps } from "../Image";
+import Image, { ImageProps } from "../Image";
 import { styled } from "../../lib/styles/stitches.config";
 import type { PropsWithChildren } from "react";
 
@@ -20,7 +20,7 @@ const Caption = styled("figcaption", {
   },
 });
 
-export type FigureProps = Omit<CustomImageProps, "alt"> &
+export type FigureProps = Omit<ImageProps, "alt"> &
   PropsWithChildren<{
     alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
   }>;

components/Icons/index.ts

@@ -24,5 +24,6 @@ export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg";
 export { default as XOcticon } from "@primer/octicons/build/svg/x-16.svg";
 
 // simple icons: https://simpleicons.org/
-export { default as NextjsLogo } from "simple-icons/icons/nextdotjs.svg";
 export { default as FathomLogo } from "simple-icons/icons/fathom.svg";
+export { default as NextjsLogo } from "simple-icons/icons/nextdotjs.svg";
+export { default as Windows95Logo } from "simple-icons/icons/windows95.svg";

components/Image/Image.tsx

@@ -16,12 +16,12 @@ const RoundedImage = styled(NextImage, {
   borderRadius: "$rounded",
 });
 
-export type CustomImageProps = NextImageProps &
+export type ImageProps = NextImageProps &
   ComponentProps<typeof RoundedImage> & {
     href?: string; // optionally wrap image in a link
   };
 
-const CustomImage = ({
+const Image = ({
   src,
   width,
   height,
@@ -33,7 +33,7 @@ const CustomImage = ({
   href,
   className,
   ...rest
-}: CustomImageProps) => {
+}: ImageProps) => {
   // passed directly into next/image: https://nextjs.org/docs/api-reference/next/image
   const imageProps: Partial<NextImageProps> = {
     width: typeof width === "string" ? Number.parseInt(width.replace("px", "")) : width,
@@ -73,4 +73,4 @@ const CustomImage = ({
   );
 };
 
-export default CustomImage;
+export default Image;

components/Link/Link.tsx

@@ -34,13 +34,13 @@ const FancyLink = styled("a", {
   },
 });
 
-export type CustomLinkProps = Omit<ComponentProps<typeof FancyLink>, "href"> &
+export type LinkProps = Omit<ComponentProps<typeof FancyLink>, "href"> &
   NextLinkProps & {
     underline?: boolean;
     forceNewWindow?: boolean;
   };
 
-const CustomLink = ({
+const Link = ({
   href,
   prefetch = false,
   passHref = true,
@@ -49,7 +49,7 @@ const CustomLink = ({
   underline = true,
   forceNewWindow,
   ...rest
-}: CustomLinkProps) => {
+}: LinkProps) => {
   // this component auto-detects whether or not we should use a normal HTML anchor externally or next/link internally,
   // can be overridden with `forceNewWindow={true}`.
   const isExternal = isAbsoluteUrl(href.toString());
@@ -73,4 +73,4 @@ const CustomLink = ({
   }
 };
 
-export default CustomLink;
+export default Link;

components/Marquee/Marquee.tsx

@@ -0,0 +1,45 @@
+import { styled, keyframes } from "../../lib/styles/stitches.config";
+import type { ComponentProps } from "react";
+
+// warning: super duper hacky CSS, probably don't use this.
+// inspired by https://codepen.io/Knovour/pen/boJNPN
+
+const Wrapper = styled("div", {
+  position: "relative",
+  overflowX: "hidden",
+  width: "100%",
+  height: "2em",
+});
+
+const Track = styled("div", {
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  whiteSpace: "nowrap",
+  textAlign: "left",
+
+  "@media (prefers-reduced-motion: no-preference)": {
+    animation: `${keyframes({
+      from: { transform: "translateX(100%)" },
+      to: { transform: "translateX(-100%)" },
+    })} 16s linear infinite`,
+    willChange: "transform",
+
+    "@medium": {
+      animation: `${keyframes({
+        from: { transform: "translateX(100%)" },
+        to: { transform: "translateX(-180%)" },
+      })} 20s linear infinite`,
+    },
+  },
+});
+
+export type MarqueeProps = ComponentProps<typeof Wrapper>;
+
+const Marquee = ({ children, ...rest }: MarqueeProps) => (
+  <Wrapper {...rest}>
+    <Track>{children}</Track>
+  </Wrapper>
+);
+
+export default Marquee;

components/Marquee/index.ts

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

components/ThemeScript/ThemeScript.tsx

@@ -32,7 +32,8 @@ const ThemeScript = () => {
     return result.code;
   }, []);
 
-  // the script tag injected manually into `<head>` in _document.tsx.
+  // the script tag injected manually into `<head>` in _document.tsx to prevent FARTing:
+  // https://css-tricks.com/flash-of-inaccurate-color-theme-fart/
   // even though it's the proper method, using next/script with `strategy="beforeInteractive"` still causes flash of
   // white on load. injecting a normal script tag lets us prioritize setting the `<html>` class even more urgently.
   // TODO: using next/script *might* be possible after https://github.com/vercel/next.js/pull/36364 is merged.

components/VNC/VNC.tsx

@@ -16,7 +16,7 @@ const Display = styled(
       background: "none !important",
 
       "& canvas": {
-        cursor: "default !important",
+        cursor: "inherit !important",
       },
     },
   },