diff --git a/docs/_markbind/variables.md b/docs/_markbind/variables.md index 9176b62fc8..aebd26786f 100644 --- a/docs/_markbind/variables.md +++ b/docs/_markbind/variables.md @@ -6,15 +6,15 @@ #00B0F0 -{{ fas_arrow_down | safe }} -{{ fas_arrow_right | safe }} - {{ fas_check_circle | safe}} - {{ fas_lightbulb | safe}} -{{ fas_thumbs_down | safe }} +:fas-arrow-down: +:fas-arrow-right: +:fas-check-circle: +:fas-lightbulb: +:fas-thumbs-down: Example: Examples: -{{ fas_info_circle | safe }} -{{ far_check_square | safe }} +:fas-info-circle: +:far-check-square: [live preview]({{ baseUrl }}/userGuide/glossary.html#live-preview) diff --git a/docs/about.md b/docs/about.md index ba73e227e0..e5d1c63908 100644 --- a/docs/about.md +++ b/docs/about.md @@ -24,8 +24,8 @@ The **project team**: * [**Rachael Sim Hwee Ling**](https://github.com/rachx): _Project Member_ since Jan 2018 * [**Tan Wang Leng**](https://github.com/yamgent): Current _Team Lead_ since Jul 2018, _Project Member_ for May 2018 - Jun 2018 - You can **email us** at `seer` at `comp.nus.edu.sg` +:glyphicon-send: You can **email us** at `seer` at `comp.nus.edu.sg` - Interested in **contributing to MarkBind**? Visit the [MarkBind project on GitHub](https://github.com/MarkBind/markbind). +:glyphicon-console: Interested in **contributing to MarkBind**? Visit the [MarkBind project on GitHub](https://github.com/MarkBind/markbind). diff --git a/docs/index.md b/docs/index.md index ca74e07532..d6d5ae4cdc 100644 --- a/docs/index.md +++ b/docs/index.md @@ -103,7 +103,7 @@ In the example below, there are expandable panels that are nested within each ot - + @@ -133,9 +133,9 @@ MarkBind is **highly optimized for creating text-heavy websites** %%e.g., eLearn Here are some examples:
-{{ fas_heart }} **Icons** can improve the readability of a text-heavy document. MarkBind comes with a wide selection of [icons]({{ baseUrl }}/userGuide/markBindSyntax.html#icons-fonts) and [emoji]({{ baseUrl }}/userGuide/markBindSyntax.html#emoji).
-{{ fas_search }} With MarkBind's [**search feature**]({{ baseUrl }}/userGuide/makingTheSiteSearchable.html), you can allow readers to search for keywords in your site.
-{{ fas_window_maximize }} MarkBind allows you to add [**site/page navigation menus, headers, footers**]({{ baseUrl }}/userGuide/tweakingThePageStructure.html) easily. +:fas-heart: **Icons** can improve the readability of a text-heavy document. MarkBind comes with a wide selection of [icons]({{ baseUrl }}/userGuide/markBindSyntax.html#icons-fonts) and [emoji]({{ baseUrl }}/userGuide/markBindSyntax.html#emoji).
+:fas-search: With MarkBind's [**search feature**]({{ baseUrl }}/userGuide/makingTheSiteSearchable.html), you can allow readers to search for keywords in your site.
+:fas-window-maximize: MarkBind allows you to add [**site/page navigation menus, headers, footers**]({{ baseUrl }}/userGuide/tweakingThePageStructure.html) easily.
diff --git a/docs/userGuide/syntax/icons.mbdf b/docs/userGuide/syntax/icons.mbdf index a4dda106ac..f56772b041 100644 --- a/docs/userGuide/syntax/icons.mbdf +++ b/docs/userGuide/syntax/icons.mbdf @@ -8,38 +8,40 @@ MarkBind supports using Font Icons provided by Font Awesome and Glyphicons. The advantage of font icons over emojis is font icons can be _styled_ to fit your needs. e.g., * emoji: Don't judge the :book: by it's cover! :-1: -* font icons: Don't judge the {{ fas_book }} by it's cover! {{ icon_dislike }} +* font icons: Don't judge the :fas-book: by it's cover! :fas-thumbs-down: + +The syntax for icons has changed, and the earlier {{ prefix_name }} syntax has been deprecated.
+Please use the new :prefix-name: syntax instead. + ###### Using Font Awesome Icons 1. Decide which icon you want to use from the [list of available icons](https://fontawesome.com/icons?d=gallery&m=free). -1. Construct the MarkBind name for the selected icon by replacing the hyphens (`-`) in the actual name with underscores ( `_` ) and adding the _type prefix_. +1. Construct the MarkBind name for the selected icon by adding the _type prefix_. Note: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type: - * _Solid_ (prefix: `fas_`) e.g., {{ fas_file_code }} (actual name `file-code`, MarkBind name **`fas_`**`file_code`) - * _Regular_ (prefix: `far_`) e.g., {{ far_file_code }} (actual name `file-code`, MarkBind name **`far_`**`file_code`) - * _Brands_ (prefix: `fab_`): e.g., {{ fab_github_alt }} (actual name `github-alt`, MarkBind name **`fab_`**`github_alt`) + * _Solid_ (prefix: `fas-`) e.g., :fas-file-code: (actual name `file-code`, MarkBind name **`fas-`**`file-code`) + * _Regular_ (prefix: `far-`) e.g., :fas-file-code: (actual name `file-code`, MarkBind name **`far-`**`file-code`) + * _Brands_ (prefix: `fab-`): e.g., :fab-github-alt: (actual name `github-alt`, MarkBind name **`fab-`**`github-alt`) -1. Insert MarkBind name for the icon enclosed within double curly braces to get the icon in your page.
- `Create a **branch**` {{fas_code_branch}} now! → Create a **branch** {{ fas_code_branch }} now! +1. Insert MarkBind name for the icon enclosed within colons to get the icon in your page.
+ `Create a **branch**`:fas-code-branch: now! → Create a **branch** :fas-code-branch: now! ###### Using Glyphicons 1. Decide which icon you want to use from [list of provided glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons). -1. Construct the MarkBind name for the selected icon by replacing the hyphens (`-`) in the actual name with underscores ( `_` ).
- e.g., {{ glyphicon_home }} (actual name `glyphicon-home`, MarkBind name `glyphicon_home`) -1. Insert MarkBind name for the icon enclosed within double curly braces to get the icon in your page.
- `Move to the right!` {{glyphicon_hand_right}} → Move to the right! {{ glyphicon_hand_right }} +1. Insert the name for the icon enclosed within colons to get the icon in your page.
+ `Move to the right!`:glyphicon-hand-right: → Move to the right! :glyphicon-hand-right: -{{glyphicon_hand_right}} {{fab_github}} {{fas_home}} +:glyphicon-hand-right: :fab-github: :fas-home: -{{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }} %%{{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }}%% {{ glyphicon_hand_right }} {{ fab_github }} {{ fas_home }} +:glyphicon-hand-right: :fab-github: :fas-home: %%:glyphicon-hand-right: :fab-github: :fas-home:%% :glyphicon-hand-right: :fab-github: :fas-home: \ No newline at end of file diff --git a/docs/userGuide/syntax/variables.mbdf b/docs/userGuide/syntax/variables.mbdf index b4a5307f1e..4ae598345e 100644 --- a/docs/userGuide/syntax/variables.mbdf +++ b/docs/userGuide/syntax/variables.mbdf @@ -59,6 +59,7 @@ Represents the root directory of the project. Used for specifying intra-site lin {{ timestamp }} is the time stamp (in UTC) that indicates when the page was generated.
+ {{ icon_example }} Page generated at: {{ timestamp }} {{ icon_arrow_right }} Page generated at: {{ timestamp }}
@@ -70,7 +71,8 @@ Represents the root directory of the project. Used for specifying intra-site lin {{MarkBind}} represents a code snippet that specifies the MarkBind version in use and is linked to the MarkBind website.
-{{ icon_example }} Page generated by: {{ MarkBind }} {{ icon_arrow_right }} Page generated by: {{ MarkBind }} + +{{ icon_example }} Page generated by: {{ MarkBind }} {{ icon_arrow_right }} Page generated by: {{ MarkBind }}

@@ -109,10 +111,10 @@ Note: These variables will also be applied to [`` files]({{ baseUrl }}/

{{ icon_example }} This variable uses a built-in variable:
-\{{ glyphicon_hand_right }}\ +\{{ timestamp }}\ Here, the second variable will be assigned the contents of the first variable.
-\These is the first variable.\
+\This is the first variable.\
\{{ first }}\
This will not work, as the `fourth` variable is declared _below_ the line that refers to it.
@@ -126,12 +128,13 @@ Note that if the variable being referenced contains HTML tags, MarkBind may esca {{ icon_example }} If we declare the variables as follows,
-\{{ glyphicon_hand_right }}\
-\{{ right_hand }}\ +\\Note: \\
+\{{ note }}\
+\{{ note_2 }} This is a constant.\ the result will be,
-{{ right_hand_2 }} {{ icon_arrow_right }} \ +{{ const_note }} :fas-arrow-right: \Note: \ This is a constant.
You must use the `safe` filter when using such variables: @@ -140,10 +143,11 @@ You must use the `safe` filter when using such variables: {{ icon_example }} If we use the safe filter for the second variable:
-\{{ glyphicon_hand_right }}\
-\{{ right_hand | safe }}\ +\\Note: \\
+\{{ note | safe }}\
+\{{ note_2 }} This is a constant.\ -{{ right_hand_2 }} {{ icon_arrow_right }} {{glyphicon_hand_right}} +{{ const_note }} :fas-arrow-right: Note: This is a constant. diff --git a/package-lock.json b/package-lock.json index b710ffc474..e0d24557b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5376,6 +5376,11 @@ "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz", "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc=" }, + "markdown-it-regexp": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/markdown-it-regexp/-/markdown-it-regexp-0.4.0.tgz", + "integrity": "sha1-1k1xPuzsVc5M/esyF1DswJniwtw=" + }, "markdown-it-table-of-contents": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.3.3.tgz", diff --git a/package.json b/package.json index cc4b8662d0..b914a84287 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "markdown-it-ins": "^2.0.0", "markdown-it-linkify-images": "^1.1.0", "markdown-it-mark": "^2.0.0", + "markdown-it-regexp": "^0.4.0", "markdown-it-table-of-contents": "^0.3.2", "markdown-it-task-lists": "^1.4.1", "markdown-it-video": "^0.4.0", diff --git a/src/Site.js b/src/Site.js index f9d8f906b4..d2bb91c595 100644 --- a/src/Site.js +++ b/src/Site.js @@ -84,8 +84,7 @@ const SITE_CONFIG_DEFAULT = { const FOOTER_DEFAULT = '
\n' + '
\n' - + ' This is a dynamic height footer that supports variables {{glyphicon_tags}} ' - + 'and markdown :smile:!\n' + + ' This is a dynamic height footer that supports markdown :smile:!\n' + '
\n' + ' \n' + '
\n' @@ -102,7 +101,7 @@ const INDEX_MARKDOWN_DEFAULT = '\n' + 'Welcome to your page generated with MarkBind.\n'; const SITE_NAV_DEFAULT = '\n' - + '* [Home {{glyphicon_home}}]({{baseUrl}}/index.html)\n' + + '* [Home :glyphicon-home:]({{baseUrl}}/index.html)\n' + '\n'; const LAYOUT_SCRIPTS_DEFAULT = 'MarkBind.afterSetup(() => {\n' diff --git a/src/lib/markbind/package-lock.json b/src/lib/markbind/package-lock.json index 51e42b78b9..22b1cbcf0c 100644 --- a/src/lib/markbind/package-lock.json +++ b/src/lib/markbind/package-lock.json @@ -2344,6 +2344,11 @@ "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-2.0.0.tgz", "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc=" }, + "markdown-it-regexp": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/markdown-it-regexp/-/markdown-it-regexp-0.4.0.tgz", + "integrity": "sha1-1k1xPuzsVc5M/esyF1DswJniwtw=" + }, "markdown-it-table-of-contents": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.3.2.tgz", diff --git a/src/lib/markbind/package.json b/src/lib/markbind/package.json index 0de8aed4fb..5d8d48577c 100644 --- a/src/lib/markbind/package.json +++ b/src/lib/markbind/package.json @@ -27,6 +27,7 @@ "markdown-it-imsize": "^2.0.1", "markdown-it-ins": "^2.0.0", "markdown-it-mark": "^2.0.0", + "markdown-it-regexp": "^0.4.0", "markdown-it-table-of-contents": "^0.3.2", "markdown-it-task-lists": "^1.4.1", "markdown-it-video": "^0.4.0", diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js index 4cff28ec0d..2252be8f39 100644 --- a/src/lib/markbind/src/lib/markdown-it/index.js +++ b/src/lib/markbind/src/lib/markdown-it/index.js @@ -28,7 +28,8 @@ markdownIt.use(require('markdown-it-mark')) .use(require('markdown-it-attrs')) .use(require('./markdown-it-dimmed')) .use(require('./markdown-it-radio-button')) - .use(require('./markdown-it-block-embed')); + .use(require('./markdown-it-block-embed')) + .use(require('./markdown-it-icons')); // fix link markdownIt.normalizeLink = require('./normalizeLink'); diff --git a/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js new file mode 100644 index 0000000000..2cec487e99 --- /dev/null +++ b/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js @@ -0,0 +1,13 @@ +module.exports = require('markdown-it-regexp')( + /:(fa[brs]|glyphicon)-([a-z-]+):/m, + (match, utils) => { + let iconFontType = match[1]; + let iconFontName = match[2]; + + if (iconFontType === 'glyphicon') { + return ``; + } else { // If icon is a Font Awesome icon + return ``; + } + } +); diff --git a/test/functional/test_site/_markbind/footers/footer.md b/test/functional/test_site/_markbind/footers/footer.md index 8c21c8dcea..4f44d19c6c 100644 --- a/test/functional/test_site/_markbind/footers/footer.md +++ b/test/functional/test_site/_markbind/footers/footer.md @@ -2,6 +2,6 @@ # Heading in footer should not be indexed
- This is a dynamic height footer that supports variables {{glyphicon_tags}} and markdown :smile:! + This is a dynamic height footer that supports markdown :smile:!
diff --git a/test/functional/test_site/_markbind/navigation/site-nav.md b/test/functional/test_site/_markbind/navigation/site-nav.md index 0d2988a0a2..77f72b25ed 100644 --- a/test/functional/test_site/_markbind/navigation/site-nav.md +++ b/test/functional/test_site/_markbind/navigation/site-nav.md @@ -3,16 +3,16 @@ * [Home :house:]({{baseUrl}}/index.html) * [Open Bugs :bug:]({{baseUrl}}/bugs/index.html) * ### Testing Site-Nav -* **Dropdown :expanded:** {{glyphicon_search}} title :pencil2: +* **Dropdown :expanded:** :glyphicon-search: title :pencil2: * [Dropdown link one](https://www.google.com/) * Nested Dropdown title :triangular_ruler: * [**Nested** Dropdown link one](https://www.google.com/) * [**Nested** Dropdown link two](https://www.google.com/) * [Dropdown link two](https://www.google.com/) * [==Third Link== :clipboard:](https://www.google.com/) -* Filler text [{{glyphicon_facetime_video}} Youtube :tv:](https://www.youtube.com/) filler text +* Filler text [:glyphicon-facetime-video: Youtube :tv:](https://www.youtube.com/) filler text * [The answer to everything in the universe](https://www.youtube.com/watch?v=dQw4w9WgXcQ) - * ==:expanded:Dropdown title==:expanded: {{glyphicon_comment}} :pencil2: + * ==:expanded:Dropdown title==:expanded: :glyphicon-comment: :pencil2: * [**Nested** Dropdown link one](https://www.google.com/) * Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown * Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text diff --git a/test/functional/test_site/_markbind/variables.md b/test/functional/test_site/_markbind/variables.md index 77be110efc..c3972721a0 100644 --- a/test/functional/test_site/_markbind/variables.md +++ b/test/functional/test_site/_markbind/variables.md @@ -1,5 +1,3 @@ -{{glyphicon_education}} - This variable can be referenced. {{referenced_value}} diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html index 7d7a27eabd..993d84d782 100644 --- a/test/functional/test_site/expected/index.html +++ b/test/functional/test_site/expected/index.html @@ -160,7 +160,7 @@

Testing Site-Nav

-
  • @@ -181,10 +181,10 @@

    Testing Site-NavThird Link 📋

    • -
  • Filler text Youtube 📺 filler text +
  • Filler text Youtube 📺 filler text
    • The answer to everything in the universe
      • -
    • @@ -263,7 +263,6 @@

      Testing Site-Nav

      Variables that reference another variable

      -

      This variable can be referenced.

      References can be several levels deep.

      Page Variable

      @@ -541,7 +540,7 @@

      Markbind Plugin Pre-renderHeading in footer should not be indexed

      - This is a dynamic height footer that supports variables and markdown 😄! + This is a dynamic height footer that supports markdown 😄!
      diff --git a/test/functional/test_site/index.md b/test/functional/test_site/index.md index 1cf5bde8f8..b4ee7dd8e5 100644 --- a/test/functional/test_site/index.md +++ b/test/functional/test_site/index.md @@ -13,8 +13,6 @@ tags: ["tag-frontmatter-shown", "tag-included-file", "+tag-exp*", "-tag-exp-hidd
      # Variables that reference another variable -{{education_icon}} - {{finalized_value}} {{reference_level_4}} diff --git a/test/unit/Site.test.js b/test/unit/Site.test.js index e97cee8c2a..1596f94b42 100644 --- a/test/unit/Site.test.js +++ b/test/unit/Site.test.js @@ -259,14 +259,14 @@ test('Site read site config for custom site config', async () => { test('Site resolves variables referencing other variables', async () => { const json = { 'src/asset/font-awesome.csv': '', - 'src/asset/glyphicons.csv': 'glyphicon-plus', + 'src/asset/glyphicons.csv': '', 'src/template/page.ejs': PAGE_EJS, 'site.json': SITE_JSON_DEFAULT, '_markbind/variables.md': 'variable' + '{{level1}}' - + '{{glyphicon_plus}}' - + '{{level3 | safe}}', + + 'Blue text' + + '{{level3}}', }; fs.vol.fromJSON(json, ''); @@ -279,12 +279,13 @@ test('Site resolves variables referencing other variables', async () => { // check all variables expect(root.level1).toEqual('variable'); expect(root.level2).toEqual('variable'); - const expectedGlyphiconSpan = '' - .replace(/"/g, ''') + const expectedTextSpan = 'Blue text'; + const expectedTextSpanEscaped = expectedTextSpan + .replace(/"/g, '"') .replace(//g, '>'); - expect(root.level3).toEqual(expectedGlyphiconSpan); - expect(root.level4).toEqual(expectedGlyphiconSpan); + expect(root.level3).toEqual(expectedTextSpan); + expect(root.level4).toEqual(expectedTextSpanEscaped); }); test('Site read correct user defined variables', async () => { diff --git a/test/unit/utils/data.js b/test/unit/utils/data.js index cec3b22b21..54f4da70e0 100644 --- a/test/unit/utils/data.js +++ b/test/unit/utils/data.js @@ -75,8 +75,7 @@ module.exports.SITE_JSON_DEFAULT = '{\n' module.exports.FOOTER_MD_DEFAULT = '