Document Listings is NOT support by theme none

[rgaiacs]

Bug description

Set website theme to none in _quarto.yml as in

format:
  html:
    theme: none

disables document listings.

Steps to reproduce

1. Download minimal working example
2. Unzip document-listing-and-theme-none.zip
3. Run quarto preview --no-browser --render html

Expected behavior

List of documents displayed:

HTML source code has

<script src="site_libs/quarto-listing/list.min.js"></script>
<script src="site_libs/quarto-listing/quarto-listing.js"></script>

Actual behavior

List of documents is NOT displayed:

HTML source code does NOT include

<script src="site_libs/quarto-listing/list.min.js"></script>
<script src="site_libs/quarto-listing/quarto-listing.js"></script>

Your environment

• OS: Ubuntu 22.04 LTS

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.5: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.230
      Path: /opt/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.10.6
      Path: /usr/bin/python3
      Jupyter: 5.2.0
      Kernels: python3

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

[✓] Checking R installation...........OK
      Version: 4.2.2
      Path: /usr/lib/R
      LibPaths:
        - /home/raniere/R/x86_64-pc-linux-gnu-library/4.2
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.42
      rmarkdown: 2.20

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

[cderv]

By using theme: none you are deactivating all the CSS from being including in Quarto as documented in https://quarto.org/docs/output-formats/html-themes.html#overview

theme: none # no theme css added to document

This means a lot a feature won't be available.

Are you expecting the listing to work (like only the JS to be there), but with no style in order to provide your own ?

To be clearer, theme: none means No Bootstrap. So all the bootstrap related feature won't be included.

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

Lines 194 to 203 in 32ead25

	// listings extras
	const hasBootstrap = formatHasBootstrap(format);
	if (hasBootstrap) {
	const htmlListingDependencies = await listingHtmlDependencies(
	source,
	project,
	format,
	services.temp,
	extras,
	);

quarto-cli/src/format/html/format-html-info.ts

Lines 14 to 25 in 32ead25

	export function formatHasBootstrap(format: Format) {
	if (format && isHtmlOutput(format.pandoc, true)) {
	return hasBootstrapTheme(format.metadata);
	} else {
	return false;
	}
	}
	export function hasBootstrapTheme(metadata: Metadata) {
	const theme = metadata[kTheme];
	return theme !== "none" && theme !== "pandoc";
	}

[rgaiacs]

@cderv Thanks for the reply. I'm aware that theme: none deactivate all the CSS but the document listings is Javascript. My intuition was that document listings would work for being Javascript and theme independent. Plus, with theme: none, Quarto continue to include some Javascript

<script src="[site_libs/clipboard/clipboard.min.js](view-source:http://localhost:8000/site_libs/clipboard/clipboard.min.js)"></script>
<script src="[site_libs/quarto-html/tabby.min.js](view-source:http://localhost:8000/site_libs/quarto-html/tabby.min.js)"></script>
<script src="[site_libs/quarto-html/popper.min.js](view-source:http://localhost:8000/site_libs/quarto-html/popper.min.js)"></script>
<script src="[site_libs/quarto-html/tippy.umd.min.js](view-source:http://localhost:8000/site_libs/quarto-html/tippy.umd.min.js)"></script>
<script src="[site_libs/quarto-html/anchor.min.js](view-source:http://localhost:8000/site_libs/quarto-html/anchor.min.js)"></script>

in the final HTML.

This means a lot a feature won't be available.

I understand that part.

Are you expecting the listing to work (like only the JS to be there), but with no style in order to provide your own ?

Yes. This is the use case that I have.

[cderv]

I'm aware that theme: none deactivate all the CSS but the document listings is Javascript.

theme: none deactivate Bootstrap, so any Bootstrap related feature. I pointed to you to the code to make that clear.

Plus, with theme: none, Quarto continue to include some Javascript

They are probably not Bootstrap related and independant.

@dragonstyle can you chime in and confirm us. I believe this is this way because Listing feature does use some Bootstrap JS, right ? Or could it be made independent so that it would work even with theme: none ?

My understanding from the current codebase is that Document Listing feature is Bootstrap related.

[dragonstyle]

It currently depends upon bootstrap purely for CSS layout, so it definitely could be made to work without bootstrap pretty easily I think.

[cderv]

Awesome ! thanks @dragonstyle and thanks @rgaiacs for opening the issue !