observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.

https://observablehq.com/framework/

ISC License

2.53k stars 121 forks source link

Flatten the rendered page structure? #1668

Open Fil opened 1 month ago

Fil commented 1 month ago

The page structure currently is the following:

html
- head
- observable scripts
- custom head
- body
- sidebar (optional)
- toc (optional)
- center
  - header (custom)
  - main (page content)
  - footer (custom)

there are lots of optional and custom content, but the fact that some of it is nested in the center div makes it a bit difficult to reorganize with css (flexbox or grid).

It would feel nice to flatten the body:

body
- sidebar (optional)
- toc (optional)
- header (custom)
- main (page content)
- footer (custom)

I experimented a bit, and it doesn't seem to require many changes in grid.css — basically we just have to tack an .observablehq-center class on the header, main and footer elements, and change a few of the margins.

An alternative (or complement) would be to reboot #253 and allow "full page templates".

CobusT commented 1 month ago

This change would give users a lot of flexibility with the page layout.

mbostock commented 1 month ago

I expect it will be difficult to do this in a backwards-compatible way, and it will probably cause a lot of churn with the CSS. I recommend we consider more incremental solutions.

Fil commented 1 month ago

1669 shows how much churn there is (not much, I would say).

If we absolutely must keep the same nested page structure for backwards compatibility, then I think we'll have to revive something like #253.

With the current code base, if you want to have a header that takes 100% of the width (with a sidebar that starts below it), you can technically do so by inserting it in head, but it's clearly wrong since it's supposed to fill in the <head>.

mbostock commented 1 month ago

Okay. I can take a look at #1669 when I have time but it’s not yet done and I see some hints of difficulties (do the container media queries still work? how does this affect custom styles in userland?).

CobusT commented 1 month ago

I am pretty sure the container media queries still work. I went through them yesterday and tested all the breakpoints.

mbostock commented 1 month ago

Since I haven’t had a chance to test yet, perhaps someone would be kind enough to explain how the container queries still work given that container-type: inline-size; is removed? The way I typically test this is to choose a relatively narrow window width and then toggle the sidebar; this changes the width of the container, and should toggle the visibility of the table of contents and the number of available columns in grid layouts.

CobusT commented 1 month ago

Ah! Those container queries. They will probably break. I will investigate and report back.

CobusT commented 1 month ago

I added the container-type: inline-size; back (on the #observablehq-main div (instead of the #observablehq-center div that is no more. That fixes the problem with the grid layouts. However, it pushes the #observablehq-main div a little bit down on the page and I don't understand why.

mbostock commented 1 month ago

It disables margin collapse.