Fix: Fix markdown headings (#329)

* Fix: Do not alter headings depth in user's *.md files Mutating user's documents can be very confusing. And since section's names are optional now, it's even less logical to start from `<h3>`. HTML5 standard also says when `<section>` are used, heading for each section can start with `h1` See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines * Use `<section>` instead of `<article>` for sub-sections * Use `<article>` when rendering section's content such as markdown document * Added styles for H1 and H2 in markdown document.
styleguidist · Feb 20, 2017 · e264319 · e264319
1 parent c095643
commit e264319
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 29 deletions.
diff --git a/examples/sections/docs/Two.md b/examples/sections/docs/Two.md
@@ -1 +1,26 @@
-Second *Markdown* file.
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+foo|bar
+---|---
+1  |2
+
+* list 1
+* list 2
+  1. Sub-list
+  1. Sub-list
+  1. Sub-list
+* list 3
+
+* [ ] list 1
+* [ ] list 2
+* [x] list 3
diff --git a/src/rsg-components/Examples/Examples.js b/src/rsg-components/Examples/Examples.js
@@ -4,7 +4,7 @@ import Markdown from 'rsg-components/Markdown';
 
 export default function Examples({ examples, name }, { codeKey }) {
 	return (
-		<div>
+		<article>
 			{examples.map((example, index) => {
 				switch (example.type) {
 					case 'code':
@@ -28,7 +28,7 @@ export default function Examples({ examples, name }, { codeKey }) {
 						return null;
 				}
 			})}
-		</div>
+		</article>
 	);
 }
 Examples.propTypes = {

diff --git a/src/rsg-components/Examples/__snapshots__/Examples.spec.js.snap b/src/rsg-components/Examples/__snapshots__/Examples.spec.js.snap
@@ -1,11 +1,11 @@
 exports[`test should render examples 1`] = `
-<div>
+<article>
   <Playground
     code="<button>OK</button>"
     evalInContext={[Function]}
     index={0}
     name="button" />
   <_class
     text="Hello *world*!" />
-</div>
+</article>
 `;
diff --git a/src/rsg-components/Markdown/Markdown.js b/src/rsg-components/Markdown/Markdown.js
@@ -20,6 +20,16 @@ const styles = ({ font, monospace, link, linkHover, border, codeBackground }) =>
 		lineHeight: 1.5,
 	},
 	a: linkStyles({ link, linkHover }).link,
+	h1: {
+		composes: '$para',
+		fontSize: 36,
+		fontWeight: 'normal',
+	},
+	h2: {
+		composes: '$para',
+		fontSize: 32,
+		fontWeight: 'normal',
+	},
 	h3: {
 		composes: '$para',
 		fontSize: 26,

diff --git a/src/rsg-components/Markdown/Markdown.spec.js b/src/rsg-components/Markdown/Markdown.spec.js
@@ -1,25 +1,98 @@
 import React from 'react';
 import Markdown from './Markdown';
 
-it('should render Markdown with custom CSS classes', () => {
-	const markdown = `
+describe('Markdown', () => {
+	it('should render Markdown with custom CSS classes', () => {
+		const markdown = `
 # Header
 
 Text with *some* **formatting** and a [link](/foo).
 
 ![Image](/bar.png)`;
-	const actual = render(
-		<Markdown text={markdown} />
-	);
+		const actual = render(
+			<Markdown text={markdown} />
+		);
 
-	expect(actual.html()).toMatchSnapshot();
-});
+		expect(actual.html()).toMatchSnapshot();
+	});
+
+	it('should render Markdown in span in inline mode', () => {
+		const markdown = 'Hello *world*!';
+		const actual = render(
+			<Markdown text={markdown} inline />
+		);
+
+		expect(actual.html()).toMatchSnapshot();
+	});
+
+	it('should render headings correctly', () => {
+		const markdown = `
+# one
+## two
+### three
+#### four
+##### five
+###### six
+`;
+		const actual = render(
+			<Markdown text={markdown} />
+		);
+
+		expect(actual.html()).toMatchSnapshot();
+	});
+
+	it('should render unordered lists correctly', () => {
+		const markdown = `
+* list
+* item
+* three
+`;
+		const actual = render(
+			<Markdown text={markdown} />
+		);
+
+		expect(actual.html()).toMatchSnapshot();
+	});
+
+	it('should render ordered lists correctly', () => {
+		const markdown = `
+1. list
+1. item
+1. three
+`;
+		const actual = render(
+			<Markdown text={markdown} />
+		);
+
+		expect(actual.html()).toMatchSnapshot();
+	});
+
+	it('should render check-lists correctly', () => {
+		const markdown = `
+* [ ] list 1
+* [ ] list 2
+* [x] list 3
+`;
+		const actual = render(
+			<Markdown text={markdown} />
+		);
+
+		expect(actual.html()).toMatchSnapshot();
+	});
 
-it('should render Markdown in span in inline mode', () => {
-	const markdown = 'Hello *world*!';
-	const actual = render(
-		<Markdown text={markdown} inline />
-	);
+	it('should render mixed nested lists correctly', () => {
+		const markdown = `
+* list 1
+* list 2
+  1. Sub-list
+  1. Sub-list
+  1. Sub-list
+* list 3
+`;
+		const actual = render(
+			<Markdown text={markdown} />
+		);
 
-	expect(actual.html()).toMatchSnapshot();
+		expect(actual.html()).toMatchSnapshot();
+	});
 });
diff --git a/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap b/src/rsg-components/Markdown/__snapshots__/Markdown.spec.js.snap
@@ -1,3 +1,13 @@
-exports[`test should render Markdown in span in inline mode 1`] = `"<span class=\"base-2877968375\">Hello <em class=\"em-2233019579\">world</em>!</span>"`;
+exports[`Markdown should render Markdown in span in inline mode 1`] = `"<span class=\"base-2877968375\">Hello <em class=\"em-2233019579\">world</em>!</span>"`;
 
-exports[`test should render Markdown with custom CSS classes 1`] = `"<div><h3 class=\"h3-2951916027\">Header</h3><p class=\"p-1681777157\">Text with <em class=\"em-2233019579\">some</em> <strong class=\"strong-2282145835\">formatting</strong> and a <a class=\"a-219704402\" href=\"/foo\">link</a>.</p><p class=\"p-1681777157\"><img class=\"img-2656340033\" alt=\"Image\" src=\"/bar.png\"></p></div>"`;
+exports[`Markdown should render Markdown with custom CSS classes 1`] = `"<div><h1 class=\"h1-1333784724\">Header</h1><p class=\"p-1681777157\">Text with <em class=\"em-2233019579\">some</em> <strong class=\"strong-2282145835\">formatting</strong> and a <a class=\"a-219704402\" href=\"/foo\">link</a>.</p><p class=\"p-1681777157\"><img class=\"img-2656340033\" alt=\"Image\" src=\"/bar.png\"></p></div>"`;
+
+exports[`Markdown should render check-lists correctly 1`] = `"<ul class=\"ul-1681777157\"><li><input type=\"checkbox\" disabled>list 1</li><li><input type=\"checkbox\" disabled>list 2</li><li><input type=\"checkbox\" checked disabled>list 3</li></ul>"`;
+
+exports[`Markdown should render headings correctly 1`] = `"<div><h1 class=\"h1-1333784724\">one</h1><h2 class=\"h2-365728764\">two</h2><h3 class=\"h3-2951916027\">three</h3><h4 class=\"h4-370263229\">four</h4><h5 class=\"h5-3491702579\">five</h5><h6 class=\"h6-1863710277\">six</h6></div>"`;
+
+exports[`Markdown should render mixed nested lists correctly 1`] = `"<ul class=\"ul-1681777157\"><li class=\"li-4011715572\">list 1</li><li class=\"li-4011715572\"><p class=\"p-1681777157\">list 2</p><ol class=\"ol-65688532\" start=\"1\"><li class=\"li-4011715572\">Sub-list</li><li class=\"li-4011715572\">Sub-list</li><li class=\"li-4011715572\">Sub-list</li></ol></li><li class=\"li-4011715572\">list 3</li></ul>"`;
+
+exports[`Markdown should render ordered lists correctly 1`] = `"<ol class=\"ol-65688532\" start=\"1\"><li class=\"li-4011715572\">list</li><li class=\"li-4011715572\">item</li><li class=\"li-4011715572\">three</li></ol>"`;
+
+exports[`Markdown should render unordered lists correctly 1`] = `"<ul class=\"ul-1681777157\"><li class=\"li-4011715572\">list</li><li class=\"li-4011715572\">item</li><li class=\"li-4011715572\">three</li></ul>"`;
diff --git a/src/rsg-components/Sections/SectionsRenderer.js b/src/rsg-components/Sections/SectionsRenderer.js
@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react';
 
 export default function SectionsRenderer({ children }) {
 	return (
-		<article>
+		<section>
 			{children}
-		</article>
+		</section>
 	);
 }
 

diff --git a/src/rsg-components/Sections/__snapshots__/Sections.spec.js.snap b/src/rsg-components/Sections/__snapshots__/Sections.spec.js.snap
@@ -1,5 +1,5 @@
 exports[`test render should render component 1`] = `
-<article>
+<section>
   <Section
     section={
       Object {
@@ -42,7 +42,7 @@ exports[`test render should render component 1`] = `
         ],
       }
     } />
-</article>
+</section>
 `;
 
 exports[`test should render component renderer 1`] = `

diff --git a/src/utils/markdown-to-jsx.js b/src/utils/markdown-to-jsx.js
@@ -1,7 +1,6 @@
 /*
  Based on https://github.com/yaycmyk/markdown-to-jsx
 
- - Increase level of heading by 2.
  - Server-rendered code highlight.
  - Custom className for code highlight.
  */
@@ -245,10 +244,8 @@ function getHTMLNodeTypeFromASTNodeType(node) {
 		case 'footnoteReference':
 			return 'a';
 
-		// Increase level of headings
 		case 'heading':
-			const depth = Math.min(node.depth + 2, 6);
-			return `h${depth}`;
+			return `h${node.depth}`;
 
 		case 'image':
 		case 'imageReference':
@@ -428,7 +425,7 @@ export default function markdownToJSX(markdown, { overrides = {} } = {}) {
 			const className = get(overrides, 'pre.props.className');
 			return (
 				<pre key={key} className={className}>
-					<code className={`lang-${ast.lang}`} dangerouslySetInnerHTML={{ __html: ast.value }} ></code>
+					<code className={`lang-${ast.lang}`} dangerouslySetInnerHTML={{ __html: ast.value }} />
 				</pre>
 			);
 		}