1 files changed, 55 insertions, 70 deletions

diff --git a/src/index.tsx b/src/index.tsx
index 2ebe975..aa786ac 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,11 +9,12 @@ import {
 import {
   Benzin,
   Markdown,
-  ContentSection,
+  Heading,
 } from './lib';
 
 import Header from './demo/Header/Header';
 import Window from './demo/Window/Window';
+import content from './demo/content.md';
 import icon from './assets/icon.svg';
 
 const useStyles = makeStyles(theme => ({
@@ -55,24 +56,23 @@ const CustomPage: React.FC = () => {
 
   return (
     <>
-      <ContentSection sectionName="Render custom markdown document" level={2}>
-        <p>
-          This should be a link to a valid markdown file. Response should give the file contents.
-          If you copy README file from GitHub, make sure you provide link to raw view.
-        </p>
-        <p>
-          <TextField
-            fullWidth
-            inputRef={inputEl}
-            variant="outlined"
-            color="secondary"
-            label="Markdown url"
-          />
-        </p>
-        <Button variant="contained" color="secondary" onClick={handleParseUrl}>
-          Render!
-        </Button>
-      </ContentSection>
+      <Heading level={2}>Render custom markdown document</Heading>
+      <p>
+        This should be a link to a valid markdown file. Response should give the file contents.
+        If you copy README file from GitHub, make sure you provide link to raw view.
+      </p>
+      <p>
+        <TextField
+          fullWidth
+          inputRef={inputEl}
+          variant="outlined"
+          color="secondary"
+          label="Markdown url"
+        />
+      </p>
+      <Button variant="contained" color="secondary" onClick={handleParseUrl}>
+        Render!
+      </Button>
       <Markdown url={url} />
     </>
   );
@@ -91,29 +91,28 @@ const LivePreviewPage: React.FC<LivePropTypes> = ({ setLivePreviewData }) => {
 
   return (
     <>
-      <ContentSection sectionName="Markdown live preview" level={2}>
-        <p>
-          Start typing and see your text rendered on the left window!
-          You can find the list of all Markdown features
-          {' '}
-          <Link href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">
-            here
-          </Link>
-          . (some of them are yet in progress).
-          We recommend starting with # Header.
-        </p>
-        <p>
-          <TextField
-            fullWidth
-            multiline
-            inputRef={inputEl}
-            variant="outlined"
-            color="primary"
-            label="Markdown"
-            onChange={handleRender}
-          />
-        </p>
-      </ContentSection>
+      <Heading level={2}>Markdown live preview</Heading>
+      <p>
+        Start typing and see your text rendered on the left window!
+        You can find the list of all Markdown features
+        {' '}
+        <Link href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">
+          here
+        </Link>
+        . (some of them are yet in progress).
+        We recommend starting with # Header.
+      </p>
+      <p>
+        <TextField
+          fullWidth
+          multiline
+          inputRef={inputEl}
+          variant="outlined"
+          color="primary"
+          label="Markdown"
+          onChange={handleRender}
+        />
+      </p>
     </>
   );
 };
@@ -130,19 +129,6 @@ const App: React.FC = () => {
 
   const url = pageMap[page];
   const fileName = url?.slice(url.lastIndexOf('/') + 1);
-  const info = [
-    /* eslint-disable max-len */
-    `## Markdown\n [Markdown file](${url}) *(...${fileName})* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:`,
-    'Switch between tabs on the header to explore other markdown templates. :recycle: ',
-    'Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:',
-    '## How do I use this feature?',
-    '```',
-    'import Markdown from \'react-benzin\';',
-    'const data = \'# Header\\nHello, *world!*\';',
-    'ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));',
-    '```',
-    /* eslint-enable max-len */
-  ].join('\n');
 
   let primaryWindowContent = <Markdown url={url} />;
   if (page === 'custom') primaryWindowContent = <CustomPage />;
@@ -150,6 +136,19 @@ const App: React.FC = () => {
     primaryWindowContent = <Markdown data={livePreviewData || '# Start typing in the right window!'} />;
   }
 
+  const tryButton = (
+    <p className={classes.promoButton}>
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={handleGoLivePreview}
+      >
+        Try it yourself!
+      </Button>
+    </p>
+  );
+
   return (
     <Benzin>
       <Header
@@ -169,21 +168,7 @@ const App: React.FC = () => {
           {
             (page === 'live preview')
               ? <LivePreviewPage setLivePreviewData={setLivePreviewData} />
-              : (
-                <>
-                  <Markdown data={info} />
-                  <p className={classes.promoButton}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      size="large"
-                      onClick={handleGoLivePreview}
-                    >
-                      Try it yourself!
-                    </Button>
-                  </p>
-                </>
-              )
+              : <Markdown url={content} context={{ tryButton, fileName }} />
           }
         </div>
       </Window>