Add code examples

site/gatsby-browser.js

@@ -1,4 +1,5 @@
 import '@fortawesome/fontawesome-svg-core/styles.css';
+import 'prismjs/themes/prism.css';
 import './src/global.css';
 
 import { config } from '@fortawesome/fontawesome-svg-core';

site/package-lock.json

@@ -3467,6 +3467,17 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -4403,6 +4414,12 @@
         "slash": "^3.0.0"
       }
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -6921,6 +6938,15 @@
         "slash": "^3.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
@@ -11172,6 +11198,14 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
+      "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -12410,6 +12444,12 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -13742,6 +13782,12 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

site/package.json

@@ -18,7 +18,9 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "escape-html": "^1.0.3",
     "gatsby": "^2.23.12",
+    "prismjs": "^1.20.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },

site/src/components/SourceFile.js

@@ -0,0 +1,13 @@
+import escape from 'escape-html';
+import React from 'react';
+
+export default function SourceFile({ src }) {
+  return (
+    <pre>
+      <code
+        className="language-javascript"
+        dangerouslySetInnerHTML={{ __html: escape(src) }}
+      />
+    </pre>
+  );
+}

site/src/examples/index.js

@@ -0,0 +1,10 @@
+import { EmojiButton } from '@joeattardi/emoji-button';
+
+const picker = new EmojiButton();
+const trigger = document.querySelector('.trigger');
+
+picker.on('emoji', emoji => {
+  trigger.innerHTML = emoji;
+});
+
+trigger.addEventListener('click', () => picker.togglePicker());

site/src/pages/index.js

@@ -9,11 +9,14 @@ import {
   faSmile,
   faThumbsUp
 } from '@fortawesome/free-solid-svg-icons';
-
 import { EmojiButton } from '@joeattardi/emoji-button';
+import Prism from 'prismjs';
 
 import Feature from '../components/Feature';
 import Layout from '../components/Layout';
+import SourceFile from '../components/SourceFile';
+
+import indexExample from '!!raw-loader!../examples/index';
 
 import styles from './index.module.css';
 
@@ -22,6 +25,10 @@ export default function Home() {
   const [picker, setPicker] = useState(null);
   const [emoji, setEmoji] = useState('😎');
 
+  useEffect(() => {
+    Prism.highlightAll();
+  }, []);
+
   useEffect(() => {
     const pickerObj = new EmojiButton({
       theme: 'auto',
@@ -53,6 +60,8 @@ export default function Home() {
         </button>
       </section>
 
+      <SourceFile src={indexExample} />
+
       <h2>Features</h2>
       <section>
         <Feature icon={faJs} title="Vanilla JavaScript">