finish sheep3

[SheepTester]

Ever since sheep3.js was written, it was never complete. The previous iterations of the little sheep had context menus, and the current little sheep was intended to have that too.

One nice thing is that now that I've gotten like 3 degrees since sheep3, I can make a proper site wide experience with what I know now.

Requirements:

• The little sheep should render in as many browsers as possible, save for when JavaScript is disabled. This means that it should stick to ES5 at the latest
• sheep3 should remain small at first, then lazy load the menu when needed
• The little sheep should be an HTML link for SEO, regardless of whether the menu loads successfully
• If loading the extra menu module fails, it should restore the link behaviour and play the animation as before
• Animations should be disabled if the user prefers reduced motion

When the user clicks on the little sheep, it'll open an HTML dialog that may cover a significant part of the screen (this differs from the previous iterations where you had to right click/long press on the little sheep to open a small menu). The color scheme will depend on the color scheme used by the page (i.e. often light theme) rather than the user's preference. It should contain the following:

• Page details
  • Page title
  • Page description
  • Open graph image
  • GitHub link (if available)
  • Date created (if available—I'll need to scrape this)
  • Repo information?
• Tools
  • eval.js or a modern equivalent
  • Firebug
  • Site search
• Hide the little sheep
• Link to home page
• Close button

Also because of bfcache, when the little sheep covers the screen it should disappear after a bit so when the user goes back it doesn't cover the page permanently

[SheepTester]

I disagree with the requirement that the sheep load on ES5 browsers. Who's it for? How am I going to test it?

Let's just target evergreen browsers. I was thinking web components could be good for CSS sandboxing

[SheepTester]

I think the modal will always be dark theme since the sheep isn't themed either. Also I'm not sure how available light-dark is or if there's a better CSS only way to detect color-scheme. Dark on light stands out too

Would be nice to have demo pages for each of the three sheep versions

[SheepTester]

instead of just "eval.js" each of the tools should have a description

[SheepTester]

use shadow dom to prevent most CSS styles from leaking in

[SheepTester]

date created info:

• commit description
• commit hash (to link to commit)
• commit author datetime