AWDS

"Andrew Westling Design System" - it's exactly what it says on the box

This is just my kitchen sink for testing the local theme on this website.

Table of Contents

Colors

text#050708
background#ffffff
muted#666666
highlight#efefef
surface#f8f9fa
border#efefef
selected#fcbb1a
primary#f1553a
secondary#1d93b2
tertiary#b8c05d
accent#fcbb1a

Core Components

Footer

Global footer on this website.

Greeting

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

👋 Hi, I'm Andrew M Westling, a software person in Brooklyn, NY.

Header

Global header on this website.

Message

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

This is a Message. I use it at the top of page to summarize what the page is about.

Maybe it's just a response to a shortened attention span, but it's nice to have a TL;DR sometimes.

Sometimes, these include links to external pages. To include an external link, do it like this.

PhotoOfMe

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

Photo of Andrew at Fort Greene Park
At Fort Greene Park in Brooklyn, June 2022. Photo by Candice McCardle

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.

Tidbyt image

PostedModified

This is the datestamp at the bottom of project pages.

Originally posted: 2021-01-23

Last updated: 2024-02-26

Music Components

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

List Items

ConcertListItem

This is used when listing concerts on a page.

  • Shows the concert title, the group name, and the date
  • Falls back to the group name if a concert title isn't available
  • Has an optional expanded prop that shows the group name and the date

Greenwich Village Orchestra: Fall Concert

Saturday, January 1, 2000 at 12 PM

Greenwich Village Orchestra

Wednesday, February 2, 2000 at 12 PM

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.

2020-20211 concerts • 1 works
Carnegie HallNew York, NY • 15 concerts
New York PhilharmonicNew York, NY • 8 concerts

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.

Did not play

Upcoming

This badge is used to indicate upcoming concerts.

Upcoming

Maps

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

Filters

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

Navigation

This component provides navigation links to different sections of the music database, showing the count of items in each section.