@@ -134,6 +134,11 @@ Now let's use the fix option of ESLint.
...
@@ -134,6 +134,11 @@ Now let's use the fix option of ESLint.
Our file gets formatted the same way Prettier did.
Our file gets formatted the same way Prettier did.
## How to create new page
You can find [a documentation under the doc folder](doc/how_to_create_new_page.md).
## Gatsby Starter Catalyst
## Gatsby Starter Catalyst
Basic starter that could be used as a barebones starting point for building a finished website. Implements `gatsby-theme-catalyst-core`, `gatsby-theme-catalyst-header-top`, and `gatsby-theme-catalyst-footer`.
Basic starter that could be used as a barebones starting point for building a finished website. Implements `gatsby-theme-catalyst-core`, `gatsby-theme-catalyst-header-top`, and `gatsby-theme-catalyst-footer`.
<SEO title="Home" />
<Box
Basic starter that could be used as a barebones starting point for building a finished website. Implements `gatsby-theme-catalyst-core`, `gatsby-theme-catalyst-header-top`, and `gatsby-theme-catalyst-footer`.
h1={12}
mr={-6}
[Read the docs on Github](https://github.com/ehowey/gatsby-theme-catalyst)
ml={-6}
m={0}
###### About Gatsby Theme Catalyst
mb={10}
mt={30}
The Catalyst series of themes and starters for [GatsbyJS](https://www.gatsbyjs.org/) 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](https://theme-ui.com/) and [MDX](https://mdxjs.com/getting-started/gatsby/).
##### 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.
```
```jsx
//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](https://gatsby-mdx-embed.netlify.app/). 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
<Text
> id sem consectetuer libero luctus adipiscing.
sx={{
fontSize: 40,
### Links
textAlign: 'center',
fontWeight: '700',
This is [an example](https://www.erichowey.dev) link.
color: 'black',
}}>
[This link](https://www.erichowey.dev) 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](https://www.erichowey.dev) in the wild!
Froggit aide les Dev, les Ops et les entreprises du numérique à protéger
leurs codes sources de l’espionnage industriel
</Text>
</Box>
### Images
| Strange | 1098731 | Some longer text to test how it looks |
| Is | 1874 | Oranges are better than apples. |
| Happening | 912641969 | To 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](https://www.npmjs.com/package/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.
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](https://www.google.com) 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](https://www.google.com) 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.
```jsx
//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.
