crop classic hirsch portrait

nix/site.nix

@@ -1,5 +1,10 @@
 { pkgs }:
 
+let
+  stylesheetHash = builtins.substring 0 12 (builtins.hashFile "sha256" ../site/styles.css);
+  stylesheetFileName = "styles-${stylesheetHash}.css";
+in
+
 pkgs.stdenvNoCC.mkDerivation {
   pname = "tide-landing-page";
   version = "1.0.0";
@@ -12,6 +17,11 @@ pkgs.stdenvNoCC.mkDerivation {
 
     mkdir -p "$out"
     cp -R . "$out"
+    mv "$out/styles.css" "$out/${stylesheetFileName}"
+    substituteInPlace "$out/index.html" \
+      --replace-fail \
+      'href="/styles.css"' \
+      'href="/${stylesheetFileName}"'
 
     runHook postInstall
   '';

nix/tests/module.nix

@@ -25,6 +25,8 @@ let
   };
   evaluatedConfig = evaluatedSystem.config;
   landingPage = self.packages.${system}.landing-page;
+  stylesheetHash = builtins.substring 0 12 (builtins.hashFile "sha256" ../../site/styles.css);
+  stylesheetFileName = "styles-${stylesheetHash}.css";
   landingVirtualHost = evaluatedConfig.services.nginx.virtualHosts."torahimderecheretz.com";
   discourseConfig = evaluatedConfig.services.discourse;
   backupConfig = evaluatedConfig.services.borgbackup.jobs.discourse;
@@ -62,10 +64,41 @@ assert !(evaluatedConfig.services.nginx.virtualHosts ? "tide.yisroelbaum.com");
 assert !(evaluatedConfig.services.nginx.virtualHosts ? "apitide.yisroelbaum.com");
 pkgs.runCommand "tide-module-test" { } ''
   test -f ${landingPage}/index.html
-  test -f ${landingPage}/styles.css
+  test -f ${landingPage}/${stylesheetFileName}
+  test ! -e ${landingPage}/styles.css
   test -f ${landingPage}/robots.txt
-  test -f ${landingPage}/assets/rav-hirsch-1847.jpg
-  test -f ${landingPage}/assets/rav-hirsch-1847.webp
+  test -f ${landingPage}/assets/rav-hirsch-later-life.jpg
+  test -f ${landingPage}/assets/rav-hirsch-later-life.webp
+  test -f ${landingPage}/assets/social-preview-hirsch-later-life.png
+  test ! -e ${landingPage}/assets/rav-hirsch-1847.jpg
+  test ! -e ${landingPage}/assets/rav-hirsch-1847.webp
+  ${pkgs.diffutils}/bin/cmp \
+    ${../../site/styles.css} \
+    ${landingPage}/${stylesheetFileName}
+  ${pkgs.gnugrep}/bin/grep -F \
+    'aspect-ratio: 5 / 6;' \
+    ${landingPage}/${stylesheetFileName}
+  ${pkgs.gnugrep}/bin/grep -F \
+    'href="/${stylesheetFileName}"' \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    'href="/assets/rav-hirsch-later-life.webp"' \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    'src="/assets/rav-hirsch-later-life.jpg"' \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    'height="600"' \
+    ${landingPage}/index.html
+  ${pkgs.gnugrep}/bin/grep -F \
+    'assets/social-preview-hirsch-later-life.png' \
+    ${landingPage}/index.html
+  if ${pkgs.gnugrep}/bin/grep -F \
+    'href="/styles.css"' \
+    ${landingPage}/index.html; then
+    echo "unexpected unversioned stylesheet reference" >&2
+    exit 1
+  fi
   ${pkgs.gnugrep}/bin/grep -F \
     "A Torah vision for the whole of life." \
     ${landingPage}/index.html

site/assets/social-preview.svg

@@ -19,12 +19,12 @@
   <rect width="18" height="630" fill="#743d36"/>
   <rect x="55" y="52" width="1090" height="526" fill="none" stroke="#ad8950"/>
   <image
-    x="790"
+    x="650"
     y="0"
     width="600"
     height="630"
     preserveAspectRatio="xMidYMid slice"
-    xlink:href="rav-hirsch-1847.jpg"
+    xlink:href="rav-hirsch-later-life.jpg"
     clip-path="url(#portrait-clip)"
   />
   <rect x="790" width="180" height="630" fill="url(#portrait-fade)"/>

site/index.html

@@ -21,11 +21,11 @@
     <meta property="og:url" content="https://torahimderecheretz.com/">
     <meta
       property="og:image"
-      content="https://torahimderecheretz.com/assets/social-preview.png"
+      content="https://torahimderecheretz.com/assets/social-preview-hirsch-later-life.png"
     >
     <meta
       property="og:image:alt"
-      content="Torah Im Derech Eretz: A Torah vision for the whole of life"
+      content="Torah Im Derech Eretz with a later-life portrait of Rav Samson Raphael Hirsch"
     >
     <meta name="twitter:card" content="summary_large_image">
 
@@ -46,7 +46,7 @@
     >
     <link
       rel="preload"
-      href="/assets/rav-hirsch-1847.webp"
+      href="/assets/rav-hirsch-later-life.webp"
       as="image"
       type="image/webp"
     >
@@ -112,14 +112,14 @@
             <div class="portrait__frame">
               <picture>
                 <source
-                  srcset="/assets/rav-hirsch-1847.webp"
+                  srcset="/assets/rav-hirsch-later-life.webp"
                   type="image/webp"
                 >
                 <img
-                  src="/assets/rav-hirsch-1847.jpg"
-                  width="960"
-                  height="1005"
-                  alt="Lithographic portrait of Rav Samson Raphael Hirsch as a young man"
+                  src="/assets/rav-hirsch-later-life.jpg"
+                  width="500"
+                  height="600"
+                  alt="Later-life portrait of Rav Samson Raphael Hirsch wearing glasses and a dark cap"
                 >
               </picture>
               <span class="portrait__dates">1808 · 1888</span>
@@ -311,10 +311,11 @@
       <div class="container site-footer__legal">
         <p>© Torah Im Derech Eretz</p>
         <p>
-          Portrait: 1847 lithograph by Druck von Schier,
+          Portrait: Rav Samson Raphael Hirsch, before 1889, creator unknown.
+          National Library of Israel via
           <a
-            href="https://commons.wikimedia.org/wiki/File:Druck_von_Schier._Samson_Raphael_Hirsch.1847.jpg"
-          >public domain</a>.
+            href="https://commons.wikimedia.org/wiki/File:Samson_Raphael_Hirsch_(FL12173324).crop.jpg"
+          >Wikimedia Commons</a>, public domain.
         </p>
       </div>
     </footer>

site/styles.css

@@ -398,7 +398,7 @@ cite {
 
 .portrait img {
   width: 100%;
-  aspect-ratio: 0.955;
+  aspect-ratio: 5 / 6;
   background: #d7cec1;
   filter: sepia(0.12) contrast(1.04);
   object-fit: cover;