Skip to content

Gatsby Starter Catalyst Blog

This implements gatsby-theme-catalyst-core, gatsby-theme-catalyst-blog, gatsby-theme-catalyst-footer, and gatsby-theme-catalyst-header-side. This provides a basic starting point for developing your own personal blog and portfolio site.

Read the docs on Github

About Gatsby Theme Catalyst

The Catalyst series of themes and starters for GatsbyJS were designed to provide an opinionated set of integrated themes and starters that can be used to accelerate your next Gatsby project. The vision is for one “core” theme in which most dependencies and components are contained followed by progressively more styled and refined child themes and starters. These themes rely heavily on Theme-UI and MDX.

Markdown Tests

The following section provides some formatting tests the themes and starters. If you are changing styles using Theme-UI you should be able to quickly see changes on this page. Most common markdown elements are included and at the end there is an example blog post to test.

Headers

H1

H2

H3

H4

H5
H6

Code

Pre-formatted code blocks are used for writing about programming or markup source code. Rather than forming normal paragraphs, the lines of a code block are interpreted literally. Markdown wraps a code block in both <pre> and <code> tags.

To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph.

This is a simple code block.
//This is a jsx code block.
import awesome from "radical"
const Super = () => {
return (
<div>
<h1>Super Awesome</h1>
</div>
)
}
export default Super

Embeds

MDX embeds powered by gatsby-mdx-embed. Support for automatically including Twitter, Youtube, Instagram and other social media directly in your markdown.

Blockquotes

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

This is an example link.

This link has no title attribute and is in a longer set of words. Let’s see how long I can type before I get bored and stop typing. Here is me filling in some more spaces. And wow we have encountered another link in the wild!

Images

Alt Image Text 1

Tables

HeadingAnother HeadingMore Heading
Something124891Default is volcanoes.
Strange1098731Some longer text to test how it looks
Is1874Oranges are better than apples.
Happening912641969To the moon and back.

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists.

Unordered lists use asterisks, pluses, and hyphens — interchangably — as list markers:

  • Red
  • Green
  • Blue

Ordered lists use numbers followed by periods:

  1. Bird
  2. McHale
  3. Parish

Emphasis

single underscores

Some more text in italics to get a better feel for how it can look. Here it goes just continuing on.

double asterisks

Some more BOLD text. This really draws attention to it and helps to give a feel for what it looks like just a bit longer.

Anchor 1

This section is used to test react-scroll. It also gives the feel for the flow of some text and an image, similar to a blog post.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus vestibulum aliquam. Duis sapien est, elementum sed ultrices nec, pharetra et magna. Pellentesque quis nulla et neque fringilla ornare eget mollis nisi. Aliquam erat volutpat. Donec tempus porttitor mi, ut semper urna posuere nec. In in turpis in dui consequat viverra.

Alt Image Text 1

In dictum rutrum purus, aliquet dapibus ante. Nullam non felis at ex consectetur laoreet vitae eu dui. Curabitur orci massa, tincidunt quis elementum a, maximus non erat. Curabitur semper turpis a nibh hendrerit porttitor. Morbi accumsan iaculis orci in molestie. Donec at elementum nisl. Phasellus tellus nulla, dapibus vitae gravida sed, euismod eget urna.

Cras at odio bibendum leo dictum porta. Curabitur mattis elementum neque id tristique. Nam laoreet sed quam bibendum viverra. Aenean sit amet suscipit sem. Mauris convallis ex non nibh interdum pulvinar. Suspendisse potenti. Vivamus odio velit, luctus non interdum at, interdum nec tellus. Fusce non consequat erat, in vestibulum ligula. Praesent eu lacus non mi accumsan faucibus.

Here is an amazing block quote. Transcendent information that will inspire some amazing life changes for you.

Nullam sit amet magna leo. Suspendisse scelerisque pellentesque gravida. Nullam congue rhoncus tellus dapibus aliquam. Ut in risus odio. Ut vel odio laoreet, elementum ipsum id, elementum elit. Nunc convallis ex mi, at laoreet sem mattis eu. Aenean tempor tincidunt hendrerit. Proin nec sem mollis, viverra ligula a, sodales dolor. Nullam mauris massa, cursus pulvinar pretium sed, placerat ut nisl. Nunc congue porta augue vitae feugiat. Quisque placerat libero at lectus dictum, at mattis nisi consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat.

Interesting Sub-heading

Sed maximus urna malesuada, tempor sem semper, iaculis orci. Vestibulum augue risus, cursus volutpat orci sed, rutrum efficitur eros. Praesent vel orci id ex venenatis egestas. Morbi ac venenatis nulla. Vivamus lobortis volutpat lacus sed consequat. Aliquam in porta purus. Vestibulum scelerisque lobortis nibh sed lobortis.

Phasellus fermentum vestibulum nibh, a volutpat est sollicitudin ut. Proin eget justo viverra, mattis tortor at, sodales quam. Donec lacinia, diam ut iaculis varius, nibh ante pharetra turpis, quis tristique odio arcu convallis leo. Donec varius tellus ac fringilla rhoncus. Quisque vitae tristique turpis. Integer blandit lacinia neque at egestas. Maecenas ultrices nisi bibendum hendrerit blandit. Donec vitae libero quis tortor luctus porttitor non at nulla. Nam eget est ac mi ullamcorper pellentesque sit amet ac eros.

//This is a jsx code block.
import awesome from "radical"
const Super = () => {
return (
<div>
<h1>Super Awesome</h1>
</div>
)
}
export default Super

Quisque at ornare massa, nec accumsan justo. Praesent auctor at ipsum vitae sodales. Cras quis posuere lorem. Cras sed vehicula nisl. Aliquam accumsan posuere nulla eget tristique.

© 2020 Catalyst Blog