fix(output): didnt transform md to jsx

thorecaspersen · Jun 16, 2019 · 64156fe · 64156fe
1 parent 35f8d70
commit 64156fe
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 117 deletions.
diff --git a/lib/flotFyrTransformer.js b/lib/flotFyrTransformer.js
@@ -46,7 +46,7 @@ module.exports = function(src, dest, markdownOptions) {
 
       // if its a numbered Files, then remove number
       if (markdownOptions.numberedFiles) {
-        filename = filename.split(".")[0];
+        filename = filename.split(".")[1];
       }
 
       return through(function(chunk, enc, done) {
@@ -59,10 +59,10 @@ module.exports = function(src, dest, markdownOptions) {
           },
           markdownOptions
         );
-        // const jsx = toComponentModule(output, markdownOptions);
-        // const beautifulJsx = prettier.format(jsx, prettierOption);
+        const jsx = toComponentModule(output, markdownOptions);
+        const beautifulJsx = prettier.format(jsx, prettierOption);
 
-        done(null, output);
+        done(null, beautifulJsx);
       });
     }
   };

diff --git a/output/1.testmarkdown.js b/output/1.testmarkdown.js
@@ -1,114 +1,152 @@
----
-title: Everything is ok
-quantity: 834
-prependJs:
-  - "const Timer = require('./timer')"
-  - "import { Watcher } from './watcher'"
----
-# An h1 header
-
-{{ <headline /> }}
-Paragraphs are separated by a blank line. 
-
-2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
-look like:
-
-  * this one
-  * that one
-
-> Block quotes are
-> written like so.
-
-## An h2 header
-
-Here's a numbered list:
-
- 1. first item
- 2. second item
- 3. third item
-
-Note again how the actual text starts at 4 columns in (4 characters
-from the left side). Here's a code sample:
-
-    # Let me re-iterate ...
-    for i in 1 .. 10 { do-something(i) }
-
-As you probably guessed, indented 4 spaces. By the way, instead of {{ <LetsDoThis /> }}
-indenting the block, you can use delimited blocks, if you like:
-
-~~~
-define foobar() {
-    print "Welcome to flavor country!";
+/*---
+Everything is ok
+---*/
+import React from 'react';
+const Timer = require('./timer');
+import { Watcher } from './watcher';
+import headline from 'semantic-ui-react/headline';
+import LetsDoThis from 'tequila-ui/LetsDoThis';
+import FancyReactComponent from 'antd/FancyReactComponent';
+import quotes from 'tequila-ui/quotes';
+
+const frontMatter = {
+  title: 'Everything is ok',
+  quantity: 834
+};
+
+export default class Testmarkdown extends React.PureComponent {
+  render() {
+    const props = this.props;
+    return (
+      <div>
+        <headline>An h1 header</headline>
+        <headline />
+        <p>Paragraphs are separated by a blank line. </p>
+        <p>
+          2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and{' '}
+          <code>monospace</code>. Itemized lists look like:
+        </p>
+        <ul>
+          <li>this one</li>
+          <li>that one</li>
+        </ul>
+        <quotes>
+          <p>Block quotes are written like so.</p>
+        </quotes>
+        <h2>An h2 header</h2>
+        <p>Here's a numbered list:</p>
+        <ol>
+          <li>first item</li>
+          <li>second item</li>
+          <li>third item</li>
+        </ol>
+        <p>
+          Note again how the actual text starts at 4 columns in (4 characters
+          from the left side). Here's a code sample:
+        </p>
+        <headline>Let me re-iterate ...</headline>
+        <p>
+          {' '}
+          for i in 1 .. 10 {'{'} do-something(i) {'}'}
+        </p>
+        <p>
+          As you probably guessed, indented 4 spaces. By the way, instead of{' '}
+          <LetsDoThis />
+          indenting the block, you can use delimited blocks, if you like:
+        </p>
+        <pre>
+          <code>
+            define foobar() {'{'}
+            {'\n'}
+            {'    '}print "Welcome to flavor country!";{'\n'}
+            {'}'}
+            {'\n'}
+          </code>
+        </pre>
+        <p>
+          <img src="/images/yaktocat.png" alt="Image of Yaktocat" />
+        </p>
+        <FancyReactComponent />
+        <p>
+          (which makes copying & pasting easier). You can optionally mark the
+          delimited block for Pandoc to syntax highlight it:
+        </p>
+        <pre>
+          <code className="language-python">
+            import time{'\n'}# Quick, count to ten!{'\n'}for i in range(10):
+            {'\n'}
+            {'    '}# (but not *too* quick){'\n'}
+            {'    '}time.sleep(0.5){'\n'}
+            {'    '}print i{'\n'}
+          </code>
+        </pre>
+        <pre>
+          <code className="language-bash">
+            $ cd dillinger{'\n'}$ npm install -d{'\n'}$ node app{'\n'}
+          </code>
+        </pre>
+        <h3>An h3 header</h3>
+        <p>Now a nested list:</p>
+        <ol>
+          <li>
+            <p>First, get these ingredients:</p>
+            <ul>
+              <li>carrots</li>
+              <li>celery</li>
+              <li>lentils</li>
+            </ul>
+          </li>
+          <li>
+            <p>Boil some water.</p>
+          </li>
+          <li>
+            <p>Dump everything in the pot and follow this algorithm:</p>
+            <p>
+              {' '}
+              find wooden spoon uncover pot stir cover pot balance wooden spoon
+              precariously on pot handle wait 10 minutes goto first step (or
+              shut off burner when done)
+            </p>
+          </li>
+        </ol>
+        <p>
+          Here's a link to <a href="http://foo.bar">a website</a>, to a{' '}
+          <a href="local-doc.html">local doc</a>, and to a{' '}
+          <a href="#an-h2-header">section heading in the current doc</a>. Here's
+          a footnote [^1].
+        </p>
+        <p>[^1]: Footnote text goes here.</p>
+        <details>
+          <summary>Spoiler text</summary>
+          whatever
+        </details>
+
+        <table>
+          <thead>
+            <tr>
+              <th>First Header</th>
+              <th>Second Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Content Cell</td>
+              <td>Content Cell</td>
+            </tr>
+            <tr>
+              <td>Content Cell</td>
+              <td>Content Cell</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>
+          named links to <a href="http://google.com/">Google</a>
+          <br />
+          <a href="http://fest.com/">http://fest.com/</a>
+        </p>
+        <headline>React test</headline>
+        <FancyReactComponent />
+      </div>
+    );
+  }
 }
-~~~
-
-![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
-
-{{ <FancyReactComponent /> }}
-(which makes copying & pasting easier). You can optionally mark the
-delimited block for Pandoc to syntax highlight it:
-
-~~~python
-import time
-# Quick, count to ten!
-for i in range(10):
-    # (but not *too* quick)
-    time.sleep(0.5)
-    print i
-~~~
-
-```bash
-$ cd dillinger
-$ npm install -d
-$ node app
-```
-
-
-
-### An h3 header
-
-Now a nested list:
-
- 1. First, get these ingredients:
-
-      * carrots
-      * celery
-      * lentils
-
- 2. Boil some water.
-
- 3. Dump everything in the pot and follow
-    this algorithm:
-
-        find wooden spoon
-        uncover pot
-        stir
-        cover pot
-        balance wooden spoon precariously on pot handle
-        wait 10 minutes
-        goto first step (or shut off burner when done)
-
-Here's a link to [a website](http://foo.bar), to a [local
-doc](local-doc.html), and to a [section heading in the current
-doc](#an-h2-header). Here's a footnote [^1].
-
-[^1]: Footnote text goes here.
-
-
-<details>
-  <summary>Spoiler text</summary>
-  whatever
-</details>
-
-First Header  | Second Header
-------------- | -------------
-Content Cell  | Content Cell
-Content Cell  | Content Cell
-
-named links to [Google](http://google.com/)  
-<http://fest.com/>
-
-
-
-# React test
-{{ <FancyReactComponent /> }}