Update styles, add tailwind support, move basic functionalities into …

…theme (#3)

* add menu structuring

* add missing assets

* remove dependencies on tailwind preflight

* remove dependencies on tailwind preflight

* add starlite colors as css variables and tailwind color

* add makefile

* rebranding

.gitignore

@@ -8,3 +8,4 @@ __pycache__/
 .env
 .vscode
 .python-version
+/node_modules/

.pre-commit-config.yaml

@@ -38,3 +38,10 @@ repos:
       - id: pyright
         additional_dependencies:
           - sphinx
+  - repo: local
+    hooks:
+      - id: build-assets
+        name: build-assets
+        language: node
+        entry: tailwindcss -i litestar_sphinx_theme/style.css -o litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css -m
+        additional_dependencies: [tailwindcss]

Makefile

@@ -0,0 +1,6 @@
+install:
+	poetry install
+	npm install
+
+build-assets:
+	npx tailwindcss -i litestar_sphinx_theme/style.css -o litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css -m

starlite_sphinx_theme/__init__.py → litestar_sphinx_theme/__init__.py

@@ -26,10 +26,10 @@ def update_html_context(
 
     context["extra_navbar_items"] = theme_options.get("extra_navbar_items")
     context["use_page_nav"] = theme_options.get("use_page_nav", True)
-    context["github_repo_link"] = f"https://github.com/starlite-api/{theme_options['github_repo_name']}"
+    context["github_repo_link"] = f"https://github.com/litestar-org/{theme_options['github_repo_name']}"
     context["discord_link"] = theme_options.get("discord_link", "https://discord.gg/X3FJqy8d2j")
-    context["twitter_link"] = theme_options.get("twitter_link", "https://twitter.com/StarliteAPI/")
-    context["reddit_link"] = theme_options.get("reddit_link", "https://www.reddit.com/r/starlite")
+    context["twitter_link"] = theme_options.get("twitter_link", "https://twitter.com/LitestarAPI")
+    context["reddit_link"] = theme_options.get("reddit_link", "https://www.reddit.com/r/litestarapi")
 
 
 def update_global_config(app: Sphinx) -> None:
@@ -51,7 +51,7 @@ def update_global_config(app: Sphinx) -> None:
         [
             {
                 "name": "GitHub",
-                "url": f"https://github.com/starlite-api/{github_repo_name}",
+                "url": f"https://github.com/litestar-org/{github_repo_name}",
                 "icon": "fa-brands fa-github",
                 "type": "fontawesome",
             },
@@ -68,10 +68,11 @@ def update_global_config(app: Sphinx) -> None:
 def setup(app: Sphinx) -> dict[str, bool]:
     theme_path = Path(__file__).parent / "theme"
 
-    app.add_html_theme("starlite_sphinx_theme", str(theme_path))
+    app.add_html_theme("litestar_sphinx_theme", str(theme_path))
     app.connect("html-page-context", update_html_context)
     app.connect("builder-inited", update_global_config)
 
-    app.add_css_file("starlite-sphinx-theme.css", priority=1000)
+    app.add_css_file("litestar-sphinx-theme.css", priority=1000)
+    app.add_js_file("litestar-theme.js")
 
     return {"parallel_read_safe": True, "parallel_write_safe": True}

starlite_sphinx_theme/theme/static/starlite-sphinx-theme.css → litestar_sphinx_theme/style.css

@@ -1,3 +1,17 @@
+@tailwind components;
+@tailwind utilities;
+
+
+[aria-expanded="true"] .menu-state-indicator  {
+    transform: rotate(-180deg);
+}
+
+.menu-state-indicator {
+    transition: transform .2s ease;
+}
+
+
+
 table.docutils {
   clear: left;
   float: left;
@@ -7,21 +21,28 @@ table.docutils {
 /* theme customization */
 
 html[data-theme="dark"] {
-  --color-background-primary: #1d2433;
-  --color-background-secondary: #0c101a;
-  --pst-color-on-background: #2e374a;
+  --color-background-primary: #18181b;
+  --color-background-secondary: #27272a;
+  --pst-color-on-background: #27272a;
   --pst-color-border: #2f2f2f;
+  --pst-color-text-muted: #f3f4f6;
 }
 
 html[data-theme="light"] {
   --color-background-primary: #f8f9fb;
   --color-background-secondary: #fff;
+  --pst-color-text-muted: #111827;
 }
 
 html[data-theme="light"],
 html[data-theme="dark"] {
   --pst-color-background: var(--color-background-primary);
-  --pst-color-primary: #ffae57;
+  --litestar-gold: #EDB641;
+  --pst-color-primary: var(--litestar-gold);
+}
+
+h1, h2 {
+  color: unset;
 }
 
 @media (min-width: 960px) {
@@ -35,6 +56,10 @@ html[data-theme="dark"] {
   flex: 0 0 18%;
 }
 
+.bd-header .navbar-nav .nav-item {
+  font-weight: 600;
+}
+
 .bd-content,
 .bd-sidebar-secondary {
   background-color: var(--color-background-secondary);

litestar_sphinx_theme/theme/macros.html

@@ -0,0 +1,77 @@
+{% macro icon(icon_name) %}
+    {% include "icons/" + icon_name + ".svg" %}
+{% endmacro %}
+
+
+{% macro nav_link(target) -%}
+    {{ target if target.startswith('http') else pathto(target) }}
+{%- endmacro %}
+
+{% macro dropown_menu_item_link(link, title) %}
+    <a href="{{ nav_link(link) }}"
+       class="block font-semibold text-gray-900 dark:text-gray-200 hover:text-litestar-gold dark:hover:text-litestar-gold !no-underline select-none cursor-pointer">
+        {{ title }}
+        <span class="absolute inset-0"></span>
+    </a>
+{% endmacro %}
+
+{% macro dropdown_menu_item(title, item) %}
+    {% if item is string %}
+        <div class="group relative rounded-lg p-2 text-sm hover:bg-gray-50 dark:hover:bg-zinc-800">
+            {{ dropown_menu_item_link(item, title) }}
+        </div>
+    {% else %}
+        <div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50 dark:hover:bg-zinc-800">
+            <div class="
+            h-11 w-11 flex flex-none items-center justify-center
+            rounded-lg
+            bg-gray-50 group-hover:bg-white dark:bg-zinc-900 dark:group-hover:bg-zinc-700
+            text-gray-600 dark:text-gray-300 group-hover:text-litestar-gold">
+                {{ icon(item.icon) }}
+            </div>
+            <div class="flex-auto">
+                {{ dropown_menu_item_link(item.link, title) }}
+                <div class="mt-1 text-gray-600 dark:text-gray-300">{{ item.description }}</div>
+            </div>
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{% macro dropdown_menu(title, menu_item) %}
+    <div class="relative">
+        <span type="button"
+                class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 hover:!text-litestar-gold st-dropdown-toggle dropdown-closed select-none cursor-pointer"
+                data-dropdown-state="closed"
+                aria-expanded="false">
+            {{ title }}
+            <div class="menu-state-indicator">
+                {{ icon("chevron-down") }}
+            </div>
+        </span>
+
+        <div class="
+            absolute -left-8 top-full z-10 mt-3
+            w-max max-w-md
+            overflow-hidden rounded-3xl
+            bg-white shadow-lg dark:!bg-zinc-700 ring-1 ring-gray-900/5
+            hidden
+            st-dropdown-menu">
+            <div class="p-4">
+                {% for sub_title, sub_item in menu_item | items %}
+                    {{ dropdown_menu_item(title=sub_title, item=sub_item) }}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro menu(menu_items) %}
+    {% for title, item in menu_items | items %}
+        {% if item is string %}
+            <a href="{{ nav_link(item) }}"
+               class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 hover:!text-litestar-gold select-none cursor-pointer">{{ title }}</a>
+        {% else %}
+            {{ dropdown_menu(title=title, menu_item=item) }}
+        {% endif %}
+    {% endfor %}
+{% endmacro %}

litestar_sphinx_theme/theme/main_nav.html

@@ -0,0 +1,11 @@
+{% from "macros.html" import menu with context %}
+
+
+{% if use_page_nav %}
+    {% include "navbar-nav.html" %}
+{% endif %}
+{% if extra_navbar_items %}
+    <nav class="hidden lg:flex lg:gap-x-4">
+        {{ menu(extra_navbar_items) }}
+    </nav>
+{% endif %}

litestar_sphinx_theme/theme/static/litestar-theme.js

@@ -0,0 +1,49 @@
+function initDropdowns() {
+    const dropdownToggles = document.querySelectorAll(".st-dropdown-toggle")
+
+    const dropdowns = [...dropdownToggles].map(toggleEl => ({
+        toggleEl,
+        contentEL: toggleEl.parentElement.querySelector(".st-dropdown-menu")
+    }))
+
+    const close = (dropdown) => {
+        const {toggleEl, contentEL} = dropdown
+        toggleEl.setAttribute("aria-expanded", "false")
+        contentEL.classList.toggle("hidden", true)
+    }
+
+    const closeAll = () => dropdowns.forEach(close)
+
+    const open = (dropdown) => {
+        closeAll()
+        dropdown.toggleEl.setAttribute("aria-expanded", "true")
+        dropdown.contentEL.classList.toggle("hidden", false)
+        const boundaries = [dropdown.contentEL, ...dropdownToggles]
+        const clickOutsideListener = (event) => {
+            const target = event.target
+            if (!target) return
+
+            if (!boundaries.some(b => b.contains(target))) {
+                closeAll()
+                document.removeEventListener("click", clickOutsideListener)
+            }
+
+        }
+        document.addEventListener("click", clickOutsideListener)
+    }
+
+
+    dropdowns.forEach(dropdown => {
+        dropdown.toggleEl.addEventListener("click", () => {
+            if (dropdown.toggleEl.getAttribute("aria-expanded") === "true") {
+                close(dropdown)
+            } else {
+                open(dropdown)
+            }
+        })
+    })
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+    initDropdowns()
+})