feat: flex component, document higher-order layout components

quartz/components/DesktopOnly.tsx

@@ -1,18 +1,14 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-export default ((component?: QuartzComponent) => {
-  if (component) {
-    const Component = component
-    const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
-      return <Component displayClass="desktop-only" {...props} />
-    }
-
-    DesktopOnly.displayName = component.displayName
-    DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded
-    DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded
-    DesktopOnly.css = component?.css
-    return DesktopOnly
-  } else {
-    return () => <></>
+export default ((component: QuartzComponent) => {
+  const Component = component
+  const DesktopOnly: QuartzComponent = (props: QuartzComponentProps) => {
+    return <Component displayClass="desktop-only" {...props} />
   }
-}) satisfies QuartzComponentConstructor
+
+  DesktopOnly.displayName = component.displayName
+  DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded
+  DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+  DesktopOnly.css = component?.css
+  return DesktopOnly
+}) satisfies QuartzComponentConstructor<QuartzComponent>

quartz/components/Flex.tsx

@@ -0,0 +1,55 @@
+import { concatenateResources } from "../util/resources"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+type FlexConfig = {
+  components: {
+    Component: QuartzComponent
+    grow?: boolean
+    shrink?: boolean
+    basis?: string
+    order?: number
+    align?: "start" | "end" | "center" | "stretch"
+    justify?: "start" | "end" | "center" | "between" | "around"
+  }[]
+  direction?: "row" | "row-reverse" | "column" | "column-reverse"
+  wrap?: "nowrap" | "wrap" | "wrap-reverse"
+  gap?: string
+}
+
+export default ((config: FlexConfig) => {
+  const Flex: QuartzComponent = (props: QuartzComponentProps) => {
+    const direction = config.direction ?? "row"
+    const wrap = config.wrap ?? "nowrap"
+    const gap = config.gap ?? "1rem"
+
+    return (
+      <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
+        {config.components.map((c) => {
+          const grow = c.grow ? 1 : 0
+          const shrink = (c.shrink ?? true) ? 1 : 0
+          const basis = c.basis ?? "auto"
+          const order = c.order ?? 0
+          const align = c.align ?? "center"
+          const justify = c.justify ?? "center"
+
+          return (
+            <div
+              style={`flex-grow: ${grow}; flex-shrink: ${shrink}; flex-basis: ${basis}; order: ${order}; align-self: ${align}; justify-self: ${justify};`}
+            >
+              <c.Component {...props} />
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  Flex.afterDOMLoaded = concatenateResources(
+    ...config.components.map((c) => c.Component.afterDOMLoaded),
+  )
+  Flex.beforeDOMLoaded = concatenateResources(
+    ...config.components.map((c) => c.Component.beforeDOMLoaded),
+  )
+  Flex.css = concatenateResources(...config.components.map((c) => c.Component.css))
+  return Flex
+}) satisfies QuartzComponentConstructor<FlexConfig>

quartz/components/MobileOnly.tsx

@@ -1,18 +1,14 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-export default ((component?: QuartzComponent) => {
-  if (component) {
-    const Component = component
-    const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
-      return <Component displayClass="mobile-only" {...props} />
-    }
-
-    MobileOnly.displayName = component.displayName
-    MobileOnly.afterDOMLoaded = component?.afterDOMLoaded
-    MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded
-    MobileOnly.css = component?.css
-    return MobileOnly
-  } else {
-    return () => <></>
+export default ((component: QuartzComponent) => {
+  const Component = component
+  const MobileOnly: QuartzComponent = (props: QuartzComponentProps) => {
+    return <Component displayClass="mobile-only" {...props} />
   }
-}) satisfies QuartzComponentConstructor
+
+  MobileOnly.displayName = component.displayName
+  MobileOnly.afterDOMLoaded = component?.afterDOMLoaded
+  MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+  MobileOnly.css = component?.css
+  return MobileOnly
+}) satisfies QuartzComponentConstructor<QuartzComponent>

quartz/components/index.ts

@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
+import Flex from "./Flex"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   Comments,
+  Flex,
 }