quarto-dev / quarto-dev/quarto-cli

CSS and images from embedded HTML inside a Quarto book do not render

Open
#1,506 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Embedding HTML inside of book does not seem to work.

In the root of my project directory I have :

  1. a quarto file called test1.qmd that contains
---
title: "test1"
---

```{r}
#| echo: false
knitr::include_url({"x.html"})
```
  1. a YAML file called _quarto.yml that contains:
project:
  type: book
  title: "test"

book:
  title: "CSS Notes"
  author: "Me"
  date: "7/22/2022"
  chapters:
    - index.qmd
    - test1.qmd

format:
  html:
    theme: cosmo
  1. a html file called x.html that contains
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>What is CSS?</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <img src="./img/image.jpeg">
        <div class="content">
            <h3>Where is my rUM?</h3>
            <button>Click Here</button>
        </div>
    </div>
</body>
</html>
  1. a css file called style.css that contains
.container {
    width: 400px;
    margin: auto;
    background: #eee;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 7px 15px #ccc;
}

.container img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.content {
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
}

.content h3 {
    color: #777;
}

.content button {
    padding: 10px 20px;
    margin-bottom: 10px;
    background: coral;
    font-size: 15px;
    color: #fff;
    outline: none;
    border-radius: 20px;
    border: none;
    box-shadow: 3px 5px 10px #ccc;
    transition: all .2s;
}

.content button:hover {
    background: orangered;
}

  1. an empty index.qmd file

  2. a child directory called img containing an image file called image.jpeg

When I click Render Book in the Build tab of RStudio IDE the book renders. The content of the embedded page appears without the image or the ccs styling. The Background Jobs tab tells me

Watching files for changes
Browse at http://localhost:7932/
GET: /
GET: /test1.html
GET: /x.html
  /style.css (404: Not Found)
  /img/image.jpeg (404: Not Found)

If I remove the type: book line from the YAML file ... :

project:
  title: "test"

book:
  title: "CSS Notes"
  author: "Me"
  date: "7/22/2022"
  chapters:
    - index.qmd
    - test1.qmd

format:
  html:
    theme: cosmo

... and click Render on the test1.qmd file, the page renders showing the image and using the CSS.

Is this a bug or am I botching the syntax somewhere (or doing something else wrong)?

I am running RStudio IDE: 2022.07.0 Build 548 on macOS Monterey Version 12.4.

I can do a show and tell at RStudio::conf if it helps....

quarto check Output
[✓] Checking Quarto installation......OK
      Version: 1.0.35
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.8.9
      Path: /Applications/Xcode.app/Contents/Developer/usr/bin/python3
      Jupyter: 4.11.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.2.0
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
      rmarkdown: 2.14

[✓] Checking Knitr engine render......OK
quarto tools check Output
[✓] Inspecting tools

Tool         Status            Installed     Latest  
chromium     Not installed     ---           869685  
tinytex      Up to date        v2022.07      v2022.07
Checklist
  • formatted your issue so it is easier for us to read?
  • included a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
  • documented the quarto version you're running, by pasting the output from running quarto check in the "Quarto Check Output" text area?
  • documented the version of the quarto tools you're running, by providing the output from running quarto tools check in the "Quarto Tools Check Output" text area?
  • documented the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
  • documented which operating system you're running? If on Linux, please provide the specific distribution as well.
  • upgraded to the latest version, including your versions of R, the RStudio IDE, and relevant R packages?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the book with _quarto.yml, test1.qmd, x.html, style.css, and img/image.jpeg using Quarto 1.0.35, then inspect the generated book and its asset paths. Compare this with rendering test1.qmd without project.type: book; done means the embedded page's CSS and image load successfully in the book output without 404s.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.