Use of tabpanes that obviates the need for Prettier/linter-ignore directives

[chalin]

• Waiting on Tabpane: improve key-kind default setting google/docsy#1643 -- without which the changed tabbed panes don't get persisted.
• Contributes to Find a better way to use tabpane shortcodes #3127
• This proof-of-concept (POC) PR illustrates a proposal to simplify how we make use of tabpane shortcodes. The goal is to:
  • Eliminate the need for checker and linter directives like
    <!-- markdownlint-disable -->,
    <!-- prettier-ignore-start -->, etc.
  • Improve IDE and other tooling support: most tabbed panes in the docs contain code. Part of the problem with the current encoding is that the tools don't know that the content of a tab is code. The proposal illustrated here is to use code-block fences. I feel that the gains outweigh the extra code-fence lines that we need to write.
• Updates docsy theme again.

WDYT @svrnm @cartermp et al.? If y'all agree, I'll make a pass over the docs to make this change uniformly.

If you compare the before and after, the tabbed panes changed in this PR look exactly the same:

• Preview: https://deploy-preview-3126--opentelemetry.netlify.app/docs/collector/getting-started/#docker
• Before: https://deploy-preview-2965--opentelemetry.netlify.app/docs/collector/getting-started/#docker

[cartermp]

I like it.

[svrnm]

I like this very much, not only does it improve the experience within IDEs and for our workflows, but I think it also separates 2 concerns that shouldn't be mixed (tabbing + code).

👍

[svrnm]

One more thing, I think this might be solving: I am currently going over the Java manual instrumentation and I want to create a tabbing for Maven & Gradle setup, right now I don't know how to set titles for tabs that are different from the language used if each tab has their own language (here XML and kotlin).

So, this should be fixed here, right?

[chalin]

@svrnm - you can see an example of how to do that already in the JS docs, e.g.:

{{< tabpane lang=shell >}}

{{< tab TypeScript >}}
npm install typescript \
  ts-node \
  @types/node \
  express \
  @types/express
{{< /tab >}}

{{< tab JavaScript >}}
npm install express
{{< /tab >}}

{{< /tabpane >}}

In the case you mention, you'll want to set persist=header for the tabpane.

[svrnm]

@chalin the example uses the same language across both tabs (shell), but what I need is different titles per tab (Maven, Gradle) and different languages per tab (XML, Kotlin), which I don't see as a capability right now.

[dyladan]

what does this mean?

[chalin]

It means that I'll be upstreaming that change to the Docsy repo after google/docsy#1641 gets merged.

[chalin]

@svrnm @cartermp - this is ready for review. I'd suggest we merge, and I'll continue working on top of these changes in followup PRs.