• Lume (requires Deno)
• Astro (preferred but not mature enough)
• Gatsby (telemetry on by default)
• Next.js (telemetry on by default)
• Nuxt 3 (SSG support has no line of sight)
• Vuepress Vite (not focused on blogging; not based on Remark; generates SPA)
• Gridsome (has been dormant for more than a year with lots of open issues)

This should be done during the build. Warning should be issued for dead links.

A dedicated page with links to blogs, personal sites and non-site personal resources

To opt out of Google’s Topic API, I need to send the following Permissions Policy HTTP response header.

Permissions-Policy: browsing-topics=()

Since this site is hosted on Netlify, create a netlify.toml with the following setting.

[[headers]]
  for = "/*"
  [headers.values]
    Permissions-Policy = "browsing-topics=()"

Alternatively, create a _headers file in the public directory.

/*
  Permissions-Policy: browsing-topics=()

Rework current icons (if needed) and create new ones for more visual representation of concepts

For Twitter, GitHub and LinkedIn to start with. Do NOT embed any third-party scripts

Properly reset the value for bold font-weight. See Firefox’s bolder Default is a Problem for Variable Fonts

Support the following callouts:

• Note
• Commend
• Warn
• Deter
• Assert

The wrapping element should be <aside>.

Additionally, explore the possibility of adding a visual cue (like an emoji or icon) to signify the type of callout for accessibility.

• Small
• Normal (default)
• Large

People should be able to select a text-size if needed.

• Disabled
• Reduced
• Enabled (default)

People should be able to choose an option.

Detection

• media query for low DPI devices
• media query for prefers-reduced-motion

Use of islands can save some performance on client side. Move all the Alpine.js and listener code into the islands.

See Creating websites with prefers-reduced-data

Show a list of recently updated posts on the home

• 404
• Search (in progress)
• Search (not found)

Add a prominent outline for keyboard users. See A guide to designing accessible, WCAG-compliant focus indicators

Use user-select: none to avoid

• text-selection for links containing only icons
• selection of line numbers from code fences

Get rid of current silhouette and create a logo that draws emphasis on flash. Generate new favicons based on this logo.

Currently, browser reader modes strip the aside element. Change the callout element to something else so that it stays in the document even in reader mode.

With details on

• experience and capabilities
• FAQs (can include About site, its stack, acknowledgements, privacy practices)

• Dark theme (default)
• Light theme

People should be able to select a theme if needed.

Disable the following tech for Chrome-based browsers:

• FLoC (through interest-cohort=())
• Topic API (through browsing-topics=())
• FLEDGE API (through join-ad-interest-group=() and run-ad-auction=())

To do this, I need to send the following Permissions Policy HTTP response header.

Permissions-Policy: browsing-topics=(), interest-cohort=(), join-ad-interest-group=(), run-ad-auction=()

Since this site is hosted on Netlify, create a netlify.toml with the following setting.

[[headers]]
  for = "/*"
  [headers.values]
    Permissions-Policy = "browsing-topics=(), interest-cohort=(), join-ad-interest-group=(), run-ad-auction=()"

Alternatively, create a _headers file in the public directory.

/*
  Permissions-Policy: browsing-topics=(), interest-cohort=(), join-ad-interest-group=(), run-ad-auction=()

Implement Remark plugin to embed youtube videos.

This can be implemented with remark-directive. Checkout remark-macro and remark-oembed for an alternative approach.

For optically perceivable palette.

• Reorganize brand, semantic and decorative colors
• Palette for Dark theme
• Palette for Light theme

• Prevent Scroll Chaining With Overscroll Behavior

References

• HEAD
• Favicons: How to Make Sure Browsers Only Download the SVG Version
• Get Your Head Straight

Take inspiration from Diátaxis to organize the content into the following categories.

• Guides
• Recipe
• References
• Crash Courses

Keep it focused and less cheeky

Integrate with GitHub's Discussions so that people can leave comments and suggestions

Custom shiki renderer to enable the following

• Keyboard scrollable code fences: Use tabindex=0 on all the elements with overflow: auto or overflow: scroll to ensure that they can be focused by keyboard; this is needed to copy the content of such elements (such as code blocks). See scrollable-region-focusable
• Line Highlighting
• Show language of the code
• Show caption for the code fences
• Highlight code fence on selection or focus

The wrapping element should be <figure> in case when language of the code or caption is being displayed. The metadata itself should be a <figcaption>.

Use Google Search Console API to query the popular posts and topics. This MUST be done at build time.

Add link tag with rel='source' to surface edit links of the pages. See rel="source"

Evaluate a more nuanced reset (preset?) than minireset.

• My Custom CSS Reset
• Using calc to figure out the optimal line-height

To improve the sharing experience on social networks

Implement Remark plugin for wrapping images into <figure> and assign them a <figcaption>, just so that the alt text is visible as caption for the image.

This plugin will wire Starry Night with Remark with the following features:

• Keyboard scrollable code fences: Use tabindex=0 on all the elements with overflow: auto or overflow: scroll to ensure that they can be focused by keyboard; this is needed to copy the content of such elements (such as code blocks). See scrollable-region-focusable
• Line numbers for multiline fences
• Line Highlighting
• Language of the code
• Caption for the code fences
• Highlight code fence on selection or focus

Considerations

• The wrapping element should be in case when language of the code or caption is being displayed. The metadata itself should be a .
• Prompt support where a prompt is shown but is not selectable; useful when copying the commands