Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tune relativeImageRegex used to find and update relative Image URL's #35

Open
rnag opened this issue Feb 18, 2024 · 1 comment
Open
Labels
enhancement New feature or request

Comments

@rnag
Copy link

rnag commented Feb 18, 2024

Hi @sinedied ! Thanks so much for coming up with this library.

I would request to look into tuning regex relativeImageRegex used in function updateRelativeImageUrls to update relative image URLs in a markdown with their absolute paths, in order to support more image link formats.

For example, this increasingly popular gist on a "how-to" for image resizing in GitHub markdown:
https://gist.github.com/uupaa/f77d2bcf4dc7a294d109

I personally deploy my blog articles using Jekyll and GitHub Pages, so as mentioned in the same article, we might see this syntax in the wild in .md files used w/ Jekyll:

![alt](image.png){: width="50%"}

I have tested it extensively on my local. I believe I was able to update the regex to include an optional capturing group for the height and width modifier, such as {: height=200px } for example.

This is my updated regex I have tested with:

!\[(.*)]\((?!.*?:\/\/)([^ ]*?) *?( (?:'.*'|".*"))? *?\)( *\{ *\:? *(?:width|height) *[:=] *["'0-9%A-Za-z]+ *;? *})?

Snippet of relevant parts for while loop replacement I'm using in code:

    while ((match = relativeImageRegex.exec(article.content))) {
        const [
            link,
            alt = '',
            imagePath,
            title = '',
            sizeModifier = '',
        ] = match;

        if (imagePath) {
            // const fullPath = getFullImagePath(basePath, imagePath);
            const newLink = `![${alt}](${getResourceUrl(repository, branch)}${imagePath.replace(/^\/+/g, '')}${title})`;

            content = content.replace(link, newLink);
            if (sizeModifier)
                content = content.replace(sizeModifier, '');
        }
    }

Regex Playground can be found here:
https://regex101.com/r/r6HJT8/1

Thanks,
Ritvik

@sinedied
Copy link
Owner

Sorry for the delay, I missed your post.

I'd welcome a PR that updates the RegExp, as long as you add some unit tests with it 🙂

@sinedied sinedied added the enhancement New feature or request label Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants