Allow CSS to target layout of a single page (for docs, blog, pages) #7592

armano2 · 2022-06-10T00:12:13Z

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

Description

I went trough documentation and i'm unable to find an option to disable stickiness of navbar for specific page/s

this refers to class .navbar--fixed-top

as an example of page that i'd like to disable stickiness is a typescript-eslint playground

i'm not sure if this is a documentation request or feature request

Self-service

I'd be willing to address this documentation request myself.

The text was updated successfully, but these errors were encountered:

Josh-Cena · 2022-06-10T01:19:47Z

Let's say it's a feature request. What you want is for some CSS to only apply to one page—this should be achievable if we have a class name that's unique for every route. #6933 already did some work on this, but not enough: the class name is still not granular enough.

slorber · 2022-06-15T13:10:51Z

Couldn't this work?

https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website/src/pages/play.tsx

function Play(): JSX.Element {
  return (
    <HtmlClassNameProvider className="my-custom-playground-className">
      <Layout title="Playground" description="Playground" noFooter={true}>
        <BrowserOnly fallback={<Loader />}>
          {(): JSX.Element => {
            const Playground = lazy(() => import("../components/Playground"));
            return (
              <Suspense fallback={<Loader />}>
                <Playground />
              </Suspense>
            );
          }}
        </BrowserOnly>
      </Layout>
    </HtmlClassNameProvider>
  );
}

This API is not officially documented for now, hopefully we may remove it in the future.

Its only role is to allow composition on avoid Helmet <Head> component for <html className="xyz">. (ie a children HTML className does not override parent ones)

export function HtmlClassNameProvider({
  className: classNameProp,
  children
}: {
  className: string,
  children: ReactNode
}): JSX.Element {
  const classNameContext = React.useContext(HtmlClassNameContext);
  const className = clsx(classNameContext, classNameProp);
  return (
    <HtmlClassNameContext.Provider value={className}>
      <Head>
        <html className={className} />
      </Head>
      {children}
    </HtmlClassNameContext.Provider>
  );
}

If you don't need composition on the playground page, you could as well just use this, which is already part of our public API:

<Head>
  <html className={className} />
</Head>

armano2 · 2022-06-16T11:06:37Z

@slorber yes your solution is working, but at the end i decided to do it differently, by changing how tooltips are rendered in playground

slorber · 2022-06-16T11:13:41Z

👍

So I'll close this issue for now

Josh-Cena · 2022-06-16T11:16:59Z

This is a good solution for React pages, but not for Markdown pages where you don't have access to the wrapping component. In the long term I think we should have a route-specific class name for each page.

slorber · 2022-06-16T11:26:17Z

This is a good solution for React pages, but not for Markdown pages where you don't have access to the wrapping component. In the long term I think we should have a route-specific class name for each page.

We have doc id/version for each md doc.

And it looks like frontmatter wrapperClassName is wired to HTML className already for md pages. (which looks suspicious because the same prop name is applied to different dom tree levels for docs/pages...)

I think only blog posts do not easily allow to be targeted with granularity.

Josh-Cena · 2022-06-16T11:27:27Z

Ah yes, forgot about that. Correct, only blog posts can't be differentiated

slorber · 2022-06-16T11:31:53Z

I think we can re-open and do this:

md page frontMatter.wrapperClassName => apply to Layout wrapperClassName (instead of html, for consistency with DocPage)
md page frontMatter.htmlClassName (new)
blog => find a way to generate a unique html className per post

There are other cases (like category index...), but I doubt they would be as useful as docs/blog/pages

Michaelsulistio · 2023-04-21T05:33:08Z

@slorber Hi Slorber, I'm running into this exact issue, where I want a way to target styling to a specific doc file.

I see above, you talk about md.page frontMatter.wrapperClassName or htmlClassName. If I understand correctly, with these, I'd be able to globally target the provided wrapperClassName and htmlClassName and custom style a Markdown page.

Have these been added yet?

slorber · 2023-04-21T10:12:16Z

@Michaelsulistio yes, give it a try and see what elements in the DOM permits you to target that specific page.

where I want a way to target styling to a specific doc file.

If it's a doc page (ie of the docs plugin) we already add many metadata at the top to help you target it individually

For example, this page: https://docusaurus.io/docs/configuration has the following html classname:

<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-2.4.0 docs-doc-page docs-doc-id-configuration">

This should be largely enough to target it.

If you want more help, please provide a concrete example in a repro with the page you want to target and I can tell you how to do so.

This issue remain open because there are still some things that you can't target easily (like blog posts). See #7592 (comment))

But most of it has been implemented already, and you should be able to achieve what you want here.

nektro · 2023-09-18T05:43:42Z

does the @docusaurus/Head method work if the goal is to include a separate processed /src/css/custom2.css only on a specific /src/pages/foo.mdx page?

slorber · 2023-09-18T17:38:54Z

does the @docusaurus/Head method work if the goal is to include a separate processed /src/css/custom2.css only on a specific /src/pages/foo.mdx page?

<Head> works the way it's documented (https://github.com/staylor/react-helmet-async) anywhere JSX works, including MDX (which is compiled to JSX in the end). "works" is ambiguous so if you read the doc and it doesn't work as documented, you should open an issue to the package repo directly.

armano2 added documentation The issue is related to the documentation of Docusaurus status: needs triage This issue has not been triaged by maintainers labels Jun 10, 2022

Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Jun 10, 2022

Josh-Cena added feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. and removed documentation The issue is related to the documentation of Docusaurus labels Jun 10, 2022

Josh-Cena changed the title ~~Navbar, and ability to turn off stickiness for single page~~ Allow CSS to target layout of a certain page Jun 10, 2022

armano2 mentioned this issue Jun 16, 2022

docs(website): [playground] show tooltips bellow hovered code typescript-eslint/typescript-eslint#5198

Merged

3 tasks

slorber closed this as completed Jun 16, 2022

Josh-Cena closed this as not planned Won't fix, can't repro, duplicate, stale Jun 16, 2022

Josh-Cena added the closed: wontfix A fix will bring significant overhead, or is out of scope (for feature requests) label Jun 16, 2022

slorber reopened this Jun 16, 2022

slorber changed the title ~~Allow CSS to target layout of a certain page~~ Allow CSS to target layout of a single page (for docs, blog, pages) Jun 16, 2022

Josh-Cena removed the closed: wontfix A fix will bring significant overhead, or is out of scope (for feature requests) label Jun 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow CSS to target layout of a single page (for docs, blog, pages) #7592

Allow CSS to target layout of a single page (for docs, blog, pages) #7592

armano2 commented Jun 10, 2022 •

edited

Loading

Josh-Cena commented Jun 10, 2022

slorber commented Jun 15, 2022 •

edited

Loading

armano2 commented Jun 16, 2022 •

edited

Loading

slorber commented Jun 16, 2022

Josh-Cena commented Jun 16, 2022

slorber commented Jun 16, 2022 •

edited

Loading

Josh-Cena commented Jun 16, 2022

slorber commented Jun 16, 2022

Michaelsulistio commented Apr 21, 2023

slorber commented Apr 21, 2023

nektro commented Sep 18, 2023

slorber commented Sep 18, 2023

Allow CSS to target layout of a single page (for docs, blog, pages) #7592

Allow CSS to target layout of a single page (for docs, blog, pages) #7592

Comments

armano2 commented Jun 10, 2022 • edited Loading

Have you read the Contributing Guidelines on issues?

Description

Self-service

Josh-Cena commented Jun 10, 2022

slorber commented Jun 15, 2022 • edited Loading

armano2 commented Jun 16, 2022 • edited Loading

slorber commented Jun 16, 2022

Josh-Cena commented Jun 16, 2022

slorber commented Jun 16, 2022 • edited Loading

Josh-Cena commented Jun 16, 2022

slorber commented Jun 16, 2022

Michaelsulistio commented Apr 21, 2023

slorber commented Apr 21, 2023

nektro commented Sep 18, 2023

slorber commented Sep 18, 2023

armano2 commented Jun 10, 2022 •

edited

Loading

slorber commented Jun 15, 2022 •

edited

Loading

armano2 commented Jun 16, 2022 •

edited

Loading

slorber commented Jun 16, 2022 •

edited

Loading