Add support for thumbnails using <thumbnail>

docs/userGuide/fullSyntaxReference.md

@@ -44,6 +44,7 @@
   questions : ['Questions', ['component', 'reader-facing']],
   siteNavigationMenus : ['Site Navigation Menus', ['component', 'reader-facing']],
   tabs : ['Tabs', ['component', 'reader-facing']],
+  thumbnails : ['Thumbnails', ['component', 'reader-facing']],
   tooltips : ['Tooltips', ['component', 'reader-facing']]
 } %}
 

docs/userGuide/syntax/thumbnails.mbdf

@@ -0,0 +1,60 @@
+## Thumbnails
+
+**A `thumbnail` component allows you to insert thumbnails using text, images, or icons.**
+
+<include src="outputBox.md" boilerplate >
+<span id="code">
+
+```html
+<thumbnail circle src="../../images/deer.jpg" size="100"/>
+<thumbnail circle text=":book:" background="#dff5ff" size="100"/>
+<thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+
+<thumbnail src="../../images/deer.jpg" size="100"/>
+<thumbnail text=":book:" background="#dff5ff" size="100"/>
+<thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+```
+</span>#333
+<span id="output">
+<thumbnail circle src="../../images/deer.jpg" size="100"/>
+<thumbnail circle text=":book:" background="#dff5ff" size="100"/>
+<thumbnail circle text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail circle text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+
+<thumbnail src="../../images/deer.jpg" size="100"/>
+<thumbnail text=":book:" background="#dff5ff" size="100"/>
+<thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
+<thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
+</span>
+</include>
+
+****Options****
+Name | Type | Default | Description
+--- | --- | --- | ---
+alt | `string` | | **This must be specified if `src` is specified**<br>The alternative text of the image.
+background | `string` | | Specifies the background color.<br> Accepts any valid CSS background property
+border | `string` | | Specifies the border thickness, type, and color.<br> Accepts any valid CSS border property
+circle | `boolean` | false | If this option is enabled, the thumbnail will be circle shaped instead of square
+font-color | `string` | | The color of the text, affects normal text and icons (but not emojis)
+font-size | `string` | | Text size, defaults to half of `size`, affects text, icons and emojis
+size | `string` | 100 | The size of the thumbnail in pixels
+src | `string` | | The URL of the image.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
+text | `string` | | The text to use in the thumbnail, [icons]({{baseUrl}}/userGuide/formattingContents#icons), [emojis]({{baseUrl}}/userGuide/formattingContents#emoji) and markdown are supported here
+
+<box type="info">
+
+If both `text` and `src` are specified, `src` will take higher priority.
+</box>
+
+<span id="short" class="d-none">
+
+```html
+<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
+```
+</span>
+
+<span id="examples" class="d-none">
+<thumb circle src="https://markbind.org/images/logo-lightbackground.png" size="100"/>
+</span>

src/lib/markbind/src/parser.js

@@ -166,12 +166,31 @@ Parser.prototype.getMissingIncludeSrc = function () {
   return _.clone(this.missingIncludeSrc);
 };
 
+Parser.prototype._preprocessThumbnails = function (element) {
+  const isImage = _.hasIn(element.attribs, 'src') && element.attribs.src !== '';
+  if (isImage) {
+    return element;
+  }
+  const text = _.hasIn(element.attribs, 'text') ? element.attribs.text : '';
+  if (text === '') {
+    return element;
+  }
+  const renderedText = md.renderInline(text);
+  // eslint-disable-next-line no-param-reassign
+  element.children = cheerio.parseHTML(renderedText);
+  return element;
+};
+
 Parser.prototype._preprocess = function (node, context, config) {
   const element = node;
   const self = this;
   element.attribs = element.attribs || {};
   element.attribs[ATTRIB_CWF] = path.resolve(context.cwf);
 
+  if (element.name === 'thumbnail') {
+    return this._preprocessThumbnails(element);
+  }
+
   const requiresSrc = ['include'].includes(element.name);
   if (requiresSrc && _.isEmpty(element.attribs.src)) {
     const error = new Error(`Empty src attribute in ${element.name} in: ${element.attribs[ATTRIB_CWF]}`);
@@ -390,8 +409,12 @@ Parser.prototype.processDynamicResources = function (context, html) {
     xmlMode: false,
     decodeEntities: false,
   });
-  $('img, pic').each(function () {
+  $('img, pic, thumbnail').each(function () {
     const elem = $(this);
+    if (elem[0].name === 'thumbnail' && elem.attr('src') === undefined) {
+      // Thumbnail tag without src
+      return;
+    }
     const resourcePath = utils.ensurePosix(elem.attr('src'));
     if (resourcePath === undefined || resourcePath === '') {
       // Found empty img/pic resource in resourcePath

test/functional/test_site/expected/siteData.json

@@ -240,6 +240,37 @@
       "layout": "default",
       "globalOverrideProperty": "Overridden by global override",
       "globalAndFrontMatterOverrideProperty": "Overridden by global override"
+    },
+    {
+      "headings": {
+        "thumbnail-test": "Thumbnail test",
+        "images": "Images",
+        "square-thumb-size-100-default": "Square thumb, size = 100 (default)",
+        "square-thumb-with-alt-test": "Square thumb with alt="Test"",
+        "square-thumb-size-200": "Square thumb, size = 200",
+        "circle-thumbs-size-100": "Circle thumbs, size = 100",
+        "an-actual-image": "An actual image",
+        "broken-link-still-takes-up-the-space-it-s-supposed-to": "Broken link, still takes up the space it's supposed to",
+        "borders": "Borders",
+        "background": "Background",
+        "valid-css-properties": "Valid CSS properties",
+        "invalid-css-properties": "Invalid CSS properties",
+        "empty": "Empty",
+        "text-emojis-icons": "Text/Emojis/Icons",
+        "text": "Text",
+        "markdown": "Markdown",
+        "emojis": "Emojis",
+        "icons": "Icons",
+        "font-size-font-color": "font-size/font-color",
+        "20px-font-size": "20px font-size",
+        "40px-font-size": "40px font-size",
+        "font-color": "font-color"
+      },
+      "src": "testThumbnails.md",
+      "title": "Thumbnails Test",
+      "layout": "default",
+      "globalOverrideProperty": "Overridden by global override",
+      "globalAndFrontMatterOverrideProperty": "Overridden by global override"
     }
   ]
 }

test/functional/test_site/expected/testThumbnails.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="default-head-top">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="generator" content="MarkBind 2.5.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Thumbnails Test</title>
+  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
+  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
+  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
+  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
+  <link rel="stylesheet" href="markbind/css/github.min.css">
+  <link rel="stylesheet" href="markbind/css/markbind.css">
+  <link rel="stylesheet" href="STYLESHEET_LINK">
+  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
+
+
+  <meta name="default-head-bottom">
+  <link rel="icon" href="/test_site/favicon.png">
+</head>
+
+<body>
+  <div id="app">
+    <div id="flex-body">
+      <div id="content-wrapper">
+        <h1 id="thumbnail-test">Thumbnail test<a class="fa fa-anchor" href="#thumbnail-test"></a></h1>
+        <h2 id="images">Images<a class="fa fa-anchor" href="#images"></a></h2>
+        <h3 id="square-thumb-size-100-default">Square thumb, size = 100 (default)<a class="fa fa-anchor" href="#square-thumb-size-100-default"></a></h3>
+        <p>
+          <thumbnail src="http://placehold.it/800x600"></thumbnail>
+        </p>
+        <h3 id="square-thumb-with-alt-test">Square thumb with alt=&quot;Test&quot;<a class="fa fa-anchor" href="#square-thumb-with-alt-test"></a></h3>
+        <p>
+          <thumbnail alt="Test" src="/test_site/asdf"></thumbnail>
+        </p>
+        <h3 id="square-thumb-size-200">Square thumb, size = 200<a class="fa fa-anchor" href="#square-thumb-size-200"></a></h3>
+        <p>
+          <thumbnail src="http://placehold.it/800x600" size="200"></thumbnail>
+        </p>
+        <h3 id="circle-thumbs-size-100">Circle thumbs, size = 100<a class="fa fa-anchor" href="#circle-thumbs-size-100"></a></h3>
+        <p>
+          <thumbnail src="http://placehold.it/800x600" circle=""></thumbnail>
+          <thumbnail src="http://placehold.it/100x300" circle=""></thumbnail>
+        </p>
+        <h3 id="an-actual-image">An actual image<a class="fa fa-anchor" href="#an-actual-image"></a></h3>
+        <p>
+          <thumbnail circle="" size="300" src="/test_site/images/deer.jpg"></thumbnail>
+          <pic src="/test_site/images/deer.jpg" height="300"></pic>
+        </p>
+        <hr>
+        <h3 id="broken-link-still-takes-up-the-space-it-s-supposed-to">Broken link, still takes up the space it's supposed to<a class="fa fa-anchor" href="#broken-link-still-takes-up-the-space-it-s-supposed-to"></a></h3>
+        <p>
+          <thumbnail src="/broken_link" border=""></thumbnail>
+          <thumbnail src="http://placehold.it/300x100"></thumbnail>
+        </p>
+        <hr>
+        <h2 id="borders">Borders<a class="fa fa-anchor" href="#borders"></a></h2>
+        <div class="table-responsive">
+          <table class="markbind-table table table-bordered table-striped">
+            <thead>
+              <tr>
+                <th>Thumbnail</th>
+                <th>Attribute</th>
+                <th>Description</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <thumbnail src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td></td>
+                <td>no border</td>
+              </tr>
+              <tr>
+                <td>
+                  <thumbnail border="3px solid red" src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td><code>border='3px solid red'</code></td>
+                <td>3 pixel thick solid red line</td>
+              </tr>
+              <tr>
+                <td>
+                  <thumbnail border="4px dotted blue" src="http://placehold.it/300x100"></thumbnail>
+                </td>
+                <td><code>4px dotted blue</code></td>
+                <td>4 pixel thick dotted blue line</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <hr>
+        <h2 id="background">Background<a class="fa fa-anchor" href="#background"></a></h2>
+        <h3 id="valid-css-properties">Valid CSS properties<a class="fa fa-anchor" href="#valid-css-properties"></a></h3>
+        <p>
+          <thumbnail background="lightblue" circle=""></thumbnail>
+          <thumbnail background="#aaf" circle=""></thumbnail>
+          <thumbnail background="rgba(120, 120, 200, 0.4)" circle=""></thumbnail>
+        </p>
+        <h3 id="invalid-css-properties">Invalid CSS properties<a class="fa fa-anchor" href="#invalid-css-properties"></a></h3>
+        <p>
+          <thumbnail background="asdf" border="1px solid black" circle=""></thumbnail>
+        </p>
+        <h3 id="empty">Empty<a class="fa fa-anchor" href="#empty"></a></h3>
+        <p>
+          <thumbnail background="" border="1px solid black" circle=""></thumbnail>
+        </p>
+        <hr>
+        <h2 id="text-emojis-icons">Text/Emojis/Icons<a class="fa fa-anchor" href="#text-emojis-icons"></a></h2>
+        <h3 id="text">Text<a class="fa fa-anchor" href="#text"></a></h3>
+        <p>
+          <thumbnail text="test" border="1px solid black" circle="">test</thumbnail>
+        </p>
+        <h3 id="markdown">Markdown<a class="fa fa-anchor" href="#markdown"></a></h3>
+        <p>
+          <thumbnail text="_test_" border="1px solid black" circle=""><em>test</em></thumbnail>
+          <thumbnail text="**test**" border="1px solid black" circle=""><strong>test</strong></thumbnail>
+        </p>
+        <h3 id="emojis">Emojis<a class="fa fa-anchor" href="#emojis"></a></h3>
+        <p>
+          <thumbnail text=":x:" border="1px solid black" circle="">❌</thumbnail>
+          <thumbnail text=":eggplant:" border="1px solid black" circle="">🍆</thumbnail>
+        </p>
+        <h3 id="icons">Icons<a class="fa fa-anchor" href="#icons"></a></h3>
+        <p>
+          <thumbnail text=":fab-github:" border="1px solid black" circle=""><span aria-hidden="true" class="fab fa-github"></span></thumbnail>
+          <thumbnail text=":glyphicon-book:" background="#666" font-color="#eee" circle=""><span aria-hidden="true" class="glyphicon glyphicon-book"></span></thumbnail>
+        </p>
+        <hr>
+        <h2 id="font-size-font-color">font-size/font-color<a class="fa fa-anchor" href="#font-size-font-color"></a></h2>
+        <h3 id="20px-font-size">20px font-size<a class="fa fa-anchor" href="#20px-font-size"></a></h3>
+        <p>
+          <thumbnail text="test" border="1px solid black" font-size="20" circle="">test</thumbnail>
+        </p>
+        <h3 id="40px-font-size">40px font-size<a class="fa fa-anchor" href="#40px-font-size"></a></h3>
+        <p>
+          <thumbnail text="test" border="1px solid black" font-size="40" circle="">test</thumbnail>
+        </p>
+        <h3 id="font-color">font-color<a class="fa fa-anchor" href="#font-color"></a></h3>
+        <p>
+          <thumbnail text="blue" border="1px solid black" font-color="#669" circle="">blue</thumbnail>
+          <thumbnail text="maroon" border="1px solid black" font-color="maroon" font-size="25" circle="">maroon</thumbnail>
+        </p>
+      </div>
+    </div>
+    <footer>
+      <div class="text-center">
+        Default footer
+      </div>
+    </footer>
+  </div>
+</body>
+<script src="markbind/js/vue.min.js"></script>
+<script src="markbind/js/vue-strap.min.js"></script>
+<script src="markbind/js/bootstrap-utility.min.js"></script>
+<script src="markbind/js/polyfill.min.js"></script>
+<script src="markbind/js/bootstrap-vue.min.js"></script>
+<script>
+  const baseUrl = '/test_site'
+  const enableSearch = true
+</script>
+<script src="markbind/js/setup.js"></script>
+<script src="SCRIPT_LINK"></script>
+<script>
+  alert("hello")
+</script>
+<script src="markbind/layouts/default/scripts.js"></script>
+
+</html>

test/functional/test_site/site.json

@@ -51,6 +51,10 @@
     {
       "src": "testAnchorGeneration.md",
       "title": "Anchor Generation Test"
+    },
+    {
+      "src": "testThumbnails.md",
+      "title": "Thumbnails Test"
     }
   ],
   "ignore": [