Created
March 8, 2017 15:57
-
-
Save rafaelrinaldi/9921863e61d3cc291ca984cae334bbc5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const MATCH_MARKDOWN_IMAGE = /\!\[(.*)\]\((.*)\)/gm; | |
const MATCH_INLINE_IMAGE = /\(inline\)/i; | |
class MarkdownImage { | |
// We receive both `markdown` and `containerWidth` on the constructor here | |
static updateImageTags(markdown) { | |
let updatedMarkdown = markdown; | |
let match; | |
let matches = []; | |
// Create an array of matches for all images we can find | |
while ((match = MATCH_MARKDOWN_IMAGE.exec(markdown)) !== null) { | |
matches.push({ | |
raw: match[0], | |
alt: match[1], | |
src: match[2], | |
}); | |
} | |
// If no matches are found, don't do anything | |
if (!matches.length) { | |
return markdown; | |
} | |
// Loop through all image matches | |
matches.forEach(({raw, alt, src}) => { | |
// Create a new alt property without the `(inline)` string (if exists) | |
const title = alt.replace(MATCH_INLINE_IMAGE, ''); | |
// Inline images are true if the image `alt` has `(inline)` | |
const isInline = MATCH_INLINE_IMAGE.test(alt); | |
// Full width properties (enabled by default) | |
const fullWidthProperties = !isInline ? 'class="isFullWidth"' : ''; | |
// All breakpoints we want to support | |
const sources = [414, 734, 1024, 1200, 1440]; | |
// Image tag | |
const image = `<img alt="${title}" title="${title}" src="${src}" />`; | |
// Compose source tags for each break point, using Contentful's image API to serve optimized assets | |
const source = sources.map(media => { | |
// Image resize settings | |
const settings = '&fit=fill&fm=jpg'; | |
return `<source media="(max-width: ${media}px)" srcset="${src}?w=${media}${settings} 1x, ${src}?w=${media * 2}${settings} 2x">`; // eslint-disable-line | |
}).join(''); | |
// Create picture tag | |
const picture = `<picture ${fullWidthProperties}>${source}${image}</picture>`; | |
// Update markdown to use markup instead | |
updatedMarkdown = updatedMarkdown.replace(raw, picture); | |
}); | |
return updatedMarkdown; | |
} | |
} | |
export default MarkdownImage; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment