[feature] be able to render tables from markdown (#469)

gabrielcsapo · web-flow · commit ce6064964531 · 2020-04-14T13:17:57.000-04:00
* [feature] be able to render tables from markdown

* merged highlight-code-test into compile-markdown-test and adds tests to ensure table is being rendered correctly

* fix failing test
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
@@ -105,3 +105,7 @@ h3 > a:before {
   width: 0em;
   margin-left: -0.9em;
 }
+
+table {
+  width: 100%;
+}
diff --git a/addon/styles/tailwind.config.js b/addon/styles/tailwind.config.js
@@ -797,6 +797,7 @@ module.exports = {
     position: ['responsive'],
     inset: ['responsive'],
     resize: ['responsive'],
+    tableLayout: ['responsive', 'hover', 'focus'],
     boxShadow: ['responsive', 'hover'],
     fill: [],
     stroke: [],
diff --git a/addon/utils/compile-markdown.js b/addon/utils/compile-markdown.js
@@ -208,6 +208,29 @@ class HBSRenderer extends marked.Renderer {
     `;
   }
 
+  table(header, body) {
+    if (body) body = '<tbody>' + body + '</tbody>';
+
+    return '<table class="docs-table-auto">\n'
+      + '<thead>\n'
+      + header
+      + '</thead>\n'
+      + body
+      + '</table>\n';
+  }
+
+  tablerow(content) {
+    return '<tr class="docs-table-row">\n' + content + '</tr>\n';
+  }
+
+  tablecell(content, flags) {
+    const type = flags.header ? 'th' : 'td';
+    const tag = flags.align
+      ? '<' + type + ' align="' + flags.align + '" class="docs-border docs-px-4 docs-py-2">'
+      : '<' + type + ' class="docs-border docs-px-4 docs-py-2">';
+    return tag + content + '</' + type + '>\n';
+  }
+
   hr() {
     return `<hr class="docs-md__hr">`;
   }
diff --git a/package.json b/package.json
@@ -84,15 +84,15 @@
     "liquid-fire": "^0.29.5 || ^0.30.0 || ^0.31.0",
     "lodash": "^4.17.15",
     "lunr": "^2.3.7",
-    "marked": "^0.7.0",
+    "marked": "^0.8.2",
     "pad-start": "^1.0.2",
     "parse-git-config": "^3.0.0",
     "quick-temp": "^0.1.8",
     "resolve": "^1.12.0",
     "sass": "^1.22.10",
     "semver": "^6.3.0",
     "striptags": "^3.1.1",
-    "tailwindcss": "^1.0",
+    "tailwindcss": "^1.2.0",
     "walk-sync": "^2.0.2",
     "yuidocjs": "^0.10.2"
   },
diff --git a/tests/acceptance/sandbox/api/guides-test.js b/tests/acceptance/sandbox/api/guides-test.js
@@ -16,7 +16,7 @@ module('Acceptance | Sandbox | API | Guides', function(hooks) {
 
     let indexItems = modulePage.index.items.map(i => i.text);
 
-    assert.equal(indexItems.length, 2, 'correct number of items rendered');
+    assert.equal(indexItems.length, 3, 'correct number of items rendered');
     assert.ok(indexItems.includes('Subsection') && indexItems.includes('Sub-subsection'), 'correct sections rendered');
   });
 });
diff --git a/tests/dummy/app/pods/sandbox/index/template.md b/tests/dummy/app/pods/sandbox/index/template.md
@@ -11,3 +11,10 @@ This is a subsection
 ### Sub-subsection
 
 This is a sub-subsection
+
+### Table
+
+| Dependency Name | Engine A | Host |
+|-----------------|----------|------|
+| Foo             | v2       | v1   |
+| Bar             | v1       | N\A  |
diff --git a/tests/unit/utils/compile-markdown-test.js b/tests/unit/utils/compile-markdown-test.js
@@ -0,0 +1,31 @@
+import { highlightCode, default as compileMarkdown } from 'ember-cli-addon-docs/utils/compile-markdown';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | compile-markdown', function(hooks) {
+  test('should be able to highlight javascript', function(assert) {
+    let result = highlightCode(`let foo = 'bar';`, 'js');
+    assert.equal(result, `<span class="hljs-keyword">let</span> foo = <span class="hljs-string">'bar'</span>;`);
+  });
+
+  test('should render a table', function(assert) {
+    let result = compileMarkdown(`
+      | Dependency Name | Engine A | Host |
+      |-----------------|----------|------|
+      | Foo             | v2       | v1   |
+    `.trim());
+    assert.equal(result, `<div class="docs-md"><table class="docs-table-auto">
+<thead>
+<tr class="docs-table-row">
+<th class="docs-border docs-px-4 docs-py-2">Dependency Name</th>
+<th class="docs-border docs-px-4 docs-py-2">Engine A</th>
+<th class="docs-border docs-px-4 docs-py-2">Host</th>
+</tr>
+</thead>
+<tbody><tr class="docs-table-row">
+<td class="docs-border docs-px-4 docs-py-2">Foo</td>
+<td class="docs-border docs-px-4 docs-py-2">v2</td>
+<td class="docs-border docs-px-4 docs-py-2">v1</td>
+</tr>
+</tbody></table></div>`);
+  });
+});
diff --git a/tests/unit/utils/highlight-code-test.js b/tests/unit/utils/highlight-code-test.js
diff --git a/yarn.lock b/yarn.lock
@@ -2431,11 +2431,25 @@ acorn-jsx@^5.2.0:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
 acorn-walk@^6.0.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
+acorn-walk@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
+  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
+
 acorn@^2.1.0, acorn@^2.4.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
@@ -2451,16 +2465,16 @@ acorn@^6.0.1, acorn@^6.0.2:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
   integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
 
+acorn@^7.0.0, acorn@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
+  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+
 acorn@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
   integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
 
-acorn@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
-
 after@0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
@@ -5782,6 +5796,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 delayed-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-0.0.5.tgz#d4b1f43a93e8296dfe02694f4680bc37a313c73f"
@@ -5847,6 +5866,15 @@ detect-newline@3.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
 diff@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -10454,10 +10482,10 @@ marked@0.3.6:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
   integrity sha1-ssbGGPzOzk74bE/Gy4p8v1rtqNc=
 
-marked@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.7.0.tgz#b64201f051d271b1edc10a04d1ae9b74bb8e5c0e"
-  integrity sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==
+marked@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
+  integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
 
 match-media@^0.2.0:
   version "0.2.0"
@@ -13642,16 +13670,17 @@ taffydb@2.7.2:
   resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.7.2.tgz#7bf8106a5c1a48251b3e3bc0a0e1732489fd0dc8"
   integrity sha1-e/gQalwaSCUbPjvAoOFzJIn9Dcg=
 
-tailwindcss@^1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.1.4.tgz#786bd5faaf485c9eddcb821dd55666c56baa814e"
-  integrity sha512-p4AxVa4CKpX7IbNxImwNMGG9MHuLgratOaOE/iGriNd4AsRQRM2xMisoQ3KQHqShunrWuObga7rI7xbNsVoWGA==
+tailwindcss@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.2.0.tgz#5df317cebac4f3131f275d258a39da1ba3a0f291"
+  integrity sha512-CKvY0ytB3ze5qvynG7qv4XSpQtFNGPbu9pUn8qFdkqgD8Yo/vGss8mhzbqls44YCXTl4G62p3qVZBj45qrd6FQ==
   dependencies:
     autoprefixer "^9.4.5"
     bytes "^3.0.0"
-    chalk "^2.4.1"
+    chalk "^3.0.0"
+    detective "^5.2.0"
     fs-extra "^8.0.0"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     node-emoji "^1.8.1"
     normalize.css "^8.0.1"
     postcss "^7.0.11"
@@ -13661,6 +13690,7 @@ tailwindcss@^1.0:
     postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
     reduce-css-calc "^2.1.6"
+    resolve "^1.14.2"
 
 tap-parser@^7.0.0:
   version "7.0.0"
@@ -14704,7 +14734,7 @@ xmlhttprequest-ssl@~1.5.4:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
   integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
-xtend@^4.0.0, xtend@~4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

Original file line number	Diff line number	Diff line change
`@@ -105,3 +105,7 @@ h3 > a:before {`
`105`	`105`	`width: 0em;`
`106`	`106`	`margin-left: -0.9em;`
`107`	`107`	`}`
	`108`	`+`
	`109`	`+table {`
	`110`	`+ width: 100%;`
	`111`	`+}`