AWDS

---

Table of Contents

• Colors
• Typography
  • Presets
  • Markdown
    • Bold and Italic
    • Blockquote
    • Link
    • Lists
    • Code Block
• Core Components
  • EmptyState
  • Footer
  • Greeting
  • Header
  • Breadcrumbs
  • ExternalLink
  • Message
  • PhotoOfMe
  • Buttons
  • TidbytGif
  • PostedModified
• Music Components
  • Page Headings
  • List Items
    • ConcertListItem
    • ConcertInfo
    • ListItem
    • IndexPage
  • Badges
    • DidNotPlay
    • HappeningNow
    • Upcoming
    • BucketList
  • CalendarUrlCopy
  • AttendActions
  • VenueMap
  • Filters
  • BackForwardNavigation

Colors

---

Typography

Presets

I use "presets" to avoid needing to think about what combination of font-size, font-weight, line-height, and letter-spacing to use.

I got this idea from Dan Mall, and I use 7 because of The magical number seven, plus or minus two.

There's a -bold variant for each preset, which boldens it correctly according to the existing font-weight.

Markdown

The examples below show how Markdown elements will render within MDX:

Bold and Italic

This is bold, this is italic, this is bold and italic

Blockquote

Single line:

This is a single line blockquote.

Multi-line:

This is a blockquote.

With multiple lines.

Continuing more text in the block quote. If it gets too long, the line will wrap.

Nested:

This is a blockquote with nested blockquotes.

This is a nested blockquote.

This is a nested blockquote.

This is a nested blockquote.

Link

This is a link

Lists

Unordered:

• Item 1
  • Item 1.1
  • Item 1.2
    • Item 1.2.1
    • Item 1.2.2
• Item 2
  • Item 2.1
  • Item 2.2
    • Item 2.2.1
    • Item 2.2.2
• Item 3
  • Item 3.1
  • Item 3.2
    • Item 3.2.1
    • Item 3.2.2

Ordered:

1. Item 1
2. Item 2
3. Item 3

Code Block

const a = 1;
const b = 2;
const c = a + b;

---

Core Components

EmptyState

This component is used to display a consistent empty state message when there is no content to show. It supports a title and an optional description.

---

Footer

Global footer on this website.

---

Greeting

This is the banner at the top of my index page.

---

Header

Global header on this website.

The breadcrumbs slot is passed to this component as a child.

It falls back to a generic "andrewwestling.com" link if the breadcrumbs slot is not passed.

---

Breadcrumbs

This component provides navigation breadcrumbs showing the current location on the site.

When we're on the home page, it shows a menu instead of breadcrumbs.

When used within a container (like the header), the breadcrumbs will scroll horizontally when the container overflows.

---

ExternalLink

This component is used to display an external link with an icon.

---

Message

I use this block at the top of pages to give a TL;DR summary of what you're about to read.

---

PhotoOfMe

This is the photo of me on the index page, and the caption/attribution.

---

Buttons

These are buttons, for use wherever a button is needed.

---

TidbytGif

This is to display a Tidbyt preview gif with the nicer "rounded" appearance from Pixlet's UI.

---

PostedModified

This is the datestamp at the bottom of project pages.

---

Music Components

These components are specific to the music section of the website.

Page Headings

List Items

ConcertListItem

This is used when listing concerts on a page.

It shows the concert title, the group name, and the date in a compact format.

• Falls back to the group name if a concert title isn't available
• Shows badges for upcoming concerts and other statuses

ConcertInfo

This is used to show detailed information about a concert.

It shows:

• The concert title and date
• The venue and its location
• The performing group
• The conductor(s)

Optional props:

• showAttendActions - Show "AttendActions" buttons for upcoming concerts
• titleAsLink - The defaults to being a hyperlink; we can set this to false for Concert Detail pages since we don't need a link to a page we're already on

---

ListItem

This is a generic list item component used throughout the music section to display various types of data in a consistent format. It shows a title as a link with optional statistics and badges. The component supports two types of badges:

• titleBadges - badges that appear next to the title (example: Bucket List badge)
• statsBadges - badges that appear next to the stats (example: Upcoming/Happening Now badges)

---

IndexPage

This is a layout component used for index/listing pages throughout the music section. It displays a title and a list of items using the ListItem component.

If the items have sortable fields, it will display a sort dropdown.

---

Badges

DidNotPlay

This badge is used to indicate when I didn't play in a particular concert, or it didn't take place as planned.

---

HappeningNow

This badge is used to indicate concerts that are currently in progress (within 2 hours of start time).

---

Upcoming

This badge is used to indicate upcoming concerts.

---

BucketList

This badge is used to show if a work is on my musical Bucket List.

It also links to the Bucket List page so you will know to go there and check it out.

---

CalendarUrlCopy

This component shows and provides a button to copy the URL of my concert calendar to the clipboard.

---

AttendActions

This component is used to display actions for attending a concert.

It will not render if the concert date is in the past.

---

VenueMap

The VenueMap component displays an interactive map centered on a venue's location. It's used on venue pages to show where venues are located.

---

Filters

The Filters component provides a multi-select dropdown for filtering concerts by various criteria.

---

BackForwardNavigation

This component provides generic back/forward navigation arrows with tooltips. It's designed to work with any type of item and shows disabled states when there is no previous or next item available.

The component is generic and accepts the following props:

• prev and next: The items to navigate to (or null if at the beginning/end)
• getHref: Function to generate the URL for an item
• getTooltip: Function to generate the tooltip text for an item