Documentation: Parsing markdown blocks (code blocks)

Author: youknowriad

docs-tool/bin/helpers/extend-webpack-config.js

@@ -22,12 +22,12 @@ module.exports = function( webpackConfig, usersCwd ) {
 
 	// Adding the markdown loader and exclude if from the file loader
 	webpackConfig.module.rules.forEach( rule => {
-		if ( rule.loader === require.resolve('file-loader') ) {
+		if ( rule.loader === require.resolve( 'file-loader' ) ) {
 			rule.exclude.push( /\.md/ );
 		}
 	} );
 	webpackConfig.module.rules.push( {
 		test: /\.md/,
 		use: require.resolve( 'raw-loader' ),
 	} );
-}
+};

docs-tool/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "dependencies": {
     "lodash": "^4.17.4",
+    "markdown-it": "^8.3.1",
     "prismjs": "^1.6.0",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-markdown": "^2.5.0",
     "react-router-dom": "^4.1.1",
     "react-scripts": "1.0.10"
   },

docs-tool/src/Page.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import Prism from 'prismjs';
+
+import { getNextStory, getPreviousStory } from 'glutenberg';
+import markdown from '../markdown';
+
+class Tabs extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			activeTab: 0,
+		};
+	}
+
+	selectTab( index ) {
+		return () => {
+			this.setState( { activeTab: index } );
+		};
+	}
+
+	componentDidUpdate() {
+		Prism.highlightAll();
+	}
+
+	render() {
+		const { tabs } = this.props;
+		const activeTab = tabs[ this.state.activeTab ];
+
+		return (
+			<div>
+				<div>
+					{ tabs.map( ( tab, index ) => (
+						<button
+							key={ index }
+							onClick={ this.selectTab( index ) }
+							className={ index === this.state.activeTab ? 'is-active' : '' }
+						>
+							{ tab.name }
+						</button>
+					) ) }
+					{ activeTab && <div dangerouslySetInnerHTML={ { __html: activeTab.content } } /> }
+				</div>
+			</div>
+		);
+	}
+}
+
+function MarkdownContent( { content } ) {
+	const blocks = markdown( content );
+
+	return (
+		<div>
+			{ blocks.map( ( block, index ) => {
+				if ( block.type === 'raw' ) {
+					return <div key={ index } dangerouslySetInnerHTML={ { __html: block.content } } />;
+				}
+				if ( block.type === 'codetabs' ) {
+					return <Tabs key={ index } tabs={ block.tabs } />;
+				}
+
+				return null;
+			} ) }
+		</div>
+	);
+}
+
+class Page extends Component {
+	componentDidMount() {
+		Prism.highlightAll();
+	}
+
+	render() {
+		const { story } = this.props;
+		const nextStory = getNextStory( story.id );
+		const previousStory = getPreviousStory( story.id );
+
+		return (
+			<div>
+				{ !! story.Component && <story.Component /> }
+				{ !! story.markdown && <MarkdownContent content={ story.markdown } /> }
+
+				<div className="navigation">
+					{ !! previousStory && (
+						<p className="nav-older">
+							<Link to={ previousStory.path }>{ '←' } { previousStory.title }</Link>
+						</p>
+					) }
+					{ !! nextStory && (
+						<p className="nav-newer">
+							<Link to={ nextStory.path }>{ nextStory.title } { '→' }</Link>
+						</p>
+					) }
+				</div>
+			</div>
+		);
+	}
+}
+
+export default Page;

docs-tool/src/App.js docs-tool/src/components/App.js

@@ -1,16 +1,13 @@
-import React from 'react';
 import { find } from 'lodash';
-import ReactMarkdown from 'react-markdown';
 
 const stories = [];
 
 export function addStory( story ) {
-	const { name, parents = [], markdown } = story;
+	const { name, parents = [] } = story;
 	stories.push( {
 		path: '/' + parents.concat( name ).join( '/' ),
 		id: parents.concat( name ).join( '.' ),
 		parent: parents.join( '.' ),
-		Component: markdown ? () => <ReactMarkdown source={ markdown } /> : story.Component,
 		...story,
 	} );
 }

docs-tool/src/components/Page.js

@@ -5,7 +5,7 @@ import 'prismjs/themes/prism.css';
 
 import 'config';
 
-import App from './App';
+import App from './components/App';
 import registerServiceWorker from './registerServiceWorker';
 import './styles/main.css';
 

docs-tool/src/Sidebar.js docs-tool/src/components/Sidebar.js

@@ -0,0 +1,51 @@
+import MarkdownIt from 'markdown-it';
+import { compact } from 'lodash';
+
+const parser = new MarkdownIt();
+
+const blockParsers = {
+	raw( content ) {
+		return {
+			type: 'raw',
+			content: parser.render( content ),
+		};
+	},
+
+	codetabs( content ) {
+		const tabsRegex = /{%\s+([\w]+)\s+%}/gm;
+		const splittedTabs = compact( content.trim().split( tabsRegex ) );
+		const tabs = [];
+		for ( let i = 0; i < splittedTabs.length; i = i + 2 ) {
+			tabs.push( {
+				name: splittedTabs[ i ],
+				content: parser.render( splittedTabs[ i + 1 ] ),
+			} );
+		}
+
+		return {
+			type: 'codetabs',
+			tabs,
+		};
+	},
+};
+
+function parse( markdown ) {
+	const blocksRegex = /({%\s+[\w]+\s+%}(?:.|\n|\r)*?{%\s+end\s+%})/gm;
+	const blockRegex = /{%\s+([\w]+)\s+%}((?:.|\n|\r)*?){%\s+end\s+%}/gm;
+	const blocks = markdown.split( blocksRegex );
+	return blocks
+		.map( ( block ) => {
+			const matches = blockRegex.exec( block );
+			if ( ! matches ) {
+				return { type: 'raw', content: block };
+			}
+			return { type: matches[ 1 ], content: matches[ 2 ] };
+		} )
+		.map( ( block ) => {
+			const blockParser = blockParsers[ block.type ] || blockParsers.raw;
+
+			return blockParser( block.content );
+		} );
+}
+
+export default parse;

docs-tool/src/config/index.js

@@ -1,7 +1,9 @@
 # Writing your first block
 
+{% codetabs %}
+{% ES5 %}
 ```js
-// block.js (ES5)
+// block.js
 var el = wp.element.createElement;
 var blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };
 
@@ -17,9 +19,9 @@ wp.blocks.registerBlockType( 'mytheme/block', {
 	},
 } );
 ```
-
+{% ESnext %}
 ```js
-// block.js (ESnext)
+// block.js
 const { registerBlockType } = wp.blocks;
 const blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };
 
@@ -35,3 +37,4 @@ registerBlockType( 'mytheme/block', {
 	},
 } );
 ```
+{% end %}

docs-tool/src/index.js

@@ -1,7 +1,9 @@
 # Adding a stylesheet
 
+{% codetabs %}
+{% ES5 %}
 ```js
-// block.js (ES5)
+// block.js
 var el = wp.element.createElement;
 
 wp.blocks.registerBlockType( 'mytheme/block', {
@@ -16,9 +18,9 @@ wp.blocks.registerBlockType( 'mytheme/block', {
 	},
 } );
 ```
-
+{% ESnext %}
 ```js
-// block.js (ESnext)
+// block.js
 const { registerBlockType } = wp.blocks;
 
 registerBlockType( 'mytheme/block', {
@@ -33,7 +35,7 @@ registerBlockType( 'mytheme/block', {
 	},
 } );
 ```
-
+{% end %}
 ```css
 /* style.css */