Internal links in "About" templates

[emberwick]

Bug description

When using one of the built-in "About" templates, internal links (to pages or files) are broken and result in the message "can’t find the file at /index.html." It appears that the host url does not get properly inserted.

Steps to reproduce

Make a Quarto website using the built-in RStudio template and edit the file about.qmd to read:

---
title: "Finley Malloc"
about:
  id: hero-heading
  template: jolla
  image: profile.jpg
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
    - icon: file-pdf
      text: broken link to index
      href: index.qmd
---

About this site

```{r}
1 + 1
```

[A link to index that does work](index.qmd)

(Or any other internal page or file in place of index.qmd).

Expected behavior

The rendered html page contains a link to the page "index.html" (or any other internal page or file).

*When using the RStudio browser the link does work, but the rendered html does not work in a browser

Actual behavior

The rendered html has a link that tries to go to the page "file:///index.html" (no host url or local location) which produces the error message "File not found".

Your environment

• IDE: RStudio Version 2024.04.2+764 (2024.04.2+764)
• MacOS 14.2.1

Quarto check output

Quarto 1.4.554
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.554
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/elissa/Library/TinyTeX/bin/universal-darwin
      Version: 2024

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.7
      Path: /opt/homebrew/opt/python@3.11/bin/python3.11
      Jupyter: 5.7.1
      Kernels: python3

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

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.46
      rmarkdown: 2.27

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

[mcanouil]

I cannot reproduce using latest Quarto version.
Please upgrade at least to 1.5.55 and report if you still have the issue.

Using latest development version:
https://github.com/user-attachments/assets/6f187d77-2f05-4b64-b64b-09851a3ac653

[emberwick]

The issue persists. The problem does not appear when previewing sites, only when opening the rendered file "_site/about.html" in a browser. See attached screenshot, which shows where the link is missing the host.

[mcanouil]

That's not a bug.
It's how website works.

The _site content is supposed to be at the root of a web server.

Using file protocol is not the same thing.
File protocol does not support some JavaScript, etc.

quarto preview starts a web server.

[emberwick]

I understand that's how it should work. But when "_site/about.html" is opened in firefox or chrome, the non-working button tries to go to "file:///index.html". The working link (for this example, which is a local site, obviously would be the host url if online) links to file:///path_to_project/_site/index.html.

The problem is that in about.html, the working link has <a href="./index.html">A link to index that does work</a> and the non-working link has <a href="/index.html" class="about-link" rel="" target="">. I do not know why quarto preview behaves differently in this situation.

[emberwick]

mwe: https://github.com/emberwick/mwe

[emberwick]

If I manually change the absolute path in about.html to the relative path ./index.html the link works properly on a page in firefox. I believe this is related to changes made between 1.4 and 1.5, as discussed here: #7329.

[mcanouil]

FYI, this is done for several links in menu/sidebar/etc which as a default to consider path as being absolute which seems to be the proper assumption in website.

• quarto-cli/src/project/project-index.ts

  Lines 281 to 283 in 843a420

  	const outputHref = pathWithForwardSlashes(
  	(absolute ? "/" : "") + join(hrefDir, outputFile),
  	);

Funnily, the function is mostly used across the codebase with absolute = false except in rare places.

From

• quarto-cli/src/project/types/website/website-navigation.ts

  Lines 1416 to 1436 in fe989e5

  	async function resolveItem<
  	T extends {
  	href?: string;
  	text?: string;
  	icon?: string;
  	plainText?: string;
  	draft?: boolean;
  	},
  	>(
  	project: ProjectContext,
  	href: string,
  	item: T,
  	number = false,
  	): Promise<T> {
  	if (!isExternalPath(href)) {
  	const resolved = await resolveInputTarget(
  	project,
  	pathWithForwardSlashes(href),
  	);
  	if (resolved) {
  	const inputItem = {

It's possible to set:

    const resolved = await resolveInputTarget(
      project,
      pathWithForwardSlashes(href),
      false,
    );

But the function is used for several navigation components as said (navbar, sidebar).

The above suggestion works for simple website but further testing is required as it could break other links.

[cscheid]

file:///

Quarto's files are not meant to be consumed with the file:// scheme, and a number of features will not work. I quite strongly recommend you use a web server (python -m http.serve should be available for you on a Mac)

[mcanouil]

Adding another simple example showing that "about pages" do not respect the basic Quarto principle that paths starting with / are relative to the root of the project (or site-url).

• https://github.com/mcanouil/quarto-issues-experiments/tree/main/quarto-cli-10437
• https://m.canouil.dev/quarto-issues-experiments/issue10437/subdirectory/about.html