---
title: "Star Wars films (dynamic HTML)"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Star Wars films (dynamic HTML)}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r, eval = FALSE, echo = FALSE}
library(magrittr)
crawl_html <- function(x) {
  x %>% 
    gsub("\r", "", .) %>% 
    gsub("\n\n", "</p><p>", .) %>% 
    gsub("\n", " ", .) %>% 
    paste0("<p>", ., "</p>")
}

fields <- c("episode_id", "title", "release_date", "director", "opening_crawl")
repurrrsive::sw_films |> 
  lapply(\(film) film[fields]) |> 
  lapply(function(film) {
    film$opening_crawl <- crawl_html(film$opening_crawl)
    film
  }) |> 
  jsonlite::write_json("vignettes/starwars.json", pretty = TRUE, auto_unbox = TRUE)
```

This vignette contains some dynamic generated data about the Star Wars films for use in rvest examples and vignettes.

```{=html}
<script>
  const moviesData = [
  {
    "episode_id": 4,
    "title": "A New Hope",
    "release_date": "1977-05-25",
    "director": "George Lucas",
    "opening_crawl": "<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.<\/p><p>During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.<\/p><p>Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....<\/p>"
  },
  {
    "episode_id": 2,
    "title": "Attack of the Clones",
    "release_date": "2002-05-16",
    "director": "George Lucas",
    "opening_crawl": "<p>There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic.<\/p><p>This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain  peace and order in the galaxy.<\/p><p>Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi....<\/p>"
  },
  {
    "episode_id": 1,
    "title": "The Phantom Menace",
    "release_date": "1999-05-19",
    "director": "George Lucas",
    "opening_crawl": "<p>Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.<\/p><p>Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.<\/p><p>While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict....<\/p>"
  },
  {
    "episode_id": 3,
    "title": "Revenge of the Sith",
    "release_date": "2005-05-19",
    "director": "George Lucas",
    "opening_crawl": "<p>War! The Republic is crumbling under attacks by the ruthless Sith Lord, Count Dooku. There are heroes on both sides. Evil is everywhere.<\/p><p>In a stunning move, the fiendish droid leader, General Grievous, has swept into the Republic capital and kidnapped Chancellor Palpatine, leader of the Galactic Senate.<\/p><p>As the Separatist Droid Army attempts to flee the besieged capital with their valuable hostage, two Jedi Knights lead a desperate mission to rescue the captive Chancellor....<\/p>"
  },
  {
    "episode_id": 6,
    "title": "Return of the Jedi",
    "release_date": "1983-05-25",
    "director": "Richard Marquand",
    "opening_crawl": "<p>Luke Skywalker has returned to his home planet of Tatooine in an attempt to rescue his friend Han Solo from the clutches of the vile gangster Jabba the Hutt.<\/p><p>Little does Luke know that the GALACTIC EMPIRE has secretly begun construction on a new armored space station even more powerful than the first dreaded Death Star.<\/p><p>When completed, this ultimate weapon will spell certain doom for the small band of rebels struggling to restore freedom to the galaxy...<\/p>"
  },
  {
    "episode_id": 5,
    "title": "The Empire Strikes Back",
    "release_date": "1980-05-17",
    "director": "Irvin Kershner",
    "opening_crawl": "<p>It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.<\/p><p>Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.<\/p><p>The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space....<\/p>"
  },
  {
    "episode_id": 7,
    "title": "The Force Awakens",
    "release_date": "2015-12-11",
    "director": "J. J. Abrams",
    "opening_crawl": "<p>Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.   With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.   Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....<\/p>"
  }
]

    function generateMoviesInfo() {
      const moviesContainer = document.getElementById('moviesInfo');
      moviesData.sort((a, b) => a.episode_id - b.episode_id).forEach(movie => {
        const movieElement = document.createElement('section');
        movieElement.innerHTML = `
          <h2 data-id='${movie.episode_id}'>${movie.title}</h2>
          <p>Released: ${movie.release_date}</p>
          <p>Director: <span class='director'>${movie.director}</span></p>
          <div class='crawl'>${movie.opening_crawl}</div>
        `;
        moviesContainer.appendChild(movieElement);
      });
    }

    // Call the function on window load
    window.onload = generateMoviesInfo;

</script>
```
::: {#moviesInfo}
:::