docs: small enhancements (#1870)

Hacker0x01 · Aug 26, 2019 · 031f22c · 031f22c
1 parent ce1ea3f
commit 031f22c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 11 deletions.
diff --git a/docs-site/public/index.html b/docs-site/public/index.html
@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="A simple and reusable datepicker component for React.">
   <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, datepicker">
-  <title>React.js Datepicker crafted by HackerOne</title>
+  <title>React Datepicker crafted by HackerOne</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
 </head>
 

diff --git a/docs-site/src/components/App/index.js b/docs-site/src/components/App/index.js
@@ -10,7 +10,7 @@ const Root = () => {
     <div>
       <div className="hero">
         <div className="hero__content">
-          <h1 className="hero__title">ReactJS Datepicker</h1>
+          <h1 className="hero__title">React Datepicker</h1>
           <div className="hero__crafted-by">
             <a href="https://hackerone.com" className="hero__crafted-by-link">
               Crafted by{" "}
@@ -25,15 +25,15 @@ const Root = () => {
           </div>
           <div className="hero__example">
             <DatePicker
-              autoFocus
+              open
               selected={startDate}
               onChange={date => setStartDate(date)}
             />
           </div>
         </div>
       </div>
       <div className="wrapper">
-        <h1>ReactJS Datepicker</h1>
+        <h1>React Datepicker</h1>
         <p className="badges">
           <a href="https://npmjs.org/package/react-datepicker">
             <img
@@ -75,6 +75,10 @@ const Root = () => {
         <p>
           <code>yarn add react-datepicker</code>
         </p>
+        <p>
+          Below are examples which also can be edited directly via the editor on
+          the left side and will be rendered on the right.
+        </p>
       </div>
       <div className="wrapper">
         <ExampleComponents />

diff --git a/docs-site/src/components/Example/edit-regular.svg b/docs-site/src/components/Example/edit-regular.svg
diff --git a/docs-site/src/components/Example/index.js b/docs-site/src/components/Example/index.js
@@ -11,6 +11,7 @@ import ptBR from "date-fns/locale/pt-BR";
 import slugify from "slugify";
 import range from "lodash/range";
 import prismGitHubTheme from "prism-react-renderer/themes/github";
+import editIcon from "./edit-regular.svg";
 
 export default class CodeExampleComponent extends React.Component {
   static propTypes = {
@@ -31,7 +32,7 @@ export default class CodeExampleComponent extends React.Component {
         <h2 className="example__heading">{title}</h2>
         <div className="row">
           <LiveProvider
-            code={component}
+            code={component.trim()}
             scope={{
               PropTypes,
               useState,
@@ -44,9 +45,14 @@ export default class CodeExampleComponent extends React.Component {
             theme={prismGitHubTheme}
           >
             <pre className="column example__code">
+              <img
+                src={editIcon}
+                className="example__code__edit_icon"
+                alt="edit icon"
+              />
               <LiveEditor />
             </pre>
-            <div className="column">
+            <div className="column example__preview">
               <LiveError />
               <LivePreview />
             </div>

diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
@@ -67,9 +67,10 @@
   }
 
   &__code {
+    position: relative;
     background-color: #f5f8fb;
-    padding: 20px;
-    margin: 0 -20px 20px;
+    padding: 5px;
+    margin: 0 -20px;
     border-top: 1px solid #d8e4ef;
     border-bottom: 1px solid #d8e4ef;
     overflow-x: auto;
@@ -82,10 +83,20 @@
       margin-bottom: 0;
     }
 
-    code {
-      background: none;
-      border: 0;
+    textarea:focus {
+      outline: 0;
     }
+
+    &__edit_icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 20px;
+      z-index: 10;
+    }
+  }
+  &__preview {
+    padding: 20px 0;
   }
 }