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

Figure out how to support multiple tabs #25

Open
vsoch opened this issue Jul 18, 2020 · 4 comments
Open

Figure out how to support multiple tabs #25

vsoch opened this issue Jul 18, 2020 · 4 comments

Comments

@vsoch
Copy link
Owner

vsoch commented Jul 18, 2020

see https://yassir.dev/markdown-fenced-code-tabs/

@mycaule
Copy link
Contributor

mycaule commented May 6, 2022

_layout/defaults.html

<div class="md-container">
        {% include tabs.html %}
        <main class="md-main">

_includes/tabs.html as in https://square.github.io/okhttp/

<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
    <div class="md-tabs__inner md-grid">
      <ul class="md-tabs__list">
        <li class="md-tabs__item">
            <a href=".." class="md-tabs__link">
            Overview
            </a>
        </li>
        <li class="md-tabs__item">
            <a href="../features/calls/" class="md-tabs__link">
            Features
            </a>
        </li>
        <li class="md-tabs__item">
            <a href="../recipes/" class="md-tabs__link">
                Recipes
            </a>
        </li>
        <li class="md-tabs__item">
            <a href="../security/security/" class="md-tabs__link">
            Security
            </a>
        </li>
        <li class="md-tabs__item">
        <a href="./" class="md-tabs__link md-tabs__link--active">
            Works with OkHttp
        </a>
        </li>
        <li class="md-tabs__item">
            <a href="../4.x/okhttp/okhttp3/" class="md-tabs__link">
            API
            </a>
        </li>
        <li class="md-tabs__item">
            <a href="../changelogs/changelog/" class="md-tabs__link">
            Change Logs
            </a>
        </li>
        <li class="md-tabs__item">
            <a href="../contribute/contributing/" class="md-tabs__link">
            Contributing
            </a>
        </li>
      </ul>
    </div>
  </nav>

You already have the md-tabs properties in the main.css

@vsoch
Copy link
Owner Author

vsoch commented May 6, 2022

Thanks @mycaule ! Do you want to contribute a PR?

@mycaule
Copy link
Contributor

mycaule commented May 6, 2022

Not actually the same tabs as you initially wanted?

Fenced tabs

I was actually thinking of a horizontal menu with tabs, which actually corresponds to #19.

Screenshot 2022-05-06 at 22 58 08

I can try to do the pull request for the second one.

@vsoch
Copy link
Owner Author

vsoch commented May 6, 2022

Is the first one an example running in the site here? It's super pretty, that would be lovely to add!

But it looks like you are wanting the mkdocs material theme? Any reason not to use sphinx material for that (I've done it here) https://online-ml.github.io/viz/.

If you don't want to use that, my thinking is that we might create another variant of the theme here that uses that particular material theme. It's a bunch of work to jekyllize it once, but I've found it's very useful. So to summarize:

  • I like both of the examples above if you'd like to contribute something here
  • Perhaps we should discuss making another theme (I could find time to do it over the weekend or soonish, etc.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants