feat: improves UI and adds documentation

demo/gatsby-browser.js

@@ -1 +1,2 @@
 import 'semantic-ui-css/semantic.min.css';
+import './style.css';

demo/src/home.md

@@ -1,3 +1,33 @@
-# Welcome
+import ColorPlay from './elements/play/ColorPlay';
 
-This is the home page.
+# Welcome to Plume demo :tada:
+
+This gatsby theme allows you to easily build a documentation website.
+
+## Easy to start with :ok_hand:
+
+On the first run, the theme will create some files to begin with: now the only thing you will have to do will be to begin write some documentation !
+
+> **Note :** See [installation instructions](/instructions/installation/) and [usage information](/instructions/usage/) for more details
+
+## Powered by MDX :muscle:
+
+_Plume_ theme allows you to write your documentation using your own React components, so if you need custom UI elements on your documentation - just do a React component and use it in your document !
+
+## Playground included :gift:
+
+Since you will probably use this theme to make a React documentation anyway, we decided to give you the ability to produce a **live playground editor** for your code !
+
+For instance, this is a playground for _Colored Buttons_: you can toggle the editor by clicking on **Show the code**, edit the code and run it !
+
+<ColorPlay />
+
+## Fully customisable :pencil:
+
+**Theme shadowing** is a gatsby feature that allows you to replace any file / component of the theme by your own if you want to.
+
+In making the theme, we purposedly made some components explicitly available for shadowing. The intent is to use this feature for maximal customization power - but making the most commonly customized files easily accessible.
+
+For more details on how to customize the theme, check the [theme customization](/instructions/usage/) instructions.
+
+> **Note :** We used this feature to produce this theme around semantic-ui in order to override the _colors_ and the _navigation tree_.

demo/src/instructions/installation.md

@@ -0,0 +1,9 @@
+---
+title: Installation
+---
+
+# Installation instructions
+
+> **Note :** TODO - must be tested before submission
+
+- `gatsby new my-awesome-documentation https://github.com/mbeaudru/gatsby-theme-plume/tree/master/minimal-demo`

demo/src/instructions/usage.md

@@ -0,0 +1,45 @@
+---
+title: Usage
+---
+
+# How to use
+
+## Content creation
+
+### MDX
+
+- Use frontmatter category & title properties to make your content appear into the tree.
+
+## Theme customization
+
+**Theme shadowing** is a gatsby feature that allows you to replace any file / component of the theme by your own if you want to.
+
+In making the theme, we purposedly made some components explicitly available for shadowing. The intent is to use this feature for maximal customization power - but making the most commonly customized files easily accessible.
+
+### Files you probably want to shadow
+
+For minor customization, those files should be sufficient. If the default appeareance already satisfies you, shadowing only those files should do the trick:
+
+- _colors.js_
+
+As the name implies, this file contains the colors used to make the documentation: change those and you can easily add your touch to the site, without heavy changes.
+
+- _meta.js_
+
+At the moment, only contains the _siteName_ key that you will want to override.
+
+- _tags.js_
+
+This file contains all the style used to produce the html tags for your markdown. If you need to customize how the headers, table or anything of this kind are rendered, shadow this file, copy its content and customize !
+
+### Files you might shadow
+
+If you need a higher degree of customization, here are the files you will probably have to shadow:
+
+- _themeConfig.js_
+
+Contains some global css styles and font rendering settings (family, size).
+
+- every files of _components_ folder
+
+I extracted most of the _dumb_ components used to produce the UI in this folder so that you can easily find them and override them.

demo/style.css

@@ -0,0 +1,4 @@
+html,
+body {
+  font-size: 16px;
+}

theme/gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
       resolve: `gatsby-plugin-mdx`,
       options: {
         extensions: [`.mdx`, `.md`],
+        remarkPlugins: [require('remark-emoji')],
       },
     },
     {

theme/package.json

@@ -36,6 +36,7 @@
     "react-icons": "^3.7.0",
     "react-live": "^2.1.2",
     "react-treebeard": "^3.2.4",
+    "remark-emoji": "^2.0.2",
     "slugify": "^1.3.4",
     "styled-components": "^4.3.2"
   },

theme/src/mdx/components/tags.js → theme/src/tags.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { colorSelector, gutterSelector } from '../../utils/themeSelectors';
+import { colorSelector, gutterSelector } from './utils/themeSelectors';
 
 // eslint-disable-next-line
 export const h1 = styled.h1`
@@ -15,19 +15,19 @@ export const h2 = styled.h2`
 `;
 
 export const h3 = styled.h3`
-  font-size: 2rem;
+  font-size: 1.4rem;
 `;
 
 export const h4 = styled.h4`
-  font-size: 1.8rem;
+  font-size: 1.1rem;
 `;
 
 export const h5 = styled.h5`
-  font-size: 1.6rem;
+  font-size: 0.8rem;
 `;
 
 export const h6 = styled.h6`
-  font-size: 1.4rem;
+  font-size: 0.6rem;
 `;
 
 export const p = styled.p`
@@ -53,10 +53,12 @@ export const ul = styled.ul`
   padding-left: ${gutterSelector('md')};
   list-style: disc outside;
   margin-bottom: ${gutterSelector('sm')};
+  color: ${colorSelector('normal')};
 `;
 
 export const li = styled.li`
   padding: 2px 0;
+  color: ${colorSelector('normal')};
 
   ul:first-child {
     margin-top: 5px;
@@ -74,6 +76,7 @@ export const table = styled.table`
   td {
     padding: ${gutterSelector('xs')} ${gutterSelector('md')};
     text-align: center;
+    color: ${colorSelector('normal')};
   }
 
   thead tr {

theme/src/templates/mdx-page.js

@@ -10,7 +10,7 @@ import Layout from '../layouts/MDXPageLayout';
 import LocationContext from '../contexts/LocationContext';
 import Playground from '../mdx/components/playground/Playground';
 
-import * as tags from '../mdx/components/tags';
+import * as tags from '../tags';
 import meta from '../meta';
 
 const components = { ...tags, Playground };

yarn.lock

@@ -7580,7 +7580,7 @@ no-case@^2.2.0, no-case@^2.3.2:
   dependencies:
     lower-case "^1.1.1"
 
-node-emoji@^1.6.1:
+node-emoji@^1.6.1, node-emoji@^1.8.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
   integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
@@ -9463,6 +9463,14 @@ relay-runtime@2.0.0:
     "@babel/runtime" "^7.0.0"
     fbjs "^1.0.0"
 
+remark-emoji@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/remark-emoji/-/remark-emoji-2.0.2.tgz#49c134021132c192ee4cceed1988ec9b8ced7eb8"
+  integrity sha512-E8ZOa7Sx1YS9ivWJ8U9xpA8ldzZ4VPAfyUaKqhr1/Pr5Q8ZdQHrpDg6S+rPzMw8t89KNViB/oG9ZdJSFDrUXpA==
+  dependencies:
+    node-emoji "^1.8.1"
+    unist-util-visit "^1.4.0"
+
 remark-mdx@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.1.0.tgz#35fde951866411ff1dde2a243f43ec7e90bc25e5"