Merge pull request #327 from visual-framework/features/markdown-filters

Features/markdown filters

components/vf-componenet-rollup/index.scss

@@ -108,7 +108,6 @@ html, button {
 @import 'vf-pagination/vf-pagination.scss';
   @import 'vf-pagination/vf-pagination--full.scss';
 
-
 /* All Visual Framework Containers */
 
 @import 'vf-activity-group/vf-activity-group.scss';
@@ -132,7 +131,6 @@ html, button {
 
 @import 'vf-deprecated/vf-deprecated.scss';
 
-
 /* All Visual Framework Utility and high-specificity components */
 
 @import 'vf-utility-classes/vf-utility-classes.scss';

components/vf-content/README.md

@@ -2,6 +2,25 @@
 
 ## About
 
+Use this container to get simple support for narrative content where it is not
+practical to assign classes, such as Markdown or WYSIWYG text.
+
+This container adds basic support for `p`, `ul`, `hr`, `a` and other core
+html elements. Some components may also add specific support for `.vf-content`
+
+### Demonstration
+
+<div class="vf-content">
+{{ "#### Sub-header" | marked }}
+
+{% markdown %}
+- list items
+- list items
+- list item [with a link](#)
+- list items
+{% endmarkdown %}
+</div>
+
 ## Installation and Implementation
 
 This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-content` with this command.
@@ -17,10 +36,3 @@ The source files included are written in [Sass](http://sass-lang.com)(`scss`). Y
 ```
 
 _Make sure you import any requirements along with the modules._
-
-
-Use this container to get simple support for narrative content where it is not
-practical to assign classes, such as Markdown or WYSIWYG text.
-
-This container adds basic support for `p`, `ul`, `hr`, `a` and other core
-html elements. Some components may also add specific support for `.vf-content`

components/vf-content/vf-content.njk

 <div class="vf-content">
-  <h1>EMBL communications strategy 2018-2020</h1>
+  {{ "# EMBL communications strategy 2018-2020" | marked }}
   <small>Cian O'Luanaigh, 2 July 2018 at 12:55 pm</small>
   <p class="vf-content__standfirst">This <a href="#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
   <p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
   <small><i>This document was last revised 7 March 2018</i></small>
 
-  <h2>Section 1: EMBL’s vision and mission</h2>
+  {% markdown %}
+    ## Section 1: EMBL’s vision and mission
 
-  <h3>EMBL’s vision</h3>
-  <p>Enabling scientists worldwide to discover the secrets of life</p>
+    ### EMBL’s vision
 
-  <h3>EMBL’s mission</h3>
-  <ol>
-    <li>Uncovering the molecular basis of life through research</li>
-    <li>Providing research infrastructure and services</li>
-    <li>Training and inspiring the next generation of scientists</li>
-    <li>Driving research, innovation and progress through technology development</li>
-    <li>Interactions with industry and technology transfer</li>
-    <li>Playing a leading role in the integration of life science research</li>
-  </ol>
+    Enabling scientists worldwide to discover the secrets of life
+
+    ### EMBL’s mission
+
+    1. Uncovering the molecular basis of life through research
+    1. Providing research infrastructure and services
+    1. Training and inspiring the next generation of scientists
+    1. Driving research, innovation and progress through technology development
+    1. Interactions with industry and technology transfer
+    1. Playing a leading role in the integration of life science research
+
+  {% endmarkdown %}
 
   <h3>What is EMBL?</h3>
   <p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>

components/vf-link/vf-link.config.yml

@@ -45,7 +45,7 @@ variants:
     context:
       href: "#"
       style: ["disabled"]
-      text: "A disabled primary link"      
+      text: "A disabled primary link"
   - name: secondary
     context:
       href: "#"

fractal.js

@@ -30,6 +30,11 @@ module.exports = {
       },
       paths: ["./components"],
       filters: {
+        // {{ "## Parse me" | marked }}
+        marked: function(string) {
+          const renderMarkdown = require('marked');
+          return renderMarkdown(string);
+        },
         // A filter and non-async version of frctl's context extension from
         // https://github.com/frctl/nunjucks/blob/develop/src/extensions/context.js
         // We mainly use this to make a component's YAML data available to REAMDE.md
@@ -50,7 +55,8 @@ module.exports = {
       // },
       extensions: {
         codeblock: require(__dirname + '/tools/vf-frctl-extensions/codeblock.js')(fractal),
-        spaceless: require(__dirname + '/tools/vf-frctl-extensions/spaceless.js')(fractal)
+        spaceless: require(__dirname + '/tools/vf-frctl-extensions/spaceless.js')(fractal),
+        markdown:  require(__dirname + '/tools/vf-frctl-extensions/markdown.js')(fractal)
       }
     });
 

package.json

@@ -11,12 +11,13 @@
   "dependencies": {
     "@frctl/fractal": "^1.2.0-beta.2",
     "@frctl/nunjucks": "^2.0.0",
-    "chalk": "^2.4.1",
+    "chalk": "^2.4.2",
     "gulp": "^4.0.0",
     "highlight.js": "^9.15.6",
     "install": "^0.12.2",
+    "marked": "^0.6.1",
     "npm": "^6.9.0",
-    "rollup": "^1.6.0",
+    "rollup": "^1.7.4",
     "stylelint": "^9.10.1",
     "stylelint-scss": "^3.5.4",
     "theo": "^8.1.2",
@@ -25,8 +26,8 @@
   },
   "private": false,
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "@node-sass/node-module-importer": "^1.2.3",
     "browser-sync": "^2.26.3",
     "gulp-autoprefixer": "^6.0.0",

tools/vf-frctl-extensions/markdown.js

+'use strict';
+
+const renderMarkdown   = require('marked');
+const nunjucks = require('nunjucks');
+
+// Add support for markdown blocks inside html
+// Sample:
+/*
+<div class="vf-box" markdown="1">
+{% markdown %}
+## Tip!
+Confused? Rule of thumb: if you use a component to make other components, name it for what is (i.e. "vf-box").
+{% endmarkdown %}
+</div>
+*/
+
+module.exports = function(fractal){
+
+  // port of https://github.com/zephraph/nunjucks-markdown
+  // Licence: https://github.com/zephraph/nunjucks-markdown/blob/master/LICENSE
+  function MarkdownExtenstion() {
+
+    this.tags = ['markdown'];
+
+    this.parse = function(parser, nodes, lexer) {
+      var tok = parser.nextToken();
+
+      // Parse the markdown tag and collect any arguments
+      var args = parser.parseSignature(null, true);
+      parser.advanceAfterBlockEnd(tok.value);
+
+      // If arguments, return the fileTag constructed node
+      if(args.children.length > 0)
+        return new nodes.CallExtension(this, 'fileTag', args);
+
+      // Otherwise parse until the close block and move the parser to the next position
+      var body = parser.parseUntilBlocks('endmarkdown');
+
+      // I found Nunjucks  to be incredibly convoluted on how to just get some data into the BlockTag function,
+      // this finally worked by faking another template node.
+      var tabStart = new nodes.NodeList(0, 0, [new nodes.Output(0, 0, [new nodes.TemplateData(0, 0, (tok.colno - 1))])]);
+
+      parser.advanceAfterBlockEnd();
+
+      // Return the constructed blockTag node
+      return new nodes.CallExtension(this, 'run', args, [body, tabStart]);
+    };
+
+    // Markdown rendering for the file tag. Use the nunjucks.render function to render
+    // the actual contents of the file. Pass the results through the markdown renderer.
+    this.fileTag = function(environment, file) {
+      return new nunjucks.runtime.SafeString(renderMarkdown(env.render(file, environment.ctx)));
+    }
+
+    // Markdown rendering for the block. Pretty simple, just get the body text and pass
+    // it through the markdown renderer.
+    this.run = function(context, body, tabStart) {
+
+      var body = body();
+      var spacesRegex = /^[\s]+/;
+      var tabStart = tabStart(); // The column postion of the {% markdown %} tag.
+
+      if (tabStart > 0) { // If the {% markdown %} tag is tabbed in, normalize the content to the same depth.
+        body = body.split(/\r?\n/); // Split into lines.
+        body = body.map(function(line) {
+          var startSpaces = line.match(spacesRegex);
+          if (startSpaces && startSpaces[0].length >= tabStart) { // If the content is not at the same or greater tab depth, do nothing..
+            return line.slice(tabStart); // Subtract the column postion from the start of the string.
+          } else if (startSpaces) {
+            return line.slice(startSpaces[0].length);
+          } else {
+            return line;
+          }
+        });
+        body = body.join("\n"); // Rejoin into one string.
+      }
+
+      return new nunjucks.runtime.SafeString(renderMarkdown(body));
+    }
+
+  }
+
+  return new MarkdownExtenstion();
+
+};

tools/vf-frctl-theme/src/extensions/markdown.js

+'use strict';
+
+const renderMarkdown   = require('marked');
+const nunjucks = require('nunjucks');
+
+// Add support for markdown blocks inside html
+// Sample:
+/*
+<div class="vf-box" markdown="1">
+{% markdown %}
+## Tip!
+Confused? Rule of thumb: if you use a component to make other components, name it for what is (i.e. "vf-box").
+{% endmarkdown %}
+</div>
+*/
+
+// Note: The structure of this file's paramaters are slightly different so we can't easily reuse the /tools/vf-frctl-extensions/markdown.js
+//       Though it might be something we revisit
+
+module.exports = function(theme, env, app, fractal){
+
+  // port of https://github.com/zephraph/nunjucks-markdown
+  // Licence: https://github.com/zephraph/nunjucks-markdown/blob/master/LICENSE
+  function MarkdownExtenstion() {
+
+    this.tags = ['markdown'];
+
+    this.parse = function(parser, nodes, lexer) {
+      var tok = parser.nextToken();
+
+      // Parse the markdown tag and collect any arguments
+      var args = parser.parseSignature(null, true);
+      parser.advanceAfterBlockEnd(tok.value);
+
+      // If arguments, return the fileTag constructed node
+      if(args.children.length > 0)
+        return new nodes.CallExtension(this, 'fileTag', args);
+
+      // Otherwise parse until the close block and move the parser to the next position
+      var body = parser.parseUntilBlocks('endmarkdown');
+
+      // I found Nunjucks  to be incredibly convoluted on how to just get some data into the BlockTag function,
+      // this finally worked by faking another template node.
+      var tabStart = new nodes.NodeList(0, 0, [new nodes.Output(0, 0, [new nodes.TemplateData(0, 0, (tok.colno - 1))])]);
+
+      parser.advanceAfterBlockEnd();
+
+      // Return the constructed blockTag node
+      return new nodes.CallExtension(this, 'run', args, [body, tabStart]);
+    };
+
+    // Markdown rendering for the file tag. Use the nunjucks.render function to render
+    // the actual contents of the file. Pass the results through the markdown renderer.
+    this.fileTag = function(environment, file) {
+      return new nunjucks.runtime.SafeString(renderMarkdown(env.render(file, environment.ctx)));
+    }
+
+    // Markdown rendering for the block. Pretty simple, just get the body text and pass
+    // it through the markdown renderer.
+    this.run = function(context, body, tabStart) {
+
+      var body = body();
+      var spacesRegex = /^[\s]+/;
+      var tabStart = tabStart(); // The column postion of the {% markdown %} tag.
+
+      if (tabStart > 0) { // If the {% markdown %} tag is tabbed in, normalize the content to the same depth.
+        body = body.split(/\r?\n/); // Split into lines.
+        body = body.map(function(line) {
+          var startSpaces = line.match(spacesRegex);
+          if (startSpaces && startSpaces[0].length >= tabStart) { // If the content is not at the same or greater tab depth, do nothing..
+            return line.slice(tabStart); // Subtract the column postion from the start of the string.
+          } else if (startSpaces) {
+            return line.slice(startSpaces[0].length);
+          } else {
+            return line;
+          }
+        });
+        body = body.join("\n"); // Rejoin into one string.
+      }
+
+      return new nunjucks.runtime.SafeString(renderMarkdown(body));
+    }
+
+  }
+
+  env.engine.addExtension('markdown', new MarkdownExtenstion());
+
+};

tools/vf-frctl-theme/src/theme.js

@@ -5,7 +5,6 @@ const _           = require('lodash');
 const Theme       = require('@frctl/fractal').WebTheme;
 const packageJSON = require('../package.json');
 
-
 module.exports = function(options, fractal){
 
     const config = _.defaultsDeep(_.clone(options || {}), {
@@ -98,7 +97,8 @@ module.exports = function(options, fractal){
 
     theme.on('init', function(env, app){
       require('./filters')(theme, env, app, fractal);
-      require('./extensions')(theme, env, app, fractal);
+      require('./extensions/render.js')(theme, env, app, fractal);
+      require('./extensions/markdown.js')(theme, env, app, fractal);
     });
 
     let handles = null;