Renomalize MDX article formatting.

project/zemn.me/components/Article/article.tsx

@@ -1,16 +1,14 @@
 "use client";
 import { useState } from 'react';
 
-import style from '#root/project/zemn.me/components/Article/style.module.css';
 import { tocSegment } from '#root/project/zemn.me/components/Article/toc_context.js'
 import { ArticleProps } from '#root/project/zemn.me/components/Article/types/article_types.js';
 import { Date } from '#root/ts/react/lang/date.js';
 import { nativeDateFromUnknownSimpleDate } from '#root/ts/time/date.js';
 
-export function Article(props: ArticleProps) {
+export function Article({ className, ...props}: ArticleProps) {
 	const [toc, setToc] = useState<HTMLUListElement|null>(null);
-	return <div className={style.container}>
-		<article>
+	return <article className={className}>
 			{props.date ? <Date date={nativeDateFromUnknownSimpleDate.parse(props.date)} /> : null}
 			<nav>
 				<ul ref={setToc}/>
@@ -19,6 +17,5 @@ export function Article(props: ArticleProps) {
 			{props.children}
 			</tocSegment.Provider>
 		</article>
-	</div>
 }
 

project/zemn.me/components/Article/heading.tsx

@@ -9,6 +9,7 @@ type BaseHeadingProps = JSX.IntrinsicElements["h1"]
 
 export interface HeadingProps extends BaseHeadingProps {
 	readonly level: 1 | 2 | 3 | 4 | 5
+	readonly className?: string
 }
 
 export function Heading({ level, children, ...props }: HeadingProps) {

project/zemn.me/components/Article/mdx_article.tsx

@@ -1,8 +1,10 @@
-import { cloneElement, ReactElement } from "react";
+import classNames from "classnames";
+import React, { cloneElement, ReactElement, ReactNode } from "react";
 
 import { Article } from '#root/project/zemn.me/components/Article/article.js';
 import { H1, H2, H3, H4, H5 } from '#root/project/zemn.me/components/Article/heading.js';
 import { Section } from '#root/project/zemn.me/components/Article/section.js';
+import style from '#root/project/zemn.me/components/Article/style.module.css';
 import Link from "#root/project/zemn.me/components/Link/index.js";
 
 
@@ -17,7 +19,8 @@ interface Frontmatter {
 }
 
 type MDXComponentTypes =
-	"a" | "blockquote" | "code" | "em" |
+	"a" | "blockquote" | "code" | "em" | "section" | "img" |
+	"article" | `${"o" | "u"}l` | "nav" | "li" | "time" | "hr" |
 	`h${1|2|3|4|5}` | "p" | "section";
 
 interface MDXContentProps {
@@ -37,19 +40,92 @@ export interface MDXArticleProps {
 	>
 }
 
+/*
+
+const el = <T extends keyof JSX.IntrinsicElements>(element: T) =>
+	(className?: string) =>
+		({ children, ...props }: JSX.IntrinsicElements[T]) =>
+
+			React.createElement(element, {
+				...props,
+				className: classNames(className, props.className)
+			}, children );
+
+*/
+
+interface BasicProps {
+	children?: ReactNode
+	className?: string
+}
+
+const el =
+  (className?: string) =>
+	<T extends keyof JSX.IntrinsicElements | React.ComponentType<BasicProps>>(element: T) =>
+    ({ children, ...props }: T extends keyof JSX.IntrinsicElements
+      ? JSX.IntrinsicElements[T]
+      : React.ComponentProps<T>) =>
+      React.createElement(
+        element,
+        {
+          ...props,
+          className: classNames(className, props.className),
+        },
+        children
+      );
+
+
+
+
+
+const textBlock = el(
+	classNames(
+		style.padded
+	)
+);
+
+
+const fullWidth = el(
+	classNames(
+		style.gridded,
+		style.fullWidth
+	)
+)
+
+
+
+
+
 export function MDXArticle(props: MDXArticleProps) {
-	return <Article {...props.frontmatter}>
+	return <Article className={
+		classNames(
+			style.article, style.gridded
+		)
+	} {...props.frontmatter}>
 		{cloneElement(
 			props.children,
 			{
 				components: {
-					h1: H1,
-					h2: H2,
-					h3: H3,
-					h4: H4,
-					h5: H5,
+					h1: textBlock(H1),
+					h2: textBlock(H2),
+					h3: textBlock(H3),
+					h4: textBlock(H4),
+					h5: textBlock(H5),
 					a: Link,
-					section: Section,
+					section: fullWidth(Section),
+					article: fullWidth("article"),
+					blockquote: el(
+						classNames(
+							style.gridded,
+							style.noMargin,
+							style.padded,
+						)
+					)("blockquote"),
+					li: fullWidth("li"),
+					p: textBlock("p"),
+					time: textBlock("time"),
+					hr: textBlock("hr"),
+					img: fullWidth("img"),
+
 				}
 			}
 		)}

project/zemn.me/components/Article/style.module.css

@@ -1,55 +1,26 @@
-/*
-	todo: please unwrap the elements here
-	so they're not just :is and have their
-	own classes. otherwise we're going to have
-	complex child elements which break
-*/
-
-
-.container li {
-	grid-column: 1 / -1;
+.article {
+	margin: 0 1.25em
 }
 
-/*
-	the article grid, and
-	elements which inherit
-	the article grid.
-
-	Since subgrid doesn't
-	exist yet, we can have
-	sub-elements which also
-	are in the grid by having
-	them state the same grid
-	as the parent.
-*/
-.container, .container :is(article, blockquote, section, ol, ul, nav) {
-	grid-column: 1 / -1;
+.gridded {
 	display: grid;
 	grid-template-columns: 1.25em repeat(12, minmax(0, 4em)) 1.25em;
 }
 
+/* defualt */
 
-/*
-	elements we need to defer to the regular
-	model for
-*/
-.container :is(article, blockquote) > * {
-	grid-column: 2 / span 12;
+.fullWidth {
+	grid-column: 1 / -1;
 }
 
-/*
-	block level elements
-*/
-.container :is(p, h1, h2, h3, h4, h5, h6, time, hr) {
-	grid-column: 2 / span 12;
+.padded {
+	grid-column: 2/span 12;
 }
 
-
-/*
-	full width elements
-*/
-.heroVideo, .container :is(img) {
+.container li {
 	grid-column: 1 / -1;
-	width: 100%;
-	height: auto;
+}
+
+.noMargin {
+	margin: 0;
 }

project/zemn.me/components/Article/types/article_types.tsx

@@ -8,5 +8,6 @@ export interface ArticleProps {
 	readonly children?: ReactElement
 	readonly description?: string
 	readonly language?: string
+	readonly className?: string
 }