Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic Class Injection for Body Tag #35

Open
michaeltlombardi opened this issue Feb 11, 2022 · 1 comment
Open

Dynamic Class Injection for Body Tag #35

michaeltlombardi opened this issue Feb 11, 2022 · 1 comment
Assignees
Labels
enhancement New feature or request Epic

Comments

@michaeltlombardi
Copy link
Contributor

As a Platen site maintainer, I want to be able to override my base theme on a per-page or per-game basis so that the display for my site can match the current context for a site visitor.

For example, I want to be able to theme my pages for my scifi game and neolithic supers game differently.

@michaeltlombardi michaeltlombardi added the enhancement New feature or request label Feb 11, 2022
michaeltlombardi pushed a commit to binarystargames/hugo-platen that referenced this issue Feb 11, 2022
This commit modifies the `_default/baseof.html` template to inject
a CSS class into the `body` tag, enabling Platen site maintainers
to override the styling for any page(s) via this mechanism.

This is a patch on top of the `layouts/_default/baseof.html` file
from the usptream project (alex-shpak/hugo-book). If the upstream
file is updated, we will need to replace our copy of the template
with the newer version and then cherry-pick this commit on top.
michaeltlombardi pushed a commit to binarystargames/hugo-platen that referenced this issue Feb 11, 2022
This commit implements a helper shortcode, `getCssClass` to be used in
our patch on the `_default/baseof.html` template to retrieve the class
or classes which should be injected into the `body` of a page.

It defaults to returning an empty string.

In this implementation, If the page is a member of a top-level docs
section (`docs` by default, but can be configured to `games` or anything
else via the `Params.BookSection` parameter in the site config), such as
`content/docs/my_game/rules.md` or `content/games/my_game/rules.md`, then:

1. If the `_index.md` for that section does **not** define `cssClass` in
its frontmatter, then the default CSS class injected for that section is
the URL segment for that section; in this example, `my_game`.

2. If the `_index.md` for that section **does** define `cssClass` in its
frontmatter, then the CSS class injected for that section is the value
of that parameter. This can be used to inject multiple classes, each of
them separated by a single space.

In this current implementation, other top-level pages and sub-sections of
a given section may not override or append their own class injections.
michaeltlombardi pushed a commit to binarystargames/hugo-platen that referenced this issue Feb 11, 2022
This commit modifies the `_default/baseof.html` template to inject
a CSS class into the `body` tag, enabling Platen site maintainers
to override the styling for any page(s) via this mechanism.

This is a patch on top of the `layouts/_default/baseof.html` file
from the usptream project (alex-shpak/hugo-book). If the upstream
file is updated, we will need to replace our copy of the template
with the newer version and then cherry-pick this commit on top.
michaeltlombardi pushed a commit to binarystargames/hugo-platen that referenced this issue Feb 11, 2022
This commit implements a helper shortcode, `getCssClass` to be used in
our patch on the `_default/baseof.html` template to retrieve the class
or classes which should be injected into the `body` of a page.

It defaults to returning an empty string.

In this implementation, If the page is a member of a top-level docs
section (`docs` by default, but can be configured to `games` or anything
else via the `Params.BookSection` parameter in the site config), such as
`content/docs/my_game/rules.md` or `content/games/my_game/rules.md`, then:

1. If the `_index.md` for that section does **not** define `cssClass` in
its frontmatter, then the default CSS class injected for that section is
the URL segment for that section; in this example, `my_game`.

2. If the `_index.md` for that section **does** define `cssClass` in its
frontmatter, then the CSS class injected for that section is the value
of that parameter. This can be used to inject multiple classes, each of
them separated by a single space.

In this current implementation, other top-level pages and sub-sections of
a given section may not override or append their own class injections.
@michaeltlombardi
Copy link
Contributor Author

#32 implemented per-game CSS injection only. Converting this into an epic to track enhancement work related to this goal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request Epic
Projects
None yet
Development

No branches or pull requests

2 participants