Sample Page
gatsby-theme-musician comes with some components, utility classes, and plugins you can use out-of-the-box to help you write your content. You can see them in action here, and open sample-page.mdx
in your content folder to see the source.
For more information about writing in MDX, go to their website.
🎸 Theme Components
You can see these theme-specific components in action on the landing page (artist-landing-page.mdx
). Read more about these components in the Components Documentation.
Banner
Display the artist name, tagline, and social links configured in
src/gatsby-theme-musician/config
Releases
Display entries in
releases.yml
Shows
Display entries in
shows.yml
📐 Layout
Container
By default, page content takes the entire screen width. Use <Container>
to create a centered layout block with a maximum width (the default is 1024 px). Try removing the <Container>
opening and closing tags at the top and the bottom of this page and see what the page looks like.
Grids
Use the <Grids>
component to display your content in a grid. The grid content must be separated by two line-breaks each. (On small screens, the columns expand to entire screen width.)
hello world
hello!
what's up?
By default, the Grids consist of 3 columns. You can modify it by adding the columns
attribute.
this grid
contains
five
columns!
hurray!
🔹 Basic Elements
Paragraphs and Blocks
This is a regular text paragraph.
This paragraph is centered using className="text-center"
attribute.
And this paragraph is aligned right using className="text-right"
attribute.
<div>
element.
Lists
This is an unordered list with child lists:
- Vestibulum tristique tempor neque quis malesuada
- Duis dictum vitae tortor a porttitor
- Duis dictum vitae tortor a porttitor
- Duis dictum vitae tortor a porttitor
- Curabitur fringilla eros justo, id consequat dui scelerisque vitae
This is an ordered list:
- Vestibulum tristique tempor neque quis malesuada
- Duis dictum vitae tortor a porttitor
- Curabitur fringilla eros justo, id consequat dui scelerisque vitae
Images
Regular Markdown image
Regular Markdown image with hyperlink (click image to open)
HTML image with figcaption
Links
You can create hyperlinks with Markdown formatting or with regular HTML anchor element.
You can give them the appearance of a button with the following class names: .gtm-button
, .gtm-button-primary
, and .gtm-button-invert
.
Blockquote
Here is a blockquote. Lorem ipsum dolor sit amet, vis doctus iriure recteque te, alii disputationi eu eum.
Mollis aliquam senserit quo ad. Eam ad regione delenit gloriatur. At eos oporteat consetetur, id pri adhuc corpora. Stet vocibus explicari vim in, sed ne gloriatur elaboraret.
Eka
📻 Media
You can embed Youtube videos by using the <Youtube>
component included in this theme.
You can also embed from Spotify and Soundcloud simply by inserting the link in a separate line with two line breaks before and after it.
To embed from Spotify, insert a link to the album, track, playlist, or artist. You can get the link by clicking the ellipsis (⋯) after the item title on Spotify and choosing "Copy [Album, Track, etc] Link".
To embed from Soundcloud, insert a link to a track or a set.
To center the embedded Spotify or Soundcloud media, wrap it in a centered div.