From a81ca6bdd30971bc5f45901f2159f16b80458cb6 Mon Sep 17 00:00:00 2001 From: Thomas Neil James Shadwell Date: Mon, 25 Nov 2024 10:46:55 -0800 Subject: [PATCH] Renomalize MDX article formatting. --- .../zemn.me/components/Article/article.tsx | 7 +- .../zemn.me/components/Article/heading.tsx | 1 + .../components/Article/mdx_article.tsx | 94 +++++++++++++++++-- .../components/Article/style.module.css | 55 +++-------- .../Article/types/article_types.tsx | 1 + 5 files changed, 102 insertions(+), 56 deletions(-) diff --git a/project/zemn.me/components/Article/article.tsx b/project/zemn.me/components/Article/article.tsx index 0d5d01f008..9d8f2a39a1 100644 --- a/project/zemn.me/components/Article/article.tsx +++ b/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(null); - return
-
+ return
{props.date ? : null}
-
} diff --git a/project/zemn.me/components/Article/heading.tsx b/project/zemn.me/components/Article/heading.tsx index 16cc690022..1a44536722 100644 --- a/project/zemn.me/components/Article/heading.tsx +++ b/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) { diff --git a/project/zemn.me/components/Article/mdx_article.tsx b/project/zemn.me/components/Article/mdx_article.tsx index 58222125ab..5932ad558e 100644 --- a/project/zemn.me/components/Article/mdx_article.tsx +++ b/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 = (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) => + >(element: T) => + ({ children, ...props }: T extends keyof JSX.IntrinsicElements + ? JSX.IntrinsicElements[T] + : React.ComponentProps) => + 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
+ return
{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"), + } } )} diff --git a/project/zemn.me/components/Article/style.module.css b/project/zemn.me/components/Article/style.module.css index 63d6f3ec2f..6567892d6f 100644 --- a/project/zemn.me/components/Article/style.module.css +++ b/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; } diff --git a/project/zemn.me/components/Article/types/article_types.tsx b/project/zemn.me/components/Article/types/article_types.tsx index f59c89954b..ae8ffaa54a 100644 --- a/project/zemn.me/components/Article/types/article_types.tsx +++ b/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 }