Add external links icons to sidebar and topic boxes (#231)

* Add external links icons to sidebar and topic boxes

* Replace topic box link icon

Author: dgarcia360

docs/source/contribute/index.rst

@@ -9,6 +9,7 @@ Contribute
    Contribute to the Sphinx Theme <contribute-theme>
    upgrade/index
    api/sphinx_scylladb_theme
+   Source Code <https://github.com/scylladb/sphinx-scylladb-theme>
 
 We are always looking for those who want to help and appreciate any contribution we can get.
 
@@ -17,4 +18,4 @@ Before you can contribute to Scylla for the first time, you should download, pri
 There are two ways to contribute to Scylla Docs:
 
 * :doc:`Contribute to the Documentation <contribute-docs>` - by writing new or changing existing Documentation.
-* :doc:`Contribute to the Sphinx Theme <contribute-theme>` - this is the CSS for our docs website.
+* :doc:`Contribute to the Sphinx Theme <contribute-theme>` - this is the CSS for our docs website.

docs/source/examples/topic-box.rst

@@ -36,9 +36,9 @@ The ``topic-box`` directive supports the following options:
     - Topic box title.
   * - ``icon``
     - string
-    - 
+    -
     - fa fa-home
-    - A list of CSS classes to render icons, separated by comma or space. 
+    - A list of CSS classes to render icons, separated by comma or space.
   * - ``image``
     - string
     -
@@ -108,6 +108,30 @@ Results in:
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
+Topic with external link
+........................
+
+Using:
+
+.. code-block:: rst
+
+    .. topic-box::
+        :title: Lorem Ipsum
+        :link: https://scylladb.com
+        :anchor: Lorem ipsum
+
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Results in:
+
+.. topic-box::
+    :title: Lorem Ipsum
+    :link: https://scylladb.com
+    :anchor: Lorem ipsum
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
 Topic with horizontal scroll (mobile)
 .....................................
 

poetry.lock

@@ -1,10 +1,12 @@
 <div class="breadcrumbs">
   <span class="bread__item"
-    ><a href="{{ pathto(master_doc) }}" class="bread__highlight"> <i class="fas fa-home"></i> {{ project }}</a></span
+    ><a href="{{ pathto(master_doc) }}" class="bread__highlight">
+      <i class="fas fa-home"></i> {{ project }}</a
+    ></span
   >
   {% for doc in parents %}
   <span class="bread__item"
-    ><a href="{{ doc.spannk|e }}">{{ doc.title }}</a></span
+    ><a href="{{ doc.link|e }}">{{ doc.title }}</a></span
   >
   {% endfor %}
   <span class="bread__item bread__item--last">{{ title }}</span>

sphinx_scylladb_theme/breadcrumbs.html

@@ -4,7 +4,7 @@
 from docutils import nodes
 from docutils.parsers.rst import Directive, directives
 
-from .utils import generate_template
+from .utils import generate_template, is_url
 
 
 class TopicBox(Directive):
@@ -24,16 +24,23 @@ def run(self):
         container_class_name = self.options.get("class", "").replace(",", " ")
 
         link = self.options.get("link")
-        html_tag_open = generate_template(
+        link_template = """
+            <div class="{class_name} {container_class_name}">
+                <div class="card">
             """
+        if is_url(link):
+            link_template = """
+            <div class="cell {class_name} {container_class_name}">
+                <a class="card" href="{link}" target="_blank">
+            """
+        elif link:
+            link_template = """
             <div class="cell {class_name} {container_class_name}">
                 <a class="card" href="{link}">
             """
-            if link
-            else """
-            <div class="{class_name} {container_class_name}">
-                <div class="card">
-            """,
+
+        html_tag_open = generate_template(
+            link_template,
             class_name=class_name,
             container_class_name=container_class_name,
             link=link,
@@ -73,8 +80,12 @@ def run(self):
         anchor = (
             generate_template(
                 """
-            <div class="{class_name}__anchor">{anchor}</div>
-            """,
+                <div class="{class_name}__anchor">{anchor} <i class="fa fa-external-link" aria-hidden="true"></i></div>
+                """
+                if is_url(link)
+                else """
+                <div class="{class_name}__anchor">{anchor}</div>
+                """,
                 class_name=class_name,
                 anchor=anchor,
             )

sphinx_scylladb_theme/extensions/topic_box.py

@@ -18,6 +18,20 @@ a {
   color: $color-typography-base-link;
 }
 
+a.reference:after {
+  font-family: $font-icons-family;
+  font-size: $font-smallest;
+  padding: 0 4px;
+}
+
+a.reference.external:after {
+  content: "\f08e";
+}
+
+a.reference.download:after {
+  content: "\f019";
+}
+
 a:hover {
   color: $color-typography-base-link;
   font-weight: 500;

sphinx_scylladb_theme/static/css/main.css

@@ -47,20 +47,6 @@
     margin-bottom: $gap;
   }
 
-  .reference:after {
-    font-family: $font-icons-family;
-    font-size: $font-smallest;
-    padding: 0 4px;
-  }
-
-  .reference.external:after {
-    content: "\f08e";
-  }
-
-  .reference.download:after {
-    content: "\f019";
-  }
-
   .section {
     margin-top: -$header-height;
     padding-top: $header-height;

src/css/base/_reset.scss

@@ -71,6 +71,19 @@
                 <div class="topic-box__body">
         """,
     ],
+    [
+        [],
+        {"title": "Lorem Ipsum", "link": "https://test.local"},
+        ["Content"],
+        """
+        <div class="cell topic-box ">
+            <a class="card" href="https://test.local" target="_blank">
+                <div class="topic-box__head">
+                    <h3 class="topic-box__title">Lorem Ipsum</h3>
+                </div>
+                <div class="topic-box__body">
+        """,
+    ],
 ]
 
 

src/css/components/_content.scss

@@ -26,5 +26,5 @@ def test_override_smv_latest_version_env():
 def test_override_rst_epilog():
     config = ConfigStub()
     config.rst_epilog = "|a| raw:: html"
-    assert "|v| raw:: html" in override_rst_epilog(config)
-    assert "|x| raw:: html" in override_rst_epilog(config)
+    assert "|v| replace:: :raw-html:" in override_rst_epilog(config)
+    assert "|x| replace:: :raw-html:" in override_rst_epilog(config)