Annotation mechanism for pink arrows and suchlike

[simonw]

I want to be able to annotate pages before applying screenshots - I often add pink arrows to things when I screenshot them manually, for example in https://datasette.io/tutorials/explore

These annotations should be defined in the YAML or as command line options to the shot command.

[simonw]

Tippy looks like it could be a nice starting point here: https://atomiks.github.io/tippyjs/

[simonw]

For arrows, I feel like having an SVG arrow shape which can be pointed at an element, rotated and shown in different colours would be really powerful.

Can then use the same mechanism to add further SVG shapes.

[simonw]

For text annotations you can do delightfully garish things with CSS these days! https://css-tricks.com/how-to-create-neon-text-with-css/

[simonw]

Made an SVG arrow in Figma: https://www.figma.com/file/2xTwTRi2G96Rph24V3smKN/Arrow-for-shot-scrape?node-id=2%3A2 - then optimized it with https://jakearchibald.github.io/svgomg/

<svg width="104" height="60" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#a)">
    <path fill-rule="evenodd" clip-rule="evenodd" d="m76.7 1 2 2 .2-.1.1.4 20 20a3.5 3.5 0 0 1 0 5l-20 20-.1.4-.3-.1-1.9 2a3.5 3.5 0 0 1-5.4-4.4l3.2-14.4H4v-12h70.6L71.3 5.4A3.5 3.5 0 0 1 76.7 1Z" fill="#FF31A0"/>
  </g>
  <defs>
    <filter id="a" x="0" y="0" width="104" height="59.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
        <feOffset dy="4"/>
        <feGaussianBlur stdDeviation="2"/>
        <feComposite in2="hardAlpha" operator="out"/>
        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2_26"/>
        <feBlend in="SourceGraphic" in2="effect1_dropShadow_2_26" result="shape"/>
    </filter>
  </defs>
</svg>

[simonw]

Closing this for the moment, as described in https://simonwillison.net/2022/Mar/10/shot-scraper/ the JavaScript mechanism turns out to be good enough right now.

[simonw]

Here's my demo that creates an annotated screenshot using the SVG arrow I made here: https://github.com/simonw/shot-scraper-demo/blob/e72b6b5960b9b9cd184c3c569fa04a0edcd63a59/shots.yml

[simonw]

A JavaScript utility library for this could look something like:

ShotScraper.annotate(
  ".facet-link",
  ShotScraper.Arrow({
     color: "pink",
     width: 150,
     direction: "right"
  })
)

[simonw]

I figured out more about how to use .getBoundingClientRect() here - in particular how to combine it with window.scrollY and window.scrollX:

https://github.com/simonw/shot-scraper/blob/e59e87c20f1081cfcaa6ec4a8c94db70995580b1/shot_scraper/cli.py#L419-L450

[simonw]

Re-opening this as a longer term research issue.

[simonw]

https://popper.js.org/ might be useful here.

[simonw]

Popper got rebranded to https://github.com/floating-ui/floating-ui, but the version I want is likely this one: https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js