fix(api-reference): allow users to add custom header / footers easily

[cameronrohani]

This is a draft proposal to allow users to easily add custom headers and footers

unlike the other wonderful solutions this one relies on removing scroll from .scalar-api-reference and instead using the body for scrolling.

Why this instead of the other?

Some users require scrolling of the whole page rather than just .scalar-api-reference which creates double scrollbars on the website when they embed scalar, this fixes that.

demo:

headerfootervid.mov

if we choose to go with this approach there remains some todo's:

• create better documentation on how to add header / footers
• remove overflow:hidden in /scalar-org so this approach will work
• remove some redundant code from scalasusaurus

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8ad1786

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[relativeci]

#1990 Bundle Size — 1.95MiB (+0.05%).

8ad1786(current) vs 68eede9 main#1985(baseline)

Warning

Bundle contains 4 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current #1990	Baseline #1985
Initial JS	1.95MiB(+0.05%)	1.95MiB
Initial CSS	0B	0B
Cache Invalidation	100%	100%
Chunks	1	1
Assets	1	1
Modules	1040(-0.29%)	1043
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	157	157
Duplicate Packages	4	4

Bundle size by type   1 change 1 regression

	Current #1990	Baseline #1985
JS	1.95MiB (+0.05%)	1.95MiB

---

Bundle analysis report Branch cam/fix-allow-custom-header-foot... Project dashboard

[github-actions]

Preview deployed to https://6a2a0538-a507-449a-b3fa-b7713bf4581c--scalar-deploy-preview.netlify.app

[amritk]

oooo we shouldn't calculate style in js. doesn't work on SSR. Can we use only css instead?

[cameronrohani]

They could technically overwrite the position with --scalar-y-offset if they had a custom header so could be fine?

[hanspagel]

Is that an alternative solution to #1775?

[marclave]

closed in favour of #2198