adding more dumb easter eggs 🐣

2025-10-28 00:35:48 -04:00 · 2022-05-06 22:49:46 -04:00
parent d67428b043
commit d8363d131a
18 changed files with 350 additions and 212 deletions
--- a/pages/cli.tsx
+++ b/pages/cli.tsx
@@ -4,7 +4,7 @@ import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import Image from "../components/Image";
 import Blockquote from "../components/Blockquote";
-import Code from "../components/CodeHybrid";
+import CodeBlock from "../components/CodeBlock";
 import { H2 } from "../components/Heading";
 import { UnorderedList, ListItem } from "../components/List";

@@ -33,7 +33,7 @@ const CLI = () => (
      <Image src={cliImg} href="https://www.npmjs.com/package/@jakejarvis/cli" alt="Terminal Screenshot" priority />

      <H2 id="usage">Usage</H2>
-      <Code forceBlock>npx @jakejarvis/cli</Code>
+      <CodeBlock>npx @jakejarvis/cli</CodeBlock>

      <H2 id="inspired-by">Inspired by</H2>
      <UnorderedList>
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import Link, { CustomLinkProps } from "../components/Link";
+import Link, { LinkProps } from "../components/Link";
 import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";

 const ColorfulLink = ({
@@ -6,7 +6,7 @@ const ColorfulLink = ({
  darkColor,
  css,
  ...rest
-}: CustomLinkProps & {
+}: LinkProps & {
  lightColor: string;
  darkColor: string;
 }) => {
--- a/pages/previously.tsx
+++ b/pages/previously.tsx
@@ -2,13 +2,17 @@

 import Head from "next/head";
 import { NextSeo } from "next-seo";
+import dedent from "dedent";
 import Content from "../components/Content";
 import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import Figure from "../components/Figure";
 import IFrame from "../components/IFrame";
-import Code from "../components/CodeInline";
+import CodeInline from "../components/CodeInline";
 import HorizontalRule from "../components/HorizontalRule";
+import Marquee from "../components/Marquee";
+import { Windows95Logo } from "../components/Icons";
+import { styled } from "../lib/styles/stitches.config";

 import img_wayback from "../public/static/images/previously/wayback.png";
 import img_2002_02 from "../public/static/images/previously/2002_02.png";
@@ -25,65 +29,76 @@ import img_2012_09 from "../public/static/images/previously/2012_09.png";
 import img_2018_04 from "../public/static/images/previously/2018_04.png";
 import img_2020_03 from "../public/static/images/previously/2020_03.png";

+const WindowsIcon = styled(Windows95Logo, {
+  width: "1.2em",
+  height: "1.2em",
+  verticalAlign: "-0.15em",
+  marginRight: "0.15em",
+  fill: "currentColor",
+});
+
 const Previously = () => (
  <>
    <Head>
      {/* a complete sh*tshow of overrides, mainly to compensate for font change */}
      <style
        dangerouslySetInnerHTML={{
-          __html: `
-body {
-  font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif !important;
-  font-weight: 600 !important;
-}
-/* left header */
-header nav > a:first-of-type span:last-of-type {
-  font-size: 1.4em !important;
-  font-weight: 700 !important;
-}
-/* right header */
-header nav ul a span {
-  font-size: 1.1em !important;
-  font-weight: 700 !important;
-  line-height: 1.1;
-}
-/* content */
-main > div > div {
-  font-size: 1.1em !important;
-  text-align: center;
-}
-main > div > div p {
-  font-size: 0.95em;
-}
-main > div > div strong {
-  font-weight: 900;
-}
-main > div > div code {
-  font-size: 0.85em !important;
-  font-weight: 400;
-}
-main > div > div figure:last-of-type {
-  margin-bottom: 0;
-}
-/* footer */
-footer > div {
-  font-size: 0.95em !important;
-}
-/* components */
-figcaption,
-.iframe_caption {
-  margin-top: 0.2em;
-  font-size: 0.9em;
-  line-height: 1.5;
-  color: var(--colors-medium);
-  text-align: center;
-}
-hr {
-  margin: 1em auto !important;
-}
-iframe {
-  margin-bottom: 0.6em !important;
-}`,
+          __html: dedent`
+            body {
+              font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", sans-serif !important;
+              font-weight: 600 !important;
+            }
+            em {
+              font-style: revert !important;
+            }
+            /* left header */
+            header nav > a:first-of-type span:last-of-type {
+              font-size: 1.4em !important;
+              font-weight: 700 !important;
+            }
+            /* right header */
+            header nav ul a span {
+              font-size: 1.1em !important;
+              font-weight: 700 !important;
+              line-height: 1.1;
+            }
+            /* content */
+            main > div > div {
+              font-size: 1.1em !important;
+              text-align: center;
+            }
+            main > div > div p {
+              font-size: 0.95em;
+            }
+            main > div > div strong {
+              font-weight: 900;
+            }
+            main > div > div code {
+              font-size: 0.85em !important;
+              font-weight: 400;
+            }
+            main > div > div figure:last-of-type {
+              margin-bottom: 0;
+            }
+            /* footer */
+            footer > div {
+              font-size: 0.95em !important;
+            }
+            /* components */
+            figcaption,
+            .iframe_caption {
+              margin-top: 0.2em;
+              font-size: 0.9em;
+              line-height: 1.5;
+              color: var(--colors-medium);
+              text-align: center;
+            }
+            hr {
+              margin: 1em auto !important;
+            }
+            iframe {
+              margin-bottom: 0.6em !important;
+            }`,
        }}
      />
    </Head>
@@ -111,16 +126,28 @@ iframe {

      <HorizontalRule />

-      <p>
-        🚨 <strong>Trigger warning:</strong> marquees, Comic Sans, popups,{" "}
-        <Code>
+      <Marquee>
+        🚨 <strong>Trigger warning:</strong> excessive marquees, animated GIFs, Comic Sans, popups,{" "}
+        <CodeInline>
          color: <span style={{ color: "#32cd32" }}>limegreen</span>
-        </Code>
-        ...{" "}
-        <Link href="/y2k/" prefetch={false}>
-          Click for the{" "}
+        </CodeInline>{" "}
+        ahead...
+      </Marquee>
+
+      <p style={{ marginTop: 0 }}>
+        <Link
+          href="/y2k/"
+          prefetch={false}
+          css={{
+            "&:hover": {
+              // classic windows 9x hand cursor easter egg
+              cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto`,
+            },
+          }}
+        >
+          <WindowsIcon /> Click here for the{" "}
          <strong>
-            <em>FULL</em>
+            <em>full</em>
          </strong>{" "}
          experience anyway.
        </Link>
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -5,7 +5,7 @@ import Link from "../components/Link";
 import Image from "../components/Image";
 import IFrame from "../components/IFrame";
 import Blockquote from "../components/Blockquote";
-import Code from "../components/CodeInline";
+import CodeInline from "../components/CodeInline";
 import { H2 } from "../components/Heading";
 import { UnorderedList, ListItem } from "../components/List";
 import { fathomSiteId, siteDomain } from "../lib/config";
@@ -54,8 +54,8 @@ const Privacy = () => (

      <p>
        A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
-        <Code>hits = hits + 1</Code>) in a <Link href="https://fauna.com/">Fauna</Link> database. Individual views and
-        identifying (or non-identifying) details are <strong>never stored or logged</strong>.
+        <CodeInline>hits = hits + 1</CodeInline>) in a <Link href="https://fauna.com/">Fauna</Link> database. Individual
+        views and identifying (or non-identifying) details are <strong>never stored or logged</strong>.
      </p>

      <p>
--- a/pages/uses.tsx
+++ b/pages/uses.tsx
@@ -3,7 +3,7 @@ import Content from "../components/Content";
 import PageTitle from "../components/PageTitle";
 import Link from "../components/Link";
 import Image from "../components/Image";
-import Code from "../components/CodeInline";
+import CodeInline from "../components/CodeInline";
 import { H2 } from "../components/Heading";
 import { UnorderedList, ListItem } from "../components/List";

@@ -138,7 +138,7 @@ const Uses = () => (
              <Link href="https://github.com/jakejarvis/dotfiles/blob/main/zsh/aliases.zsh">ZSH aliases</Link> and{" "}
              <Link href="https://github.com/jakejarvis/dotfiles/blob/main/zsh/functions.zsh">functions</Link> are in{" "}
              <Link href="https://github.com/jakejarvis/dotfiles">
-                my <Code>.dotfiles</Code> repository.
+                my <CodeInline>.dotfiles</CodeInline> repository.
              </Link>
            </ListItem>
            <ListItem>
@@ -258,7 +258,7 @@ const Uses = () => (
          <UnorderedList>
            <ListItem>
              <Link href="https://github.com/jakejarvis/dotfiles/blob/main/Brewfile">
-                View my messy <Code>Brewfile</Code> dump
+                View my messy <CodeInline>Brewfile</CodeInline> dump
              </Link>{" "}
              with all of my installed packages.
            </ListItem>
@@ -378,7 +378,7 @@ const Uses = () => (
          <UnorderedList>
            <ListItem>
              <Link href="https://github.com/jakejarvis/dotfiles/blob/main/firefox/user.js">
-                My default <Code>user.js</Code> settings.
+                My default <CodeInline>user.js</CodeInline> settings.
              </Link>
            </ListItem>
            <ListItem>
--- a/pages/y2k.tsx
+++ b/pages/y2k.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import dynamic from "next/dynamic";
+import Head from "next/head";
 import { NextSeo } from "next-seo";
 import Layout from "../components/Layout";
 import Terminal from "../components/Terminal";
@@ -61,6 +62,15 @@ const Y2K = () => {

  return (
    <>
+      <Head>
+        {/* TODO: favicon doesn't change back to normal when navigating away from page */}
+        <link
+          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAA2tJREFUOE+Nk21sU2Ucxc/T3Xu73vXedl3fNtuCNm4oW9jY1M2hRAIBZCSGxMWFOWIMBDRGzNzQ+PJhvmCcgkSTLZioifIiBiQBNWo6Gdlw4AwMGFAyR8fWbuu6vt12W297+5hbM42RDz4f/yfn5OSX8xD8z+d+eMhqLi97mhJtFaGpi6NMaNNMZuI7cid/SfUgH7gvU6/h2HpVL8q3PcpruVXB6fDZ+cPL1uY8z5x0grUd/0+AfvuRtxLh2l3VrmyRU8NjPGKCssKHW2YLYjNKFCO+HkSVbnxV+zN2DLT+K6B45cD3ky524wubgc1uCd29bngVBybKIohpCpHvBtIzgHI+CPinKtQifweUGD2nAtWZhkP7gljPEzz7TQP6x1OwT09KU7ZiIdJgxbqVAHigbxBIfB26jIOWFbmAUtHz4E1m7Hzv5SAegRmV7Y3w6uVgKuN9Ap/V/6rqf2ziTrnb6q2vVBEMKcCBjiDQYSNEBRa54e8/+sW3lesfMuOx3e/ippbFrPBLJw6uaf8H8t73jW1b2rbtLYU+D3jn85iMnhsNuQa7nmuiu5sm8eqhLvTGlsEuyogzUlzVqFUish00NMnSrFBo0FfyICaAhoHEyetdpKPjqSqRuTDgDb/NHfM3QTacg4vWQJwhYEQWjD2MyF0J3DIJiE1pgWAS0NK/il3z7SftLzVdHA9ZK68Y9iMQPZG7lxi3wNv3w7H0pbFLesGgT0ixBJ+vm9awnJsxFeuUFM3maYkmyoydJc83r6JX8QYGsBqOK+8hUlEO2NZAo+DL0EemlkUG6hILXfJh6YHlnHrL+tP5o3OnD5CWxidj4/d0i2d6esBdGMHSxqUImFxYwtQhpBvxTBUc6dP7S/OWJGtfp0YbiFmHVBHgG/UgE0+4VIh0+ZsU/t+2e+Qzt2sEZ6vBUs1j1smBS9+dXogvsGbGBouWg5LDCoRlH4YLjm/Apy//SHZue234qLXl/mhnGbGWl9uUq/EPRefjq2ddGx20wgy9yGCeGlGSdCJPljCh6f8pQkf3qebcEnds3dl6Lrv1g+uG283FQ5+ckCVJjPKWYfHanC5pWKto3C6WKzAm045sVwL+vkXjIhviqKvTLcw275m3M3uS94bCmHZLwqDltM78YicnCPGs/HFuK4Hfa+bu9HP/BEU2W1FE/2aJAAAAAElFTkSuQmCC"
+          rel="icon"
+          type="image/png"
+        />
+      </Head>
+
      <NextSeo
        title="Y2K Sandbox: Powered by Windows Me™ 💾"
        description="My first website on a Windows Me-powered time machine. You've been warned."
@@ -79,7 +89,13 @@ const Y2K = () => {
 // disable layout's default styles so the wallpaper component can go edge-to-edge:
 Y2K.getLayout = (page: ReactElement) => {
  return (
-    <Layout container={false}>
+    <Layout
+      container={false}
+      css={{
+        // classic windows 9x cursor easter egg
+        cursor: `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto`,
+      }}
+    >
      <Wrapper>{page}</Wrapper>
    </Layout>
  );