From 497547e1e06ee9d644aadc37c1956c5bf77a9685 Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Sun, 27 Jan 2019 22:03:39 +0800 Subject: [PATCH 1/3] Add markdown-it-regexp --- package-lock.json | 5 +++++ package.json | 1 + src/lib/markbind/package-lock.json | 5 +++++ src/lib/markbind/package.json | 1 + 4 files changed, 12 insertions(+) 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/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", From f83b685b0df4b0635a3f3e842587f620adc50c83 Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Sun, 27 Jan 2019 22:04:08 +0800 Subject: [PATCH 2/3] Add parsing for new :prefix-name: icon font syntax - aria-hidden=true is set for icon fonts for accessibility: https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html#accessibility --- docs/userGuide/syntax/icons.mbdf | 35 +++++++------------ src/Site.js | 2 +- src/lib/markbind/src/lib/markdown-it/index.js | 3 +- .../src/lib/markdown-it/markdown-it-icons.js | 13 +++++++ .../_markbind/navigation/site-nav.md | 6 ++-- test/functional/test_site/expected/index.html | 6 ++-- test/unit/utils/data.js | 2 +- 7 files changed, 36 insertions(+), 31 deletions(-) create mode 100644 src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js diff --git a/docs/userGuide/syntax/icons.mbdf b/docs/userGuide/syntax/icons.mbdf index a4dda106ac..1cbf6da7c3 100644 --- a/docs/userGuide/syntax/icons.mbdf +++ b/docs/userGuide/syntax/icons.mbdf @@ -8,38 +8,29 @@ 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 }} - - - -{{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 +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: \ No newline at end of file diff --git a/src/Site.js b/src/Site.js index f9d8f906b4..55ae59437c 100644 --- a/src/Site.js +++ b/src/Site.js @@ -102,7 +102,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/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/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/expected/index.html b/test/functional/test_site/expected/index.html index 7d7a27eabd..a029c6f402 100644 --- a/test/functional/test_site/expected/index.html +++ b/test/functional/test_site/expected/index.html @@ -160,7 +160,7 @@

Testing Site-Nav

-
  • -
  • Filler text Youtube 📺 filler text +
  • Filler text Youtube 📺 filler text
    • The answer to everything in the universe
    • -
    • 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 1cbf6da7c3..f56772b041 100644 --- a/docs/userGuide/syntax/icons.mbdf +++ b/docs/userGuide/syntax/icons.mbdf @@ -33,4 +33,15 @@ Please use the new :prefix-name: syntax instead. 1. Decide which icon you want to use from [list of provided glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons). 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: \ No newline at end of file + `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: + \ 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/src/Site.js b/src/Site.js index 55ae59437c..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' 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/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 a029c6f402..993d84d782 100644 --- a/test/functional/test_site/expected/index.html +++ b/test/functional/test_site/expected/index.html @@ -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 5ee268b55f..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 = '