Feature: absolute image paths, get remote images

[SallyMcGrath]

What does this change?

Common Theme?

1. _markup/render-image.html

revise render-image hook to do the following:

• update github links to github raw links (instead of jsdelivr)
• get all remote images and process as local instead of hotlinking
• incidentally, perform a mediatype check instead of file type check so we actually know it's a rasterisable image and not just some other file masquerading as same

2. strings/absolute-image-paths.html

then we made a short partial to run over decoded markdown blobs and regex with the path of the repo it's living in NOTE I DID NOT CONSTRUCT THIS REGEX please review my terrible regex

3. blocks/readme.html

in the readme block, we added a second and final processing step to turn the relative links absolute. It has to be the last step so we can markdownify it inside the assignment. If we don't do this, I think we have to pass the text to scratch to get it back into the readme block context. However, having it as a separate partial is probably best so we can reuse it in other places if we need to like in issues and pd blocks if that comes up.

So it goes

README => getJSON readme blob and decode STRINGS/ABS... => regex over decoded text to replace relative paths with the html path README => then send that to markdownify

inside markdownify RENDER_IMAGE => replace github html path with github raw location then getRemote and download that image

then process, resize etc as any other image

#222

Checklist

• [x] I have read the contributing guidelines
• [x] I have checked my spelling and grammar with an automated tool
• [x] I have previewed my changes to check the markdown renders as I intend
• [x] I have run my code to check it works
• [x] My changes follow our Style Guide

Who needs to know about this?

[netlify[bot]]

✅ Deploy Preview for cyf-curriculum ready!

Name	Link
🔨 Latest commit	d38e30570a68a45f677f77acf46ccad0b463a18d
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-curriculum/deploys/6646349ac11ac30008b01f3e
😎 Deploy Preview	https://deploy-preview-719--cyf-curriculum.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 85 (no change from production) Accessibility: 100 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[SallyMcGrath]

Example of current, final problem

For some reason my partial is still trying to transform non images. Here's the final case where an image is not an image. I keep tryna escape out of the invalid image but for some reason failin

https://github.com/CodeYourFuture/JS3-Module-Project/issues/9

This is shown on https://curriculum.codeyourfuture.io/js3/product/backlog/backlog-4/

It is coming through the issues.html in this case

Choose edit to find the uploaded src (drag and drop) as https://github.com/CodeYourFuture/JS3-Module-Project/assets/42203406/fc994768-23ba-454a-8a1f-8b3375e264f8 NOTE THE LACK OF filetype

VIew image to find the actual src, in this case

https://private-user-images.githubusercontent.com/42203406/307878913-fc994768-23ba-454a-8a1f-8b3375e264f8.png

But you need a JWT to view

executing "_default/_markup/render-image.html" at <$image.Width>: error calling Width: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }}

[SallyMcGrath]

YESSSSSSS I FIXED ITTTTTTTT