franklin-update

_layout/foot.html

@@ -5,5 +5,7 @@
     {{ if hascode }}
         {{ insert foot_highlight.html }}
     {{ end }}
+    <div class="debug-grid"></div>
+    <script src="index.js"></script>
   </body>
 </html>

_layout/head.html

@@ -18,4 +18,141 @@
 
         <!-- Content appended here -->
     </body>
+    <div class="debug-grid"></div>
+    <script>
+        function gridCellDimensions() {
+            const element = document.createElement("div");
+            element.style.position = "fixed";
+            element.style.height = "var(--line-height)";
+            element.style.width = "1ch";
+            document.body.appendChild(element);
+            const rect = element.getBoundingClientRect();
+            document.body.removeChild(element);
+            return { width: rect.width, height: rect.height };
+        }
+
+        // Add padding to each media to maintain grid.
+        function adjustMediaPadding() {
+            const cell = gridCellDimensions();
+
+            function setHeightFromRatio(media, ratio) {
+                const rect = media.getBoundingClientRect();
+                const realHeight = rect.width / ratio;
+                const diff = cell.height - (realHeight % cell.height);
+                media.style.setProperty("padding-bottom", `${diff}px`);
+            }
+
+            function setFallbackHeight(media) {
+                const rect = media.getBoundingClientRect();
+                const height =
+                    Math.round(rect.width / 2 / cell.height) * cell.height;
+                media.style.setProperty("height", `${height}px`);
+            }
+
+            function onMediaLoaded(media) {
+                var width, height;
+                switch (media.tagName) {
+                    case "IMG":
+                        width = media.naturalWidth;
+                        height = media.naturalHeight;
+                        break;
+                    case "VIDEO":
+                        width = media.videoWidth;
+                        height = media.videoHeight;
+                        break;
+                }
+                if (width > 0 && height > 0) {
+                    setHeightFromRatio(media, width / height);
+                } else {
+                    setFallbackHeight(media);
+                }
+            }
+
+            const medias = document.querySelectorAll("img, video");
+            for (media of medias) {
+                switch (media.tagName) {
+                    case "IMG":
+                        if (media.complete) {
+                            onMediaLoaded(media);
+                        } else {
+                            media.addEventListener("load", () =>
+                                onMediaLoaded(media),
+                            );
+                            media.addEventListener("error", function () {
+                                setFallbackHeight(media);
+                            });
+                        }
+                        break;
+                    case "VIDEO":
+                        switch (media.readyState) {
+                            case HTMLMediaElement.HAVE_CURRENT_DATA:
+                            case HTMLMediaElement.HAVE_FUTURE_DATA:
+                            case HTMLMediaElement.HAVE_ENOUGH_DATA:
+                                onMediaLoaded(media);
+                                break;
+                            default:
+                                media.addEventListener("loadeddata", () =>
+                                    onMediaLoaded(media),
+                                );
+                                media.addEventListener("error", function () {
+                                    setFallbackHeight(media);
+                                });
+                                break;
+                        }
+                        break;
+                }
+            }
+        }
+
+        adjustMediaPadding();
+        window.addEventListener("load", adjustMediaPadding);
+        window.addEventListener("resize", adjustMediaPadding);
+
+        function checkOffsets() {
+            const ignoredTagNames = new Set([
+                "THEAD",
+                "TBODY",
+                "TFOOT",
+                "TR",
+                "TD",
+                "TH",
+            ]);
+            const cell = gridCellDimensions();
+            const elements = document.querySelectorAll(
+                "body :not(.debug-grid, .debug-toggle)",
+            );
+            for (const element of elements) {
+                if (ignoredTagNames.has(element.tagName)) {
+                    continue;
+                }
+                const rect = element.getBoundingClientRect();
+                if (rect.width === 0 && rect.height === 0) {
+                    continue;
+                }
+                const top = rect.top + window.scrollY;
+                const left = rect.left + window.scrollX;
+                const offset = top % (cell.height / 2);
+                if (offset > 0) {
+                    element.classList.add("off-grid");
+                    console.error(
+                        "Incorrect vertical offset for",
+                        element,
+                        "with remainder",
+                        top % cell.height,
+                        "when expecting divisible by",
+                        cell.height / 2,
+                    );
+                } else {
+                    element.classList.remove("off-grid");
+                }
+            }
+        }
+
+        const debugToggle = document.querySelector(".debug-toggle");
+        function onDebugToggle() {
+            document.body.classList.toggle("debug", debugToggle.checked);
+        }
+        debugToggle.addEventListener("change", onDebugToggle);
+        onDebugToggle();
+    </script>
 </html>

_layout/header.html

@@ -23,3 +23,7 @@ <h1 class="title">randy.pub</h1>
         </td>
     </tr>
 </table>
+<div class="debug-grid"></div>
+<label class="debug-toggle-label"
+    ><input type="checkbox" class="debug-toggle" /> Debug mode</label
+>

_layout/page_foot.html

@@ -7,4 +7,7 @@
     <a href="https://owickstrom.github.io/the-monospace-web/"
         >The Monospace Web</a
     >.
+    <label class="debug-toggle-label"
+        ><input type="checkbox" class="debug-toggle" /> Debug mode</label
+    >
 </div>

index.md

@@ -51,8 +51,6 @@ I (Randy) am currently working as the Director of Analytics at [Presage Group In
 <span style="color:#5BC5E2;">print</span>(Recent)
 ~~~
 
-Dict{Date, String} with 2 entrys:
-
 {{ recent_posts 2 }}
 
 ---

posts.md

@@ -7,8 +7,6 @@ title = "Posts"
 <span style="color:#5BC5E2;">print</span>(Posts)
 ~~~
 
-Dict{Date, String} with 2 entrys:
-
 {{ all_posts }}
 
 ---

posts/themes.md

@@ -107,7 +107,7 @@ ggsave(plot4, joinpath(@OUTPUT, "themes_plot4.png")) # hide
 ```
 \fig{themes_plot4}
 
-Success! There's lots more than can be done here but I'm happy with the basic look. We can use a little html to swap out the theme based on user's dark mode setting:
+Success! There's lots more than can be done here but I'm happy with the basic look. We can also use a little html to swap out the theme based on user's dark mode setting:
 
 ~~~
 <picture>

utils.jl

@@ -20,7 +20,6 @@ function hfun_recent_posts(m::Vector{String})
     n = parse(Int64, m[1])
     list = readdir("posts")
     filter!(f -> endswith(f, ".md") && f != "index.md", list)
-    markdown = ""
     posts = []
     df = DateFormat("mm/dd/yyyy")
     for (k, post) in enumerate(list)
@@ -31,6 +30,10 @@ function hfun_recent_posts(m::Vector{String})
         push!(posts, (title=title, link=fi, date=date))
     end
 
+    markdown = "Dict{Date, String} with " *
+        string(n >= 0 ? n : length(posts)) *
+        " entrys:\n\n"
+
     # pull all posts if n <= 0
     n = n >= 0 ? n : length(posts) + 1