Blog Features

Intro

I’ve been building this blog from the ground up, and with the intent of eventually open sourcing it as a template. This post is a test post/playground where I test and showcase the different features of the blog.

A quick word about the stack

This blog is built with Next.js. Styling is done with Tailwind CSS. The blog posts are written in MDX, a flavour of Markdown that allows you to embed React components.

A quick word about the design

I attempted to prioritize beautiful typesetting. There are three typefaces used on this blog: IBM Plex Sans for UI elements and headers, Literata for body text (I prefer serif fonts for long form reading), and Twilio Sans Mono for code blocks.

Post Features

Post settings are set in the frontmatter of the post. Here’s the frontmatter for this post:

---
title: "Blog Features"
description: "This is a test post to showcase the different components of this blog."
date: "2022-08-01T12:24:13.637Z"
topics: ["Meta"]
hero: "/images/david.jpg"
published: true
toc: true
type: "post"
---

---
title: "Blog Features"
description: "This is a test post to showcase the different components of this blog."
date: "2022-08-01T12:24:13.637Z"
topics: ["Meta"]
hero: "/images/david.jpg"
published: true
toc: true
type: "post"
---

To display the table of contents on the left side of the page, add toc: true to the frontmatter of your post. Note, that the table of contents only displays h2 and h3 headers, i.e. ## and ###. h1 reserved for the title of the post.

Hero image

To display a hero image at the top of the page, add hero: "/path/to/image" to the frontmatter of your post.

Draft posts

If you do not wish to publish a post yet, add published: false to the frontmatter of your post.

General Features

Code view

The code blocks are rendered using a slightly modified rehype-pretty-code plugin.

```javascript title="Add two numbers" {2}
const add(a, b) => {
  return a + b;
}
```

Output

Add two numbers

const add(a, b) => {
  return a + b;
}

Mathematical equations

Mathematical equations are rendered using $\KaTeX$ . Use $ for inline equations and $$ for display equations.

If $x^2 + y^2 = 1$, then $y = \sqrt{1 - x^2}$.

In other words,

$$
\begin{align*}
x^2 + y^2 &= 1 \\
y &= \sqrt{1 - x^2}
\end{align*}
$$

Output

If $x^2 + y^2 = 1$ , then $y = \sqrt{1 - x^2}$ .

In other words,

\begin{align*} x^2 + y^2 &= 1 \\ y &= \sqrt{1 - x^2} \end{align*}

Images

Place images in /public/images. You can include them in your post like this:

![This will be the image caption](/images/spirited_away.jpg)

Output

This will be the image caption

Zoom zoom

All images wider than 780 pixels are wrapped around a react-medium-image-zoom component for a nice zoom effect. Try clicking on the image.

Footnotes

You can use footnotes as follows:

According to this study[^1], the...

[^1]: Smith, John. "The Effects of Artificial Intelligence on Society." Journal of Futuristic Technology 14.2 (2022): 45-61. Print.

Output

According to this study¹, the…

On Footnotes

Note, that the footnotes are rendered at the bottom of the page. If you are using this style of footnotes, place a ## References or a similar header at very last line of your post, to create a header for the footnotes. Note, that there is also an option for Tufte-style sidenotes (see below), which provide the same functionality. Try to decide which one you prefer, as using both will probably confuse your reader.

MDX Components

Alert boxes

Exclamation

Code

<Alert type="exclamation" title="Info">
  Please make sure you have backups before attempting this procedure.
</Alert>

Output

Info

Please make sure you have backups before attempting this procedure.

Warning

Code

<Alert type="warning" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

Output

Read carefully

Watch out for any errors or typos.

Info

Code

<Alert type="info" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

Output

Read carefully

Watch out for any errors or typos.

Info (no color)

Code

<Alert type="normal" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

Output

Read carefully

Watch out for any errors or typos.

Collapsible section

Code

<Collapsible title="Quadratic equation" open={true}>
A quadratic equation is an equation that can be written as $ax^2 + bx + c = 0$, where $a \neq 0$.

The general formula used to solve the roots of a quadratic equation is

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.
$$
</Collapsible>

Code

<Collapsible title="Quadratic equation" open={true}>
A quadratic equation is an equation that can be written as $ax^2 + bx + c = 0$, where $a \neq 0$.

The general formula used to solve the roots of a quadratic equation is

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.
$$
</Collapsible>

Output

: A quadratic equation is an equation that can be written as $ax^2 + bx + c = 0$ , where $a \neq 0$ .
The general formula used to solve the roots of a quadratic equation is
$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.$

Links

You can use styled link components to display links.

<Linked href="https://example.com">Visit example.com</Linked>
<Download href="https://example.com">Download example files (.zip)</Download>

Output

Visit example.com

Download example files (.zip)

Bordered area

You can create a bordered area for styled text.

<BorderedArea>
###### **synchronicity | ˌsiNGkrəˈnisədē |**
<span className="font-sans">noun</span>
1. the simultaneous occurrence of events which appear significantly related but have no discernible causal connection: such synchronicity is quite staggering.
2. another term for synchrony (sense 1).
</BorderedArea>

<BorderedArea>
###### **synchronicity | ˌsiNGkrəˈnisədē |**
<span className="font-sans">noun</span>
1. the simultaneous occurrence of events which appear significantly related but have no discernible causal connection: such synchronicity is quite staggering.
2. another term for synchrony (sense 1).
</BorderedArea>

Output

synchronicity | ˌsiNGkrəˈnisədē |

noun

the simultaneous occurrence of events which appear significantly related but have no discernible causal connection: such synchronicity is quite staggering.
another term for synchrony (sense 1).

YouTube

You can embed YouTube videos using the YouTube component. id is the ID of the video, i.e. the part after v= in the URL. title is the title of the video, which is used as the title attribute of the iframe.

<YouTube title="Wintergatan – Marble Machine" id="IvUU8joBb1Q" />

Output

Tweets

You can create hardcoded Tweets. Although it takes a bit of effort to create one, the benefit is that it’s served as static HTML, i.e. no Twitter trackers are loaded, and it stays up even if the original Tweet is deleted. Idea from Josh Comeau.

Code

<Tweet
  user="Macaulay Culkin"
  username="@IncredibleCulk"
  verified="true"
  avatarurl="https://pbs.twimg.com/profile_images/968572702788239360/KL-zulbA_400x400.jpg"
  date="2020-08-27T12:13:00.000Z"
  comments="55,351"
  retweets="403,524"
  likes="2M"
  userurl="https://twitter.com/IncredibleCulk"
  tweetUrl="https://twitter.com/IncredibleCulk/status/1298730289737293824"
>
  Hey guys, wanna feel old?
  
  I'm 40.
  
  You're welcome.
</Tweet>

<Tweet
  user="Macaulay Culkin"
  username="@IncredibleCulk"
  verified="true"
  avatarurl="https://pbs.twimg.com/profile_images/968572702788239360/KL-zulbA_400x400.jpg"
  date="2020-08-27T12:13:00.000Z"
  comments="55,351"
  retweets="403,524"
  likes="2M"
  userurl="https://twitter.com/IncredibleCulk"
  tweetUrl="https://twitter.com/IncredibleCulk/status/1298730289737293824"
>
  Hey guys, wanna feel old?
  
  I'm 40.
  
  You're welcome.
</Tweet>

Output

Macaulay Culkin

@IncredibleCulk

•

27. Aug 2020

Hey guys, wanna feel old?

I’m 40.

You’re welcome.

55,351

403,524

Read on Twitter

Sidenotes

Tufte-style sidenotes. On desktop, they will be shown on the right, on smaller screens they are displayed within the text.

Code

Laboris anim commodo duis duis officia<Sidenote>This is a sidenote.
On desktop, it will be shown on the right, on mobile it is displayed
within the text.</Sidenote> anim excepteur sit exercitation
consectetur velit et laboris nostrud magna.

Laboris anim commodo duis duis officia<Sidenote>This is a sidenote.
On desktop, it will be shown on the right, on mobile it is displayed
within the text.</Sidenote> anim excepteur sit exercitation
consectetur velit et laboris nostrud magna.

Output

Laboris anim commodo duis duis officiaThis is a sidenote. On desktop, it will be shown on the right, on smaller screens it is displayed within the text. anim excepteur sit exercitation consectetur velit et laboris nostrud magna.

References

Smith, John. “The Effects of Artificial Intelligence on Society.” Journal of Futuristic Technology 14.2 (2022): 45-61. Print. ↩

Blog Features

Intro

A quick word about the stack

A quick word about the design

Post Features

Table of Contents

Hero image

Draft posts

General Features

Code view

Output

Mathematical equations

Output

Images

Output

Zoom zoom

Footnotes

Output

On Footnotes

MDX Components

Alert boxes

Exclamation

Output

Info

Warning

Output

Read carefully

Info

Output

Read carefully

Info (no color)

Output

Read carefully

Collapsible section

Output

Links

Output

Bordered area

Output

synchronicity | ˌsiNGkrəˈnisədē |

YouTube

Output

Tweets

Code

Output

Sidenotes

Code

Output

References

References