To get set up locally, first confirm you have NodeJS installed. If not, you can download it here.
Make sure you are using the version noted in .nvmrc. If you have nvm
installed, you can run nvm use
to switch to the correct version.
Next, install the dependencies. We use yarn
, which you can install with npm install -g yarn
if you don't already have it.
yarn
To run the site locally, spin-up a development server:
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start modifying pages found in /pages/*.tsx
. The page auto-updates as you edit the file.
To add a new blog post, create a new markdown file in the posts
directory. The file must by markdown file ending in .md
and is recommended to use the following format: YYYY-MM-DD-title-of-post.md
. The file must also include the following frontmatter:
---
title: Title of the post
publishDate: Month D, YYYY
---
For example:
---
title: PDX DAO is Dead
publishDate: November 8, 2023
---
The title
field will be rendered at the top of the post, followed by the body of markdown content. For more information on how to write markdown, see this guide.
The following markdown features are supported:
- Bold/strong
- Wrap text in
**
- ie
**bold me**
- bold me
- Wrap text in
- Italics/emphasis
- Wrap text in
_
- ie
_italicize me_
- italicize me
- Wrap text in
- Strikethrough
- Wrap text in
~~
- ie
~~strike me~~
strike me
- Wrap text in
- Links
- Wrap text label in
[]
followed by URL in()
- ie
[link me](https://some.url)
- link me
- Wrap text label in
- Lists (Ordered and unordered)
- Begin lines with
1.
for an ordered list - Begin lines with
-
for a bulleted list - Indent with 2 spaces per level to nest lists
- ie
1. This is an ordered list item
- Begin lines with
- Tables - See below for more information
- KaTeX mathematical expressions - See below for more information
- Blockquotes
- Begin line with
>
- ie
> This is placed into a callout box
-
This is placed into a callout box
- Begin line with
Tables are supported in markdown. They can be created using the following syntax:
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Data 1 | Data 2 | Data 3 |
Text alignment can be assigned using colons below the header as follows (text position inside cells does not matter):
| Left aligned | Centered | Right aligned |
| :---------------- | :------: | ------------: |
| Regular text | ๐ | 1234.56 |
| More regular text | ๐ | 78.90 |
...displays as:
Left aligned | Centered | Right aligned |
---|---|---|
Regular text | ๐ | 1234.56 |
More regular text | ๐ | 78.90 |
KaTeX mathematical expressions are supported. They look something like this when written:
Inline: $f(x)=\frac{1}{\sqrt{2\pi}}e^{-\frac{x^2}{2}}$
...displays as:
Block:
$$
f(x)=\frac{1}{\sqrt{2\pi}}e^{-\frac{x^2}{2}}
$$
...displays as:
Learn more about supported KaTeX mathematical expressions
The list of MoP assets to be rendered on /mop
is found in src/data/mop.ts
. Each item has the following format:
{
title: "Title of the asset",
src: NewAsset,
grayUrl: "/assets/mop/a-new-mop-image-asset-bw.pdf"
colorUrl: "/assets/mop/a-new-mop-image-asset-color.pdf"
}
The grayUrl
and colorUrl
are the public paths to the black and white and color versions of the asset, respectively. These can be images, or PDFs, but the imported image (previewed on the page) cannot be a PDF. Must have at least one of grayUrl or colorUrl.
The NewAsset
is the image asset to be shown on the page imported as a component. This should be done at the top of the src/data/mop.ts
file:
import NewAsset from "@/../public/assets/mop/a-new-mop-image-asset.png"
To add an asset:
- Add the image or PDF assets to the
public/assets/mop
directory - Import the display image as a component at the top of
src/data/mop.ts
- Add a new item to the
mop
array insrc/data/mop.ts
with thetitle
,src
,grayUrl
, andcolorUrl
fields as shown above (or similar to existing arra yitems)
For a post to be live, these changes must make it to the main
branch.
- First, commit changes, open a PR against the
dev
branch, and merge - Deploy the site by opening a PR from
dev
branch intomain
- Once PR is open, confirm the Vercel checks pass, and the build preview looks the way you expect
- Contact admin to merge the PR
This project uses Chakra-UI for styling. You can find the documentation for the components here.
Chakra-UI components can be imported from @chakra-ui/react
. For example:
import { Box, Text } from "@chakra-ui/react"
These can be styled using "style props" which resemble css properties, but are passed as props to the component, using "camel case" (ie. lowerFirstThenUpper
). For example:
Instead of writing:
.box {
background-color: red;
padding: 20px;
}
.big {
font-size: 24px;
}
<div className="box">
<p className="big">Hello, world!</p>
</div>
You would write:
<Box backgroundColor="red" padding="20px">
<Text fontSize="24px">Hello, world!</Text>
</Box>
Or, you could use the Chakra-UI shorthand tokens and abbreviated prop names:
<Box bgColor="red" p="5">
<Text fontSize="2xl">Hello, world!</Text>
</Box>
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository