Merge pull request #76 from qmd-lab/feature-zoom-to

Zoom To

docs/gallery/demos/highlighting/index.qmd

@@ -1,18 +1,20 @@
 ---
 title: Highlighting
+image: limerick.png
+description: "Highlight lines or spans of code or line blocks."
 format:
   closeread-html:
     code-tools: true
 ---
 
-Closeread enables the highlighting of both code and text using a similar syntax.
+Closeread enables the [highlighting](../../../guide/focus-effects.html#highlighting) of both code and text using a similar syntax.
 
 To highlight particular lines of code for your reader, you can add an attribute to your trigger called `highlight`. To highlight lines of code, you can either use a series of line numbers separated by commas or a range separate by a hyphen. Some examples:
 
 - `highlight="1,5"`: highlight lines 1 and 5
 - `highlight="1-5"`: highlight lines 1 through 5
 
-The following section demonstrates that functionality.
+The following section demonstrates that functionality. Note that all stickies use `.scale-to-fill`
 
 :::{.cr-section}
 We'll show an example that demonstrates the use of the `dplyr` R package for data wrangling.
@@ -23,7 +25,7 @@ In the first two lines we load the `dplyr` package and the `palmerpenguins` pack
 
 The main block of code is referred as a pipeline or chain. Each line starts with a function and ends with a pipe, `|>`. [@cr-dplyr]{highlight="4-8"}
 
-:::{#cr-dplyr}
+:::{#cr-dplyr .scale-to-fill}
 ```{r}
 #| echo: true
 #| message: false
@@ -55,7 +57,7 @@ The end of the first two lines of a Limerick must rhyme. [@cr-limerick]{highligh
 
 The end of the third and fourth line also rhyme and are nudged in a bit. [@cr-limerick]{highlight="3-4"}
 
-| {#cr-limerick}
+| {#cr-limerick .scale-to-fill}
 | There was a young rustic named [Mallory]{#cr-mallory},
 | who drew but a very small [salary]{#cr-salary}.
 |   When he went to the show,

docs/gallery/demos/ojs-map/index.qmd → docs/gallery/demos/ojs-variables/index.qmd

@@ -1,5 +1,5 @@
 ---
-title: "Spinning Globe"
+title: "OJS Variables"
 image: "globe.png"
 description: "Smoothly transition interactive OJS graphics."
 format:

docs/gallery/demos/zooming/index.qmd

@@ -0,0 +1,127 @@
+---
+title: Zooming
+format:
+  closeread-html:
+    code-tools: true
+---
+
+Closeread enables the reader to zoom in on particular bits of both code and text using a similar syntax to highlighting
+
+To zoom to particular lines of code for your reader, you can add an attribute to your trigger called `zoom-to`. To zoom to a line of code, you can either use a line number or a span id.
+
+- `zoom-to="3"`: zoom to line 3
+- `zoom-to="cr-love`: zoom to the line containing the span `cr-love`
+
+The following section demonstrates that functionality.
+
+:::{.cr-section}
+
+The limerick is a form of poetry composed of five lines.
+
+Here is the first limerick appearing in the written record, from the *Saint John Daily News* in 1880. @cr-limerick
+
+The end of the first two lines of a Limerick must rhyme. [@cr-limerick]{zoom-to="1"}
+
+The end third and fourth line also rhyme and are nudged in a bit. [@cr-limerick]{zoom-to="14"}
+
+The end third and fourth line also rhyme and are nudged in a bit. [@cr-limerick]{zoom-to="cr-salary"}
+
+
+:::{#cr-limerick .scale-to-fill}
+| There was a young rustic named Mallory,
+| who drew but a very small [salary]{#cr-salary}.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+:::
+
+:::
+
+Now here is some code zooming.
+
+:::{.cr-section}
+
+The limerick is a form of poetry composed of five lines.
+
+Here is the first limerick appearing in the written record, from the *Saint John Daily News* in 1880. @cr-dplyr
+
+The end of the first two lines of a Limerick must rhyme. [@cr-dplyr]{zoom-to="18"}
+
+The end third and fourth line also rhyme and are nudged in a bit. [@cr-dplyr]{zoom-to="3"}
+
+
+:::{#cr-dplyr .scale-to-fill}
+```r
+library(dplyr)
+
+mtcars |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp) |>
+  select(mpg, hp)
+```
+
+:::
+
+:::
+
+`hlz` is a short-cut that you can use when you want to zoom into on a line while also highlighting it (or a span within the line).
+
+:::{.cr-section}
+Let's revisit the limerick. @cr-limerick2
+
+Let's focus on this line. [@cr-limerick2]{hlz="15"}
+
+Or this phrase. [@cr-limerick2]{hlz="cr-salary"}
+
+:::{#cr-limerick2 .scale-to-fill}
+| There was a young rustic named Mallory
+| who drew but a very small [salary]{#cr-salary}.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+|   When he went to the show,
+|   his purse made him go
+| to a seat in the uppermost gallery.
+:::
+:::
+
+

docs/gallery/demos/poem-1/index.qmd → docs/gallery/examples/auden-poem/index.qmd

@@ -1,5 +1,7 @@
 ---
-description: Text zooming using transforms
+title: "A Poem (and a Painting) About the Suffering That Hides in Plain Sight"
+image: gabbert.png
+author: Elisa Gabbert
 format:
   closeread-html:
     css: nytimes.css
@@ -17,14 +19,12 @@ By Elisa Gabbert March 6, 2002
 
 I’ve been reading this short, wry poem about suffering for more than 20 years.
 
-:::{focus-on="cr-musee" highlight-spans="cr-suffering"}
-How nice that it tells you in the first two words what it’s about.
-:::
+How nice that it tells you in the first two words what it’s about. [@cr-musee]{hlz="cr-suffering"}
 
 No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.
 
 
-:::{#cr-musee .cr-poem}
+:::{#cr-musee .scale-to-fill}
 
 | **MUSÉE DES BEAUX ARTS**
 | *by W.H. Auden*
@@ -56,3 +56,9 @@ No matter how familiar a poem is, rereading it always gives me a sense of first
 :::
 
 :::
+
+\
+\
+\
+
+This is an excerpt of the first three lines of *A Poem (and a Painting) About the Suffering That Hides in Plain Sight* by Elisa Gabbert, appearing in *The New York Times* on March 6, 2022 (<https://www.nytimes.com/interactive/2022/03/06/books/auden-musee-des-beaux-arts.html>)