Adding "class: page-one" to my entry page disrupted the layout

thegetty / quire

A multi-package repository for the Quire multiformat publishing framework

https://quire.getty.edu/

BSD 3-Clause "New" or "Revised" License

98 stars 12 forks source link

Adding "class: page-one" to my entry page disrupted the layout #722

Closed zsofiaj closed 1 year ago

zsofiaj commented 1 year ago

Before proceeding, check to make sure there isn’t an existing issue for this bug.

[X] I have searched the existing issues and determined this is a new bug.

Steps to reproduce

When I added "class: page-one" to my first entry page, it broke the layout of the page. The text was a different font and it was partially overlaid over the main image for the catalogued object. Please see screenshot below. When I removed "class: page-one" from that md file, the formatting went back to normal.

Actual behavior

When I added "class: page-one" to the entry, it broke the layout of the page. I didn't actually test yet if it made that entry page 1 of my pdf because I removed it.

Expected behavior

I expected the layout to stay the same.

Version numbers

MacOS 11.5.1 Chrome 109.0.5414.119 Safari 14.1.2 Quire version 1.0.0-rc.3

What browsers are you seeing the problem on?

Chrome, Safari

Relevant Terminal/Shell output

No response

Supporting Information

No response

Erin-Cecele commented 1 year ago

Confirming that I was able to recreate this issue in the starter project.

MacOS: Monterey 12.5.1 Chrome: 113.0.5672.63 Firefox: 112.0.2 Quire version 1.0.0-rc-6

class: page-one was removed from its previous location in essay.md.

As a side note, this was not actually possible in v0 because a YAML block could not have two classes (for example class: side-by-side and class: page-one).

geealbers commented 1 year ago

@zsofiaj, this is a bug in Quire we weren't aware of, thanks for posting it! While we work on a more permanent fix, adding a second class to that page should work for you:

class: page-one quire-entry

geealbers commented 1 year ago

The underlying issue here is that many of Quire's layouts have a base class assigned in the frontmatter of the _layouts templates. Such as class: quire-essay in _layouts/essay.liquid, or class: quire-entry in _layouts/entry.liquid. And these classes are added as CSS classes in the output HTML, and used fairly extensively for styling.

The intention was that Quire users could also add custom classes to any markdown file (or example, adding class: page-one) and that that class would be added to the output HTML too. But instead of adding to the existing classes, these custom classes are overriding the existing one because the YAML frontmatter is inherited and there can't be two different class: attributes. The result is that instead of a page ending up with two classes like quire-essay page-one, the HTML is only ending up with one, page-one.

geealbers commented 1 year ago

Posted to https://jira.getty.edu/browse/DEV-15240 (cc @Erin-Cecele)

Erin-Cecele commented 1 year ago

We have confirmed that the reported issue is a bug. It has been added to our development queue. Stay tuned for updates.

zsofiaj commented 1 year ago

@Erin-Cecele Thank you!!

Erin-Cecele commented 1 year ago

This issue is still in our queue but has been backlogged because some more pressing issues have come up and taken precedence. Stay tuned for updates!

Erin-Cecele commented 1 year ago

This was fixed with PR #816 and will be included in the next release candidate: 1.0.0-rc.13