fix props with forwarded ref

components/Code/Code.tsx

@@ -4,7 +4,7 @@ const Code = styled("code", {
   fontSize: "0.925em",
   backgroundColor: theme.colors.codeBackground,
   border: `1px solid ${theme.colors.kindaLight}`,
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
   transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });
 

components/CodeBlock/CodeBlock.tsx

@@ -81,8 +81,8 @@ const CornerCopyButton = styled(CopyButton, {
   padding: "0.65em",
   backgroundColor: theme.colors.backgroundInner,
   border: `1px solid ${theme.colors.kindaLight}`,
-  borderTopRightRadius: theme.radii.rounded,
-  borderBottomLeftRadius: theme.radii.rounded,
+  borderTopRightRadius: theme.radii.corner,
+  borderBottomLeftRadius: theme.radii.corner,
   transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`,
 });
 

components/ContactForm/ContactForm.tsx

@@ -13,7 +13,7 @@ const InputStyles = css({
   padding: "0.8em",
   margin: "0.6em 0",
   border: `2px solid ${theme.colors.light}`,
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
   color: theme.colors.text,
   backgroundColor: theme.colors.superDuperLight,
   transition: `background ${theme.transitions.fade}`,
@@ -71,7 +71,7 @@ const SubmitButton = styled("button", {
   padding: "1em 1.25em",
   marginRight: "1.5em",
   border: 0,
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
   cursor: "pointer",
   userSelect: "none",
   fontWeight: 500,

components/CopyButton/CopyButton.tsx

@@ -3,7 +3,7 @@ import innerText from "react-innertext";
 import copy from "copy-to-clipboard";
 import { ClipboardOcticon, CheckOcticon } from "../Icons";
 import { styled, theme } from "../../lib/styles/stitches.config";
-import type { ReactNode, Ref, MouseEventHandler } from "react";
+import type { ReactNode, Ref, ComponentPropsWithoutRef, MouseEventHandler } from "react";
 
 const Button = styled("button", {
   lineHeight: 1,
@@ -32,13 +32,12 @@ const Icon = styled("svg", {
   fill: "currentColor",
 });
 
-export type CopyButtonProps = {
-  source: ReactNode;
+export type CopyButtonProps = ComponentPropsWithoutRef<typeof Button> & {
+  source: string | ReactNode;
   timeout?: number;
-  className?: string;
 };
 
-const CopyButton = ({ source, timeout = 2000, className }: CopyButtonProps, ref: Ref<HTMLButtonElement>) => {
+const CopyButton = ({ source, timeout = 2000, ...rest }: CopyButtonProps, ref: Ref<HTMLButtonElement>) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -70,13 +69,13 @@ const CopyButton = ({ source, timeout = 2000, className }: CopyButtonProps, ref:
 
   return (
     <Button
-      className={className}
+      ref={ref}
       title="Copy to clipboard"
       aria-label="Copy to clipboard"
       onClick={handleCopy}
-      disabled={!!copied}
+      disabled={copied}
       copied={copied}
-      ref={ref}
+      {...rest}
     >
       <Icon as={copied ? CheckOcticon : ClipboardOcticon} />
     </Button>

components/IFrame/IFrame.tsx

@@ -6,7 +6,7 @@ const RoundedIFrame = styled("iframe", {
   display: "block",
   margin: "1em auto",
   border: `2px solid ${theme.colors.kindaLight}`,
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
 });
 
 export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {

components/Image/Image.tsx

@@ -16,7 +16,7 @@ const Block = styled("div", {
 const StyledImage = styled(NextImage, {
   height: "auto",
   maxWidth: "100%",
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
 });
 
 export type ImageProps = ComponentProps<typeof StyledImage> & {

components/RepositoryCard/RepositoryCard.tsx

@@ -9,7 +9,7 @@ const Wrapper = styled("div", {
   width: "100%",
   padding: "1.2em 1.2em 0.8em 1.2em",
   border: `1px solid ${theme.colors.kindaLight}`,
-  borderRadius: theme.radii.rounded,
+  borderRadius: theme.radii.corner,
   fontSize: "0.85em",
   color: theme.colors.mediumDark,
   transition: `border ${theme.transitions.fade}`,

components/Selfie/Selfie.tsx

@@ -51,7 +51,16 @@ export type SelfieProps = Omit<ComponentProps<typeof Link>, "href">;
 const Selfie = ({ ...rest }: SelfieProps) => {
   return (
     <SelfieLink href="/" rel="author" title={authorName} underline={false} {...rest}>
-      <CircleImage src={selfieJpg} alt={`Photo of ${authorName}`} width={70} height={70} quality={60} inline priority />
+      <CircleImage
+        src={selfieJpg}
+        alt={`Photo of ${authorName}`}
+        width={70}
+        height={70}
+        quality={60}
+        placeholder="empty"
+        inline
+        priority
+      />
       <Name>{authorName}</Name>
     </SelfieLink>
   );

components/SkipToContent/SkipToContent.tsx

@@ -24,7 +24,7 @@ const HiddenLink = styled("a", {
     background: theme.colors.superDuperLight,
     color: theme.colors.link,
     border: `2px solid ${theme.colors.kindaLight}`,
-    borderRadius: theme.radii.rounded,
+    borderRadius: theme.radii.corner,
     textDecoration: "underline",
   },
 });

components/VNC/VNC.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import RFB from "@novnc/novnc/core/rfb";
 import Terminal from "../Terminal";
 import { styled } from "../../lib/styles/stitches.config";
-import type { Ref, ComponentProps } from "react";
+import type { Ref, ComponentPropsWithoutRef } from "react";
 
 const Display = styled(
   "div",
@@ -33,7 +33,7 @@ const Display = styled(
   }
 );
 
-export type VNCProps = ComponentProps<typeof Display> & {
+export type VNCProps = ComponentPropsWithoutRef<typeof Display> & {
   server: string;
 };
 

components/Video/Video.tsx

@@ -14,7 +14,7 @@ const Player = styled(ReactPlayer, {
   left: 0,
 
   "& video": {
-    borderRadius: theme.radii.rounded,
+    borderRadius: theme.radii.corner,
   },
 });
 
@@ -31,50 +31,53 @@ export type VideoProps = Partial<FilePlayerProps> & {
   className?: string;
 };
 
-const Video = ({ src, autoplay, className, ...rest }: VideoProps) => {
+const Video = ({ src, autoplay = false, className, ...rest }: VideoProps) => {
   // fix hydration issues: https://github.com/cookpete/react-player/issues/1428
   const hasMounted = useHasMounted();
 
-  const files: FilePlayerProps["url"] = [
-    // @ts-ignore
-    src.webm && {
-      src: src.webm,
-      type: "video/webm",
-    },
-    // @ts-ignore
-    src.mp4 && {
-      src: src.mp4,
-      type: "video/mp4",
-    },
-  ];
-
-  const config: FilePlayerProps["config"] = {
-    attributes: {
-      controlsList: "nodownload",
-      preload: "metadata",
-      poster: src.image, // thumbnail
-      autoPlay: autoplay,
-      loop: !!autoplay,
-      muted: !!autoplay, // no sound when autoplaying
-      controls: !autoplay, // only show controls when not autoplaying
+  const playerProps: FilePlayerProps = {
+    url: [],
+    config: {
+      attributes: {
+        controlsList: "nodownload",
+        preload: "metadata",
+        poster: src?.image, // thumbnail
+        autoPlay: autoplay,
+        loop: autoplay,
+        muted: autoplay, // no sound when autoplaying
+        controls: !autoplay, // only show controls when not autoplaying
+      },
+      tracks: [],
     },
   };
 
-  if (src.vtt) {
-    config.tracks = [
-      {
-        kind: "subtitles",
-        src: src.vtt,
-        srcLang: "en",
-        label: "English",
-        default: true,
-      },
-    ];
+  if (src?.webm) {
+    // @ts-ignore
+    playerProps.url?.push({
+      src: src.webm,
+      type: "video/webm",
+    });
+  }
+  if (src?.mp4) {
+    // @ts-ignore
+    playerProps.url?.push({
+      src: src.mp4,
+      type: "video/mp4",
+    });
+  }
+  if (src?.vtt) {
+    playerProps.config?.tracks?.push({
+      kind: "subtitles",
+      src: src.vtt,
+      srcLang: "en",
+      label: "English",
+      default: true,
+    });
   }
 
   return (
     <Wrapper className={className}>
-      {hasMounted && <Player width="100%" height="100%" url={files} config={{ file: config }} {...rest} />}
+      {hasMounted && <Player width="100%" height="100%" {...playerProps} {...rest} />}
     </Wrapper>
   );
 };

components/YouTubeEmbed/YouTubeEmbed.tsx

@@ -15,7 +15,7 @@ const Player = styled(ReactPlayer, {
 
   // target both the lazy thumbnail preview *and* the actual YouTube embed
   "& .react-player__preview, & iframe": {
-    borderRadius: theme.radii.rounded,
+    borderRadius: theme.radii.corner,
   },
 });
 

lib/styles/stitches.config.ts

@@ -62,7 +62,7 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
     },
 
     radii: {
-      rounded: "0.65em",
+      corner: "0.6rem",
     },
 
     transitions: {