feat: blog init

site/pages/blog/gm.mdx

@@ -0,0 +1,13 @@
+---
+layout: blog
+authors: 
+  - "[jxom](https://twitter.com/_jxom)"
+  - "[awkweb](https://twitter.com/awkweb)"
+date: November 25, 2023
+---
+
+# gm
+
+::authors
+
+we're so back.

src/app/components/Authors.css.ts

@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css'
+import { fontSizeVars, primitiveColorVars } from '../styles/vars.css.js'
+
+export const root = style({
+  color: primitiveColorVars.text3,
+  fontSize: fontSizeVars[14],
+})
+
+export const authors = style(
+  {
+    color: primitiveColorVars.text,
+  },
+  'authors',
+)
+
+export const link = style(
+  {
+    textDecoration: 'underline',
+    textUnderlineOffset: '2px',
+    ':hover': {
+      color: primitiveColorVars.text2,
+    },
+  },
+  'link',
+)
+
+export const separator = style(
+  {
+    color: primitiveColorVars.text3,
+  },
+  'separator',
+)

src/app/components/Authors.tsx

@@ -0,0 +1,47 @@
+import * as styles from './Authors.css.js'
+
+export type AuthorsProps = {
+  authors?: string | string[]
+  date?: string
+}
+
+export function Authors({ authors: authors_, date }: AuthorsProps) {
+  const authors = (() => {
+    if (!authors_) return undefined
+    if (Array.isArray(authors_)) return authors_
+    return authors_.split(',').map((author) => author.trim())
+  })()
+  return (
+    <div className={styles.root}>
+      {date}
+      {authors && date ? ' by ' : 'By '}
+      <span className={styles.authors}>
+        {authors?.map((author, index) => {
+          const { text, url } = parseAuthor(author)
+          return (
+            <>
+              {url ? (
+                <a className={styles.link} href={url} target="_blank" rel="noopener noreferrer">
+                  {text}
+                </a>
+              ) : (
+                text
+              )}
+              {index < authors.length - 2 && <span className={styles.separator}>, </span>}
+              {index < authors.length - 1 && <span className={styles.separator}> & </span>}
+            </>
+          )
+        })}
+      </span>
+    </div>
+  )
+}
+
+function parseAuthor(author: string) {
+  const match = author.match(/\[(.+)\]\((.+)\)/)
+  if (!match) return { text: author, url: undefined }
+  return {
+    text: match[1],
+    url: match[2],
+  }
+}

src/app/components/mdx/Div.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react'
 
+import { Authors } from '../Authors.js'
 import { AutolinkIcon } from './AutolinkIcon.js'
 import { CodeBlock } from './CodeBlock.js'
 import { CodeGroup } from './CodeGroup.js'
@@ -13,6 +14,13 @@ export function Div(props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTM
   const className = clsx(props.className, styles.root)
   if (props.className === 'code-group')
     return <CodeGroup {...(props as any)} className={className} />
+  if ('data-authors' in props)
+    return (
+      <Authors
+        authors={props['data-authors'] as string[]}
+        date={'data-date' in props ? (props['data-date'] as string) : undefined}
+      />
+    )
   if ('data-autolink-icon' in props)
     return <AutolinkIcon {...(props as any)} className={className} />
   if ('data-rehype-pretty-code-title' in props)

src/app/layouts/DocsLayout.tsx

@@ -24,11 +24,17 @@ export function DocsLayout({
   const { frontmatter } = usePageData()
 
   const showOutline = (() => {
-    if (frontmatter && 'outline' in frontmatter) return frontmatter.outline
+    if (frontmatter) {
+      if ('outline' in frontmatter) return frontmatter.outline
+      if (frontmatter.layout === 'blog') return false
+    }
     return true
   })()
   const showSidebar = (() => {
-    if (frontmatter && 'sidebar' in frontmatter) return frontmatter.sidebar
+    if (frontmatter) {
+      if ('sidebar' in frontmatter) return frontmatter.sidebar
+      if (frontmatter.layout === 'blog') return false
+    }
     return Boolean(sidebar)
   })()
 

src/app/types.ts

@@ -3,7 +3,10 @@ import * as React from 'react'
 
 export type Frontmatter = {
   [key: string]: unknown
+  author?: string
+  date?: string
   description?: string
+  layout?: 'blog'
   outline?: boolean
   sidebar?: boolean
   title?: string

src/vite/plugins/mdx.ts

@@ -1,20 +1,21 @@
 import mdxPlugin from '@mdx-js/rollup'
-import remarkDirective from 'remark-directive'
-import remarkFrontmatter from 'remark-frontmatter'
-import remarkGfm from 'remark-gfm'
-import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
-import { type PluginOption } from 'vite'
 import { h } from 'hastscript'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeSlug from 'rehype-slug'
+import remarkDirective from 'remark-directive'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkGfm from 'remark-gfm'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 import {
   createDiffProcessor,
   createFocusProcessor,
   createHighlightProcessor,
   getHighlighter,
 } from 'shiki-processor'
+import { type PluginOption } from 'vite'
 
+import { remarkAuthors } from './remark/authors.js'
 import { remarkCallout } from './remark/callout.js'
 import { remarkCodeGroup } from './remark/code-group.js'
 import { remarkCode } from './remark/code.js'
@@ -39,6 +40,7 @@ export function mdx(): PluginOption {
       remarkSteps,
       remarkStrongBlock,
       remarkSubheading,
+      remarkAuthors,
     ],
     rehypePlugins: [
       [

src/vite/plugins/remark/authors.ts

@@ -0,0 +1,28 @@
+/// <reference types="mdast-util-to-hast" />
+/// <reference types="mdast-util-directive" />
+
+import type { Root } from 'mdast'
+import { visit } from 'unist-util-visit'
+import { parse } from 'yaml'
+
+export function remarkAuthors() {
+  return (tree: Root) => {
+    visit(tree, (node, index, parent) => {
+      if (node.type !== 'leafDirective') return
+      if (node.name !== 'authors') return
+      if (!index) return
+
+      const frontMatterNode = parent?.children.find((child) => child.type === 'yaml') as any
+      if (!frontMatterNode) return
+
+      const data = parse(frontMatterNode.value)
+      ;(parent?.children[index - 1] as any).children.push({
+        type: 'paragraph',
+        data: {
+          hName: 'div',
+          hProperties: { 'data-authors': data.authors.join(','), 'data-date': data.date },
+        },
+      })
+    })
+  }
+}