From 1123004b3aeeef93e78f5ed88df829f66744bb36 Mon Sep 17 00:00:00 2001 From: tlylt Date: Sun, 4 Dec 2022 17:21:56 +0800 Subject: [PATCH] fix linkify and alt --- docs/userGuide/syntax/images.md | 23 ++ package-lock.json | 111 ++++++-- .../test_site/expected/siteData.json | 11 + .../test_site/expected/testImages.html | 255 ++++++++++++++++++ .../expected/testImages.page-vue-render.js | 19 ++ .../cli/test/functional/test_site/site.json | 4 + .../test/functional/test_site/testImages.md | 21 ++ packages/core/package.json | 6 +- packages/core/src/lib/markdown-it/index.js | 2 +- 9 files changed, 431 insertions(+), 21 deletions(-) create mode 100644 packages/cli/test/functional/test_site/expected/testImages.html create mode 100644 packages/cli/test/functional/test_site/expected/testImages.page-vue-render.js create mode 100644 packages/cli/test/functional/test_site/testImages.md diff --git a/docs/userGuide/syntax/images.md b/docs/userGuide/syntax/images.md index 5ff078f10a..09e55f2bb4 100644 --- a/docs/userGuide/syntax/images.md +++ b/docs/userGuide/syntax/images.md @@ -24,6 +24,8 @@ ![alt text here](https://markbind.org/images/logo-lightbackground.png "title here") +**Adjusting image dimension** + MarkBind also supports the `=Wx` shorthand for specifying image width: @@ -38,3 +40,24 @@ This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackg MarkBind does not support setting the height of images through the `=WxH` or `=xH` syntax. This is because images are automatically resized to ensure responsiveness based on their width. + +**Auto-linkify** + +MarkBind automatically wraps images with link to the image URL such that one can click on the image to view the full image. + + +markdown + +Click on the image to open the image: ![logo](https://markbind.org/images/logo-lightbackground.png =150x) + + + +If the image is wrapped with a link, the link will be used instead. + + +markdown + +Clicking on this image will bring you to the MarkBind homepage (instead of opening the image): +[![logo](https://markbind.org/images/logo-lightbackground.png =150x)](https://markbind.org) + + diff --git a/package-lock.json b/package-lock.json index 0a68a27eb0..9ac2acb945 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@fortawesome/fontawesome-free": "^5.15.4", "@primer/octicons": "^15.0.1", "@sindresorhus/slugify": "^0.9.1", + "@tlylt/markdown-it-imsize": "^3.0.0", "@types/bluebird": "^3.5.36", "@types/cheerio": "^0.22.31", "@types/domhandler": "^2.4.2", @@ -62,8 +63,7 @@ "markdown-it": "^12.3.2", "markdown-it-attrs": "^4.1.3", "markdown-it-emoji": "^1.4.0", - "markdown-it-imsize": "^2.0.1", - "markdown-it-linkify-images": "^2.0.0", + "markdown-it-linkify-images": "^3.0.0", "markdown-it-mark": "^3.0.0", "markdown-it-regexp": "^0.4.0", "markdown-it-sub": "^1.0.0", @@ -3843,6 +3843,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@tlylt/markdown-it-imsize": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tlylt/markdown-it-imsize/-/markdown-it-imsize-3.0.0.tgz", + "integrity": "sha512-6kTM+vRJTuN2UxNPyJ8yC+NHrzS+MxVHV+z+bDxSr/Fd7eTah2+otLKC2B17YI/1lQnSumA2qokPGuzsA98c6g==" + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -14596,15 +14601,52 @@ "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz", "integrity": "sha512-QCz3Hkd+r5gDYtS2xsFXmBYrgw6KuWcJZLCEkdfAuwzZbShCmCfta+hwAMq4NX/4xPzkSHduMKgMkkPUJxSXNg==" }, - "node_modules/markdown-it-imsize": { + "node_modules/markdown-it-linkify-images": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-linkify-images/-/markdown-it-linkify-images-3.0.0.tgz", + "integrity": "sha512-Vs5yGJa5MWjFgytzgtn8c1U6RcStj3FZKhhx459U8dYbEE5FTWZ6mMRkYMiDlkFO0j4VCsQT1LT557bY0ETgtg==", + "dependencies": { + "markdown-it": "^13.0.1" + } + }, + "node_modules/markdown-it-linkify-images/node_modules/argparse": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz", - "integrity": "sha512-5SH90ademqcR8ifQCBXRCfIR4HGfZZOh5pO0j2TglulfSQH+SBXM4Iw/QlTUbSoUwVZArCYgECoMvktDS2kP3w==" + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, - "node_modules/markdown-it-linkify-images": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/markdown-it-linkify-images/-/markdown-it-linkify-images-2.0.0.tgz", - "integrity": "sha512-8a85tX2OlA48C5BRNDtaaqaUmyvs1QLefnPgCB6NIwWcofVl5cS68I2P4vWSaKN/VZNS28EgG6uNtHawVNlt1w==" + "node_modules/markdown-it-linkify-images/node_modules/entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/markdown-it-linkify-images/node_modules/linkify-it": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", + "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", + "dependencies": { + "uc.micro": "^1.0.1" + } + }, + "node_modules/markdown-it-linkify-images/node_modules/markdown-it": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz", + "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==", + "dependencies": { + "argparse": "^2.0.1", + "entities": "~3.0.1", + "linkify-it": "^4.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + }, + "bin": { + "markdown-it": "bin/markdown-it.js" + } }, "node_modules/markdown-it-mark": { "version": "3.0.1", @@ -27282,6 +27324,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "@tlylt/markdown-it-imsize": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@tlylt/markdown-it-imsize/-/markdown-it-imsize-3.0.0.tgz", + "integrity": "sha512-6kTM+vRJTuN2UxNPyJ8yC+NHrzS+MxVHV+z+bDxSr/Fd7eTah2+otLKC2B17YI/1lQnSumA2qokPGuzsA98c6g==" + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -35798,15 +35845,45 @@ "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz", "integrity": "sha512-QCz3Hkd+r5gDYtS2xsFXmBYrgw6KuWcJZLCEkdfAuwzZbShCmCfta+hwAMq4NX/4xPzkSHduMKgMkkPUJxSXNg==" }, - "markdown-it-imsize": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz", - "integrity": "sha512-5SH90ademqcR8ifQCBXRCfIR4HGfZZOh5pO0j2TglulfSQH+SBXM4Iw/QlTUbSoUwVZArCYgECoMvktDS2kP3w==" - }, "markdown-it-linkify-images": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/markdown-it-linkify-images/-/markdown-it-linkify-images-2.0.0.tgz", - "integrity": "sha512-8a85tX2OlA48C5BRNDtaaqaUmyvs1QLefnPgCB6NIwWcofVl5cS68I2P4vWSaKN/VZNS28EgG6uNtHawVNlt1w==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-linkify-images/-/markdown-it-linkify-images-3.0.0.tgz", + "integrity": "sha512-Vs5yGJa5MWjFgytzgtn8c1U6RcStj3FZKhhx459U8dYbEE5FTWZ6mMRkYMiDlkFO0j4VCsQT1LT557bY0ETgtg==", + "requires": { + "markdown-it": "^13.0.1" + }, + "dependencies": { + "argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" + }, + "entities": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", + "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==" + }, + "linkify-it": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz", + "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==", + "requires": { + "uc.micro": "^1.0.1" + } + }, + "markdown-it": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz", + "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==", + "requires": { + "argparse": "^2.0.1", + "entities": "~3.0.1", + "linkify-it": "^4.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + } + } + } }, "markdown-it-mark": { "version": "3.0.1", diff --git a/packages/cli/test/functional/test_site/expected/siteData.json b/packages/cli/test/functional/test_site/expected/siteData.json index 431622eb25..158ad39822 100644 --- a/packages/cli/test/functional/test_site/expected/siteData.json +++ b/packages/cli/test/functional/test_site/expected/siteData.json @@ -323,6 +323,17 @@ "additional-delimiters-can-be-used-if-mathdelimiters-plugin-is-enabled": "Additional delimiters can be used if mathDelimiters plugin is enabled" }, "headingKeywords": {} + }, + { + "src": "testImages.md", + "title": "Rendering of images according to specified dimension and auto-linkify ability", + "headings": { + "images": "Images", + "alt": "Alt", + "dimension": "Dimension", + "linkify": "Linkify" + }, + "headingKeywords": {} } ] } diff --git a/packages/cli/test/functional/test_site/expected/testImages.html b/packages/cli/test/functional/test_site/expected/testImages.html new file mode 100644 index 0000000000..6655443b72 --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testImages.html @@ -0,0 +1,255 @@ + + + + + + + + + + + + + Rendering of images according to specified dimension and auto-linkify ability + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
  • Open Bugs
    • +     +
    +
    + Test Jumbotron
    +
    +
    +
    +

    Relative Link Test This is a relative Intra-Site link in a layout (see link)

    +
    +
    + +
    +
    +
    +

    Default Layout

    +
    +
    +
    +
    +
    + + +
  • +
    Home 🏠
    +
    • +
  • +
    Open Bugs 🐛
    +
    • +
  • +

    Testing Site-Nav

    +
    • +
  • +
    Dropdown title ✏️ + + + + + +
    + +
    • +
  • +
    Third Link 📋
    +
    • +
  • +
    Filler text Youtube 📺 filler text + + + + + +
    + +
    • +
  • +
    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
      • +
    • +
      Nested Dropdown Title + + + + +
      +
        +
      • Hello Doge Hello Doge 🐶
        • +
      • +
        NESTED LINK Home 🏠
        +
        • +
      • Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit
        • +
      +
      • +
    +
    • +
  • +
    Test line break in navigation layout + + + + +
    +
      +
    • Nested line break text ✂️
      • +
    • +
      Nested line break href + + + + +
      +
        +
      • Nested Nested line break text ✂️
        • +
      +
      • +
    • +
      Nested line break dropdown menu + + + + +
      +
        +
      • Line break item 2 📘
        • +
      +
      • +
    +
    • +     +     +
    +
    +     +
    +

    Images

    +

    Alt

    +

    The label of the image will be used as the "alt": caption

    +

    Dimension

    +

    This image has a width of 100px:

    +

    This image has a width of 200px:

    +

    Linkify

    +

    AutoWrap image with link to the image URL:

    +

    Minion

    +

    Does not autoWrap image with link to the image URL if already wrapped with a link:

    +

    Minion

    + +
    + +
    +
    +     +
    +
    +
    +

    Heading in footer should not be indexed

    +
    + This is a dynamic height footer that supports markdown 😄! +
    +
    +
    +
    + + + + + + + + + + + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/expected/testImages.page-vue-render.js b/packages/cli/test/functional/test_site/expected/testImages.page-vue-render.js new file mode 100644 index 0000000000..9efa790cd3 --- /dev/null +++ b/packages/cli/test/functional/test_site/expected/testImages.page-vue-render.js @@ -0,0 +1,19 @@ + + var pageVueRenderFn = function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('header',[_c('navbar',{attrs:{"type":"dark","default-highlight-on":"sibling-or-child"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind Test Site")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs")])])]),_v(" "),_m(0)],1),_v(" "),_m(1)]),_v(" "),_c('div',{attrs:{"id":"flex-body"}},[_c('overlay-source',{attrs:{"id":"site-nav","tag-name":"nav","to":"site-nav"}},[_c('div',{staticClass:"site-nav-top"},[_c('div',{staticClass:"fw-bold mb-2",staticStyle:{"font-size":"1.25rem"}},[_c('div',[_c('h2',{attrs:{"id":"default-layout"}},[_c('span',{staticClass:"anchor",attrs:{"id":"default-layout"}}),_v("Default Layout"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#default-layout","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('div',[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Home 🏠")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/bugs/index.html"}},[_v("Open Bugs 🐛")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-0"},[_c('h3',{attrs:{"id":"testing-site-nav"}},[_c('span',{staticClass:"anchor",attrs:{"id":"testing-site-nav"}}),_v("Testing Site-Nav"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#testing-site-nav","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Dropdown ")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-search",attrs:{"aria-hidden":"true"}}),_v(" title ✏️ "),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Html within site-nav "),_c('span',{staticStyle:{"color":"red"}},[_v("should")]),_v(" be displayed properly")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown title 📐\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_v("Dropdown link two")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('mark',[_v("Third Link")]),_v(" 📋")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Filler text "),_c('a',{attrs:{"href":"https://www.youtube.com/"}},[_c('span',{staticClass:"glyphicon glyphicon-facetime-video",attrs:{"aria-hidden":"true"}}),_v(" Youtube 📺")]),_v(" filler text"),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.youtube.com/watch?v=dQw4w9WgXcQ"}},[_v("The answer to everything in the universe")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('mark',[_v("Dropdown title")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-comment",attrs:{"aria-hidden":"true"}}),_v(" ✏️ "),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"https://www.google.com/"}},[_c('strong',[_v("Nested")]),_v(" Dropdown link one")])])])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("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")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested Dropdown Title\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Hello Doge Hello Doge 🐶")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_c('strong',[_v("NESTED LINK")]),_v(" Home 🏠")])])]),_v(" "),_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit Text cut off from height limit")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Test line break in navigation layout\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-1"},[_v("Nested line break text ✂️")]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/test_site/index.html"}},[_v("Nested line break href")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Nested Nested line break text ✂️")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_v("Nested line break dropdown menu\n\n"),_c('i',{staticClass:"site-nav-dropdown-btn-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-list"},[_c('li',{staticClass:"site-nav-custom-list-item site-nav-list-item-2"},[_v("Line break item 2 📘")])])])])])])],1)],1)])]),_v(" "),_m(2),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(3)])} +}; + var pageVueStaticRenderFns = [function anonymous( +) { +with(this){return _c('div',{staticClass:"bg-info display-4 text-center text-white"},[_c('br'),_v("\n Test Jumbotron"),_c('br'),_v(" "),_c('br')])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Relative Link Test")]),_v(" This is a relative Intra-Site link in a layout (see "),_c('a',{attrs:{"href":"/test_site/index.html#heading-with-hidden-keyword"}},[_v("link")]),_v(")")])} +},function anonymous( +) { +with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('h1',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h2',{attrs:{"id":"alt"}},[_c('span',{staticClass:"anchor",attrs:{"id":"alt"}}),_v("Alt"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#alt","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The label of the image will be used as the \"alt\": "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"caption"}})])]),_v(" "),_c('h2',{attrs:{"id":"dimension"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dimension"}}),_v("Dimension"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dimension","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This image has a width of 100px: "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","width":"100"}})])]),_v(" "),_c('p',[_v("This image has a width of 200px: "),_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"","width":"200"}})])]),_v(" "),_c('h2',{attrs:{"id":"linkify"}},[_c('span',{staticClass:"anchor",attrs:{"id":"linkify"}}),_v("Linkify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#linkify","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("AutoWrap image with link to the image URL:")]),_v(" "),_c('p',[_c('a',{attrs:{"href":"https://octodex.github.com/images/minion.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://octodex.github.com/images/minion.png","alt":"Minion"}})])]),_v(" "),_c('p',[_v("Does not autoWrap image with link to the image URL if already wrapped with a link:")]),_v(" "),_c('p',[_c('a',{attrs:{"href":"http://google.com"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://octodex.github.com/images/minion.png","alt":"Minion"}})])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('h1',{attrs:{"id":"heading-in-footer-should-not-be-indexed"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-in-footer-should-not-be-indexed"}}),_v("Heading in footer should not be indexed"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-in-footer-should-not-be-indexed","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"text-center"},[_v("\n This is a dynamic height footer that supports markdown "),_c('span',[_v("😄")]),_v("!\n ")])])])} +}]; + \ No newline at end of file diff --git a/packages/cli/test/functional/test_site/site.json b/packages/cli/test/functional/test_site/site.json index 836eedd559..ebb832eb34 100644 --- a/packages/cli/test/functional/test_site/site.json +++ b/packages/cli/test/functional/test_site/site.json @@ -130,6 +130,10 @@ { "src": "testMath.md", "title": "Math formulae should be displayed correctly, with additional plugin" + }, + { + "src": "testImages.md", + "title": "Rendering of images according to specified dimension and auto-linkify ability" } ], "pagesExclude": ["**/*-fragment.md"], diff --git a/packages/cli/test/functional/test_site/testImages.md b/packages/cli/test/functional/test_site/testImages.md new file mode 100644 index 0000000000..0635d5ebe0 --- /dev/null +++ b/packages/cli/test/functional/test_site/testImages.md @@ -0,0 +1,21 @@ +# Images + +## Alt + +The label of the image will be used as the "alt": ![caption](https://markbind.org/images/logo-lightbackground.png) + +## Dimension + +This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x) + +This image has a width of 200px: ![](https://markbind.org/images/logo-lightbackground.png =200x) + +## Linkify + +AutoWrap image with link to the image URL: + +![Minion](https://octodex.github.com/images/minion.png) + +Does not autoWrap image with link to the image URL if already wrapped with a link: + +[![Minion](https://octodex.github.com/images/minion.png)](http://google.com) diff --git a/packages/core/package.json b/packages/core/package.json index 76d05479e1..d694193ceb 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -50,8 +50,8 @@ "markdown-it": "^12.3.2", "markdown-it-attrs": "^4.1.3", "markdown-it-emoji": "^1.4.0", - "markdown-it-imsize": "^2.0.1", - "markdown-it-linkify-images": "^2.0.0", + "@tlylt/markdown-it-imsize": "^3.0.0", + "markdown-it-linkify-images": "^3.0.0", "markdown-it-mark": "^3.0.0", "markdown-it-regexp": "^0.4.0", "markdown-it-sub": "^1.0.0", @@ -88,4 +88,4 @@ "memfs": "^3.0.1", "ts-jest": "^27.1.4" } -} +} \ No newline at end of file diff --git a/packages/core/src/lib/markdown-it/index.js b/packages/core/src/lib/markdown-it/index.js index 74a6e2d4b2..d31d2c2a3c 100644 --- a/packages/core/src/lib/markdown-it/index.js +++ b/packages/core/src/lib/markdown-it/index.js @@ -28,7 +28,7 @@ markdownIt.use(createDoubleDelimiterInlineRule('%%', 'dimmed', 'emphasis')) markdownIt.use(require('markdown-it-mark')) .use(require('markdown-it-sub')) .use(require('markdown-it-sup')) - .use(require('markdown-it-imsize'), { autofill: false }) + .use(require('@tlylt/markdown-it-imsize'), { autofill: false }) .use(require('markdown-it-table-of-contents')) .use(require('markdown-it-task-lists'), { enabled: true }) .use(require('markdown-it-linkify-images'), { imgClass: 'img-fluid' })