finish footer links

posts/advent-of-languages-2024-04.mdx

@@ -49,7 +49,7 @@ My word-search grid appears to be 140 characters by 140, so I'm just going to ha
 
 Not gonna lie here, this part took me _way_ longer than I expected it to. See, the standard way to read a file in Fortran is with the `read()` statement. (It looks like a function call, but it's not.) You use it something like this:
 
-```fortran
+```f90
 read(file_handle, *) somevar, anothervar, anothervar2
 ```
 
@@ -57,7 +57,7 @@ Or at least, that's one way of using it. But here's the problem: by default, For
 
 Initially, I thought I might be able to do this:
 
-```fortran
+```f90
 character, dimension(140, 140) :: grid
 
 ! ...later
@@ -70,7 +70,7 @@ But sadly, this kept spitting out errors about how it had encountered the end of
 
 My next try looked something like this:
 
-```fortran
+```f90
 do row = 1, 100
     read(file_handle, *) grid(row, :)
 end do
@@ -82,7 +82,7 @@ I'm pretty sure the proper way to do this would be to figure out how to set the
 
 So instead, I decided to just make it dumber.
 
-```fortran
+```f90
 program advent04
     implicit none
 
@@ -139,7 +139,7 @@ S A M X M A S
 S . . S . . S
 ```
 
-Which has all 8 possible orientationS of the word `XMAS` starting from the central X. Then, we can just take a sliding "window" of the same size into our puzzle grid and compare it to the test grid. This is a native operation in Fortran--comparing two arrays of the same size results in a third array whose elements are the result of each individual comparison from the original arrays. Then we can just call `count()` on the resulting array to get the number of true values, and we know how many characters matched up. Subtract 1 for the central X we already knew about, then divide by 3 since there are 3 letters remaining in each occurrence of `XMAS`, and Bob's your uncle, right?
+Which has all 8 possible orientations of the word `XMAS` starting from the central X. Then, we can just take a sliding "window" of the same size into our puzzle grid and compare it to the test grid. This is a native operation in Fortran--comparing two arrays of the same size results in a third array whose elements are the result of each individual comparison from the original arrays. Then we can just call `count()` on the resulting array to get the number of true values, and we know how many characters matched up. Subtract 1 for the central X we already knew about, then divide by 3 since there are 3 letters remaining in each occurrence of `XMAS`, and Bob's your uncle, right?
 
 ...Wait, no. That won't work because it doesn't account for partial matches. Say we had a "window" that looked like this (I'm only showing the bottom-right quadrant of the window for simplicity):
 
@@ -164,7 +164,7 @@ Will this work? Is it even marginally more efficient than the stupidly obvious w
 
 Ok, first things first. Let's adjust the data-loading code to pad the grid with 3 bogus values on each edge, so that we can still generate our window correctly when we're looking at a point near the edge of the grid.
 
-```fortran
+```f90
 grid = '.' ! probably wouldn't matter if we skipped this, uninitialized memory just makes me nervous
 
 open(newunit=handle, file="data/04.txt", status="old", action="read")
@@ -196,7 +196,7 @@ Oh. Oh, _noooo_.
 
 It's okay, I mean, uh, it's not _that_ much higher. Only two orders of magnitude, and what are the odds of all eight versions of `XMAS` appearing in the same window, anyway? Something like 1/4<sup>25</sup>? Maybe we can still make this work.
 
-```fortran
+```f90
 integer function count_xmas(row, col) result(count)
     implicit none
 
@@ -277,7 +277,7 @@ Those `&`s are line-continuation characters, by the way. Apparently you can't ha
 
 Now we just have to put it all together:
 
-```fortran
+```f90
 total = 0
 do col = 4, 143
     do row = 4, 143
@@ -314,7 +314,7 @@ Hmm, I wonder if there's a way to take a single starting test grid and manipulat
 
 Turns out, yes! Yes there is. We can use a combination of slicing with a negative step, and transposing, which switches rows with columns, effectively rotating and flipping the array. So setting up our test grids looks like this:
 
-```fortran
+```f90
 character, dimension(3, 3) :: window, t1, t2, t3, t4
 
 t1 = reshape( &
@@ -332,7 +332,7 @@ t4 = t3(:, 3:1:-1) ! flip t3 left-to-right
 
 Then we can just compare the window to each test grid:
 
-```fortran
+```f90
 window = grid(row - 1:row + 1, col - 1:col + 1)
 if ( &
     count_matches(window, t1) == 5 &

src/components/Icon.astro

@@ -1,9 +1,11 @@
 ---
 export interface Props {
     name: string,
+    width?: string,
+    height?: string,
 };
 
-const { name } = Astro.props;
+const { name, width, height } = Astro.props;
 
 const icons = import.meta.glob<{string: string}>('@components/icons/*.svg', { query: '?raw', import: 'default' });
 const path = `/src/components/icons/${name}.svg`;
@@ -13,11 +15,11 @@ if (icons[path] === undefined) {
 const icon = await icons[path]();
 ---
 
-<Fragment set:html={icon} />
+<span class="icon" set:html={icon} />
 
-<style>
-    svg {
-        width: 100%;
-        height: 100%;
+<style define:vars={{ width, height }}>
+    .icon :global(svg) {
+        width: var(--width, 100%);
+        height: var(--height, 100%);
     }
 </style>

src/components/Post.astro

@@ -8,6 +8,8 @@ import { render } from 'astro:content';
 import Toc from '@components/Toc.vue';
 import { formatDate } from '@lib/datefmt';
 
+import Icon from '@components/Icon.astro';
+
 export interface Props {
     entry: CollectionEntry<'posts'>,
     prevSlug?: string | null,
@@ -59,7 +61,11 @@ footer {
     grid-column: 2 / 3;
     margin-bottom: 2.5rem;
     display: flex;
-    justify-content: space-between;
+
+    color: var(--content-color-faded);
+    margin-top: 1.5rem;
+    padding-top: 2.25rem;
+    border-top: 1px solid var(--content-color-faded);
 
     & a {
         font-size: 1.25rem;
@@ -77,6 +83,32 @@ footer {
     }
 }
 
+/* basic styles */
+.footer-link {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+
+    &.right {
+        margin-left: auto;
+    }
+}
+
+/* animate on hover */
+.footer-link {
+    & :global(svg) {
+        transition: transform 150ms;
+    }
+
+    &.right:hover :global(svg) {
+        transform: translateX(50%);
+    }
+
+    &.left:hover :global(svg) {
+        transform: translateX(-50%);
+    }
+}
+
 article {
     & :global(section.post::first-letter) {
         font-family: 'Baskervville';
@@ -116,10 +148,16 @@ article {
 
     <footer>
         {prevSlug && (
-            <a href={`/${prevSlug}`} data-astro-prefetch>Older</a>
+            <div class="footer-link left">
+                <Icon name="arrow-left" height="1em" />
+                <a href={`/${prevSlug}`} data-astro-prefetch>Older</a>
+            </div>
         )}
         {nextSlug && (
-            <a href={`/${nextSlug}`} data-astro-prefetch>Newer</a>
+            <div class="footer-link right">
+                <a href={`/${nextSlug}`} data-astro-prefetch>Newer</a>
+                <Icon name="arrow-right" height="1em" />
+            </div>
         )}
     </footer>
 </article>

src/components/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+</svg>

src/components/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>

src/components/icons/moon.svg

@@ -1,10 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
 </svg>
-
-<style>
-svg {
-    width: 100%;
-    height: 100%;
-}
-</style>