How to override '(Untitled)' in mobile/narrow view?

[johnkerl]

At https://github.com/johnkerl/quarto-markdown-skeleton I have a simple Quarto site.

This is pushed to https://johnkerl.github.io/quarto-markdown-skeleton/docs/ using the framework discussed at #439.

Everything looks great except one thing I can't figure out. On desktop it looks like this:

On mobile it looks like this, with (Untitled):

(Similarly on desktop if I narrow the browser window sufficiently.)

Question: I don't know what to configure to replace the (Untitled).

I can see this clearly enough in docs/index.html after quarto render:

  ...
  <nav class="quarto-secondary-nav" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
    <div class="container-fluid d-flex justify-content-between">
      <h1 class="quarto-secondary-nav-title">(Untitled)</h1>
      <button type="button" class="quarto-btn-toggle btn" aria-label="Show secondary navigation">
        <i class="bi bi-chevron-right"></i>
      </button>
    </div>
  </nav>
  ...

but I don't know what _quarto.yml line I need to override (Untitled).

[dragonstyle]

I think the issue appears to be that we're expecting a title explicitly in the document front matter (though I'll have to take a closer look at what the correct behavior from us should be). You can write 'front matter' on the front of your document like:

---
title: Title goes here
---

And we will automatically move the title into the secondary navigation when in the mobile view.

[johnkerl]

Ah, thanks @dragonstyle ! This makes sense.

So ... there are three places to put the page 'title':

• What I call the "H1 title" which is a # ... line at the start of the .md file;
• What I call the "_quarto.yml title" which is from text: ... colocated with href: ... in _quarto.yml;
• TIL the third option, what I'm now thinking of as the "YAML title" you mentioned ("frontmatter title") in the .md file.

In the following, page1.md is how I have been doing things so far in most of my Quarto work to date, while page2.md has all three titles, for illustration:

_quarto.yml

  sidebar:
    - style: "floating"
      collapse-level: 2
      align: left
      contents:
        - href: "page1.md"
        - href: "page2.md"
          text: "Page 2 _quarto.yml title"

page1.md

# Page 1 H1 title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
...

page2.md

---
title: Page 2 YAML title
---

# Page 2 H1 title

Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Convallis
...

(all, for reference, as of this commit).

And here's what they look like -- desktop/wide on the left, and mobile/narrow on the right:

---

Before you gave me this answer, my preference was to favor the "H1 title" -- reasons being:

• I don't want to 'double enter' titles in two places -- it's more to manage
• Sticking with the "H1 title" within the files and omitting the "_quarto.yml title" means I have "single entry" for page titles
• However TIL that doesn't play well with mobile so I can't keep doing this

Now that you've given me this answer, I still most definitely want "single entry" whenever possible. My choice now needs to be to use only the "YAML title" and not the other two. This is coded as:

_quarto.yml

  sidebar:
    - style: "floating"
      collapse-level: 2
      align: left
      contents:
        - href: "page1.md"
        - href: "page2.md"
          text: "Page 2 _quarto.yml title"
        - href: "page3.md"

page3.md

---
title: Page 3 YAML title
---

Nunc pulvinar sapien et ligula ullamcorper malesuada. Ante in nibh mauris
...

and it looks like this in wide/desktop and narrow/mobile, respectively:

This looks lovely in all Quarto views.

---

The only minus is that the YAML title is Quarto-specific -- it doesn't render nicely in non-Quarto views:

but this is a small price to pay.

I liked the "H1 title" since it was nice across desktop non-Quarto and Quarto views. But I need switch to using the "YAML title" / "frontmatter title" to get it to look nice across Quarto wide/desktop and narrow/mobile views, which I think is a higher priority.

Context: at work we have significant amounts of markdown, some of it "quartoized" so far, and more to come. While it's clear from quarto.org that many different documentation/publishing use-cases are supported, for us far and away the most important is to take bulk/legacy markdown, create a _quarto.yml file and do a few light edits on our .md files, and let Quarto make it stunningly gorgeous -- and it very much does that.

[dragonstyle]

Thanks for the comprehensive reply!

We mostly provide the text entry point in _quarto.yml sidebars as a way to override the title (e.g. if the document title is long and you'd like to provide a shorted side navigation specific title to make its appearance better in the sidebar).

I think in the long run you will be better served by using the title in the front matter as there is additional supported document metadata (e..g date, author, etc...) and we can provide special treatment and handling for all these metadata elements when we are able to identify them (for example https://quarto.org/docs/authoring/title-blocks.html).

Depending upon how you are organizing your migrated content, you might also find that listing pages come in handy for making folders of documents accessible without the need to provide a complete website for them:

https://quarto.org/docs/websites/website-listings.html#overview

Thanks for the kind words about quarto!