Swizzling components doesn't work

[sradu]

Describe the problem

I can't figure out why this doesn't work and wondering if other people are running into this. I'm looking to swizzle CodeTabs so I can remove the icons and have it be text only.

After running:

npm run swizzle docusaurus-theme-openapi-docs ApiDemoPanel/CodeTabs

And choosing either Eject or Wrap I get the proper files in the theme/ folder but modifying them doesn't yield any changes. I tried running gen-api-docs all and everything is still the same.

Suggested fix

Would be great to document how to Swizzle with this plugin.

[sserrata]

Hi @sradu, I am still investigating but it should be possible to replace the icons with text using pure CSS (custom.css). Still, I think there should be a cleaner way to handle this.

[sserrata]

Here's an example of how to override using CSS:

.code__tab--bash {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.code__tab--bash::after {
  background: none !important;
  width: unset !important;
  height: unset !important;
  content: "BASH" !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--ifm-font-color-base);
}

.code__tab--python {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.code__tab--python::after {
  background: none !important;
  width: unset !important;
  height: unset !important;
  content: "Python" !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--ifm-font-color-base);
}

.code__tab--go {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.code__tab--go::after {
  background: none !important;
  width: unset !important;
  height: unset !important;
  content: "Go" !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--ifm-font-color-base);
}

.code__tab--nodejs {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.code__tab--nodejs::after {
  background: none !important;
  width: unset !important;
  height: unset !important;
  content: "NodeJS" !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--ifm-font-color-base);
}

.code__tab--csharp {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.code__tab--csharp::after {
  background: none !important;
  width: unset !important;
  height: unset !important;
  content: "C#" !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--ifm-font-color-base);
}

[sradu]

Thank's @sserrata, really appreciate you making this for me! Will give it a try, but would still be nice to be able to swizzle.

[sserrata]

#289

[sradu]

@sserrata any ETA on the PR that will allow us to swizzle? The docusaurus 2.2.0 changes broke some customizations I had and I have no idea how to make them work now.

For instance, I had this css:

main article .theme-doc-markdown:not(.theme-api-markdown) {
}

Which allowed me to avoid applying some CSS for the API reference. But now the structure has changed to what is below which is fine just that I don't want to keep on playing around with the CSS, if that makes sense.

<div class="theme-doc-markdown">
  <div class="theme-api-markdown"></div>
</div>

[selankon]

Hi,

Same for me, swizzling any component from either @docusaurus/theme-classic or docusaurus-theme-openapi-docs using eject or wrap, doesn't work.

I would like to add a reaction component at the end of the article, so pure CSS won't work for me.

[selankon]

Update:

Looking into, I tried to swizzle-eject some @docusaurus/theme-classic components until got a successfully ejected component when ejecting stuff from the DocPage/*.

But it fail when trying to eject or wrap components from the DocItem/* (from theme classic) or ApiItem/* (from docusaurus-theme-openapi-docs).

Also found that CSS classes used on "normal" page docs are the openapi theme classes and not the ones from the docusaurus theme-classic. For example, if I go to some docs that are not generated from the swagger, the main class before the central article is: docItemCol_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiItem-Layout-styles-module (note the ApiItem).

So I suspect that Swizzling the theme-classic components not work because it is using the openapi-theme components. But, why is not possible to swizzle openapi-theme components instead?

[sserrata]

Hi everyone, after some experimenting I believe I confirmed the root cause. We're using relative path imports throughout the OpenAPI theme which breaks after swizzling. The fix will require refactoring all theme components to import from @theme/ApiItem or @theme/ApiDemoPanel, respectively. Since we are a mostly typescript project this change will also require adding the necessary module declarations.

[sserrata]

Ok, swizzling support is now available for preview using canary release 0.0.0-518.

[selankon]

Hi, when this will be released on an stable version?

[selankon]

With 1.5.0 I can swizzle openapi docs components successfully but not the openapi DocItem ones. I'll open new issue