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

Add mdbook docs page #11849

Merged
merged 6 commits into from
Dec 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/user/intro/doctools.rst
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,21 @@ with more coming soon.
Written in
:bdg-info:`javascript`

.. grid-item-card:: mdBook
:link: mdbook.html

mdBook is a command line tool to create books with Markdown built in Rust.

Supported formats
:bdg-success:`md`
Written in
:bdg-info:`rust`

.. toctree::
:hidden:

/intro/mkdocs
/intro/sphinx
/intro/docusaurus
/intro/markdoc
/intro/mdbook
71 changes: 71 additions & 0 deletions docs/user/intro/mdbook.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
mdBook
======

.. meta::
:description lang=en: Learn how to host mdBook documentation on Read the Docs.

`mdBook`_ is a command line tool to create books with Markdown.

Minimal configuration is required to build an existing mdBook project on Read the Docs.

.. code-block:: yaml
:caption: .readthedocs.yaml

version: 2

build:
os: ubuntu-lts-latest
tools:
rust: latest
commands:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tried using build.jobs.build.html instead? I think we should be recommending as much as possible that approach.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't, but thought this was blocked on #11819

- cargo install mdbook
# For an example book..
# - mdbook init docs
- mdbook build docs --dest-dir $READTHEDOCS_OUTPUT/html

.. _mdBook: https://rust-lang.github.io/mdBook/

Getting started
---------------

- If you have an existing mdBook project you want to host on Read the Docs, check out our :doc:`/intro/add-project` guide.
- If you're new to mdBook, check out the official `Getting started with mdBook`_ guide.

.. _Getting started with mdBook: https://rust-lang.github.io/mdBook/guide/creating.html

Configuring mdBook and Read the Docs Addons
-------------------------------------------

Adjust the flyout menu font size
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Add a ``readthedocs.css`` to your build with the `additional-css <https://crisal.io/tmp/book-example/book/format/config.html#html-renderer-options>`_ flag,
so that the font in the :ref:`flyout-menu:Addons flyout menu` matches the theme better.

.. code-block:: css
:caption: readthedocs.css:

:root {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@humitos This worked nicely in my test: https://test-builds.readthedocs.io/en/mdbook/

But it seems like the s key is hosed when search is open, because they're hooking into that to trigger their own search. 🙃

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

I remember having a similar issue with Material for MkDocs. They ended up fixing the issue on their side by skipping handling the keydown if the focus was inside a text input.

The options I see here are:

  • Disable their own search
  • Disable their hotkeys

I'm not sure if that's possible, tho.

/* Increase the font size of the flyout menu */
--readthedocs-flyout-font-size: 1.3rem;

/* Increase the font size of the notifications */
--readthedocs-notification-font-size: 1.3rem;

}

Example repository and demo
---------------------------

Example repository
https://github.com/readthedocs/test-builds/tree/mdbook

Demo
https://test-builds.readthedocs.io/en/mdbook/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should add custom CSS files to make the flyout looks nice; it's pretty small now:

Screenshot_2024-12-12_10-53-36

See an example for MkDocs: https://docs.readthedocs.io/en/latest/intro/mkdocs.html#adjust-the-flyout-menu-font-size


Further reading
---------------

* `mdBook documentation`_

.. _mdBook documentation: https://rust-lang.github.io/mdBook/
3 changes: 2 additions & 1 deletion docs/user/intro/mkdocs.rst
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,8 @@ To integrate the :ref:`flyout-menu:Addons flyout menu` version menu into your si
Adjust the flyout menu font size
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Edit ``readthedocs.css`` to so that the font in the :ref:`flyout-menu:Addons flyout menu` matches the theme better.
Add a ``readthedocs.css`` to your build,
so that the font in the :ref:`flyout-menu:Addons flyout menu` matches the theme better.

.. code-block:: css
:caption: readthedocs.css:
Expand Down