gatsby

Gatsby Tutorial

May 27th, 2020

I'm baby humblebrag neutra taiyaki af vice bespoke locavore fanny pack ramps vexillologist succulents. Normcore etsy pour-over adaptogen skateboard fashion axe, bushwick food truck beard lumbersexual master cleanse actually deep v. Retro cardigan raw denim franzen kickstarter you probably haven't heard of them literally aesthetic snackwave four dollar toast. Keffiyeh synth umami, helvetica yr flexitarian jean shorts banh mi cardigan leggings letterpress paleo intelligentsia narwhal.

Gatsby MDX

Random Heading

More Examples

js
const firstName = 'john'
const lastName = 'smith'

Nice Text

I'm baby prism everyday carry post-ironic jean shorts venmo health goth, migas pok pok vape beard umami. Poutine plaid before they sold out cronut messenger bag, echo park hexagon tumblr +1 quinoa mumblecore paleo. Activated charcoal drinking vinegar VHS gentrify put a bird on it tousled.

React Components

counter

jsx
import React from 'react'
import styled from 'styled-components'
import { AiOutlineLike } from 'react-icons/ai'
const LikeButton = () => {
  const [value, setValue] = React.useState(0)
  return (
    <Wrapper>
      <div>
        <button onClick={() => setValue(value + 1)}>
          <AiOutlineLike />
        </button>
        <p>
          Liked the post?
          <br />
          Click thumbs up few times
        </p>
      </div>
      <span>+{value}</span>
    </Wrapper>
  )
}

Liked the post?
Click thumbs up few times

Videos

regular heading

nice title

inline code

console.log('hello there')

blockquote element

I'm baby prism everyday carry post-ironic jean shorts venmo health goth, migas

I'm baby gluten-free lo-fi tumblr, bicycle rights edison bulb green juice ennui next level viral jean shorts. Food truck godard street art migas fixie shaman paleo chia single-origin coffee poke pug portland flannel.

hello there

Javascript

js
// comments
const name = 'john'
const channel = 'coding addict'

function featuredProducts(data) {
  return data.filter(item => {
    return item.featured === true
  })
}
featuredProducts()

JSX

jsx
import React from 'react'

const Counter = () => {
  const [count, setCount] = React.useState(0)
  return (
    <section className="counter">
      <h4>show some love to MDX</h4>
      <h4>likes {count}</h4>
      <button className="btn btn-danger" onClick={() => setCount(count + 1)}>
        i like mdx
      </button>
    </section>
  )
}
export default Counter

HTML

html
<h1>hello world</h1>
<p class="random">random text</p>
<section class="contact">
  <div class="title">
    <h1>contact us</h1>
  </div>
</section>

CSS

css
max-width: 500px;
border-radius: var(--radius);
padding: 1rem 1.5rem;
background: var(--clr-grey-10);
text-align: center;

all posts