Add the examples to the docs (#344)

* Add the examples to the docs

* Remove dot slash

docs/pages/5-examples.markdown

@@ -1,9 +1,15 @@
 ---
 layout: page
 title: UI Examples
-permalink: /examples/
+permalink: /ui-examples/
 nav_order: 5
 has_children: true
 ---
 
-## UI Examples
+## UI Examples
+
+Here are some simple examples demonstrating the various PCUI elements:
+
+<div class="highlighter-rouge">
+    <iframe src="examples.html" width="100%" height="500px"></iframe>
+</div>

docs/pages/5-examples/5-examples-todo.markdown

@@ -46,9 +46,10 @@ export const TodoList = (props) => {
         items[key].done = !items[key].done;
         observer.set('items', items);
     };
+    const textInputLink = { observer, path: 'input' };
     return (
         <Container class='todo'>
-            <TextInput blurOnEnter={false} placeholder='enter item' binding={new BindingTwoWay()} link={{ observer, path: 'input' }} onChange={addItem}/>
+            <TextInput blurOnEnter={false} placeholder='enter item' binding={new BindingTwoWay()} link={textInputLink} onChange={addItem}/>
             <SelectInput type="number" options={[{v: 0, t: 'Show all items'}, {v: 1, t: 'Show active items'}, {v: 2, t: 'Show done items'}]} onChange={setListFilter} />
             <Container>
                 {Object.keys(items).map(key => {

examples/index.html

@@ -25,6 +25,27 @@
         .pcui-treeview-item-icon {
             font-size: 14px;
         }
+
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #20292b;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #5b7073;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #f60;
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: #2c393c;
+        }
     </style>
     <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
     <script type="importmap">

package.json

@@ -39,14 +39,15 @@
     "build": "rollup -c && npm run bundle:styles",
     "build:es6": "rollup -c --environment target:es6",
     "build:icons": "cd ./utils && node ./build-font-icons.mjs",
-    "build:docsite:local": "cd docs && bundle exec jekyll build --config _config_local.yml && cd .. && npm run build:storybook",
-    "build:docsite:production": "cd docs && bundle exec jekyll build --config _config.yml && cd .. && npm run build:storybook",
+    "build:docsite:local": "cd docs && bundle exec jekyll build --config _config_local.yml && cd .. && npm run build:storybook && npm run copy:examples",
+    "build:docsite:production": "cd docs && bundle exec jekyll build --config _config.yml && cd .. && npm run build:storybook && npm run copy:examples",
     "build:react:es6": "rollup -c --environment target:react:es6",
     "build:storybook": "cross-env ENVIRONMENT=production storybook build -o ./docs/_site/storybook",
     "build:styles": "rollup -c --environment target:styles",
     "build:typedocs": "typedoc",
     "build:types": "tsc --project ./tsconfig.json --declaration --emitDeclarationOnly --outDir types && tsc --project ./react/tsconfig.json --declaration --emitDeclarationOnly --outDir ./react/types",
     "bundle:styles": "scss-bundle -e ./src/scss/themes/grey/colors.scss -o ./dist/theme-colors-grey.scss && scss-bundle -e ./src/scss/themes/green/colors.scss -o ./dist/theme-colors-green.scss && scss-bundle -e ./src/scss/themes/grey/style.scss -o ./dist/pcui-theme-grey.scss && scss-bundle -e ./src/scss/themes/green/style.scss -o ./dist/pcui-theme-green.scss && scss-bundle -e ./src/scss/variables.scss -o ./dist/variables.scss && scss-bundle -e ./src/scss/fonts.scss -o ./dist/fonts.scss",
+    "copy:examples": "shx cp examples/index.html docs/_site/ui-examples/examples.html && shx cp -fr examples/elements docs/_site/ui-examples/ && shx cp -fr examples/utilities docs/_site/ui-examples/",
     "lint": "eslint --ext .ts,.tsx src",
     "lint:styles": "stylelint src/**/*.scss",
     "serve:docs": "serve docs/_site",