• #21

Tree and train colors should be more realistic, e.g. tree should have dark green color, train car bodies should have dark colors but their outlines should have bright colors to match their corresponding light colors.

Related: #18

Add drawing archive.

Especially to keyboard users.

Use marchbox.dev as staging and marchbox.com as production.

Maybe also explore Netlify Identity to protect the staging.

When using browser's back button (or swipe backward on iOS), the monorail navigation doesn't restore its position because browsers usually cache the DOM state. Need to find a solution to restore monorail position so users can navigate.

So that SVG code can be compiled into JS, less HTTP requests.

To avoid re-layout.

Support RSS

Webkit doesn't use circular dots for border-style: dotted.

Chrome & Firefox:

Safari:

https://github.com/jesstelford/color-svg-sprite

Blocked by #9

Should at least have one tree on each side without overlapping with any footer content.

When animation mode is "scroll", currently the monorail position always makes sure the active car is center aligned based on the viewport, even when the viewport width is big enough to contain all cars. Should update the centerActiveCar() method to be more smart, and center align the entire monorail when all cars are visible.

So that we can inline SVG code and easily manipulate colors.

Hopefully this library and better manage the monorail animations.

https://github.com/GoogleChromeLabs/page-lifecycle

Regardless of animation mode. Use case: loading the page in landscape orientation (animation mode = transform) then rotate to portrait, without arrive class, monorail doesn't have scroll snap.

Maybe with https://www.11ty.dev/docs/plugins/image/ plugin.

Current scroll animation is too buggy. Check the behavior of transforming a scroll child.

URLs should follow Articles:

• /drawings/project/<tag>
• /drawings/<tag>/<title-slug>

Subtasks:

• Update URL patterns
• Redirect existing ones to /drawings/happiest-page/
• Add project name to individual drawing pages

Currently the monorail car lifts on hover, this creates issues with moving click/touch target. Should keep the target static.

• Brief intro
• Recent articles
• Recent drawings

Adjust the train/car without interfering with user scrolling.

Little icon + text links:

• Subscribe
• Contact
• Twitter

Use Netlify Form + Functions (processing form submissions and sending emails to myself) for contact form instead of a plain email.

• Active color is gone
• Monorail lost scroll snap

Instead of monorail track outline color

Monorail CSS code are currently in:

• .nav
• .monorail
• .monorail-*
• inside SVG assets

Should encapsulate all into the land-monorail component.

• https://greenash.net.au/thoughts/2022/03/email-based-comment-moderation-with-netlify-functions/
• https://docs.netlify.com/forms/setup/

Workflow:

1. Use Netlify Forms to collect comment submissions
   • Use Ajax form for better UX but make sure non-JS works, too
   • Should mention that all comments become public upon approval. If they want to contact me directly, go to the Contact link.
2. Use Netlify Functions to set up a Scheduled Background Function:
   • This function checks all the verified comment submissions
   • Uses https://github.com/octokit/octokit.js to create a pull request to send comments to GitHub
   • Run this function at 9 AM everyday
3. Me review the pull request, approve to merge into mainstreet
4. Netlify rebuild, comments display

• Make some fun idea with avatar?

When, for some reason, arrive class isn't added, if you scroll monorail all the way to the right, then try to click any links in the main content, navigation will wait for departure observer's signal. Should probably also add a timeout to it.

A few things to try:

• Wait for land-inlinesvg to be defined and loaded before defining other custom elements
• Wait for land-monorail to hydrate before kicking in the arrival animation

• Hover over animations
• Night lights in dark mode

• Feed validation
• HTML validation (html validator)
• Visual regression testing?