retypeapp / retype

Retype is an ✨ ultra-high-performance✨ static site generator that builds a website based on simple text files.
https://retype.com
Other
1.06k stars 204 forks source link

Page with header + title #559

Open rab-dev opened 1 year ago

rab-dev commented 1 year ago

Hi,

I think I've found an inconsistency between the displaying of pages titles (explicit v implicit) when including a header image on a page. As always could be my limited understanding but I have checked and it seems legit.

Hope this helps.


Problem

Case #1 : Page with Header:

![](https://retype.com/static/retype-hero.png)

# Page with header

This is a page with a top feature image as the header.

This displays the image at the top of the page with the page title below the image.


Case #2 : Page with Header + Title:

---
title: Hello Title
---
![](https://retype.com/static/retype-hero.png)

# Page with header + title

This is a page with a top feature image as the header and a title.

This displays the page title (Hello Title) at the top of the page with the image below the title.

Capture

Proposal

In Case #2 the new title (Hello Title) should not be displayed.


geoffreymcgill commented 1 year ago

While we do strongly encourage using a standard Markdown title instead of the title config, we could theoretically add a rule to support this proposal.

Retype would need to perform the following logic:

  1. Check if there is a title config value
  2. Check if there is a Markdown H1 header as either the first content item, or second content item after an image
  3. If a Markdown H1 header is found, then ignore the title, otherwise add the title as the top <h1> of the page

Currently, Retype performs the same logic as above, but without the or second content item after an image in step 2. We would need to add that test.

For a little background on the title config, we added support for title primarily to support importing and building projects originally authored in GitBook as GitBook does not set the page H1 header title in Markdown when they export your content.

@rab-dev What is the scenario where you discovered this issue? Was it just by accident or do you have a case where setting the title config is needed?

rab-dev commented 1 year ago

Thanks.

This has come up when writing my docs. I'm happy of course to be told it's not the right way and to learn the correct way.

Use case is:

  1. I have a long title on a page "How My Amazing Awesome Thing Works".
  2. The title is too long to be displayed in the index in the lhs side panel (looks awkward).
  3. I set the title config to "How it Works".

This works as intended. Short index title. Long page title.

I add a page header (image) and it breaks as both titles are then shown on the page.

My workaround is simply not to add the page header (image).

So it's not urgent & not a deal breaker, but thought it useful to report.

geoffreymcgill commented 1 year ago

@rab-dev Thanks for the additional details.

2. The title is too long to be displayed in the index in the lhs side panel (looks awkward).

You can use the label config to set a custom value for the left tree navigation node.

---
label: How it Works
---
# How My Amazing Awesome Thing Works

Using the label will also work correctly if using a header image.

We should be able to still support your original proposal, but looks like setting the label config is what you need for your scenario.

Hope this helps.

rab-dev commented 1 year ago

Perfect.

label is the correct call, works with the header image and gives me what I wanted.

Thank you. My bad. Apologies.

geoffreymcgill commented 1 year ago

I'm going to leave this issue open as I do feel there is a small improvement to be made here. The label is a solution to the original issue, but there is also a small enhancement that we can implement buried in there too.