Update screenshots in documentation to match latest designs

[simonw]

https://docs.datasette.io/en/0.62/full_text_search.html has this out-of-date screenshot:

[simonw]

I just spotted some other out-dated screenshots in the docs/ directory:

• [x] advanced_export.png
• [x] binary_data.png
• [x] facets.png
• [x] full_text_search.png

[simonw]

For the advanced export one:

shot-scraper 'https://register-of-members-interests.datasettes.com/regmem/items?_search=hamper' -s '#export' -p 10

Produces:

Current image is:

[simonw]

New screenshot of FTS, from https://register-of-members-interests.datasettes.com/regmem/items?_search=hamper&_sort_desc=date

[simonw]

For this image:

https://latest.datasette.io/fixtures/binary_data has an extra row these days:

This deletes every row past the first two (first three including the header row):

Array.from(document.querySelectorAll('tr:nth-child(n+3)'), el => el.parentNode.removeChild(el));

[simonw]

So:

shot-scraper 'https://latest.datasette.io/fixtures/binary_data' \
  -j "Array.from(document.querySelectorAll('tr:nth-child(n+3)'), el => el.parentNode.removeChild(el));" \
  -s table -p 10

[simonw]

Here's the new advanced export image:

[simonw]

I'm going to use this page for the facets screenshot: https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=type&_facet=party&_facet=state&_facet_size=10

Trying for this bit:

Which incorporates .suggested-facets but also the first 3 rows and 10 columns of the table, I wonder if I can specify that in a single selector?

[simonw]

This seems to get every table cell in that table for the first 3 rows and the columns up to party:

document.querySelectorAll('tr:not(:nth-child(n+4)) td:not(:nth-child(n+10))')

[simonw]

This works:

shot-scraper
  'https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=type&_facet=party&_facet=state&_facet_size=10' \
  -s '.suggested-facets a' \
  --selector-all 'tr:not(tr:nth-child(n+4)) td:not(:nth-child(n+11))' \
  -p 10

[simonw]

I'm going to link the documentation screenshots directly to the images in the https://github.com/simonw/datasette-screenshots repository - but I don't want those images to reflect main when the documentation may reflect a specific version.

So I'm going to start tagging releases of datasette-screenshots so I can get permanent URLs to those images.

[simonw]

That's the last two screenshots:

[simonw]

I'm going to tag datasette-screenshots with the current Datasette version, 0.62.

[simonw]

OK, the URLs to use in the docs are:

• https://raw.githubusercontent.com/simonw/datasette-screenshots/0.62/advanced-export.png (retina)
• https://raw.githubusercontent.com/simonw/datasette-screenshots/0.62/non-retina/regmem-search.png
• https://raw.githubusercontent.com/simonw/datasette-screenshots/0.62/binary-data.png (retina)
• https://raw.githubusercontent.com/simonw/datasette-screenshots/0.62/non-retina/faceting-details.png

[simonw]

New images are now live on these pages:

• https://docs.datasette.io/en/latest/csv_export.html
• https://docs.datasette.io/en/latest/binary_data.html
• https://docs.datasette.io/en/latest/facets.html
• https://docs.datasette.io/en/latest/full_text_search.html
• https://docs.datasette.io/en/latest/changelog.html#v0-23 (was a duplicate of the advanced export image)

[simonw]

Here's the YAML I added to https://github.com/simonw/datasette-screenshots/blob/main/shots.yml for this issue:

- url: https://register-of-members-interests.datasettes.com/regmem/items?_search=hamper&_sort_desc=date
  height: 585
  width: 960
  output: regmem-search.png
- url: https://register-of-members-interests.datasettes.com/regmem/items?_search=hamper
  selector: "#export"
  output: advanced-export.png
  padding: 10
- url: https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=type&_facet=party&_facet=state&_facet_size=10
  selectors_all:
  - .suggested-facets a
  - tr:not(tr:nth-child(n+4)) td:not(:nth-child(n+11))
  padding: 10
  output: faceting-details.png
- url: https://latest.datasette.io/fixtures/binary_data
  selector: table
  javascript: |-
    Array.from(
      document.querySelectorAll('tr:nth-child(n+3)'),
      el => el.parentNode.removeChild(el)
    );
  padding: 10
  output: binary-data.png

[simonw]

Twitter thread about this issue: https://twitter.com/simonw/status/1581012617526595584

[simonw]

Extracted a TIL: https://til.simonwillison.net/shot-scraper/subset-of-table-columns

[simonw]

Blogged about this here: https://simonwillison.net/2022/Oct/14/automating-screenshots/