feat: keypoints

Author: abernier

docs/getting-started/authoring.mdx

@@ -6,9 +6,14 @@ nav: 1
 ---
 
 <Intro>
-  This is a guide on how to write documentation. We support all [GitHub Flavored Markdown](https://github.github.com/gfm/) syntax, plus some custom components that are described here.
+  This is a guide on how to write documentation. We support all [GFM](https://github.github.com/gfm/) syntax, plus some custom components that are described here.
 </Intro>
 
+<Keypoints>
+  <KeypointsItem>[Front matter](#frontmatter)</KeypointsItem>
+  <KeypointsItem>Custom [markdown](#markdown) components</KeypointsItem>
+</Keypoints>
+
 In your `MDX` folder, create any `path/to/my-document.mdx`:
 
 ```md
@@ -61,6 +66,24 @@ Plus, all exported [`components/mdx/index.tsx`](components/mdx/index.tsx) MDX co
 </Intro>
 </details>
 
+### `Keypoints`
+
+```md
+<Keypoints>
+  <KeypointsItem>First item</KeypointsItem>
+  <KeypointsItem>Second **item**</KeypointsItem>
+</Keypoints>
+```
+
+<details>
+  <summary>Result</summary>
+
+<Keypoints>
+  <KeypointsItem>First item</KeypointsItem>
+  <KeypointsItem>Second **item**</KeypointsItem>
+</Keypoints>
+</details>
+
 ### `Img`
 
 Relative images are supported. Eg, inside your [`MDX`](introduction#configuration:~:text=MDX) folder:

src/components/mdx/Keypoints/Keypoints.tsx

@@ -0,0 +1,25 @@
+import cn from '@/lib/cn'
+import { ComponentProps } from 'react'
+import { li as Li, ul as Ul } from '../index'
+
+export function Keypoints({
+  title = 'Keypoints',
+  children,
+  className,
+  ...props
+}: { title: string } & ComponentProps<'section'>) {
+  return (
+    <section
+      {...props}
+      className={cn(className, 'bg-surface-dim my-8 rounded-xl border border-outline-variant p-6')}
+    >
+      <h2 className="mb-6 text-2xl font-bold">{title}</h2>
+
+      <Ul className="mb-0 text-sm">{children}</Ul>
+    </section>
+  )
+}
+
+export function KeypointsItem(props: ComponentProps<'li'>) {
+  return <Li {...props} />
+}

src/components/mdx/Keypoints/index.ts

@@ -0,0 +1 @@
+export * from './Keypoints'

src/components/mdx/index.tsx

@@ -6,6 +6,7 @@ export * from './Grid'
 export * from './Hint'
 export * from './Img'
 export * from './Intro'
+export * from './Keypoints'
 export * from './Summary'
 export * from './Toc'
 
@@ -44,12 +45,12 @@ export const h6 = ({ id, ...props }: Omit<ComponentProps<typeof Heading>, 'Tag'>
 )
 
 export const ul = ({ className, ...props }: ComponentProps<'ul'>) => (
-  <div className={cn(className, 'my-4 mb-8')}>
+  <div className={cn('my-4 mb-8', className)}>
     <ul className="ms-6 list-disc" {...props} />
   </div>
 )
 export const ol = ({ className, ...props }: ComponentProps<'ol'>) => (
-  <div className={cn(className, 'my-4 mb-8')}>
+  <div className={cn('my-4 mb-8', className)}>
     <ol className="ms-6 list-decimal" {...props} />
   </div>
 )