Content Style Guide

Welcome! This page is a guide to the different visual styles used on this blog. Specific formatting is used to make articles clear, easy to read, and engaging. Here’s what it all means.

Basic Text Formatting

To help guide readers through articles, standard text styles are used for emphasis.

• Bold text is used for strong emphasis.
• Italic text is used for gentle emphasis or to highlight certain terms.
• Text that is struck out indicates something that is no longer relevant.

Lists

Lists are used to organize information. They can be bulleted or numbered.

Bulleted List:

• An item of interest.
• Another related item.
  • A sub-item with more detail.

Numbered List:

1. The first step in a process.
2. The second step.
3. The final step.

Links

Links to other pages look like this: An example link to the About page.

External links automatically open in a new tab: GitHub, MDN Web Docs, and React documentation are all examples of external links that will open in new windows.

Text styled this way can be clicked to navigate to another page or an external website.

Quotes

When a person or source is quoted, the text is displayed in a distinct block like this:

This is a quote. It stands out from the regular text to show that it's a direct quotation from another source.

Interactive Elements

Certain content blocks, like embedded media and diagrams, have interactive features available only on post pages.

• Hover over these blocks to reveal an expand button (↗).
• Click the expand button to view the content in a full-screen modal.
• The modal view automatically adjusts to the content's size.
• Press the Escape key or click outside the content to close the modal.

Special Content Blocks

To make content more dynamic and helpful, a variety of special blocks are used to highlight information.

Callout Boxes

These boxes draw attention to specific types of information. Each color and title has a different purpose.

Besides the basic callout box types illustrated above, there can be variants with custom emojis and titles.

Embedded Content

Sometimes content from other websites is embedded directly in an article.

Webpage Preview: A preview of another webpage may be displayed, which can be clicked to visit the page.

react-spectrum.adobe.com

React Aria Components

Craft world-class accessible components with custom styles.

YouTube Video: Videos may also be embedded, which can be played directly on the page.

Tweets

Tweets can be embedded and expanded for easier viewing.

Tables

Tables are used to present structured information in a clear and organized way.

For Technical Articles

In more technical posts, specialized formatting is used for code and diagrams.

Code Blocks

Code examples are presented in formatted blocks with syntax highlighting to make them easy to read.

// This is what a JavaScript code block looks like.
function greet(name) {
  console.log(`Hello, ${name}!`)
}

Some code blocks may have a title. They might also be partially collapsed, with a button to expand the hidden lines, which is useful for focusing on the most important parts of a long example.

def fibonacci(n):
3 collapsed lines
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

Other times, the differences between two pieces of code may be shown. Lines with a + and a green background have been added, while lines with a - and a red background have been removed.

# Shell commands
npm install
npm run dev
pnpm install
pnpm run dev

Diagrams

Diagrams may also be used to illustrate concepts and workflows. You can also view and copy the source code of each diagram.

The diagram syntax used here is D2.

Site-Wide Features

Light and Dark Themes

You can switch between light and dark themes using the button in the top-right corner.

By default, the theme matches your system's settings. When you manually select a theme, that choice is saved and overrides the system setting. To restore the automatic theme selection, you need to clear this website's cookies in your browser.

Wrapping up

This guide should help readers understand the look and feel of the blog. Enjoy reading!