docs(examples): Generate HTML example with relative npm script

andreasonny83 · Sep 6, 2019 · 7a40bb4 · 7a40bb4
1 parent 4b4f023
commit 7a40bb4
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
diff --git a/example-html/index.html b/example-html/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>react-avataaars</title>
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
+    <script src="../lib/react-avataaars.js"></script>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      const hash = 'type-anything-here';
+      const options: Options = {
+        accessories: 'wayfarers',
+        accessoriesChance: 100,
+        clothesColor: 'heather',
+        eyes: 'happy',
+        hairColor: 'blonde',
+        mouth: 'twinkle',
+        style: 'circle',
+        top: 'hat',
+        topChance: 100,
+      };
+
+      ReactDOM.render(
+        <div>
+          <h1>React Avataaars without npm 🎉</h1>
+          <ReactAvataaars.Avatar style={{width: 300}} className="Avatar" options={options} hash={hash} size="200" />
+        </div>,
+        document.getElementById('root'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/example-html/style.css b/example-html/style.css
@@ -0,0 +1,15 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', Arial, sans-serif;
+}
+
+#root {
+  margin: 0 auto;
+  max-width: 600px;
+  text-align: center;
+}
+
+svg {
+  width: auto!important;
+}
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Avatar, Options } from '../src/index';
+import { Avatar, Options } from '../';
 import './App.css';
 
 export default class App extends React.Component {

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
   "scripts": {
     "build": "rimraf lib && webpack",
     "postbuild": "es-check es5 lib/react-avataaars.js",
+    "preexample": "npm run build",
     "example": "webpack-dev-server --config ./webpack.example.config.js --open",
     "preexample-html": "npm run build",
     "example-html": "open example-html/index.html",