From b80a48ec8086459bac354cd9eb9f24323a80c61d Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sat, 21 Oct 2023 22:52:33 +0200 Subject: [PATCH] [Docs] Added custom style to the main doc page. Component lists are now displayed in a grid format, each accompained by an icon. --- docs/source/_static/scripts/custom.js | 48 ++++++++++++++++++ docs/source/_static/styles/custom.css | 71 +++++++++++++++++++++++++++ docs/source/conf.py | 9 +++- 3 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 docs/source/_static/scripts/custom.js create mode 100644 docs/source/_static/styles/custom.css diff --git a/docs/source/_static/scripts/custom.js b/docs/source/_static/scripts/custom.js new file mode 100644 index 000000000..f9c4d1716 --- /dev/null +++ b/docs/source/_static/scripts/custom.js @@ -0,0 +1,48 @@ +document.addEventListener("DOMContentLoaded", function() { + const processList = (list, level, addTitle) => { + const title = list.parentElement.querySelector('a') + list.classList.add('grid') + if (addTitle) + title.classList.add('grid-title') + + list.querySelectorAll(`li.toctree-l${level}`).forEach((item) => { + const link = item.querySelector('a') + if (link) { + item.style.cursor = 'pointer' + item.addEventListener('click', () => link.click()) + } + + const name = item.querySelector('a').innerText + const img = document.createElement('img') + img.src = `https://static.platypush.tech/icons/${name.toLowerCase()}-64.png` + img.alt = ' ' + item.prepend(img) + }) + } + + const tocWrappers = document.querySelectorAll('.toctree-wrapper.compound') + + if (!tocWrappers.length) { + return + } + + if (window.location.pathname.endsWith('/index.html')) { + if (tocWrappers.length < 2) { + return + } + + const referenceLists = [ + ...tocWrappers[1].querySelectorAll('ul li.toctree-l1 ul') + ].slice(0, 4) + + referenceLists.forEach((list) => processList(list, 2, true)) + } else if (window.location.pathname.endsWith('/plugins.html') || window.location.pathname.endsWith('/backends.html')) { + if (tocWrappers.length < 1) { + return + } + + const list = tocWrappers[0].querySelector('ul') + if (list) + processList(list, 1, false) + } +}) diff --git a/docs/source/_static/styles/custom.css b/docs/source/_static/styles/custom.css new file mode 100644 index 000000000..5ae180449 --- /dev/null +++ b/docs/source/_static/styles/custom.css @@ -0,0 +1,71 @@ +a, a:visited { + /* Don't change the color for visited links */ + color: var(--pst-color-link) !important; +} + +ul.grid { + display: grid; + + @media screen and (max-width: 500px) { + grid-template-columns: repeat(1, 1fr); + } + + @media screen and (min-width: 501px) and (max-width: 699px) { + grid-template-columns: repeat(2, 1fr); + } + + @media screen and (min-width: 700px) { + grid-template-columns: repeat(3, 1fr); + } +} + +a.grid-title { + width: 100%; + display: block; + margin: 1.5em 0; + font-size: 1.5em !important; + border-bottom: 1px solid #ccc; +} + +ul.grid li { + display: flex; + align-items: center; + margin: 0 10px 10px 0; + padding: 10px; + border: 1px solid #ccc; + border-radius: 15px; +} + +ul.grid img { + width: 32px; + margin-right: 5px; +} + +ul.grid li code { + width: 100%; +} + +ul.grid li code .pre { + width: 100%; + display: block; + white-space: pre-wrap; +} + +ul.grid li:hover { + background: linear-gradient(0deg, #e0ffe8, #e3ffff); +} + +ul.grid li a { + width: calc(100% - 35px); + display: flex; + justify-content: center; +} + +ul.grid li a code { + background: none; + border: none; +} + +ul.grid .icon { + width: 32px; +} diff --git a/docs/source/conf.py b/docs/source/conf.py index a13609503..d17417b3c 100644 --- a/docs/source/conf.py +++ b/docs/source/conf.py @@ -112,7 +112,14 @@ html_theme_options = { # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". -# html_static_path = ['_static'] +html_static_path = ['_static'] +html_css_files = [ + 'styles/custom.css', +] + +html_js_files = [ + 'scripts/custom.js', +] # Custom sidebar templates, must be a dictionary that maps document names # to template names.