Blog MVP+

[camball]

MVP+ To Do

Bugs

• High priority: When clicking on a self-referential hyperlink (i.e., to another blog article under blog.camball.io), it switches the article prose content but all header information from the last article remains, misleading the user.
• On some screen resolutions, articles have a large whitespace below the page footer.
• Turning phone sideways makes the page wrap in a weird way where the content is off-centre. The page looks good on mobile and desktop, but not for the weirder dimensions.
• When clicking TOC item above current scroll position, header is revealed. This shouldn't happen.

Features

• Add description frontmatter property to each blog article to enable having a little description on each article's card. Could also be used to display a preview card onHover. Descriptions shouldn't be more than 200 characters (ref: twitter:description description).
• On hover over any heading, a clickable hash (#) symbol should appear next to it. On click on the hash, the URL should change to include the page section ID. This way, users can easily copy links to sections of the page.
• Smooth scroll when navigating to any header
• Add callout support (remark plugin, need to style it myself per the instructions (example themes from a different plugin))
• Add profile photo UI element near my name on blog articles. Brings a little personal touch to articles.
• Design better blog homepage.
  • Search bar
  • Filter by tags
  • Better design
• Make codeblocks switch to light theme when in light mode and dark theme in dark mode. Currently they are always dark theme.
• On the tags shown on blog article pages, wrap the tag text in an anchor tag to link users to the blog landing page with a filter specified for that tag the user clicked. I.e., the href on the tag would be something like blog.camball.io/?tags=svelte.
• Style highlighted text (::selection pseudo-element). A more muted highlighter yellow. Saw this feature on microlink.io and it's such a nice little convenience feature. E.g., for when you want to share your screen to others and make it easy to see what's highlighted. For people with focus issues like me, it helps to be able to highlight a section of text as I read to help my brain focus on one thing at a time.
• Make table of contents available on mobile (currently hidden on mobile as it would take a bit more engineering to make a nice UI for it on mobile (e.g., a button that expands)). I may end up needing to not use the rehype plugin that does it automatically to make this happen, which is why it's an MVP+ goal.
• Add email subscription. Subscribers get an email when new blog posts are made. See https://tailwindcss.com/blog for an example.
• Add RSS feed.

Refactors

• Switch to date-fns instead of moment.js (per my current understanding, date-fns is more lightweight). Edit: especially now that date-fns v4 is out.

[camball]

Added article descriptions in 0815d28.