Pages

Pages live in src/pages and are either .mdx or .jsx files.

Create a new page with the page package script:

$ yarn page path/to/my-new-page
# 🖨 Created: src/pages/path/to/my-new-page.mdx

Every page is a React component that receives two props:

• meta: the page's own meta object
• pages: an object containing all pages, keyed by pathname

JSX pages

You can author pages as a plain React component. The page component must be the default export.

export const meta = {
  title: 'My page title'
}

export default function MyPage ({ meta, pages }) {
  return <div>Hello world</div>
}

MDX pages

See the MDX docs for the Markdown + JSX syntax you can use in .mdx files.

export const meta = {
  title: 'My page title',
  description: 'Description for search engines',
  tags: ['post'],
  date: '2021-04-01'
}

# Hello world

Mix JSX into your Markdown.

<p>{props.meta.description}</p>

import Select from 'react-select'

<Select options={[
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' }
]} />

<strong>{props.page.description}</strong>

Syntax highlighting

Tropical just follows MDX's syntax highlighting guide. The provided <CodeBlock> component uses react-syntax-highlighter.

Page meta

The optionally exported meta object can contain any properties you wish, or none at all.

If present, the following properties will be used by Tropical (but you're free to use them too).

• title (string) — used for the page's <title> and the JSON Feed item's title (if the page appears in the feed)
• description (string) — used for the page's <meta name='description'>
• tags (array of strings) — the default JSON feed (src/feeds/posts.jsx) only includes pages that include a 'post' tag
• Layout (component) — alternative layout component
• date (string parsable by day.js) — default sorting mechanism for pagesWithTag (see below)

Working with meta.tags

You can use meta.tags for anything.

One obvious use is creating collections of pages — for example, a date-ordered collection that includes blog posts but not your homepage page. Tropical provides pagesWithTag for this common scenario.

import { pagesWithTag } from '../utils'

const blogPosts = pagesWithTag(props.pages, 'post')

<ul>
  {blogPosts.map(({ meta, urlPath }) => (
    <li>
      <a href={urlPath}>{meta.title}</a>
    </li>
  ))}
</ul>

Next: Components and using Fela for CSS