feat(images): size images upfront

src/components/cite.tsx

@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Cite = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <cite className="root" {...props}>
     {children}
     <style jsx>{`

src/components/code.tsx

@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Code = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <code className="root" {...props}>
     {children}
     <style jsx>{`

src/components/em.tsx

@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Emphasis = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <em className="root" {...props}>
     {children}
     <style jsx>{`

src/components/gallery.tsx

@@ -46,6 +46,7 @@ const Gallery = ({ imagesNodes }: { imagesNodes: MarkdownImageNode[] }) => {
           clear: both;
           background: var(--secondary);
           padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+          margin:  0 0 var(--vRythm) 0;
         }
         p {
           text-align: center;

src/components/h1.tsx

@@ -1,8 +1,10 @@
+import type { HTMLAttributes } from "react";
+
 const Heading1 = ({
   children,
   className,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h1 className={`root${className ? ' ' + className : ""}`} {...props}>
     {children}
     <style jsx>{`

src/components/h2.tsx

@@ -1,8 +1,10 @@
+import type { HTMLAttributes } from "react";
+
 const Heading2 = ({
   children,
   className,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h2 className={`root${className ? " " + className : ""}`} {...props}>
     {children}
     <style jsx>{`

src/components/h3.tsx

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading3 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h3 className="root" {...props}>
     {children}
     <style jsx>{`

src/components/h4.tsx

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading4 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h4 className="root" {...props}>
     {children}
     <style jsx>{`

src/components/h5.tsx

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading5 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h5 className="root" {...props}>
     {children}
     <style jsx>{`

src/components/h6.tsx

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const Heading6 = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLElement>) => (
   <h6 className="root" {...props}>
     {children}
     <style jsx>{`

src/components/hr.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 
 const HorizontalRule = (props: HTMLAttributes<HTMLHRElement>) => (
   <>

src/components/img.tsx

@@ -0,0 +1,51 @@
+import {
+  CSS_BREAKPOINT_START_M,
+  CSS_BREAKPOINT_START_L,
+} from "../utils/constants";
+import type { HTMLAttributes } from "react";
+
+const Img = ({
+  float,
+  ...props
+}: {
+  float?: "left" | "right";
+} & HTMLAttributes<HTMLImageElement>) => {
+  return (
+    <>
+      <img
+        className={`${float ? float + " " : ""}${props.className || ""}`}
+        {...props}
+      />
+      <style jsx>{`
+        img {
+          clear: both;
+          display: block;
+          width: 100%;
+          max-width: 100%;
+        }
+        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
+          img.left,
+          img.right {
+            width: var(--block);
+          }
+          img.left {
+            float: left;
+            margin-right: var(--gutter);
+          }
+          img.right {
+            float: right;
+            margin-left: var(--gutter);
+          }
+        }
+        @media screen and (min-width: ${CSS_BREAKPOINT_START_L}) {
+          img.left,
+          img.right {
+            width: calc(calc(var(--column) * 4) + calc(var(--gutter) * 3));
+          }
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default Img;

src/components/p.tsx

@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Paragraph = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLParagraphElement>) => (
+} & HTMLAttributes<HTMLParagraphElement>) => (
   <p className="root" {...props}>
     {children}
     <style jsx>{`

src/components/strong.tsx

@@ -1,9 +1,11 @@
+import type { HTMLAttributes } from "react";
+
 const Strong = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>) => (
+} & HTMLAttributes<HTMLElement>) => (
   <strong className="root" {...props}>
     {children}
     <style jsx>{`

src/components/ul.tsx

@@ -1,7 +1,9 @@
+import type { HTMLAttributes } from "react";
+
 const UnorderedList = ({
   children,
   ...props
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLUListElement>) => (
+}: { children: React.ReactNode } & HTMLAttributes<HTMLUListElement>) => (
   <ul className="root" {...props}>
     {children}
     <style jsx>{`