search

NorthwestGreenChemistry / PrISM

Questionnaire app to help clarify sustainable product design objectives.
https://www.northwestgreenchemistry.org/
MIT License
1 stars 0 forks source link

Images from Markdown! #64

Closed axiomista closed 5 years ago

axiomista commented 6 years ago

I'm still not sure how we're going to get the markdown we're displaying to also show inline images, but thinking about it...

NorthDecoder commented 5 years ago

On the page Scoping, Problem Formulation ....

Using the developer tools that pop up when the app is started with yarn dev, I see with the element inspector tab that the image tag appears to be correctly placed (but not rendered) in the app. Looking at the network tab I see that the project-goals.png file has a 200 Ok Status code in the header tab. Looking further I see X-XSS-Protection: 1; mode=block, (not sure if that is what is causing the blocking) and many other security policies.

With only the links in question, I did a test, completely separate from this electronjs built app, in jsfiddle something like:

<img src="https://github.com/NorthwestGreenChemistry/PrISM/blob/develop/app/assets/1-design-goals/project-goals.png" alt="project-goals-from-github">

<br><br>
<hr>

<div>project-goals-from: temp_test_image_src (not github )</div>
<img src="http://vividventures.biz/temp_test_image_src/project-goals.png" alt="project-goals-from-vividventures">

The result is that the image loads fine from my temporary example directory on my website, but not from github.

I tried testing locally in the app by adding a link to my "temp_test_image_src" directory, but that failed to prove anything because markdown for the build is being served from github as well (I suspect) and I did not push the change to github.

My conclusion is that hotlinking our image requests is being disallowed by github, and that we need to provide our own development server.

NorthDecoder commented 5 years ago

Currently all the HTML tag sources are hardcoded to point URL's at the current server. If the server is changed to a temporary development URL all the hardcoded tag sources would need to be search and replaced, then when a production server is provided the URL's would need to be replaced again.

Is there a way to package the assets within the app so that relative url's can replace the hardcoded?

For example this harcoded URL

https://github.com/NorthwestGreenChemistry/PrISM/blob/develop/app/assets/1-design-goals/project-goals.png

becomes something like

../assets/1-design-goals/project-goals.png
mariannefeng commented 5 years ago

Closing, problem was we were using the wrong URL for images. When pulling assets from github, we shouldn't reference github directly but instead it should be from https://raw.githubusercontent.com/, in addition, we don't need "blob" in the path if referencing from raw github use content.

Old (not working) URL: https://github.com/NorthwestGreenChemistry/PrISM/blob/develop/app/assets/1-design-goals/project-goals.png

New URL: https://raw.githubusercontent.com/NorthwestGreenChemistry/PrISM/develop/app/assets/1-design-goals/project-goals.png

All markdown files inside of app/content has now been updated to use the correct URL for referencing images.