create-agntcms-app 0.2.1

package/dist/template/agntcms/sections/ArticleBody/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { ArticleBodyComponent } from './component'
+
+export const ArticleBody = defineSection({
+  name: 'ArticleBody',
+  category: 'Blog',
+  schema,
+  component: ArticleBodyComponent,
+})

package/dist/template/agntcms/sections/ArticleBody/schema.ts

@@ -0,0 +1,5 @@
+import { RichTextField } from '@agntcms/next'
+
+export const schema = {
+  body: RichTextField,
+}

package/dist/template/agntcms/sections/ArticleHero/component.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { EditableText, EditableImage, EditableLink, read, isSlotInPreview } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { ImageValue, LinkValue } from '@agntcms/next'
+
+interface Props {
+  readonly backLink: EditableSlot<'link', LinkValue>
+  readonly category: EditableSlot<'text', string>
+  readonly title: EditableSlot<'text', string>
+  readonly authorName: EditableSlot<'text', string>
+  readonly authorPhoto: EditableSlot<'image', ImageValue>
+  readonly meta: EditableSlot<'text', string>
+  readonly coverImage: EditableSlot<'image', ImageValue>
+}
+
+export function ArticleHeroComponent({
+  backLink,
+  category,
+  title,
+  authorName,
+  authorPhoto,
+  meta,
+  coverImage,
+}: Props) {
+  const back = read(backLink)
+  const backHref = hrefOf(back)
+  const showBack = Boolean(backHref) || isSlotInPreview(backLink)
+  const cover = read(coverImage)
+  const hasCover = Boolean(cover?.filename) || isSlotInPreview(coverImage)
+
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[720px] px-8 pt-16 pb-8">
+        {showBack && (
+          <a
+            href={backHref || '#'}
+            target={isExternalLink(back) ? '_blank' : undefined}
+            rel={isExternalLink(back) ? 'noreferrer' : undefined}
+            className="font-mono text-xs tracking-[0.04em] text-ink-3 no-underline"
+          >
+            ←{' '}
+            <EditableLink field={backLink} className="text-ink-3 no-underline" />
+          </a>
+        )}
+        <div className="mt-6">
+          <EditableText
+            field={category}
+            as="span"
+            className="font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+          />
+          <EditableText
+            field={title}
+            as="h1"
+            className="mt-3 font-display text-[56px] font-semibold leading-[1.05] tracking-[-0.03em] text-ink"
+          />
+          <div className="mt-5 flex items-center gap-3">
+            <EditableImage
+              field={authorPhoto}
+              className="!block h-9 w-9 rounded-full object-cover grayscale [&_img]:h-9 [&_img]:w-9 [&_img]:rounded-full [&_img]:object-cover [&_img]:grayscale"
+            />
+            <div className="text-sm text-ink-2">
+              <EditableText
+                field={authorName}
+                as="b"
+                className="font-semibold text-ink"
+              />{' '}
+              ·{' '}
+              <EditableText field={meta} as="span" />
+            </div>
+          </div>
+        </div>
+      </div>
+      {hasCover ? (
+        <div className="mx-auto mt-8 w-full max-w-[720px] px-8">
+          <div className="aspect-[16/9] overflow-hidden border border-hairline bg-paper-2">
+            <EditableImage
+              field={coverImage}
+              className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+            />
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}

package/dist/template/agntcms/sections/ArticleHero/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { ArticleHeroComponent } from './component'
+
+export const ArticleHero = defineSection({
+  name: 'ArticleHero',
+  category: 'Blog',
+  schema,
+  component: ArticleHeroComponent,
+})

package/dist/template/agntcms/sections/ArticleHero/schema.ts

@@ -0,0 +1,12 @@
+import { TextField, LinkField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  // "Back to blog"-style link at the top of the article.
+  backLink: LinkField,
+  category: TextField,
+  title: TextField,
+  authorName: TextField,
+  authorPhoto: ImageField,
+  meta: TextField,
+  coverImage: ImageField,
+}

package/dist/template/agntcms/sections/Banner/component.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { EditableRichText, EditableImage, EditableLink, read, isSlotInPreview } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { ImageValue, LinkValue } from '@agntcms/next'
+
+interface Props {
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+  readonly secondaryCta: EditableSlot<'link', LinkValue>
+  readonly image: EditableSlot<'image', ImageValue>
+}
+
+function Cta({
+  field,
+  variant,
+}: {
+  field: EditableSlot<'link', LinkValue>
+  variant: 'primary' | 'secondary'
+}) {
+  const link = read(field)
+  const href = hrefOf(link)
+  const show = Boolean(href) || isSlotInPreview(field)
+  if (!show) return null
+  const styles =
+    variant === 'primary'
+      ? 'bg-paper text-ink border-paper hover:bg-paper-2 hover:border-paper-2'
+      : 'bg-transparent text-paper border-paper/25 hover:border-paper'
+  return (
+    <a
+      href={href || '#'}
+      target={isExternalLink(link) ? '_blank' : undefined}
+      rel={isExternalLink(link) ? 'noreferrer' : undefined}
+    >
+      <EditableLink
+        field={field}
+        className={`inline-flex items-center gap-2 whitespace-nowrap rounded-sm border px-[22px] py-[13px] text-[15px] font-medium no-underline transition-colors duration-200 ease-out ${styles}`}
+      />
+    </a>
+  )
+}
+
+export function BannerComponent({
+  headline,
+  lead,
+  primaryCta,
+  secondaryCta,
+  image,
+}: Props) {
+  const img = read(image)
+  const hasImage = Boolean(img?.filename) || isSlotInPreview(image)
+  return (
+    <section className="relative overflow-hidden bg-ink text-paper">
+      {hasImage ? (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 right-0 h-full w-[40%] opacity-90 grayscale"
+        >
+          <EditableImage
+            field={image}
+            className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-ink to-transparent" />
+        </div>
+      ) : null}
+      <div className="relative mx-auto w-full max-w-[1280px] px-8 py-24 text-center">
+        <div className="mx-auto max-w-[820px] [&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-paper [&_h2]:text-[56px] [&_h2]:leading-[1.05] [&_h2]:tracking-[-0.03em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-paper [&_p]:text-[56px] [&_p]:leading-[1.05] [&_p]:tracking-[-0.03em] [&_em]:not-italic [&_em]:text-paper/55 [&_em]:font-semibold">
+          <EditableRichText field={headline} />
+        </div>
+        <EditableRichText
+          field={lead}
+          className="mx-auto mt-4 max-w-[560px] [&_p]:text-[17px] [&_p]:leading-[1.55] [&_p]:text-paper/65 [&_p]:m-0"
+        />
+        <div className="mt-8 flex flex-wrap justify-center gap-3">
+          <Cta field={primaryCta} variant="primary" />
+          <Cta field={secondaryCta} variant="secondary" />
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/Banner/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { BannerComponent } from './component'
+
+export const Banner = defineSection({
+  name: 'Banner',
+  category: 'Calls to action',
+  schema,
+  component: BannerComponent,
+})

package/dist/template/agntcms/sections/Banner/schema.ts

@@ -0,0 +1,9 @@
+import { RichTextField, LinkField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  headline: RichTextField,
+  lead: RichTextField,
+  primaryCta: LinkField,
+  secondaryCta: LinkField,
+  image: ImageField,
+}

package/dist/template/agntcms/sections/BlogIndex/component.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import {
+  EditableImage,
+  EditableList,
+  EditableRichText,
+  read,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Post = SlotItem<typeof schema.posts.itemSchema>
+
+interface PostMetaProps {
+  readonly category: EditableSlot<'richText', string>
+  readonly publishedAt: EditableSlot<'richText', string>
+  readonly readingTime: EditableSlot<'richText', string>
+}
+
+function PostMeta({ category, publishedAt, readingTime }: PostMetaProps) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-text-tertiary">
+      <EditableRichText
+        field={category}
+        as="span"
+        className="text-[11px] font-medium uppercase tracking-[0.10em] text-text-brand-primary"
+      />
+      <EditableRichText field={publishedAt} as="span" />
+      {read(readingTime) && (
+        <>
+          <span aria-hidden="true">·</span>
+          <EditableRichText field={readingTime} as="span" />
+        </>
+      )}
+    </div>
+  )
+}
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly intro: EditableSlot<'richText', string>
+  readonly posts: EditableSlot<'list', ReadonlyArray<Post>>
+}
+
+export function BlogIndexComponent({ eyebrow, headline, intro, posts }: Props) {
+  return (
+    <section className="bg-bg-primary">
+      <div className="mx-auto w-full max-w-[1080px] px-8 pt-24 pb-24">
+        <EditableRichText
+          field={eyebrow}
+          as="div"
+          className="mb-4 text-[11px] font-medium uppercase tracking-[0.10em] text-text-brand-primary"
+        />
+        <EditableRichText
+          field={headline}
+          className="
+            mb-6
+            [&_h1]:m-0 [&_h1]:font-display [&_h1]:font-medium [&_h1]:text-text-primary
+            [&_h1]:max-w-[18ch]
+            [&_h1]:!text-[clamp(40px,6vw,72px)] [&_h1]:!leading-[1.02] [&_h1]:!tracking-[-0.04em]
+          "
+        />
+        <EditableRichText
+          field={intro}
+          className="
+            mb-16 max-w-[60ch]
+            [&_p]:m-0 [&_p]:text-[18px] [&_p]:leading-[1.6] [&_p]:text-text-secondary
+          "
+        />
+
+        <EditableList
+          field={posts}
+          itemSchema={schema.posts.itemSchema}
+          renderItem={(post, index) => {
+            // Static helpers (PostMeta, the article href) need bare values;
+            // editable components receive the slot directly. `read()` is
+            // the canonical helper for the bare-value path (see
+            // EDITABILITY_DESIGN.md author migration).
+            const href = read(post.href) || '#'
+            if (index === 0) {
+              return (
+                <a href={href} className="group block mb-16 no-underline">
+                  <div className="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 md:items-center">
+                    <div className="overflow-hidden rounded-xl border-[0.5px] border-border-primary bg-bg-secondary">
+                      <EditableImage
+                        field={post.cover}
+                        className="block aspect-[4/3] w-full object-cover"
+                      />
+                    </div>
+                    <div>
+                      <PostMeta
+                        category={post.category}
+                        publishedAt={post.publishedAt}
+                        readingTime={post.readingTime}
+                      />
+                      <EditableRichText
+                        field={post.title}
+                        className="
+                          mt-4 mb-4 font-display font-medium text-text-primary
+                          [&_h2]:m-0 [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-text-primary
+                          [&_h2]:text-[clamp(24px,3vw,32px)] [&_h2]:leading-[1.15] [&_h2]:tracking-[-0.02em]
+                          [&_p]:m-0 [&_p]:font-display [&_p]:font-medium [&_p]:text-text-primary
+                          [&_p]:text-[clamp(24px,3vw,32px)] [&_p]:leading-[1.15] [&_p]:tracking-[-0.02em]
+                          group-hover:text-text-brand-primary transition-colors
+                        "
+                      />
+                      <EditableRichText
+                        field={post.summary}
+                        className="
+                          mb-5 max-w-[52ch]
+                          [&_p]:m-0 [&_p]:text-[16px] [&_p]:leading-[1.6] [&_p]:text-text-secondary
+                        "
+                      />
+                      <EditableRichText
+                        field={post.author}
+                        as="div"
+                        className="text-[13px] text-text-tertiary"
+                      />
+                    </div>
+                  </div>
+                </a>
+              )
+            }
+
+            const isFirstInGrid = index === 1
+            return (
+              <div
+                className={
+                  isFirstInGrid
+                    ? 'border-t-[0.5px] border-border-primary pt-12'
+                    : ''
+                }
+              >
+                <a href={href} className="group block no-underline">
+                  <div className="mb-5 overflow-hidden rounded-lg border-[0.5px] border-border-primary bg-bg-secondary">
+                    <EditableImage
+                      field={post.cover}
+                      className="block aspect-[16/9] w-full object-cover"
+                    />
+                  </div>
+                  <PostMeta
+                    category={post.category}
+                    publishedAt={post.publishedAt}
+                    readingTime={post.readingTime}
+                  />
+                  <EditableRichText
+                    field={post.title}
+                    className="
+                      mt-3 mb-3 font-display font-medium text-text-primary
+                      [&_h3]:m-0 [&_h3]:font-display [&_h3]:font-medium [&_h3]:text-text-primary
+                      [&_h3]:text-[22px] [&_h3]:leading-[1.2] [&_h3]:tracking-[-0.01em]
+                      [&_p]:m-0 [&_p]:font-display [&_p]:font-medium [&_p]:text-text-primary
+                      [&_p]:text-[22px] [&_p]:leading-[1.2] [&_p]:tracking-[-0.01em]
+                      group-hover:text-text-brand-primary transition-colors
+                    "
+                  />
+                  <EditableRichText
+                    field={post.summary}
+                    className="
+                      [&_p]:m-0 [&_p]:text-[15px] [&_p]:leading-[1.6] [&_p]:text-text-secondary
+                    "
+                  />
+                </a>
+              </div>
+            )
+          }}
+          className="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 [&>*:first-child]:md:col-span-2"
+        />
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/BlogIndex/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { BlogIndexComponent } from './component'
+
+export const BlogIndex = defineSection({
+  name: 'BlogIndex',
+  category: 'Blog',
+  schema,
+  component: BlogIndexComponent,
+})

package/dist/template/agntcms/sections/BlogIndex/schema.ts

@@ -0,0 +1,33 @@
+import { ImageField, ListField, RichTextField, TextField } from '@agntcms/next'
+
+export const schema = {
+  // ALL CAPS section label.
+  eyebrow: { kind: 'richText' as const, default: 'Writing' },
+
+  // Page headline.
+  headline: {
+    kind: 'richText' as const,
+    default: '# Blog.',
+  },
+
+  // Standfirst under the headline.
+  intro: {
+    kind: 'richText' as const,
+    default:
+      'Notes on the product, the philosophy, and the open-source progress. ' +
+      'Short pieces, written in the open.',
+  },
+
+  // List of posts. The first item is rendered as the large "featured" card
+  // at the top of the index. Remaining items render in a 2-up grid.
+  posts: ListField({
+    title: RichTextField,
+    summary: RichTextField,
+    href: TextField,
+    cover: ImageField,
+    category: RichTextField,
+    publishedAt: RichTextField,
+    author: RichTextField,
+    readingTime: RichTextField,
+  }),
+}

package/dist/template/agntcms/sections/BlogIndexHeader/component.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { EditableRichText, EditableText, EditableList } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Category = SlotItem<typeof schema.categories.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly categories: EditableSlot<'list', ReadonlyArray<Category>>
+}
+
+export function BlogIndexHeaderComponent({ eyebrow, headline, lead, categories }: Props) {
+  return (
+    <section className="bg-paper-2 border-b border-hairline">
+      <div className="mx-auto w-full max-w-[1280px] px-8 pt-[88px] pb-8">
+        <EditableRichText
+          field={eyebrow}
+          className="[&_p]:font-mono [&_p]:font-medium [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+        />
+        <div className="mt-3 max-w-[720px] [&_h1]:m-0 [&_h1]:font-display [&_h1]:font-semibold [&_h1]:text-ink [&_h1]:text-[72px] [&_h1]:leading-[1.05] [&_h1]:tracking-[-0.03em] [&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[72px] [&_h2]:leading-[1.05] [&_h2]:tracking-[-0.03em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[72px] [&_p]:leading-[1.05] [&_p]:tracking-[-0.03em] [&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold">
+          <EditableRichText field={headline} />
+        </div>
+        <EditableRichText
+          field={lead}
+          className="mt-5 max-w-[620px] [&_p]:m-0 [&_p]:text-[19px] [&_p]:leading-[1.55] [&_p]:text-ink-2"
+        />
+        <EditableList
+          field={categories}
+          itemSchema={schema.categories.itemSchema}
+          className="mt-8 flex flex-wrap gap-2"
+          renderItem={(c) => (
+            <span className="inline-flex items-center border border-hairline bg-transparent px-3.5 py-[7px] font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-2">
+              <EditableText field={c.label} as="span" />
+            </span>
+          )}
+        />
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/BlogIndexHeader/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { BlogIndexHeaderComponent } from './component'
+
+export const BlogIndexHeader = defineSection({
+  name: 'BlogIndexHeader',
+  category: 'Blog',
+  schema,
+  component: BlogIndexHeaderComponent,
+})

package/dist/template/agntcms/sections/BlogIndexHeader/schema.ts

@@ -0,0 +1,8 @@
+import { RichTextField, TextField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  lead: RichTextField,
+  categories: ListField({ label: TextField }),
+}

package/dist/template/agntcms/sections/BlogPostBody/component.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { EditableRichText } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+
+interface Props {
+  readonly body: EditableSlot<'richText', string>
+}
+
+export function BlogPostBodyComponent({ body }: Props) {
+  return (
+    <section className="bg-bg-primary">
+      <div className="mx-auto w-full max-w-[720px] px-8 pb-24">
+        <div
+          className="
+            [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-text-primary
+            [&_h2]:!text-[26px] [&_h2]:!leading-[1.2] [&_h2]:!tracking-[-0.02em]
+            [&_h2]:mt-14 [&_h2]:mb-4
+            [&_h3]:font-display [&_h3]:font-medium [&_h3]:text-text-primary
+            [&_h3]:!text-[19px] [&_h3]:!leading-[1.3] [&_h3]:!tracking-[-0.01em]
+            [&_h3]:mt-10 [&_h3]:mb-3
+            [&_p]:my-4 [&_p]:text-[17px] [&_p]:leading-[1.7] [&_p]:text-text-primary
+            [&_a]:text-text-brand-primary [&_a]:underline [&_a]:underline-offset-[3px] hover:[&_a]:no-underline
+            [&_strong]:font-medium [&_strong]:text-text-primary
+            [&_em]:italic
+            [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6
+            [&_ol]:my-4 [&_ol]:list-decimal [&_ol]:pl-6
+            [&_li]:my-1.5 [&_li]:text-[17px] [&_li]:leading-[1.7] [&_li]:text-text-primary
+            [&_li_p]:my-1
+            [&_code]:font-mono [&_code]:text-[14px] [&_code]:font-normal
+            [&_code]:text-text-brand-primary [&_code]:bg-bg-brand-primary
+            [&_code]:px-[6px] [&_code]:py-[2px] [&_code]:rounded-sm
+            [&_pre]:my-6 [&_pre]:bg-bg-brand-primary [&_pre]:rounded-lg
+            [&_pre]:px-5 [&_pre]:py-4 [&_pre]:overflow-x-auto
+            [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-[1.7]
+            [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-text-primary [&_pre_code]:rounded-none
+            [&_blockquote]:my-8 [&_blockquote]:not-italic
+            [&_blockquote]:bg-bg-secondary [&_blockquote]:border-l-2 [&_blockquote]:border-border-brand
+            [&_blockquote]:rounded-r-lg [&_blockquote]:px-5 [&_blockquote]:py-4
+            [&_blockquote_p]:m-0 [&_blockquote_p]:text-[16px] [&_blockquote_p]:leading-[1.65] [&_blockquote_p]:text-text-primary
+            [&_hr]:my-12 [&_hr]:border-0 [&_hr]:border-t-[0.5px] [&_hr]:border-border-primary
+            [&_img]:my-8 [&_img]:rounded-lg [&_img]:border-[0.5px] [&_img]:border-border-primary
+          "
+        >
+          <EditableRichText field={body} />
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/BlogPostBody/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { BlogPostBodyComponent } from './component'
+
+export const BlogPostBody = defineSection({
+  name: 'BlogPostBody',
+  category: 'Blog',
+  schema,
+  component: BlogPostBodyComponent,
+})

package/dist/template/agntcms/sections/BlogPostBody/schema.ts

@@ -0,0 +1,10 @@
+export const schema = {
+  // The full article body. Headings (##, ###), paragraphs, lists,
+  // blockquotes, inline code, and code blocks are all supported.
+  body: {
+    kind: 'richText' as const,
+    default:
+      '## A heading\n\nWrite the article body here. Use `##` and `###` for sub-headings, ' +
+      'plain paragraphs for prose, and `> ` for pull quotes.\n',
+  },
+}