{closeread} CSS Stylesheet Replacement

[kpivert]

Andrew and James,

Thanks very much for {closeread}. This is such a great extension and I really appreciate the elegant examples and clear documentation. FWIW, I used it in a new report. I really like the annotation through motion aesthetic.

After publishing the report, I pushed a separate revision to the landing page and noticed the <link rel="stylesheet" href="_extensions/qmd-lab/closeread/closeread.css"> was replaced by <link rel="stylesheet" href="styles.css">. Is there a setting I need to use in the YAML to stop this from happening?

Guessing this is {quarto} specific issue, and nothing to do with {closeread}. Only asking if this was something others had encountered. Totally understand if this is an edge case and something I need to figure out on my own.

Regardless, after I figure this out I will be sure to cite {closeread} in the report.

Thanks again.

Kurtis

[andrewpbray]

Hi Kurtis,

Looks like you are making very good use of this extension - thanks for sharing!

I'm not sure I fully understand what you're observing with the style sheets. Those snippets of HTML: did you find those in subsequent versions of the html file that you linked to? Or does "landing page" refer to a different HTML file? Do you happen to know if you changed your Quarto version before seeing this change?

[kpivert]

Andrew,

Thanks for your quick reply, and sorry for my lack of clarity.

The snippets of HTML were in the _site/index.html.

When I pushed the post using {closeread}, in addition to placing the extension in the root directory and in _site, the following changes were made in _site/index.html:

• The Quarto version was updated to 1.6.20. I can't remember when I updated it but it was a while ago.
• The link to Bootstrap was updated, and script calls for intersection-observer.js, scrollama.js, and closeread.js were inserted.
• The <link rel="stylesheet" href="styles.css"> was replaced by <link rel="stylesheet" href="_extensions/qmd-lab/closeread/closeread.css">

After I pushed the post live, I revised the _site/about.html (the "landing page" for https://data.asn-online.org/) to include a blurb about the new report. I rendered that page and pushed it, but when I previewed the site in Netlify, the {closeread} functionality was removed. That is, the extension folders were missing in the root and _site directories, and instead of the closeread/scrollama functionality the bare closeread/quarto tags were rendered as raw text.

I'm guessing this is user error on my part, but wondered if you had experienced anything similar and/or knew a fix to keep this from happening.

Any advice you may have would be appreciated!

Thanks again.

Kurtis

[kpivert]

Got it. Thanks, James. I'm actually not using a GitHub Action but the continuous deployment functionality from Netlify (https://docs.netlify.com/site-deploys/deploy-previews/).

However, I've neglected to update my build dependency from Node 16.x to Node 20.x. Could this be the issue?

FWIW, I'm including the log from deploying the post using closeread.

Thank you again for your help.

Kurtis

2:42:50 PM: Build ready to start
2:43:03 PM: build-image version: ecdc8b770f4a0193fd3f258c1bc6029e681813a4 (focal)
2:43:03 PM: buildbot version: c16f919a2795e89b4a1cdc331cc27e282ed62ac1
2:43:03 PM: Fetching cached dependencies
2:43:04 PM: Starting to download cache of 327.2MB
2:43:05 PM: Finished downloading cache in 1.764s
2:43:05 PM: Starting to extract cache
2:43:06 PM: Finished extracting cache in 433ms
2:43:06 PM: Finished fetching cache in 2.266s
2:43:06 PM: Starting to prepare the repo for build
2:43:06 PM: Preparing Git Reference pull/21/head
2:43:10 PM: Starting to install dependencies
2:43:11 PM: Python version set to 3.8
2:43:11 PM: Attempting Ruby version 2.7.2, read from environment
2:43:11 PM: Using Ruby version 2.7.2
2:43:12 PM: Started restoring cached go cache
2:43:12 PM: Finished restoring cached go cache
2:43:12 PM: Installing Go version 1.17 (requested 1.17)
2:43:17 PM: go version go1.17 linux/amd64
2:43:17 PM: Using PHP version 8.0
2:43:19 PM: Downloading and installing node v16.20.2...
2:43:19 PM: Downloading https://nodejs.org/dist/v16.20.2/node-v16.20.2-linux-x64.tar.xz...
2:43:20 PM: Computing checksum with sha256sum
2:43:20 PM: Checksums matched!
2:43:22 PM: Now using node v16.20.2 (npm v8.19.4)
2:43:22 PM: Enabling Node.js Corepack
2:43:22 PM: Started restoring cached build plugins
2:43:22 PM: Finished restoring cached build plugins
2:43:22 PM: Successfully installed dependencies
2:43:22 PM: No build steps found, continuing to publishing
2:43:22 PM: Starting to deploy site from '_site'
2:43:22 PM: Calculating files to upload
2:43:25 PM: Starting post processing
2:43:25 PM: Skipping form detection
2:43:25 PM: Post processing - header rules
2:43:25 PM: Post processing - redirect rules
2:43:25 PM: Post processing done
2:43:25 PM: Section completed: postprocessing
2:43:25 PM: 66 new file(s) to upload
2:43:25 PM: 0 new function(s) to upload
2:43:25 PM: Section completed: deploying
2:43:25 PM: Section completed: building
2:43:26 PM: Site is live ✨
2:43:30 PM: Uploading Cache of size 430.0MB
2:43:31 PM: Section completed: cleanup
2:43:31 PM: Finished processing build request in 27.121s

[jimjam-slam]

Ah, gotcha! Do you have a netlify.toml or similar file that directs Netlify to install Quarto before building, or is your site built locally and version controlled, with Netlify simply copying it from the repo? (If you have a repo you can point us to, that would help too!)

EDIT: these log lines make me assume that you're building locally and just using Netlify for the publish step - does that square with your understanding?

No build steps found, continuing to publishing
2:43:22 PM: Starting to deploy site from '_site'

[kpivert]

I checked and no .toml files, just the regular .yml files including a _extension.yml for closeread. I have the repo as private (because of some data files), but I'm happy to put the non-private stuff into another repo if that would be helpful.

Yes, I believe that I'm building locally and using Netlify for publishing (to the best of my understanding).

Thanks again for your time. I really appreciate it.

[jimjam-slam]

Okay, so it sounds like there's a problem with the files making it from your repo to Netlify.

I can confirm that Deletion of directory '_extensions/qmd-lab/closeread' failed. Should I try again? (y/n) is a git error. When you switch branches, git updates your versioned files to match the branch you're checking out (which might include removing files or folders if they're versioned but not in the branch you're checking out). Apparently this error can crop up if the directory includes _un_versioned files and git attempts to remove the directory but another process is using it (eg. you have a terminal in that directory, a copy of R touching it, etc.).

I'm wondering if you've maybe added Closeread while working on a branch, not version controlled it, and then the files have been lost or corrupted while merging into main (or whichever branch you're publishing from).

I think the next steps are:

1. confirm that _extensions/qmd-lab/closeread is present, that its contents are version-controlled (you generally want to add Quarto extensions to git!) and that they are in the branch you want to publish from
2. run quarto render

• Note that when you render a website (as opposed to an individual doc), the extension CSS files end up in _site/site_libs/quarto-contrib/quarto-project/closeread/closeread.css (assuming you render your site to _site), not _extensions/qmd-lab/closeread/closeread.css.

3. verify that _site/site_libs/quarto-contrib/quarto-project/closeread/closeread.css` excsts
4. verify that your rendered pages in _site have a link element that points to closeread.css

• this a relative link, so the exact path will change if you're using Closeread in a post inside a folder. But the path will essentially match the one from step 3

5. run quarto publish netlify
6. Check steps 3 and 4 from your site's URL on Netlify

[kpivert]

OMG, thank you!

The moral of the story is (apologies to David Mamet) ABQ.
A. Always.
B. Be using.
Q. quarto render.

Two notes:

1. Instead of quarto publish netlify I pushed the branch to Github and viewed the deploy preview before merging.
2. After using quarto render the only thing in the _site/site_libs/quarto-contrib/quarto-project/closeread was closeread.js. The only copy of closeread.css is in the _extensions folder on root.

Sharing my "informative" commit history for your amusement.

Thank you again for all your time and help, and thank you for closeread and sverto.

Kurtis

[jimjam-slam]

Hahaha, it happens to all of us at some point! Glad we could help, Kurtis 🥳