Pages
Pages live in src/pages
and are either .mdx
or .jsx
files. Both options can export a meta
object.
Create a new page from your terminal:
yarn page path/to/my-new-page
Every page receives two props:
meta
: the page's ownmeta
objectpages
: an object containing all of the site's page components, keyed by pathname
JSX pages
You can author pages as a plain React component. That component should be the default
export.
export const meta = {
title: 'My page title'
}
export default function MyPage () {
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.
import Select from 'react-select'
<Select options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' }
]} />
Syntax highlighting
Tropical extends MDX using prism-react-renderer and the provided <TropicalCodeBlock>
component (as per MDX's guide)
Image references in MDX
Markdown-style image references won't result in importing the asset as a URL.

You can either use Vite's public directory:

- assumes image is in public/photo.jpg
- image filename isn't hashed for production
or (because MDX lets you use JSX) you can just use a regular import
and <img>
like you would in a React component:
# Hello world
import photo from './photo.jpg'
<img src={photo} />
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'stitle
(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'
tagLayout
(component) — alternative layout component
Working with meta.tags
Tags are flexible, but one obvious use is creating collections of pages — for example, a date-ordered collection that includes blog posts but not your homepage or "About Us" page.
Tropical provides a pagesWithTag
helper 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