#+ELEVENTY_COLLECTIONS: _posts
#+ELEVENTY_BASE_DIR: ~/sync/static-blog/
#+ELEVENTY_BASE_URL: https://sachachua.com
#+TITLE: Post drafts
* On this day  :11ty:js:
:PROPERTIES:
:EXPORT_MASTODON: https://social.sachachua.com/@sacha/statuses/01JQ1VKG7TBQXXZVSZS9X3JT3X
:EXPORT_DATE: 2025-03-23T12:02:57-0400
:EXPORT_ELEVENTY_PERMALINK: /blog/2025/03/on-this-day/
:EXPORT_ELEVENTY_FILE_NAME: blog/2025/03/on-this-day/
:END:

Nudged by [[https://github.com/emacsomancer/org-daily-reflection][org-daily-reflection]] ([[https://types.pl/@emacsomancer/114096616526351883][@emacsomancer's
toot]]) and [[https://adactio.com/journal/21811][Jeremy Keith's post]] where he mentions
his [[https://adactio.com/archive/onthisday][on this day]] page, I finally got around to
making my own [[https://sachachua.com/blog/on-this-day][on this day]] page again. I use the
11ty static site generator, so it's static unless
you have Javascript enabled. It might be good for
[[https://sachachua.com/blog/2024/11/how-do-i-want-to-get-better-at-learning-out-loud-part-1-of-4-starting/#org1a9a0b0][bumping into things]]. I used to have an [[https://sachachua.com/blog/2014/03/notes-managing-large-blog-archive/#:~:text=I%20have%20an%20%E2%80%9COn%20this%20day%E2%80%9D%20widget]["On this
day" widget]] back when I used Wordpress, which was
fun to look at occasionally.

The code might be a little adamant about
converting all the dates to America/Toronto:

#+INCLUDE: ~/proj/static-blog/content/onThisDay.11ty.js src js :summary 11ty code for posts on this day

#+begin_src js2 :eval no :summary Client-side Javascript for the dynamic list
function onThisDay() {
	const tz = 'America/Toronto';
  function getEffectiveDate() {
    const urlParams = new URLSearchParams(window.location.search);
    const dateParam = urlParams.get('date');
    if (dateParam && /^\d{2}-\d{2}$/.test(dateParam)) {
      const currentYear = new Date().getFullYear();
      const dateObj = new Date(`${currentYear}-${dateParam}T12:00:00Z`);
      if (dateObj.getTime()) {
        return {
          monthDay: dateParam,
          formatted: dateObj.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
        };
      }
    }
    const today = new Date(new Date().toLocaleString('en-US', { timeZone: tz }));
    return {
      monthDay: today.toISOString().substring(5, 10), // MM-DD
      formatted: today.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
    };
  }
  // Fetch and process the posts
  fetch('/blog/all/index.json')
    .then(response => response.json())
    .then(posts => {
      const dateInfo = getEffectiveDate();
      const dateElement = document.querySelector('h3.date');
      if (dateElement) {
        dateElement.textContent = dateInfo.formatted;
      }
      const matchingPosts = posts.filter(post => {
        const postDate = new Date(post.date).toLocaleString('en-US', { timeZone: tz });
        const postMonthDay = (new Date(postDate)).toISOString().substring(5, 10);
        return postMonthDay === dateInfo.monthDay;
      });

      matchingPosts.sort((a, b) => {
        const dateA = new Date(a.date);
        const dateB = new Date(b.date);
        return dateB - dateA;
      });

			const elem = document.getElementById('posts-container');
      if (matchingPosts.length > 0) {
        const postsHTML = matchingPosts.map(post => {
          const postDate = new Date(post.date).toLocaleString('en-US', { timeZone: tz });
          const postYear = new Date(postDate).getFullYear();
          return `<li>${postYear}: <a href="${post.permalink}">${post.title}</a></li>`;
        }).join('\n');
        elem.innerHTML = `<ul>${postsHTML}</ul>`;
      } else {
        elem.innerHTML = `<p>No posts were written on ${dateInfo.formatted}.</p>`;
      }
    })
    .catch(error => {
      console.error('Error fetching posts:', error);
    });
}
#+end_src

I used to include the day's posts as a footer on
the individual blog post page. That might be
something to consider again.