excerpt #11 Mickey Mouse hello everybody

Install

npm install gatsby-remark-images gatsby-plugin-sharp

How to use

javascript
// In your gatsby-config.js
plugins: [
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },
]

Usage in Markdown

inline image from "src/assets" folder

You can reference an image using the relative path, where that path is relative to the location of the Markdown file you’re typing in.

![Alt text here](./image.jpg)

By default, the text Alt text here will be used as the alt attribute of the generated img tag. If an empty alt attribute like alt="" is wished, a reserved keyword GATSBY_EMPTY_ALT can be used.

![GATSBY_EMPTY_ALT](./image.png)

regular video "src/assets" folder:

iframe video from embed "url":

random h2

random h4

yet random h4

inlineCode sample styling

blockquote element sample styling (text generator link)

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then

The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz.linkBrawny gods just

Code blocks styling with Prism react render plugin

html

html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Blockquote nice text</title>
  </head>
  <body>
    <div className="nice-text">
      <h4>
        Processes images in markdown so they can be used in the production build
      </h4>
      <FaInfo className="nice-text-icon" />
      Some text
    </div>
  </body>
</html>

css

css
.nice-text {
  background: var(--clr-primary-10);
  padding: 2rem 1.5rem;
  color: var(--clr-grey-1);
  border-radius: var(--radius);
  border-left: 3px solid var(--clr-primary-5);
  position: relative;
}

.nice-text h4,
.nice-text p {
  color: var(--clr-black);
}

.nice-text p {
  margin-bottom: 0;
}

@media screen and (min-width: 992px) {
  .nice-text {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

.nice-text-icon {
  position: absolute;
  top: 0;
  left: -3px;
  background: var(--clr-white);
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 6px solid var(--clr-white);
  color: var(--clr-primary-5);
}

js

js
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { Blockquote, Code, Headings } from './src/components/PostComponents'

const components = {
  h2: Headings.myH2,
  h4: Headings.myH4,
  inlineCode: Code,
  blockquote: Blockquote,
}

export const wrapMDX = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

jsx

jsx
const IndexPage = ({ data }) => {
  const {
    allMdx: { nodes: posts },
  } = data
  const titleRecentPosts = `Recent posts`

  return (
    <Layout>
      <Hero showPerson />
      <Posts posts={posts} title={titleRecentPosts} />
    </Layout>
  )
}

export default IndexPage

undefined

undefined
{
    "arrowParens": "avoid",
    "semi": false,
    "singleQuote": true
  }