Wednesday, February 2, 2000 at 12 PM
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#dddddd
background#ffffff#050708
muted#666666#898989
highlight#efefef#333333
primary#f1553a
secondary#1d93b2
tertiary#b8c05d
accent#fcbb1a
surface#efefef#333333
border#666666#898989
active#050708#dddddd
selected#f1553a#f1553a
Typography
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.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
This is an example of this preset.
This is an example of this preset, but bold.
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.
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.
HomeBreadcrumbs
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.
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.
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.
Originally posted: 2021-01-23
Last updated: 2024-02-26
Music Components
These components are specific to the music section of the website.
Page Headings
Example Page Title
Example Section Heading
List Items
ConcertListItem
This is used when listing concerts on a page.
It extends the ListItem component, adding badges and a few other things that are specific to concerts.
- 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
expandedprop 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
Greenwich Village Orchestra: Fall Concert
Saturday, February 22, 2025 at 7:03 AMUpcoming
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-2021
1 concerts • 1 works
Carnegie Hall
New York, NY • 15 concerts
Gustav Mahler
12 works
New York Philharmonic
New York, NY • 8 concerts
Symphony No. 1 in E Minor
by Jean Sibelius
Symphony No. 1 in E Minor
by Jean SibeliusBucket List
Symphony No. 1 in E Minor
by Jean SibeliusBucket List
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.
Did not play
HappeningNow
This badge is used to indicate concerts that are currently in progress (within 2 hours of start time).
Happening now!
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.
https://andrewwestling.com/music/upcoming.icsAttendActions
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:
prevandnext: The items to navigate to (or null if at the beginning/end)getHref: Function to generate the URL for an itemgetTooltip: Function to generate the tooltip text for an item