Feat: Site deployment #9

KorigamiK · 2024-05-25T10:34:16Z

Really appreciate the work you put into the book.
But as of now users are not able to see the draft deployed, so I have created a workflow with some fixes to deploy the site to github-pages.
Please look at the commit messages for the changes.

Once merged the site would look something like this: https://korigamik.is-a.dev/gpu-tracing/
but on the main repo which would be https://raytracing.github.io/gpu-tracing.

Cheers!

armansito

Thank you for putting this together! Deploying the draft version had been on my mind but I never got around it.

I left a few comments/questions. Also adding @hollasch in case he has any suggestions.

book/MovingToTheGPU.html

armansito · 2024-05-25T16:44:49Z

book/MovingToTheGPU.html

@@ -3896,5 +3896,4 @@
 <link rel='stylesheet' href='../style/book.css'>
 <style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
 <script src="markdeep.min.js"></script>
-<script src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>


Isn't this line necessary? The footer of this file is taken verbatim from the Markdeep Get Started page and that includes both script tags. If it doesn't hurt to keep it then I suggest not removing it since it matches those instructions.

Since we can be sure that we'll include it in the deployment of the site we don't need to have it. It just is more efficient in caching the script for the entire site as well.

Although I cannot be sure of this, you'll get a CORS error if you try to include the script tag and check your browser console. Hence, you are either required to add crossorigin="anonymous" to the script tag or have markdeep.min.js be included in the project. This might be an oversight by the author and having the script included with the project is probably more than enough and allows us to change it in the future.

@hollasch Do you know if this has been an issue with RTW? It may by worth clarifying with Morgan since you're already in touch with him.

Personally, I agree with @KorigamiK in that this feels redundant since we already host our own copies of markdeep.min.js.

Yes, it's explicitly redundant. The idea is to pick up any Markdeep fixes/improvements immediately and automatically. We do update the backup copy in the project, but often with a lot of lag (since I'm not always monitoring Markdeep releases).

Do you know if this has been an issue with RTW?

I wouldn't say it's an problem, but I can't think of a reason not to adopt the recommended protocol, so I've added these throughout in the RTW project.

OK, the versioning argument makes sense. In that case I'm inclined to leave this in to stay consistent with the rest of the RTW project.

armansito · 2024-05-25T16:45:13Z

book/acknowledgments.md.html

@@ -12,5 +13,4 @@
 <link rel='stylesheet' href='../style/book.css'>
 <style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
 <script src="markdeep.min.js"></script>
-<script src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>


Same comment around this just following the "Get Started" instructions at https://casual-effects.com/markdeep/#getstarted

book/MovingToTheGPU.html

index.html

favicon.ico

hollasch · 2024-05-25T20:43:54Z

Is there an associated issue I can look at that explains the reason for static site deployment? The whole point of Markdeep is that it should not require any static site deployment. An index.html and GitHub pages setup is all you need.

hollasch · 2024-05-25T20:47:34Z

By the way, one important goal of the RTW project is that users can create a local clone and start browsing the content immediately and locally without requiring any sort of static site generator infrastructure.

KorigamiK · 2024-05-25T20:57:52Z

By the way, one important goal of the RTW project is that users can create a local clone and start browsing the content immediately and locally without requiring any sort of static site generator infrastructure.

You're right, and I was introducing more complexity than needed. The latest changes can deploy the site through the dev branch itself without using actions. However, changes that are made here would still be necessary for deployment.

Please feel free to change the content of the index.html file, I've added a little intro to it.

hollasch · 2024-05-25T21:00:00Z

changes that are made here would still be necessary for deployment.

No, they're not necessary. We host the Ray Tracing in One Weekend site and all books via GitHub pages without any deployment process. That's the joy of Markdeep.

KorigamiK · 2024-05-25T21:02:01Z

I've removed static site generation. Github pages work fine without deployment now. You can review the changes.

hollasch · 2024-05-25T21:03:26Z

I'm heading out for now, but will review these later. Or @armansito, feel free to merge and we can iterate further if necessary.

hollasch · 2024-05-25T21:03:50Z

I'll make the corresponding updates to the RTW book.css later as well.

hollasch · 2024-05-26T08:16:16Z

I have a query out to Morgan asking why the <!DOCTYPE html> tag is not suggested for the standard Markdeep preamble.

Regarding the Markdeep version we use, we always prefer the latest, but add a reference to the snapshotted library included in the project as a backup in case you're reading the document offline. We should not remove the latest library preference.

hollasch · 2024-05-26T08:31:18Z

style/book.css

@@ -143,13 +149,13 @@ div.indented {

 /* Code Line Types */

-.md code > .highlight {


I don't think this is a CSS syntax error, and prefer spaces around the child selector > operator.

I agree, I think this looks better with the spaces, so please revert this part back unless this is strictly necessary.

hollasch · 2024-05-26T08:34:11Z

style/book.css

@@ -171,7 +177,7 @@ div.indented {
 .md img {
    margin-top: 1.0em;
    width: 72ex;
-    //image-rendering: crips-edges;


Should be "crisp-edges".

Also, @armansito — if you look at the RTW Markdeep source, search for the string "class='pixel'". This image (or figure) class ensures that images are rendered in a pixelated fashion without edge smoothing. We generally use this class when showing render results, but don't use it for things like figures and other drawings. You may want to follow the same approach instead of rendering every image in pixelated fashion.

Oh neat, I wasn't aware of that. I guess one merit to rendering the images (the renderer outputs) as pixelated is that the per-pixel averages are easier to see that way. All of the figures in the GPU book are SVGs so they already get specially treated by the browser and won't be pixelated. I'll take a look at this later and align the style with RTW.

hollasch · 2024-05-26T21:24:10Z

Ref RayTracing/raytracing.github.io#1566

- Inspired by RayTracing/gpu-tracing#9, I'm adopting the CSS code style of having one selector per line with trailing commas for definitions that apply to multiple selectors. - Corrected "Hilight.js" to "Highlight.js". There _is_ a hilight.js, but it looks like the syntax highlighting package used by Markdeep is highlight.js (https://highlightjs.org/). - Fixed background-color syntax bug.

armansito

@KorigamiK Thanks for the update. I think this looks good. There are a couple remaining comments by @hollasch regarding CSS style. I'll approve the PR once you address those.

Once these changes are in, I'll go ahead and set up the static site deployment.

armansito · 2024-05-27T16:30:44Z

style/book.css

@@ -143,13 +149,13 @@ div.indented {

 /* Code Line Types */

-.md code > .highlight {


I agree, I think this looks better with the spaces, so please revert this part back unless this is strictly necessary.

armansito · 2024-05-27T16:33:19Z

book/MovingToTheGPU.html

@@ -3896,5 +3896,4 @@
 <link rel='stylesheet' href='../style/book.css'>
 <style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
 <script src="markdeep.min.js"></script>
-<script src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>


@hollasch Do you know if this has been an issue with RTW? It may by worth clarifying with Morgan since you're already in touch with him.

Personally, I agree with @KorigamiK in that this feels redundant since we already host our own copies of markdeep.min.js.

.gitignore

KorigamiK · 2024-05-27T17:14:05Z

@armansito sounds good, the static site should work on enabling gh-pages on the dev branch now. Squashing and merging this pr would be best.

- Inspired by RayTracing/gpu-tracing#9, I'm adopting the CSS code style of having one selector per line with trailing commas for definitions that apply to multiple selectors. - Corrected "Hilight.js" to "Highlight.js". There _is_ a hilight.js, but it looks like the syntax highlighting package used by Markdeep is highlight.js (https://highlightjs.org/). - Fixed background-color syntax bug.

armansito

Thanks! Please squash and merge when you're ready.

KorigamiK · 2024-05-27T20:47:49Z

book/MovingToTheGPU.html

@@ -3897,4 +3897,5 @@
 <link rel='stylesheet' href='../style/book.css'>
 <style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
 <script src="markdeep.min.js"></script>
+<script crossorigin="anonymous" src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>


I've added script tags to the latest markdeep library.
It should be noted that without the crossorigin="anonymous" attribute the script would not load for anyone
due to CORS.
This is also an issue of the markdeep starter templates, which should be addressed.

Remove the local script line and the crossorigin attribute, and you'll find that the script loads just fine.

I'm guessing you don't start a local dev server when you test this?
When you open an HTML file using the file:/// protocol, CORS restrictions are typically not enforced by browsers.
Refer: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#file_origins

See https://hollasch.net/rtw/books/RayTracingInOneWeekend.html. This version has no local script present, nor referenced, pulling only from the latest Markdeep version. Page loads and renders without issue (Brave browser).

More information on the crossorigin attribute: https://stackoverflow.com/questions/41069330/with-script-crossorigin-anonymous-why-is-a-script-blocked-by-cors-policy

It looks like the only reason to add crossorigin='anonymous' is "if we care about getting error information for the script being loaded", which we don't. Default behavior is specified by explicitly omitting the crossorigin attribute.

You're right, but for some reason I get NS_ERROR_FAILURE on firefox when I first load the html page on localhost. it opens after i load it again. not sure what's the reason

That definitely sounds annoying. We treat the HTML docs as standalone documents, so don't normally fire up a web host just to read them. This is how we expect our readers to view the local documents as well.

KorigamiK · 2024-05-27T20:54:28Z

@hollasch if you are already in conversation with Markdeep, you should also request to add crossorigin="anonymous" attribute to the script tags of all the templates.

armansito · 2024-05-27T21:05:01Z

The site is now deployed at https://raytracing.github.io/gpu-tracing.

KorigamiK added 6 commits May 25, 2024 14:54

fix: CSS errors for book.css and reformat

ed722ab

chore: Fix unicode character

ddf28b3

feat: Add GitHub Pages deployment workflow

455f9e7

chore: Update deployment workflow

b97f169

fix: favicon

ff54408

chore: Update build process to use build.sh script

adb0f76

armansito reviewed May 25, 2024

View reviewed changes

chore: Update favicon link in HTML files

fb96e3e

fix: remove SSG and deploy pages through branch

fcb8c03

KorigamiK changed the title ~~Add static site deployment~~ Feat: Site deployment May 25, 2024

hollasch reviewed May 26, 2024

View reviewed changes

hollasch mentioned this pull request May 26, 2024

CSS reformatting and fixes RayTracing/raytracing.github.io#1567

Merged

armansito reviewed May 27, 2024

View reviewed changes

reformat using prettier and update gitignore

680af0c

KorigamiK and others added 2 commits May 28, 2024 02:06

Merge branch 'RayTracing:dev' into dev

8bd39b6

Add upstream markdeep script tags

5298bba

armansito approved these changes May 27, 2024

View reviewed changes

armansito merged commit f418d75 into RayTracing:dev May 27, 2024

KorigamiK commented May 27, 2024

View reviewed changes

		@@ -143,13 +149,13 @@ div.indented {

		/* Code Line Types */

		.md code > .highlight {

Feat: Site deployment #9

Feat: Site deployment #9

Conversation

KorigamiK commented May 25, 2024

armansito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hollasch commented May 25, 2024

hollasch commented May 25, 2024

KorigamiK commented May 25, 2024

hollasch commented May 25, 2024

KorigamiK commented May 25, 2024

hollasch commented May 25, 2024

hollasch commented May 25, 2024

hollasch commented May 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hollasch commented May 26, 2024

armansito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KorigamiK commented May 27, 2024

armansito left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KorigamiK May 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KorigamiK May 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KorigamiK commented May 27, 2024

armansito commented May 27, 2024

armansito left a comment •

edited

Loading

KorigamiK May 27, 2024 •

edited

Loading

KorigamiK May 28, 2024 •

edited

Loading