clean up global styles

components/embeds/Code.tsx

@@ -1,28 +1,35 @@
 import dynamic from "next/dynamic";
 import type { ReactNode } from "react";
 
-type Props = {
+type CustomCodeProps = {
   className?: string;
   children: ReactNode;
 };
 
-const CustomCode = (props: Props) => {
+const CustomCode = (props: CustomCodeProps) => {
   if (props.className?.split(" ").includes("hljs")) {
     const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
 
     // full multi-line code blocks with highlight.js and copy-to-clipboard button
     return (
-      <div className="code_block">
+      <div>
         <CopyButton source={props.children} />
         <code {...props}>{props.children}</code>
 
         <style jsx>{`
-          .code_block {
+          div {
             position: relative;
             max-width: 100%;
             overflow-x: scroll;
             margin: 1em 0;
           }
+
+          div > code {
+            display: block;
+            overflow-x: auto;
+            padding: 1em;
+            tab-size: 2;
+          }
         `}</style>
 
         <style jsx global>{`

components/embeds/Image.tsx

@@ -1,14 +1,17 @@
 import Image from "next/image";
-
 import type { ImageProps } from "next/image";
+import type { CSSProperties } from "react";
 
 // TODO: infer ratio when given zero/one dimensions
 // TODO: fold figure/figcaption tags into this component
 
-const CustomImg = (props: ImageProps) => {
+type CustomImageProps = ImageProps & {
+  style?: CSSProperties;
+};
+
+const CustomImage = (props: CustomImageProps) => {
   return (
-    // the required height and width are part of the props, so they get automatically passed here with {...props}
-    <div style={{ margin: "1em auto", textAlign: "center" }}>
+    <div className="image_wrapper" style={props.style}>
       <Image
         src={props.src}
         layout="intrinsic"
@@ -23,4 +26,4 @@ const CustomImg = (props: ImageProps) => {
   );
 };
 
-export default CustomImg;
+export default CustomImage;

components/embeds/Link.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-
 import type { LinkProps } from "next/link";
 
 type CustomLinkProps = LinkProps & {
@@ -7,10 +6,12 @@ type CustomLinkProps = LinkProps & {
   rel?: string;
   className?: string;
   children?: unknown;
+  rest?: unknown;
 };
-const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
+
+const CustomLink = ({ href, target, rel, className, children, ...rest }: CustomLinkProps) => (
   <Link href={href} passHref={true}>
-    <a className={className} target={target} rel={rel}>
+    <a className={className} target={target} rel={rel} {...rest}>
       {children}
     </a>
   </Link>

components/embeds/Video.tsx

@@ -1,4 +1,5 @@
-import ReactPlayer, { ReactPlayerProps } from "react-player/lazy";
+import ReactPlayer from "react-player/lazy";
+import type { ReactPlayerProps } from "react-player";
 
 const Video = (props: ReactPlayerProps) => (
   <div style={{ position: "relative", paddingTop: "56.25%" }}>