New license banner and search style

docs/source/examples/alerts.rst

@@ -0,0 +1,24 @@
+Alert
+=====
+
+A custom admonition to highlight important updates or announcements. It includes an icon, a short description, and an optional link that can direct users to additional information or external resources.
+
+Using:
+
+.. code-block:: rst
+
+   .. alert::
+      :link: https://scylladb.com
+      :link_text: Learn more about the change
+      :icon: logs
+
+      We’re updating our license & versioning policy.
+
+Renders as:
+
+.. alert::
+   :link: https://scylladb.com
+   :link_text: Learn more about the change
+   :icon: logs
+
+   We’re updating our license & versioning policy.

docs/source/examples/index.rst

@@ -14,6 +14,7 @@ In general, there are main components to the markup of any document:
    :hidden:
 
    admonitions
+   alerts
    collapse
    code-blocks
    diagrams
@@ -43,6 +44,7 @@ In general, there are main components to the markup of any document:
   :class: my-panel
 
   * :doc:`Admonitions <admonitions>`
+  * :doc:`Alerts <alerts>`
   * :doc:`Collapse <collapse>`
   * :doc:`Code blocks <code-blocks>`
   * :doc:`Diagrams <diagrams>`

docs/source/index.rst

@@ -26,6 +26,16 @@
 
   <div class="topics-grid grid-container full">
 
+.. alert::
+  :link: https://www.scylladb.com/2024/12/18/why-were-moving-to-a-source-available-license/
+  :target: _blank
+  :link_text: Learn more about the change
+  :icon: logs
+
+   We’re updating our license & versioning policy
+
+.. raw:: html
+
   <div class="grid-x grid-margin-x">
 
 .. topic-box::

sphinx_scylladb_theme/__init__.py

@@ -9,6 +9,7 @@
 
 from sphinx_scylladb_theme._version import version
 from sphinx_scylladb_theme.extensions import (
+    alerts,
     hero_box,
     include_tooltip,
     labels,
@@ -51,6 +52,7 @@ def update_context(app, pagename, templatename, context, doctree):
     context["hide_pre_content"] = "hide-pre-content" in file_meta
     context["hide_post_content"] = "hide-post-content" in file_meta
     context["hide_version_warning"] = "hide-version-warning" in file_meta
+    context["hide_alert"] = "hide-alert" in file_meta
     context["hide_sidebar"] = "hide-sidebar" in file_meta
     context["hide_secondary_sidebar"] = "hide-secondary-sidebar" in file_meta
     context["exclude_doctools"] = "exclude-doctools" in file_meta
@@ -110,6 +112,7 @@ def setup(app):
     tabs.setup(app)
 
     """Setup custom extensions"""
+    alerts.setup(app)
     hero_box.setup(app)
     include_tooltip.setup(app)
     labels.setup(app)

sphinx_scylladb_theme/alert.html

@@ -0,0 +1,4 @@
+<div class="alert">
+    <div><i class="icon-logs"></i>We’re updating our license & versioning policy</div>
+    <div><a href="https://www.scylladb.com/2024/12/18/why-were-moving-to-a-source-available-license/" target="_blank">Learn more about the change <i class="icon-arrow-right"></i></a></div>
+</div>

sphinx_scylladb_theme/extensions/alerts.py

@@ -0,0 +1,59 @@
+"""
+Sphinx directive for HTML Alert Components with target option.
+"""
+
+from docutils import nodes
+from docutils.parsers.rst import Directive, directives
+
+from .utils import generate_template
+
+
+class Alert(Directive):
+    has_content = True
+    option_spec = {
+        "link": directives.unchanged_required,
+        "link_text": directives.unchanged_required,
+        "icon": directives.unchanged,
+        "target": directives.unchanged,
+    }
+
+    def run(self):
+        class_name = "alert"
+        icon_class = self.options.get("icon", "logs")
+        link = self.options.get("link", "")
+        link_text = self.options.get("link_text", "")
+        target = self.options.get("target", "_self")
+
+        if target == "_blank":
+            target_attr = 'target="_blank"'
+        else:
+            target_attr = ''
+
+        html0 = generate_template(
+            """
+            <div class="{class_name}">
+                <div><i class="icon-{icon_class}"></i> {content}</div>
+                <div><a href="{link}" {target_attr}>{link_text} <i class="icon-arrow-right"></i></a></div>
+            </div>
+            """,
+            class_name=class_name,
+            icon_class=icon_class,
+            link=link,
+            link_text=link_text,
+            target_attr=target_attr,
+            content=self.content[0] if self.content else "",
+        )
+
+        alert_node = nodes.raw(text=html0, format="html")
+
+        return [alert_node]
+
+
+def setup(app):
+    app.add_directive("alert", Alert)
+
+    return {
+        "version": "0.1",
+        "parallel_read_safe": True,
+        "parallel_write_safe": True,
+    }

sphinx_scylladb_theme/layout.html

@@ -91,6 +91,12 @@
         <section
             class="layout {{'layout--full-width' if full_width}} {{'layout--sidebar' if not hide_sidebar}} {{'layout--has-secondary-sidebar' if not hide_secondary_sidebar}} {{'landing landing--floating' if landing}}">
             <div class="content large-order-2">
+                {% if not hide_alert %}
+                    {% if 'opensource' in html_baseurl or 'enterprise' in html_baseurl %}
+                    {% include 'alert.html'%}
+                    {% endif %}
+                {% endif %}
+
                 {% if not hide_version_warning %}
                     {% include 'version-warning.html'%}
                 {% endif %}

src/css/base/_variables.scss

@@ -1,5 +1,14 @@
 @use "sass:map";
 
+@mixin hex-to-rgb($hex, $property-name) {
+  $r: red($hex);
+  $g: green($hex);
+  $b: blue($hex);
+
+  // Set CSS custom property for the RGB value
+  #{$property-name}: #{$r}, #{$g}, #{$b};
+}
+
 $white: #FFFFFF;
 $gray-50: #F7FCFC;
 $gray-100: #EDF5F7;
@@ -13,20 +22,18 @@ $gray-800: #4B546F;
 $gray-900: #383D57;
 $gray-950: #2F324B;
 $black: #23263B;
-
 $brand-teal: #57D1E5;
 $brand-blue: #326DE6;
 
 
 
 $primary: #42C4E6;
 $secondary: #3A2D55;
-$success: #43A047;
+$success: #77D464;
 $warning: #FFAB00;
 $info: #1976D2;
 $danger: #CE291F;
 
-
 $link-color: #3C4FE0;
 $text-muted: $gray-500;
 $text-color: $black;
@@ -37,6 +44,7 @@ $well-bg: #F7F8F9;
 $navigation-bg: #F6F8FF;
 $card-bg: $white;
 $admonition: #6F7071;
+$alert-color: $gray-100;
 
 // Sizes Variables
 $spacer-0: 0;
@@ -137,6 +145,7 @@ $product-title-height: $spacer-md;
     --black: #{$black};
 
     --primary: #{$primary};
+      @include hex-to-rgb($primary, --primary-rgb);
     --secondary: #{$secondary};
     --success: #{$success};
     --info: #{$info};
@@ -151,6 +160,7 @@ $product-title-height: $spacer-md;
     --text-muted: #{$text-muted};
     --border-color: #{$border-color};
     --header-border: #{$header-border};
+    --alert-color: #{$alert-color};
 
     --bg-color: #{$bg-color};
     --well-bg: #{$well-bg};
@@ -193,6 +203,8 @@ $product-title-height: $spacer-md;
     --text-muted: var(--gray-400);
     --border-color: var(--gray-800);
     --header-border: #4458A3;
+    --alert-color: #{$alert-color};
+
     --bg-color: var(--black);
     --well-bg: #1E2031;
     --navigation-bg: #1E2031;

src/css/components/_admonitions.scss

@@ -98,3 +98,25 @@
     }
   }
 }
+
+.alert {
+  padding: $spacer-xs $spacer-sm;
+  background-color: var(--info);
+  color: var(--alert-color);
+  border-radius: $border-radius;
+  margin-bottom: $spacer;
+  display: flex;
+  gap: $spacer-xs;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @media screen and (min-width: $large) {
+    padding: $spacer-sm $spacer;
+    gap: $spacer-sm;
+  }
+
+  a {
+    color: var(--primary);
+  }
+}

src/css/components/_search-box.scss

@@ -13,7 +13,9 @@
 
   &--hero {
     background-color: var(--well-bg);
-    padding: 12px 14px;
+    padding: $spacer-xs $spacer-sm;
+    border: 1px solid var(--primary);
+    box-shadow: 0 $spacer-3xs $spacer-sm rgba(var(--primary-rgb), 0.4);
   }
 
   &:before {

tests/extensions/test_alerts.py

@@ -0,0 +1,54 @@
+from unittest.mock import Mock
+import pytest
+from bs4 import BeautifulSoup as bs
+
+from sphinx_scylladb_theme.extensions.alerts import Alert
+
+test_data = [
+    [
+        [],
+        {"link": "https://scylladb.com", "link_text": "Learn more", "icon": "logs", "target": "_blank"},
+        ["We’re updating our license & versioning policy."],
+        """
+        <div class="alert">
+            <div><i class="icon-logs"></i> We’re updating our license & versioning policy.</div>
+            <div><a href="https://scylladb.com" target="_blank">Learn more <i class="icon-arrow-right"></i></a></div>
+        </div>
+        """,
+    ],
+    [
+        [],
+        {"link": "https://scylladb.com", "link_text": "Learn more about the change", "icon": "logs"},
+        ["We’re updating our license & versioning policy."],
+        """
+        <div class="alert">
+            <div><i class="icon-logs"></i> We’re updating our license & versioning policy.</div>
+            <div><a href="https://scylladb.com">Learn more about the change <i class="icon-arrow-right"></i></a></div>
+        </div>
+        """,
+    ],
+]
+
+mock_state_machine = Mock()
+mock_state_machine.reporter = Mock()
+mock_state = Mock()
+
+
+@pytest.mark.parametrize("arguments, options, content, expected", test_data)
+def test_alert(arguments, options, content, expected):
+    directive = Alert(
+        "component",
+        arguments,
+        options,
+        content,
+        0,
+        0,
+        "",
+        mock_state_machine,
+        mock_state,
+    )
+    result = directive.run()
+    assert (
+        bs(result[0].astext(), "html.parser").prettify()
+        == bs(expected, "html.parser").prettify()
+    )