Add attributions for rendered images

banga · Feb 3, 2024 · e5aa4e5 · e5aa4e5
1 parent 036efa5
commit e5aa4e5
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 6 deletions.
diff --git a/posts/2024-02-02-learning-rust.md b/posts/2024-02-02-learning-rust.md
@@ -43,6 +43,7 @@ I picked up the [Programming Rust, 2nd Edition](https://www.oreilly.com/library/
 Around this time, I left my job and took a complete break from programming. Then around the end of 2023, after I did [Advent of Code](https://adventofcode.com/) in Rust, I got a second wind and started reading the book again. As I learned things I could use in the raytracer, I would go back and [apply](https://github.com/banga/craytracer/commit/9ff0d0498ad5524cd5ae4c2e16d4dcb47980a9a8) [them](https://github.com/banga/craytracer/commit/e31a0249d15c1c614d61d7b11ed83350b7accf0f) [to](https://github.com/banga/craytracer/commit/6b92724ebc8740685312d92c3d67bebda5ccabc7) it. I eventually once again got distracted by the graphics and added several sophisticated features to get to the point of rendering images like this:
 
 ![A raytraced image of a staircase with textures, area lighting](/assets/staircase.png)
+_[The Wooden Staircase](https://blendswap.com/blend/14449) by [Wig42](https://blendswap.com/profile/130393)_
 
 Anyway, I did finish the book once the raytracing side quest was done (for now). While there are a few chapters that will need a revisit when I actually need to use them (Async, FFI, unsafe rust), I ended it feeling a lot more comfortable with the language.
 

diff --git a/src/components/Img.tsx b/src/components/Img.tsx
@@ -5,9 +5,11 @@ import React from "react";
 
 export function Img({
   src,
+  node,
   ...rest
 }: {
   src?: string | undefined;
+  node?: import("hast").Element | undefined;
   className?: string | undefined;
   alt?: string | undefined;
   width?: string | number | undefined;

diff --git a/src/pages/ProjectsPage.tsx b/src/pages/ProjectsPage.tsx
@@ -78,11 +78,20 @@ function Project({
   );
 }
 
-function Screenshot({ src }: { src: string }) {
+function Screenshot({
+  src,
+  caption: caption,
+}: {
+  src: string;
+  caption?: ReactNode;
+}) {
   return (
-    <Link className="flex-row pt1 pb1" href={src}>
-      <Img src={src} />
-    </Link>
+    <div className="flex-col pt1 pb1 align-center">
+      <Link href={src}>
+        <Img src={src} />
+      </Link>
+      {caption && <em>{caption}</em>}
+    </div>
   );
 }
 
@@ -137,8 +146,32 @@ function Projects() {
       >
         A physically based raytracer in rust. Some sample images:
         <div className="flex-row">
-          <Screenshot src="/assets/staircase.png" />
-          <Screenshot src="/assets/helmet.png" />
+          <Screenshot
+            src="/assets/staircase.png"
+            caption={
+              <>
+                <Link href="https://blendswap.com/blend/14449">
+                  The Wooden Staircase
+                </Link>{" "}
+                by{" "}
+                <Link href="https://blendswap.com/profile/130393">Wig42</Link>
+              </>
+            }
+          />
+          <Screenshot
+            src="/assets/helmet.png"
+            caption={
+              <>
+                <Link href="https://www.blendswap.com/blend/13953">
+                  Stormtrooper
+                </Link>{" "}
+                by{" "}
+                <Link href="https://www.blendswap.com/profile/120125">
+                  Scott Graham
+                </Link>
+              </>
+            }
+          />
         </div>
         Started it to learn rust, but admittedly got carried away while reading{" "}
         <Link href="https://pbrt.org/">pbrt</Link> and implemented a{" "}

diff --git a/static/style.css b/static/style.css
@@ -281,6 +281,16 @@ pre > pre {
 img {
   max-width: 100%;
   height: auto;
+
+  /* Center images in posts */
+  display: block;
+  margin: 0 auto;
+}
+
+/* Hack to support image captions */
+img + em {
+  display: block;
+  text-align: center;
 }
 
 .photo {