-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
Make all front matter used by the theme accept desktop
and mobile
#5805
Comments
hi @Josh-Cena i would like to work on this issue. Please assign this to me. |
Sorry, this is already taken by @cerkiewny, I should have marked that😅 |
@namangirdhar16 In case you are looking for something to contribute, would you want to take a look at this? #5749 You can re-design the |
As explained in #5854 (comment), I'd rather not introduce this to ALL frontmatter, but only if there's a strong use-case. Supporting this config adds complexity to avoid layout shifts
If we want a TOC to have different heading levels for mobile/desktop without hydration layout shifts, this means rendering it twice and adding a mediaquery to each TOC so that only one is displayed at the same time. This increases the HTML file size and code complexity for a questionable feature that I feel we don't really need. If the user is using a simple So I'd rather collect first strong use-cases for doing something differently on mobile/desktop, and implement each use-case separately |
Makes sense yeah, let's do it for |
Agree for these 2 configs. Note that the TOC is a special case, and a good API might be more complex to support all use-cases:
Oh actually I'm a bit wrong above and the TOC is rendered differently on mobile/desktop, so technically it's quite similar to the sidebar case and we could adjust the TOC heading levels config according to the right TOC vs inline TOC, and it shouldn't introduce layout shifts because we already handled those mediaqueries |
The comments on this issue are stale from last Hacktoberfest? Is the issue still relevant and claimed @slorber? I just found this repo from a dev.to article, so I'll head over to your discord to see some help getting started if not here on this issue then another one. |
@sidharthk9 I don't think we support this kind of front matter yet, which this issue is about: ---
hide_table_of_contents:
mobile: true
desktop: false
--- @Josh-Cena curious: who came up with the need for this? Is this a "cool feature we could have" or something someone really came up with a use-case for? I think we could close this until someone has a concrete use-case for it. |
Frankly I don't remember at this point... Pretty sure someone asked on Discord so I opened this issue. However, because TOC & sidebar are not rendered on mobile on startup, I don't think their customizations would lead to FOUC or the like. |
will close this for now and we'll see if the need comes again |
🚀 Feature
Front matter should accept both a simple option:
Or an object:
Have you read the Contributing Guidelines on issues?
Yes
Has this been requested on Canny?
No
Motivation
Extracted from #5686.
API Design
Front matter has two uses: they are either picked up by the plugin as metadata, or by the theme to render certain elements, but usually not both. A non-exhaustive list:
sidebar_class_name
hide_title
hide_table_of_contents
hide_sidebar
(not implemented yet)hide_pagination
(not implemented yet, I think this can be useful to add? Hiding pagination at theme level instead ofpagination_next: null
, which disables pagination at plugin level)toc_min_heading_level
toc_max_heading_level
This permits us to render different layouts on different screen sizes, while not altering any UX (e.g. we don't allow displaying different sidebars because that's passed on by the plugin, neither do we allow setting a different group of authors).
In addition, different theme implementations can even use other key names, like
tablet
,1440
,997
, etc. So during validation, we should allow any string keys.The text was updated successfully, but these errors were encountered: