From d8363d131ad18bf54e47ed15ca7a9223aaec19d0 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Fri, 6 May 2022 22:49:46 -0400 Subject: [PATCH] =?UTF-8?q?adding=20more=20dumb=20easter=20eggs=20?= =?UTF-8?q?=F0=9F=90=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Figure/Figure.tsx | 4 +- components/Icons/index.ts | 3 +- components/Image/Image.tsx | 8 +- components/Link/Link.tsx | 8 +- components/Marquee/Marquee.tsx | 45 +++++ components/Marquee/index.ts | 2 + components/ThemeScript/ThemeScript.tsx | 3 +- components/VNC/VNC.tsx | 2 +- lib/styles/fonts/ComicNeue.ts | 19 ++ lib/styles/stitches.config.ts | 2 +- package.json | 12 +- pages/cli.tsx | 4 +- pages/index.tsx | 4 +- pages/previously.tsx | 151 ++++++++------ pages/privacy.tsx | 6 +- pages/uses.tsx | 8 +- pages/y2k.tsx | 18 +- yarn.lock | 263 ++++++++++++++----------- 18 files changed, 350 insertions(+), 212 deletions(-) create mode 100644 components/Marquee/Marquee.tsx create mode 100644 components/Marquee/index.ts diff --git a/components/Figure/Figure.tsx b/components/Figure/Figure.tsx index c903ddc8..d89081fa 100644 --- a/components/Figure/Figure.tsx +++ b/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 & +export type FigureProps = Omit & PropsWithChildren<{ alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing }>; diff --git a/components/Icons/index.ts b/components/Icons/index.ts index abcdf94e..5ca0fe5e 100644 --- a/components/Icons/index.ts +++ b/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"; diff --git a/components/Image/Image.tsx b/components/Image/Image.tsx index 8e45051a..d16ac67c 100644 --- a/components/Image/Image.tsx +++ b/components/Image/Image.tsx @@ -16,12 +16,12 @@ const RoundedImage = styled(NextImage, { borderRadius: "$rounded", }); -export type CustomImageProps = NextImageProps & +export type ImageProps = NextImageProps & ComponentProps & { 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 = { width: typeof width === "string" ? Number.parseInt(width.replace("px", "")) : width, @@ -73,4 +73,4 @@ const CustomImage = ({ ); }; -export default CustomImage; +export default Image; diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx index f6799970..9a6a24a3 100644 --- a/components/Link/Link.tsx +++ b/components/Link/Link.tsx @@ -34,13 +34,13 @@ const FancyLink = styled("a", { }, }); -export type CustomLinkProps = Omit, "href"> & +export type LinkProps = Omit, "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; diff --git a/components/Marquee/Marquee.tsx b/components/Marquee/Marquee.tsx new file mode 100644 index 00000000..2ed5a0a9 --- /dev/null +++ b/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; + +const Marquee = ({ children, ...rest }: MarqueeProps) => ( + + {children} + +); + +export default Marquee; diff --git a/components/Marquee/index.ts b/components/Marquee/index.ts new file mode 100644 index 00000000..52817664 --- /dev/null +++ b/components/Marquee/index.ts @@ -0,0 +1,2 @@ +export * from "./Marquee"; +export { default } from "./Marquee"; diff --git a/components/ThemeScript/ThemeScript.tsx b/components/ThemeScript/ThemeScript.tsx index a38c6236..67f9c6c3 100644 --- a/components/ThemeScript/ThemeScript.tsx +++ b/components/ThemeScript/ThemeScript.tsx @@ -32,7 +32,8 @@ const ThemeScript = () => { return result.code; }, []); - // the script tag injected manually into `` in _document.tsx. + // the script tag injected manually into `` 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 `` class even more urgently. // TODO: using next/script *might* be possible after https://github.com/vercel/next.js/pull/36364 is merged. diff --git a/components/VNC/VNC.tsx b/components/VNC/VNC.tsx index e3f27540..e972d3ad 100644 --- a/components/VNC/VNC.tsx +++ b/components/VNC/VNC.tsx @@ -16,7 +16,7 @@ const Display = styled( background: "none !important", "& canvas": { - cursor: "default !important", + cursor: "inherit !important", }, }, }, diff --git a/lib/styles/fonts/ComicNeue.ts b/lib/styles/fonts/ComicNeue.ts index 61024916..4c18b7aa 100644 --- a/lib/styles/fonts/ComicNeue.ts +++ b/lib/styles/fonts/ComicNeue.ts @@ -3,10 +3,15 @@ import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2"; import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff"; import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2"; +import comicNeueLatin400ItalicWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-italic.woff"; +import comicNeueLatin400ItalicWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-italic.woff2"; +import comicNeueLatin700ItalicWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-italic.woff"; +import comicNeueLatin700ItalicWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-italic.woff2"; export const name = { regular: "Comic Neue", }; +export const preloadUrls = []; export const family = [ { fontFamily: name.regular, @@ -22,4 +27,18 @@ export const family = [ fontWeight: 700, src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`, }, + { + fontFamily: name.regular, + fontStyle: "italic", + fontDisplay: "swap", + fontWeight: 400, + src: `url(${comicNeueLatin400ItalicWoff2}) format("woff2"), url(${comicNeueLatin400ItalicWoff}) format("woff")`, + }, + { + fontFamily: name.regular, + fontStyle: "italic", + fontDisplay: "swap", + fontWeight: 700, + src: `url(${comicNeueLatin700ItalicWoff2}) format("woff2"), url(${comicNeueLatin700ItalicWoff}) format("woff")`, + }, ]; diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts index 50d074d8..89fa09ab 100644 --- a/lib/styles/stitches.config.ts +++ b/lib/styles/stitches.config.ts @@ -161,4 +161,4 @@ export const globalStyles = globalCss( ); // re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx -export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls]; +export const preloadUrls = [...Inter.preloadUrls, ...RobotoMono.preloadUrls, ...ComicNeue.preloadUrls]; diff --git a/package.json b/package.json index f4185a6b..2aad55a6 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,14 @@ "@hcaptcha/react-hcaptcha": "^1.3.0", "@novnc/novnc": "github:novnc/noVNC#7730814b8d43d24db0894b641317be4b9f683da4", "@octokit/graphql": "^4.8.0", - "@primer/octicons": "^17.0.0", - "@react-spring/web": "^9.4.4", + "@primer/octicons": "^17.1.0", + "@react-spring/web": "^9.4.5", "@sentry/node": "^6.19.7", "@sentry/tracing": "^6.19.7", "@stitches/react": "^1.2.8", "copy-to-clipboard": "^3.3.1", - "dayjs": "^1.11.1", + "dayjs": "^1.11.2", + "dedent": "^0.7.0", "fathom-client": "^3.4.1", "faunadb": "^4.5.4", "feather-icons": "^4.29.0", @@ -78,9 +79,10 @@ "@jakejarvis/eslint-config": "*", "@next/bundle-analyzer": "12.1.6", "@svgr/webpack": "^6.2.1", + "@types/dedent": "^0.7.0", "@types/node": "*", "@types/prop-types": "^15.7.5", - "@types/react": "^18.0.8", + "@types/react": "^18.0.9", "@types/react-dom": "^18.0.3", "@types/react-is": "^17.0.3", "@types/remove-markdown": "^0.3.1", @@ -89,7 +91,7 @@ "@typescript-eslint/eslint-plugin": "^5.22.0", "@typescript-eslint/parser": "^5.22.0", "cross-env": "^7.0.3", - "eslint": "~8.14.0", + "eslint": "~8.15.0", "eslint-config-next": "12.1.6", "eslint-config-prettier": "~8.5.0", "eslint-plugin-mdx": "~1.17.0", diff --git a/pages/cli.tsx b/pages/cli.tsx index 0799f8c0..e54750fa 100644 --- 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 = () => ( Terminal Screenshot

Usage

- npx @jakejarvis/cli + npx @jakejarvis/cli

Inspired by

diff --git a/pages/index.tsx b/pages/index.tsx index 9c15b789..a47d59eb 100644 --- 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; }) => { diff --git a/pages/previously.tsx b/pages/previously.tsx index c074db4c..39f2ca63 100644 --- 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 = () => ( <> {/* a complete sh*tshow of overrides, mainly to compensate for font change */}