docs: add images support to mdx

Author: tatinacher

example/package.json

@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "develop": "gatsby develop",
+    "start": "gatsby develop",
     "build": "gatsby build"
   },
   "dependencies": {
@@ -23,4 +23,4 @@
     "react-dom": "^16.13.1",
     "styled-components": "^5.2.0"
   }
-}
+}

example/src/assets/images/index.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { graphql, useStaticQuery } from 'gatsby';
+
+/**    To add new image inside query:
+/*
+/*    imageName: file(relativePath: { regex: "PATH_TO_IMAGE" }) {
+/*      childImageSharp {
+/*        resize(width: 180, height: 180, cropFocus: CENTER) {
+/*           src
+/*        }
+/*       }
+/*     }
+*/
+
+export const Image = ({ image }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      allImageSharp {
+        edges {
+          node {
+            ... on ImageSharp {
+              resize(width: 125, height: 125, rotate: 180) {
+                src
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  const imageSrc = data[image]?.childImageSharp?.resize?.src;
+
+  return imageSrc ? <img src={imageSrc} alt={image} /> : null;
+};

example/src/woly/atoms/button/example.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Image } from '../../../assets/images';
+
+export const ButtonImage = () => <Image image="imageName" />;
 
 const Icon = () => (
   <svg

example/src/woly/atoms/button/usage.mdx

@@ -6,12 +6,14 @@ package: 'woly'
 
 import * as button from './index';
 import { New } from './new';
-import { Example } from './example';
+import { ButtonImage, Example } from './example';
 
 Button allow users to take actions, and make choices, with a single tap.
 
 ## Using buttons
 
+<ButtonImage />
+
 ### Usage
 
 ```tsx

example/src/woly/atoms/chips/example.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Image } from '../../../assets/images';
+
+export const ChipImage = () => <Image image="imageName" />;

example/src/woly/atoms/chips/usage.mdx

@@ -4,8 +4,12 @@ category: atoms
 package: 'woly'
 ---
 
+import { ChipImage } from './example';
+
 Hello! It is chips
 
+<ChipImage />
+
 ### Props
 
 | Name    | Type                            | Default    | Description                                                |

gatsby-theme-woly/gatsby-config.js

@@ -19,6 +19,8 @@ module.exports = (themeOptions) => {
           remarkPlugins: [require('./plugins/remark-plugin.js')],
         },
       },
+      `gatsby-plugin-sharp`,
+      `gatsby-transformer-sharp`,
       {
         resolve: 'gatsby-plugin-styled-components',
         options: { displayName: IS_DEV },

gatsby-theme-woly/package.json

@@ -42,6 +42,8 @@
   "devDependencies": {
     "babel-plugin-styled-components": "^1.11.1",
     "gatsby": "^2.24.47",
+    "gatsby-plugin-sharp": "^2.6.38",
+    "gatsby-transformer-sharp": "^2.5.16",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "styled-components": "^5.1.1"