support as Jupyterbook template

[jjmachan]

Firstly I got to say how much I love this theme. Hands down one of the best-looking themes in the eco-system and thank you for bringing this up :)

I was wondering if support for jupyterbook would be something on your roadmap. I tried installing it but there seems to be a few small issues with some style elements.

Would love to work with you on this one with your assistance too

[jjmachan]

this can be general support for jupyter notebooks too but I feel like jupyterbook has a few handy features

[kai687]

Thank you for your very kind words @jjmachan. I'm not familiar with jupyterbook, so I don't know what's required to make this theme work.

Currently, version 5 of this theme is in beta. I want to fix issues #1409 and #1360 before releasing version 5.

After that we can look into jupyterbook support.

I wish I could tell you when I'll be able to fix the 2 remaining issues and look into jupyterbook support, but I don't want to promise any timeline and then not deliver. Stay tuned is all I can say.

[jjmachan]

I spent some time exploring both today and it seems like little theme bugs are the main issue with Jupyterbook too. Jupyterbook is built on top of sphinx doc. Only a couple of theme settings are missing.

[kai687]

Thanks for exploring this. If you find any "little theme bugs", I'd be happy to fix them.

[jjmachan]

I was able to fix most of the theming issues with using Myst with this them (you can see it in action at docs.ragas.io.

I'm sharing the custom CSS file I used and was wondering if we can add it to the theme too, maybe even improve it a little too. I would be more than happy to help but I don't the enough CSS to contribute.

1409 might find this useful too

/* Base Theme */
div.cell_input {
    background: var(--background) !important;
}

.cell_output .output.text_plain,
.cell_output .output.stream {
  background: var(--background);
  border: 1px solid grey;
  border-radius: var(--mystnb-source-border-radius);
}

.cell_output .output.stderr {
  background: var(--background);
  border: 1px solid #fbc7c7;
  border-radius: var(--mystnb-source-border-radius);
}

.cell_output .output.traceback {
  background: var(--background);
  border: 1px solid #fbc7c7;
  border-radius: var(--mystnb-source-border-radius);
}

/* Pandas tables. Pulled from the Jupyter / nbsphinx CSS */
div.cell_output table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--foreground);
  font-size: 1em;
  table-layout: fixed;
}

div.cell_output thead {
  border-bottom: 1px solid black;
  vertical-align: bottom;
}

div.cell_output tr,
div.cell_output th,
div.cell_output td {
  text-align: right;
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}

div.cell_output th {
  font-weight: bold;
}

div.cell_output tbody tr:nth-child(odd) {
  background: var(--backgound);
}

div.cell_output tbody tr:hover {
  background: rgba(66, 165, 245, 0.2);
}