markdown-magic 2.6.1 → 3.0.1

package/lib/utils/md/find-html-tags.js

@@ -0,0 +1,105 @@
+
+// Might need ([\s\S]*?) instead of '*' in between tags
+const HTML_TAG = /<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)/gim
+
+const MATCH_HTML_TAGS_REGEX = /<([a-zA-Z1-6]+)\b([^>]*)>*(?:>([\s\S]*?)<\/\1>|\s?\/?>)/gm
+// old forces closes / - /<([a-zA-Z1-6]+)\b([^>]*)>*(?:>([\s\S]*?)<\/\1>|\s?\/>)/gm
+
+function findHtmlTags(mdContents) {
+  const parents = mdContents
+    /* Fix non terminating <tags> */
+    .replace(/(['"`]<(.*)>['"`])/gm, '_$2_')
+    .match(MATCH_HTML_TAGS_REGEX)
+  // console.log('parents', parents)
+
+  if (parents) {
+    // const children = parents.filter(Boolean).map((p) => {
+    //   return p.match(HTML_TAG)
+    // })
+    // console.log('children', children)
+  }
+
+  const htmlTags = mdContents
+    /* Fix non terminating <tags> */
+    .replace(/(['"`]<(.*)>['"`])/gm, '_$2_')
+    .match(MATCH_HTML_TAGS_REGEX)
+  // console.log('htmlTags', htmlTags)
+
+  let tags = []
+  if (htmlTags) {
+    let propsValues = {}
+    // var regexSingleTag = /<([a-zA-Z1-6]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)/
+    // var regexSingleTag = /<([a-zA-Z1-6]+)([^<]+)*(?:>([\s\S]*?)<\/\1>|\s*\/>)/
+    var regexSingleTag = /<([a-zA-Z1-6]+)\b([^>]*)>*(?:>([\s\S]*?)<\/\1>|\s?\/?>)/
+    for (var i = 0; i < htmlTags.length; i++) {
+      // console.log('htmlTags[i]', htmlTags[i])
+      var tagMatches = regexSingleTag.exec(htmlTags[i]) || []
+      // console.log('tagMatches', tagMatches)
+      var [ match, tag, props ] = tagMatches
+      // console.log(`Tag #${i} ${tag}`)
+      if (props) {
+        const cleanProps = props
+          // Remove new lines and tabs
+          .replace(/\n\t/g, '')
+          // Remove extra spaces
+          .replace(/\s\s+/g, ' ')
+          .trim()
+
+        propsValues = cleanProps.split(" ").reduce((acc, curr) => {
+          const hasQuotes = curr.match(/=['"]/)
+          // Check key="value" | key='value' |  key={value}
+          const propWithValue = /([A-Za-z-_$]+)=['{"](.*)['}"]/g.exec(curr)
+          if (propWithValue && propWithValue[1]) {
+            return {
+              ...acc,
+              [`${propWithValue[1]}`]: (hasQuotes) ? propWithValue[2] : convert(propWithValue[2])
+            }
+          }
+          // Check isLoading boolean props
+          const booleanProp = curr.match(/([A-Za-z]*)/)
+          if (booleanProp && booleanProp[1]) {
+            return {
+              ...acc,
+              [`${booleanProp[1]}`]: true
+            }
+          }
+          return acc
+        }, {})
+      }
+
+      tags.push({
+        tag: tag,
+        props: propsValues,
+        raw: match
+      })
+    }
+  }
+  return tags
+}
+
+function convert(value) {
+  if (value === 'false') {
+    return false
+  }
+  if (value === 'true') {
+    return true
+  }
+  const isNumber = Number(value)
+  if (typeof isNumber === 'number' && !isNaN(isNumber)) {
+    return isNumber
+  }
+
+  try {
+    const val = JSON.parse(value)
+    return val
+  } catch (err) {
+    
+  }
+
+  return value
+}
+
+module.exports = {
+  findHtmlTags,
+  MATCH_HTML_TAGS_REGEX
+}

package/lib/utils/md/find-images-md.js

@@ -0,0 +1,27 @@
+const { onlyUnique } = require('./filters')
+
+// https://regex101.com/r/u2DwY2/2/
+const MARKDOWN_IMAGE_REGEX = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g
+
+/**
+ * Get markdown style images from text
+ * @param {string} text
+ * @returns {string[]}
+ */
+function findMarkdownImages(text) {
+  let matches
+  let imageLinks = []
+  while ((matches = MARKDOWN_IMAGE_REGEX.exec(text)) !== null) {
+    if (matches.index === MARKDOWN_IMAGE_REGEX.lastIndex) {
+      MARKDOWN_IMAGE_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    const [ match, image, altText ] = matches
+    imageLinks.push(image)
+  }
+  return imageLinks.filter(onlyUnique)
+}
+
+module.exports = {
+  findMarkdownImages,
+  MARKDOWN_IMAGE_REGEX
+}

package/lib/utils/md/find-images.js

@@ -0,0 +1,107 @@
+const { onlyUnique, isImage, isRelative } = require('./filters')
+const { findLinks, findAbsoluteLinks } = require('./find-links')
+const { findMarkdownImages, MARKDOWN_IMAGE_REGEX } = require('./find-images-md')
+
+// https://regex101.com/r/Uxgu3P/1
+const RELATIVE_IMAGES_REGEX = /(<img.*?src=['"])(?!(?:(?:https?|ftp):\/\/|data:))(\.?\/)?(.*?)(['"].*?\/?>)/gim
+
+/**
+ * @typedef {object} findImagesOpts
+ * @property {string[]} [links] - optional links to use to avoid re-parse
+ * @property {boolean} [unique=true] - ensure links unique
+ * @property {Record<string,any>} [frontmatter] - Frontmatter data
+ */
+
+/**
+ * @typedef {object} findImagesResult
+ * @property {string[]} all - All links
+ * @property {string[]} absolute - All absolute links
+ * @property {string[]} relative - All relative links
+ * @property {string[]} md - All md style links
+ */
+
+/**
+ * Get image links from content
+ * @param {string} content
+ * @param {findImagesOpts} [opts] - optional links to use to avoid re-parse
+ * @returns {findImagesResult}
+ */
+function findImages(content = '', opts = {}) {
+  const { links, unique = true, frontmatter } = opts
+  let foundLinks = []
+  if (links && Array.isArray(links)) {
+    foundLinks = links
+  } else {
+    const results = findLinks(content, { frontmatter })
+    foundLinks = results.links.concat(results.images)
+  }
+  const imageLinks = foundLinks.filter(isImage)
+  const markdownLinks = findMarkdownImages(content)
+  const allImageLinks = imageLinks.concat(markdownLinks)
+  const all = (!unique) ? allImageLinks : allImageLinks.filter(onlyUnique)
+  return {
+    all,
+    absolute: all.filter((link) => !isRelative(link)),
+    relative: all.filter((link) => isRelative(link)),
+    md: markdownLinks
+  }
+}
+
+/**
+ * Get absolute url image links
+ * @param {string} content
+ * @param {array} [links] - optional links to use to avoid re-parse
+ * @returns {array}
+ */
+ function findAbsoluteImages(content = '', links) {
+  const foundLinks = (links && Array.isArray(links)) ? links : findAbsoluteLinks(content)
+  const imageLinks = foundLinks.filter(isImage)
+  const markdownLinks = findMarkdownImages(content)
+  const allImageLinks = imageLinks.concat(markdownLinks)
+
+  return allImageLinks
+    .filter(onlyUnique)
+    .filter((link) => !isRelative(link))
+}
+
+/**
+ * Get relative image links from content
+ * @param {string} text
+ * @returns {array}
+ */
+function findRelativeImages(text) {
+  const imgTags = findRelativeImgTags(text) || []
+  const mdTags = findMarkdownImages(text).filter(isRelative)
+  return imgTags.concat(mdTags)
+}
+
+/*
+// https://regex101.com/r/SvMfme/1
+<img src="img/deploy/button.svg" />
+<img src="/img/deploy/button.svg" />
+<img src='/img/deploy/button.svg' />
+<img src='./img/deploy/button.svg' />
+<img src='../img/deploy/button.svg' />
+<img src='../../img/deploy/button.svg' />
+*/
+function findRelativeImgTags(block) {
+  let matches
+  let relLinks = []
+  while ((matches = RELATIVE_IMAGES_REGEX.exec(block)) !== null) {
+    if (matches.index === RELATIVE_IMAGES_REGEX.lastIndex) {
+      RELATIVE_IMAGES_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    const [ match, _, start, link ] = matches
+    relLinks.push(`${start || ''}${link}`)
+  }
+  return relLinks.filter(onlyUnique)
+}
+
+module.exports = {
+  findImages,
+  findAbsoluteImages,
+  findRelativeImages,
+  findMarkdownImages,
+  MARKDOWN_IMAGE_REGEX,
+  RELATIVE_IMAGES_REGEX
+}

package/lib/utils/md/find-links.js

@@ -0,0 +1,220 @@
+const { onlyUnique, isImage, isRelative } = require('./filters')
+const { findMarkdownImages } = require('./find-images-md')
+// Alt https://github.com/MikeKovarik/link-extract
+
+// https://regex101.com/r/In5HtG/3
+// const LIVE_LINKS_REGEX = /(?:['"(])((?:https?:\/\/)[\w\d\-_,./?=#%:+&]{3,})/gmi
+// https://regex101.com/r/In5HtG/4
+const LIVE_LINKS_REGEX = /['"(]((?:https?:\/\/)[\w\d\-_,./?=#%:+&]{3,})|<(\S*:\/\/\S*)>/gmi
+// https://regex101.com/r/Nywerx/3
+const RELATIVE_LINKS_REGEX = /(src|href|\()=?(['"/])(?!(?:(?:https?|ftp):\/\/|data:))(\.?\/)?([\w\d-_./,?=#%:+&]+)(?:['")])?/gim
+// https://regex101.com/r/u2DwY2/2/
+const MARKDOWN_IMAGE_REGEX = /!\[[^\]]*\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g
+// https://regex101.com/r/UeQ049/2 <https://www.markdownguide.org>
+const ANGLE_LINKS = /(<)(\S*[@:]\S*)(>)/
+
+const LINK_PATTERN = /^https?:\/\//
+
+function isLocal(link) {
+  return isRelative(link)
+}
+
+function isRemote(link) {
+  return !isRelative(link)
+}
+
+/**
+ * @typedef {object} findLinksOpts
+ * @property {Record<string,any>} [frontmatter] - Frontmatter data
+ * @property {boolean} [unique=true] - ensure links unique
+ */
+
+/**
+* @typedef {object} findLinksResult
+* @property {string[]} links - All images
+* @property {string[]} images - All live image links
+*/
+
+/**
+ * Finds all links in text relative or otherwise
+ * @param {string} text 
+ * @param {findLinksOpts} opts 
+ * @returns {findLinksResult}
+ */
+function findLinks(text, opts = {}) {
+  const { unique = true, frontmatter } = opts
+
+  const absoluteLinks = findAbsoluteLinks(text)
+  // console.log('absoluteLinks', absoluteLinks)
+  const relativeLinks = findRelativeLinks(text)
+  // console.log('relativeLinks', relativeLinks)
+  const frontmatterLinks = (frontmatter) ? findLinksInFrontMatter(frontmatter) : []
+  // console.log('frontmatterLinks', frontmatterLinks)
+  const markdownImages = findMarkdownImages(text)
+  // console.log('markdownImages', markdownImages)
+  const foundLinks = frontmatterLinks
+    .concat(absoluteLinks)
+    .concat(relativeLinks)
+    .concat(markdownImages)
+  
+  const allLinks = (!unique) ? foundLinks : foundLinks.filter(onlyUnique)
+  
+  let _images = markdownImages
+  let _links = []
+  for (let i = 0; i < allLinks.length; i++) {
+    if (isImage(allLinks[i])) {
+      _images.push(allLinks[i])
+    } else {
+      _links.push(allLinks[i])
+    }
+  }
+  // const allImages = normalLinks.filter((link) => isImage(link)).concat(mdLinks)
+  // const links = normalLinks.filter((link) => !isImage(link))
+  const images = _images.filter(onlyUnique)
+  const links = _links.filter(onlyUnique).filter(function(el) {
+    return images.indexOf(el) < 0
+  })
+
+  return {
+    links,
+    images
+  }
+  /*
+    // Old return https://github.com/DavidWells/markdown-magic/blob/b148b4ad3876c4ea07371451d230a5e9cec57ce5/lib/utils/md/find-links.js#L32-L44
+    return {
+    // all,
+    // live,
+    // relative,
+    // frontmatter: frontmatterLinks,
+    links: {
+      all: allLink,
+      relative: allLink.filter(isLocal),
+      live: allLink.filter(isRemote)
+    },
+    images: {
+      all: allImg,
+      relative: allImg.filter(isLocal),
+      live: allImg.filter(isRemote)
+    },
+  }
+  */
+}
+
+function findMarkdownImageLinks(text) {
+  let matches
+  let imageLinks = []
+  while ((matches = MARKDOWN_IMAGE_REGEX.exec(text)) !== null) {
+    if (matches.index === MARKDOWN_IMAGE_REGEX.lastIndex) {
+      MARKDOWN_IMAGE_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    const [ match, image, altText ] = matches
+    imageLinks.push(image)
+  }
+  return imageLinks.filter(onlyUnique)
+}
+
+/**
+ * Finds all links in markdown <a>, <img> and md link format []()
+ * @param {string} text
+ * @returns 
+ */
+function findAbsoluteLinks(text) {
+  let matches
+  let links = []
+  while ((matches = LIVE_LINKS_REGEX.exec(text)) !== null) {
+    if (matches.index === LIVE_LINKS_REGEX.lastIndex) {
+      LIVE_LINKS_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    const [ match, url, bracketLink ] = matches
+    links.push(url || bracketLink)
+  }
+  return links.filter(onlyUnique)
+}
+
+/*
+Match relative links
+<h1 jdjdjjdjd=lksjskljfsdlk="jdjdj">Netlify + FaunaDB &nbsp;&nbsp;&nbsp; 
+  <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-faunadb-example&stack=fauna">
+  <img src="../../../../img/deploy/lol.svg">
+  </a>
+</h1>
+[link](/my-great-page)
+<a href="img/deploy/one.svg">cool</a>
+<img src="img/deploy/duplicate.svg" />
+<img src="img/deploy/duplicate.svg" >
+<img src="/img/deploy/three.svg" />
+<img src='/img/deploy/four.svg' />
+<img src='./img/deploy/five.svg' />
+<img src='../img/deploy/button.svg' />
+<img src='../../img/deploy/button.svg' />
+<img src="https://www.netlify.com/img/deploy/button.svg" />
+<img src="https://www.netlify.com/img/deploy/button.svg" />
+![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")
+*/
+
+function findRelativeLinks(text) {
+  let matches
+  let relLinks = []
+  while ((matches = RELATIVE_LINKS_REGEX.exec(text)) !== null) {
+    if (matches.index === RELATIVE_LINKS_REGEX.lastIndex) {
+      RELATIVE_LINKS_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    // console.log(matches)
+    const [ match, _, start, link, x ] = matches
+    const one = (start === '/') ? start : ''
+    const two = (link === '/') ? link : ''
+    relLinks.push(`${one}${two}${x}`)
+  }
+  return relLinks.filter(onlyUnique)
+}
+
+function findLinksInFrontMatter(data) {
+  const yamlStrings = traverse(data)
+  // console.log('yamlStrings', yamlStrings)
+  const linksInYml = yamlStrings.map((string) => {
+    if (LINK_PATTERN.test(string)) {
+      return [string]
+    }
+    // console.log('string', string)
+    const results = findLinks(string)
+    return results.links.concat(results.images)
+  })
+  .filter((x) => {
+    if (x && x.length) {
+      return x.length
+    }
+    return false
+  })
+  .flat()
+  // console.log('linksInYml', linksInYml)
+  return linksInYml
+}
+
+function traverse(x, arr = []) {
+  if (typeof x === 'string') {
+    arr.push(x)
+  } else if (Array.isArray(x)) {
+    traverseArray(x, arr)
+  } else if ((typeof x === 'object') && (x !== null)) {
+    traverseObject(x, arr)
+  }
+  return arr
+}
+function traverseArray(arr, acc) {
+  for (let i = 0; i < arr.length; i++) {
+    traverse(arr[i], acc)
+  }
+}
+function traverseObject(obj, acc) {
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      traverse(obj[key], acc)
+    }
+  }
+}
+
+module.exports = {
+  findLinks,
+  findAbsoluteLinks,
+  findRelativeLinks
+}

package/lib/utils/md/find-unmatched-html-tags.js

@@ -0,0 +1,32 @@
+const { getLineNumberFromMatch } = require('./utils')
+
+// https://regex101.com/r/he9l06/2
+// http://xahlee.info/js/html5_non-closing_tag.html
+// voidTags
+const CLOSE_TAG_REGEX = /<(br|hr|img|embed|col|link|meta)(([^>]*)([^/])(>)|>)/g
+
+function findUnmatchedHtmlTags(block, filePath) {
+  let matches
+  let errors = []
+  const msg = (filePath) ? ` in ${filePath}` : ''
+  while ((matches = CLOSE_TAG_REGEX.exec(block)) !== null) {
+    if (matches.index === CLOSE_TAG_REGEX.lastIndex) {
+      CLOSE_TAG_REGEX.lastIndex++ // avoid infinite loops with zero-width matches
+    }
+    // console.log(matches)
+    const [ _, tag, insideOrEnd ] = matches
+    const lineNumber = getLineNumberFromMatch(block, matches)
+    const fixed = (insideOrEnd === '>') ? '/>' : `${insideOrEnd.substring(0, insideOrEnd.length - 1)}/>`
+    errors.push({
+      message: `Unclosing HTML tag on line ${lineNumber}${msg}.\n    Need closing tag "/>" on:   \n${_}`,
+      brokenTag: _,
+      correctUsage: `<${tag}${fixed}`
+    })
+  }
+  return errors
+}
+
+module.exports = {
+  CLOSE_TAG_REGEX,
+  findUnmatchedHtmlTags,
+}

package/lib/utils/md/fixtures/2022-01-22-date-in-filename.md

@@ -0,0 +1,14 @@
+---
+title: Welcome to ABC
+description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+thumbnail: https://dope-frontmatter.com/img/deploy/button.svg
+categories:
+  - company
+authors:
+  - Bob Bob
+  - Joe Smoe
+---
+
+**Welcome to ABC!** Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [keynote presentation](https://youtu.be/A1bL4pHuivU).
+
+

package/lib/utils/md/fixtures/file-with-frontmatter.md

@@ -0,0 +1,32 @@
+---
+draft: true
+template: page
+path: /foo/bar
+title: Default title
+components:
+  - type: PageHeading
+    heading: Nice
+    subHeading: Add it
+  - type: content
+    content: >-
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
+
+
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
+  - type: content
+    content: |-
+      More content
+
+      <ComponentXyz  />
+
+      stuff
+
+      ---
+  - type: content
+    content: Even more content
+seo:
+  title: xyz
+  description: seo description here
+updatedBy: David Wells
+updatedAt: 2022-11-10T01:52:37.383Z
+---