Adding support for video / audio tags in Markdown

fboes · Mar 10, 2017 · ed37944 · ed37944
1 parent bf626f0
commit ed37944
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,12 +3,13 @@ Changelog
 
 For detailed information check [Blogophon's releases on Github](https://github.com/fboes/blogophon/releases).
 
-rc 1.1.0
---------
+1.1.0
+-----
 
 * [x] New (and very basic) default theme
-* [x] Fixed major bug for installations in subfolders
 * [x] Image gallery added
+* [x] Adding support for video / audio tags in Markdown
+* [x] Fixed major bug for installations in subfolders
 
 1.0.4
 -----

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ A live example of this blog generator can be found at [3960! Journal](http://jou
 * Generates a bunch of way to find your articles: Regular index pages, tag pages, author pages.
 * The Blogophon comes with a built-in image-scaler, which leads to responsive images.
 * The default theme puts all relevant meta stuff into `<head>` for SEO and social sharing (via schema.org and OpenGraph).
-* A ton of [special features](docs/special-features.md) like ATOM, RSS, AMP, etc.
+* A ton of [special features](docs/special-features.md) like RSS/ATOM newsfeeds, Accelerated Mobile Pages (AMP), Facebook Instant Articles, etc.
 
 Requirements
 ------------

diff --git a/docs/markdown.md b/docs/markdown.md
@@ -72,7 +72,7 @@ And this part will only be shown on article pages.
 
 ```
 
-If you do not use both methods, the Blogophon will build a **teaser text from article text** by using the first 160 characters.
+If you do not use one of the methods mentioned above, the Blogophon will build a **teaser text from article text** by using the first 160 characters.
 
 Images
 ------
@@ -110,9 +110,22 @@ An image gallery is built by supplying a paragraph consisting only of images:
 
 ```
 
-Youtube & Vimeo
+Videos & Audios
 ---------------
 
+To show video and audio files you just have to use the regular Markdown used for images:
+
+```markdown
+![Audio description](/media/audio.mp3)    _produces an audio player_
+![Video description](/media/video.mp4)    _produces an video player_
+![Video description](/media/video.webm)   _produces an video player_
+
+```
+
+Remember to use valid URLs for your video / audio files. You may want to upload this kind of files directly to `htdocs/media`.
+
+### Youtube & Vimeo
+
 For displaying a embedded video player for Youtube or Vimeo, just put a link to the given video into a single line. This will be converted to a full blown video player.
 
 Giphy

diff --git a/src/blogophon-console.js b/src/blogophon-console.js
@@ -99,7 +99,7 @@ var BlogophonConsole = function() {
   internal.shortfilenameFromTitle = function(title) {
     return SuperString(title.trim().toLowerCase())
       .asciify()
-      .replace(/(^|\-)(de(r|n|m|s)|die(s|se|ser|ses|sen|sem)?|d(a|o|e)s|(m|s|d)?ein(e|es|er|em|en)?|a|the|(e|a)l|l(a|o)s?|(i|o|a)(n|m))\-/g, '$1')
+      .replace(/(^|\-)([a-z]|de[rnms]|die(s|se|ser|ses|sen|sem)?|d[aoe]s|[msd]?ein(e|es|er|em|en)?|th(e|is|at|ese|ose)|my|[ea]l|l[ao]s?|[ia][nm]|o[nf]|ist?|[ua]nd)\-/g, '$1')
       .replace(/(^[\-]+|[\-]+$)/g, '')
       .replace(/([\-])[\-]+/g, '$1')
       .replace(/\-(md~?)$/, '.$1')

diff --git a/src/helpers/marky-mark.js b/src/helpers/marky-mark.js
@@ -352,11 +352,15 @@ var markyMark = function markyMark(string, rules) {
         ;
       })
       .replace(/(<img[^>]+src="[^"]+\-(\d+)x(\d+)\.[^"]+")/g, '$1 width="$2" height="$3"')
+      .replace(/(<)img([^>]src="[^"]+\.(mp[234g]|webm|og[gamv])(?:#[^"]*)?"+[^>]*?)\s*\/?>/, function(all, first, last, suffix) {
+        var tag = suffix.match(/^(?:mp[24g]|webm|og[gmv])$/) ? 'video' : 'audio';
+        all = first + tag + last + ' controls="controls"></' + tag + '>';
+        return all.replace(/\salt="([^"]*)"([^>]*>)/, '$2$1');
+      })
+      .replace(/(<(?:img|hr|br)[^>]*[^/])(>)/g, '$1 /$2')
       .replace(/(>)\[ \](\s)/g, '$1<input type="checkbox" />$2')
       .replace(/(>)\[[xX]\](\s)/g, '$1<input type="checkbox" checked="checked" />$2')
       .replace(/(<li)(><input type="checkbox")/g, '$1 class="task-list__item"$2')
-      .replace(/(<(?:img)[^>]*[^/])(>)/g, '$1 /$2')
-      .replace(/(<(?:hr|br)[^/])(>)/g, '$1 /$2')
       .replace(/(<table[^>]*>)([\s\S]+?)(\/table)/g, function(all, before, content, after) {
         return before + content.replace(/(<tr[^>]*>[\s]*)<td([^>]*>)<strong>(.+?)<\/strong><\/td>/g, '$1<th scope="row"$2$3</th>') + after;
       })

diff --git a/src/templates/.htaccess b/src/templates/.htaccess
@@ -8,11 +8,14 @@ DirectoryIndex index.html
 ErrorDocument 404 /404.html
 ErrorDocument 410 /404.html
 
-AddType text/xml xml rss atom
-AddType text/plain .md
-AddType text/calendar .ics
 AddType application/json .json
 AddType application/vnd.google-earth.kml+xml .kml
+AddType text/calendar .ics
+AddType text/plain .md
+AddType text/xml xml rss atom
+AddType video/mp4 .mp4
+AddType video/ogg .ogv
+AddType video/webm .webm
 
 <IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"

diff --git a/test/marky-mark.js b/test/marky-mark.js
@@ -209,3 +209,28 @@ exports.testTable = function(test) {
 
   test.done();
 };
+
+exports.testMultimediaTags = function(test) {
+  test.expect(8);
+
+  var m;
+
+  m = markyMark('<img src="video.jpg" alt="Description" />');
+  test.ok(m.match(/<img/), 'Image tag still present');
+  test.ok(!m.match(/<(video|audio)/), 'No audio/video tag present');
+
+  m = markyMark('<img src="video.mp4" alt="Description" />');
+  test.ok(!m.match(/<(img|audio)/), 'Image tag is gone');
+  test.ok(m.match(/<video.+?>Description<\/video>/), 'Video tag with description is present');
+
+  m = markyMark('<img src="video.mp4#12x24" alt="" />');
+  test.ok(!m.match(/<(img|audio)/), 'Image tag is gone');
+  test.ok(m.match(/<video/), 'Video tag is present');
+
+  m = markyMark('<img src="video.mp3" alt="" />');
+  test.ok(!m.match(/<(img|video)/), 'Image tag is gone');
+  test.ok(m.match(/<audio/), 'Audio tag is present');
+  //console.log(m);
+
+  test.done();
+};