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.

Sign up for GitHub

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

EthicalAd: specific placement for Antora and mdBook #475

Merged
merged 14 commits into from
Jan 14, 2025
Merged

EthicalAd: specific placement for Antora and mdBook #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
00f72e0
Add styles based on the documentation tool
humitos Dec 16, 2024
24d7869
Use a reactive property to add specific classes
humitos Dec 17, 2024
f3477b7
Use `tool=sphinx` `tool-theme=furo` to add CSS rules
humitos Dec 18, 2024
053d931
Remove unused code
humitos Dec 18, 2024
8c337ea
Update furo font size
humitos Dec 18, 2024
9d08961
Update MkDocs Material font size
humitos Dec 18, 2024
12057bf
Useful for Jupyter Book and others
humitos Dec 18, 2024
28bb43c
Style for Antora
humitos Dec 18, 2024
300dec5
EthicalAd: specific placement for Antora
humitos Dec 18, 2024
4a2c290
EthicalAd: specific placement for MdBook
humitos Dec 18, 2024
9dd5806
Merge branch 'main' of github.com:readthedocs/addons into humitos/eth…
humitos Jan 14, 2025
1d13c8d
Resolve merge conflicts
humitos Jan 14, 2025
8f8ff85
Add mdBook example to docs
humitos Jan 14, 2025
2fd11ad
Update style for header font-size
humitos Jan 14, 2025
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
1 change: 1 addition & 0 deletions docs/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ We maintain a list of examples to check our JavaScript client is working correct
* `Docusaurus <https://test-builds.readthedocs.io/en/docusaurus/>`_
* `Jekyll <https://test-builds.readthedocs.io/en/jekyll/>`_
* `Jupyter Book <https://test-builds.readthedocs.io/en/jupyter-book/>`_
* `mdBook <https://test-builds.readthedocs.io/en/mdbook/>`_
* `MkDocs <https://test-builds.readthedocs.io/en/mkdocs/>`_
* `MkDocs (Material theme) <https://test-builds.readthedocs.io/en/mkdocs-material/>`_
* `MkDocs (Terminal theme) <https://test-builds.readthedocs.io/en/mkdocs-terminal/>`_
Expand Down
9 changes: 9 additions & 0 deletions src/doctools.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,37 @@
* values.
**/
@layer defaults {
:root[data-readthedocs-tool="docusaurus"] {
--readthedocs-flyout-header-font-size: 0.9rem;
}

:root[data-readthedocs-tool="mkdocs-material"] {
--readthedocs-font-size: 0.58rem;
--readthedocs-flyout-header-font-size: 0.7rem;
--readthedocs-flyout-font-size: 0.58rem;
}

:root[data-readthedocs-tool="antora"] {
--readthedocs-font-size: 0.7rem;
--readthedocs-flyout-header-font-size: 0.8rem;
--readthedocs-flyout-font-size: 0.7rem;
}

:root[data-readthedocs-tool="mdbook"] {
--readthedocs-font-size: 1.3rem;
--readthedocs-flyout-header-font-size: 1.5rem;
--readthedocs-flyout-font-size: 1.3rem;
}

:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
--readthedocs-font-size: 0.725rem;
--readthedocs-flyout-header-font-size: 0.845rem;
--readthedocs-flyout-font-size: 0.725rem;
}

:root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
--readthedocs-font-size: 0.58rem;
--readthedocs-flyout-header-font-size: 0.7rem;
--readthedocs-flyout-font-size: 0.58rem;
}
}
22 changes: 22 additions & 0 deletions src/ethicalads.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,28 @@ export class EthicalAdsAddon extends AddonBase {
placement.classList.add("ethical-alabaster");
placement.classList.add("ethical-docsify");

placement.setAttribute("data-ea-type", "readthedocs-sidebar");
placement.setAttribute("data-ea-style", "image");
knownPlacementFound = true;
}
} else if (docTool.isAntora()) {
selector = "aside nav.nav-menu";
element = document.querySelector(selector);

if (this.elementAboveTheFold(element)) {
placement.classList.add("ethical-alabaster");
Copy link
Member

Choose a reason for hiding this comment

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

Should we rename this something more generic?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes. We should use something like ethical-light-theme; considering that we are using it for that use case. However, it's not a 1:1 match. We will need to keep -alabaster as well since there are some thing very specific to it, I think. I opened #477


placement.setAttribute("data-ea-type", "readthedocs-sidebar");
placement.setAttribute("data-ea-style", "image");
knownPlacementFound = true;
}
} else if (docTool.isMdBook()) {
selector = "nav#sidebar mdbook-sidebar-scrollbox";
element = document.querySelector(selector);

if (this.elementAboveTheFold(element)) {
placement.classList.add("ethical-alabaster");

placement.setAttribute("data-ea-type", "readthedocs-sidebar");
placement.setAttribute("data-ea-style", "image");
knownPlacementFound = true;
Expand Down