Skip to content

Feat: Site deployment #9

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.

Sign up for GitHub

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

Merged
merged 11 commits into from
May 27, 2024
Merged

Feat: Site deployment #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ed722ab
fix: CSS errors for book.css and reformat
KorigamiK May 25, 2024
ddf28b3
chore: Fix unicode character
KorigamiK May 25, 2024
455f9e7
feat: Add GitHub Pages deployment workflow
KorigamiK May 25, 2024
b97f169
chore: Update deployment workflow
KorigamiK May 25, 2024
ff54408
fix: favicon
KorigamiK May 25, 2024
adb0f76
chore: Update build process to use build.sh script
KorigamiK May 25, 2024
fb96e3e
chore: Update favicon link in HTML files
KorigamiK May 25, 2024
fcb8c03
fix: remove SSG and deploy pages through branch
KorigamiK May 25, 2024
680af0c
reformat using prettier and update gitignore
KorigamiK May 27, 2024
8bd39b6
Merge branch 'RayTracing:dev' into dev
KorigamiK May 27, 2024
5298bba
Add upstream markdeep script tags
KorigamiK May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions book/MovingToTheGPU.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.png">
<!-- Markdeep: https://casual-effects.com/markdeep/ -->
Expand Down Expand Up @@ -499,7 +500,7 @@

I like to keep things simple in my code examples and use the `?` operator. Instead of defining
custom error types and conversions, I use a catch all `Error` type from a library called *anyhow*.
You'll often see the examples include `anyhow::Result` (an alias for `Result<&#xFEFF, anyhow::Error>`)
You'll often see the examples include `anyhow::Result` (an alias for `Result<&#xFEFF;, anyhow::Error>`)
and `anyhow::Context`. The latter is a useful trait for adding an error message while converting to
an `anyhow::Error`:

Expand Down Expand Up @@ -3896,5 +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 src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<script crossorigin="anonymous" src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@KorigamiK KorigamiK May 27, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@KorigamiK KorigamiK May 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>
4 changes: 3 additions & 1 deletion book/acknowledgments.md.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="../favicon.png">
<!-- Markdeep: https://casual-effects.com/markdeep/ -->

Acknowledgments
Expand All @@ -12,5 +14,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 src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<script crossorigin="anonymous" src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>
<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>
26 changes: 26 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8" emacsmode="-*- markdown -*">
<link rel="icon" type="image/png" href="./favicon.png">
**GPU Tracing**

The book will guide you through the building blocks of a GPU-based renderer
using the same step-by-step approach in Ray Tracing In One Weekend. The goal is
not to build a fully-featured and highly optimized real-time renderer; rather,
it is to show you how to translate the concepts introduced in Ray Tracing In One
Weekend into a design that is practical to port to all modern GPU platforms
while paying attention to some of the common pitfalls of GPU programming.

Draft
===============================================================================
The current _draft_ of the book is available at [MovingToTheGPU](./book/MovingToTheGPU.html).

[Acknowledgments](./book/acknowledgments.md.html)
===============================================================================


<!-- Markdeep: -->
<link rel='stylesheet' href='./style/book.css'>
<style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
<script src="./book/markdeep.min.js" charset="utf-8"></script>
<script crossorigin="anonymous" src="https://morgan3d.github.io/markdeep/latest/markdeep.min.js"></script>
<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")</script>
36 changes: 18 additions & 18 deletions style/book.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,13 @@ div.indented {
margin-left: 5ex;
}


/* -------------------------------------------------------------------------------------------------
** Table of Contents
** -----------------------------------------------------------------------------------------------*/

.md .longTOC, .md .mediumTOC, .md .shortTOC {
.md .longTOC,
.md .mediumTOC,
.md .shortTOC {
font-family: sans-serif;
}

Expand All @@ -37,11 +38,12 @@ div.indented {
border-bottom: solid 4px #777;
}

.md .longTOC, .md .mediumTOC, .md .shortTOC {
.md .longTOC,
.md .mediumTOC,
.md .shortTOC {
font-family: sans-serif;
}


/* -------------------------------------------------------------------------------------------------
** Titles & Headers
** -----------------------------------------------------------------------------------------------*/
Expand All @@ -66,14 +68,13 @@ div.indented {
}

.md h1::before {
content: counter(h1) ". ";
content: counter(h1) '. ';
}

.md h2::before {
content: counter(h1) "." counter(h2) ". ";
content: counter(h1) '.' counter(h2) '. ';
}


/* -------------------------------------------------------------------------------------------------
** Code
** -----------------------------------------------------------------------------------------------*/
Expand All @@ -95,17 +96,19 @@ div.indented {

.md pre.listing.tilde code {
/* Only code in fenced blocks. */
letter-spacing: -0.20;
letter-spacing: -0.2;
background: #e4e4e0;
}

/* Highlight.js Syntax Coloring */

.hljs-built_in {
color: #2356FF;
color: #2356ff;
}

.hljs-params, .hljs-type, .hljs-literal {
.hljs-params,
.hljs-type,
.hljs-literal {
color: #a62;
}

Expand Down Expand Up @@ -149,7 +152,7 @@ div.indented {

.md code > .delete {
text-decoration: line-through;
background-color: #;
background-color: #fdd;
color: #a0a0a0;
background: #e0cfcc;
}
Expand All @@ -169,14 +172,14 @@ div.indented {
** -----------------------------------------------------------------------------------------------*/

.md img {
margin-top: 1.0em;
margin-top: 1em;
width: 72ex;
//image-rendering: crips-edges;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

/* image-rendering: crips-edges; */
image-rendering: pixelated;
}

.md video {
margin-top: 1.0em;
margin-top: 1em;
width: 72ex;
}

Expand Down Expand Up @@ -204,16 +207,13 @@ div.credit-list ul {
column-count: 3;
}



/* -------------------------------------------------------------------------------------------------
** Print Styling
** -----------------------------------------------------------------------------------------------*/

@media print {

@page {
margin: 1.5cm 2.5cm 1.0cm 2.5cm;
margin: 1.5cm 2.5cm 1cm 2.5cm;
size: letter portrait;
}

Expand Down