More image updates

Author: choldgraf

docs/_data/config-header.yml

@@ -1,6 +1,6 @@
 brand:
-  type: image
-  src: https://executablebooks.org/en/latest/_static/logo.svg
+  type: link
+  image: https://executablebooks.org/en/latest/_static/logo.svg
   url: https://sphinx-book-theme.readthedocs.io
 start:
   - type: dropdown
@@ -23,8 +23,10 @@ start:
     - content: Feature Voting
       url: https://executablebooks.org/en/latest/feature-vote.html
 
-  - type: button
+  - type: link
     content: Book gallery
+    external: true
+    newwindow: true
     url: http://gallery.jupyterbook.org/
 
 

docs/customize/header.md

@@ -67,9 +67,9 @@ html_theme_options = {
   "header": {
     "brand": {
       # Specifies that the brand area will use an image logo
-      "type": "image",
+      "type": "link",
       # Source of the image to be used
-      "src": "https://executablebooks.org/en/latest/_static/logo.svg",
+      "image": "https://executablebooks.org/en/latest/_static/logo.svg",
       # Link for the image
       "url": "https://sphinx-book-theme.readthedocs.io",
     },

src/sphinx_book_theme/_components.py

@@ -14,20 +14,115 @@
 
 
 # Add functions to render header components
-def component_text(app, context, content="", url="", classes=[]):
-    classes = " ".join(classes)
-    html = f"<span class='component-text {classes}'>{content}</span>"
-    if url:
-        html = f'<a href="{url}" class="link-primary">{html}</a>'
+def component_link(
+    app,
+    context,
+    content="",
+    icon="",
+    image="",
+    doc="",
+    url="",
+    newwindow=False,
+    external=False,
+    classes=[],
+):
+    kwargs = {"class": classes.copy()}
+    if external is True:
+        kwargs["target"] = "_blank"
+    if newwindow is True:
+        classes.append("external-link")
+
+    html = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        image=image,
+        classes=classes,
+        url=url,
+        kwargs=kwargs,
+    )
+    return html
+
+
+def component_dropdown(
+    app, context, content="", icon="", side="left", items=[], **kwargs
+):
+    # Items to go inside dropdown
+    dropdown_items = []
+    for component in items:
+        # Pop the `button` type in case it was incorrectly given, since we force button
+        if "type" in component:
+            component.pop("type")
+        dropdown_items.append(
+            component_button(
+                app,
+                context,
+                **component,
+            )
+        )
+    dropdown_items = "\n".join(dropdown_items)
+
+    # These control the look of the button
+    button_classes = []
+    if content:
+        button_classes.append("dropdown-toggle")
+
+    # Unique ID to trigger the show event
+    dropdown_id = "menu-dropdown-"
+    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
+
+    # Generate the button HTML
+    dropdown_kwargs = {
+        "data-toggle": "dropdown",
+        "aria-haspopup": "true",
+        "aria-expanded": "false",
+        "type": "button",
+    }
+    html_button = component_button(
+        app,
+        context,
+        content=content,
+        icon=icon,
+        kwargs=dropdown_kwargs,
+        classes=button_classes,
+        button_id=dropdown_id,
+        **kwargs,
+    )
+
+    dropdown_classes = ["dropdown-menu"]
+    if side == "right":
+        dropdown_classes.append("dropdown-menu-right")
+    dropdown_classes = " ".join(dropdown_classes)
+
+    html_dropdown = f"""
+    <div class="dropdown">
+        {html_button}
+        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
+            {dropdown_items}
+        </div>
+    </div>
+    """  # noqa
+    return html_dropdown
+
+
+def component_html(app, context, html=""):
     return html
 
 
+def component_icon_links(app, context, icons, classes=[]):
+    context = {"theme_icon_links": icons}
+    # Add the pydata theme icon-links macro as a function we can re-use
+    return app.builder.templates.render("icon-links.html", context)
+
+
 def component_button(
     app,
     context,
     content="",
     title="",
     icon="",
+    image="",
     url="",
     onclick="",
     button_id="",
@@ -39,13 +134,13 @@ def component_button(
 ):
     kwargs = kwargs.copy()
     kwargs.update({"type": "button", "class": ["btn", "icon-button"]})
-    kwargs["class"].extend(classes)
+    kwargs["class"].extend(classes.copy())
     btn_content = ""
     if url and onclick:
         raise Exception("Button component cannot have both url and onclick specified.")
 
-    if not (icon or content):
-        raise Exception("Button must have either icon or content specified.")
+    if not (icon or content or image):
+        raise Exception("Button must have either icon, content, or image specified.")
 
     if onclick:
         kwargs["onclick"] = onclick
@@ -62,6 +157,13 @@ def component_button(
             icon = f'<img src="{icon}">'
         btn_content += f'<span class="btn__icon-container">{icon}</span>'
 
+    if image:
+        if not image.startswith("http"):
+            image = context["pathto"](image, 1)
+        btn_content += f"""
+        <span class="btn__image-container"><img src="{image}" /></span>
+        """
+
     if not content:
         kwargs["class"].append("icon-button-no-content")
     else:
@@ -116,93 +218,10 @@ def component_button(
     return html
 
 
-def component_dropdown(
-    app, context, content="", icon="", side="left", items=[], **kwargs
-):
-    # Items to go inside dropdown
-    dropdown_items = []
-    for component in items:
-        # Pop the `button` type in case it was incorrectly given, since we force button
-        if "type" in component:
-            component.pop("type")
-        dropdown_items.append(
-            component_button(
-                app,
-                context,
-                **component,
-            )
-        )
-    dropdown_items = "\n".join(dropdown_items)
-
-    # These control the look of the button
-    button_classes = []
-    if content:
-        button_classes.append("dropdown-toggle")
-
-    # Unique ID to trigger the show event
-    dropdown_id = "menu-dropdown-"
-    dropdown_id += hashlib.md5(dropdown_items.encode("utf-8")).hexdigest()[:5]
-
-    # Generate the button HTML
-    dropdown_kwargs = {
-        "data-toggle": "dropdown",
-        "aria-haspopup": "true",
-        "aria-expanded": "false",
-        "type": "button",
-    }
-    html_button = component_button(
-        app,
-        context,
-        content=content,
-        icon=icon,
-        kwargs=dropdown_kwargs,
-        classes=button_classes,
-        button_id=dropdown_id,
-        **kwargs,
-    )
-
-    dropdown_classes = ["dropdown-menu"]
-    if side == "right":
-        dropdown_classes.append("dropdown-menu-right")
-    dropdown_classes = " ".join(dropdown_classes)
-
-    html_dropdown = f"""
-    <div class="dropdown">
-        {html_button}
-        <div class="{dropdown_classes}" aria-labelledby="{dropdown_id}">
-            {dropdown_items}
-        </div>
-    </div>
-    """  # noqa
-    return html_dropdown
-
-
-def component_image(app, context, src="", url="", classes=[]):
-    if not src.startswith("http"):
-        src = context["pathto"](src, 1)
-    html = f"""
-    <img src={src}>
-    """
-    if url:
-        html = f"<a href={url}>{html}</a>"
-    return html
-
-
-def component_html(app, context, html=""):
-    return html
-
-
-def component_icon_links(app, context, icons, classes=[]):
-    context = {"theme_icon_links": icons}
-    # Add the pydata theme icon-links macro as a function we can re-use
-    return app.builder.templates.render("icon-links.html", context)
-
-
 COMPONENT_FUNCS = {
-    "text": component_text,
+    "link": component_link,
     "button": component_button,
-    "html": component_html,
-    "image": component_image,
     "icon-links": component_icon_links,
     "dropdown": component_dropdown,
+    "html": component_html,
 }