fix: adjust post html markup for safari's reader

[avogel3]

• rework html markup by removing extra section tag and replacing h1 with header
• fixes css that was broken by changes to structure
• add structured data so browser can infer things like markup, type, title, and author

• Test and Verify on Staging

fixes #830

[vnegrisolo]

LGTM

[avogel3]

@jwworth This should fix the reader mode issue. Could I trouble you for a quick once over on staging? If you need credentials, I can provide those in the alumni slack.

[avogel3]

I did a final pre-deploy test in staging today and there's something not quite right. I'm having a hard time telling if it's this change or a recent change to iOS/Safari. I could definitely use some help here.

On Mobile Safari (iOS 18.4.1), the Reader Mode option is no longer showing in the toolbar. There is an option to automatically enable Reader Mode on certain webpages. Toggling this for TIL and refreshing the page does nothing. Still can't see anything in Reader Mode. However, if I scroll to the bottom of the feed and click "Older TILs", Reader Mode does become available, but only for a single, large-ish, TIL in the feed - "Delete a Command from ZSH history".

On Desktop Safari (Sequoia 15.3.2), toggling Reader Mode only summarizes 1 TIL in the feed, ALL Caps SQL, which is another longer winded TIL.

Some notes -

• Some google search results suggested long pressing the "square with 2 lines" icon in the search bar(mobile), but this does nothing.
• Another thing that I found through some various posts on reddit and the apple community forums - Apple may have implemented a change to Reader Mode in the last 6-8 months that requires content to hit a certain threshold before it the Reader Mode option becomes available. If this is the case, we may not be a "reader mode friendly" website anymore. Either way, this needs a bit more investigation.