Merge pull request #221 from servo/mark-ext-menu-items

Mark external menu items with icon

Author: nicoburns

_data/menu.json

@@ -4,20 +4,20 @@
     "url": "#",
     "subpages": [
       { "title": "Contributing", "url": "/contributing/" },
-      { "title": "Servo Book", "url": "https://book.servo.org" },
+      { "title": "Servo Book", "url": "https://book.servo.org", "external": true },
       { "title": "WPT pass rates", "url": "/wpt/" },
       { "title": "Code of Conduct", "url": "/coc/" }
     ]
   },
   { "title": "Download", "url": "/download/" },
   { "title": "Blog", "url": "/blog/" },
-  { "title": "Demos", "url": "https://demo.servo.org/" },
+  { "title": "Demos", "url": "https://demo.servo.org/", "external": true },
   {
     "title": "About",
     "url": "#",
     "subpages": [
       { "title": "About Servo", "url": "/about/" },
-      { "title": "Governance", "url": "https://github.com/servo/project/blob/main/governance/README.md" },
+      { "title": "Governance", "url": "https://github.com/servo/project/blob/main/governance/README.md", "external": true },
       { "title": "Sponsorship", "url": "/sponsorship/" },
       { "title": "Acknowledgements", "url": "/acknowledgements/" }
     ]

_includes/ext-link-marker.html

@@ -0,0 +1 @@
+<span style="font-size: 0.8em;display:inline-block;margin-left: 4px"><i class="fa-solid fa-up-right-from-square"></i></span>

_includes/header.html

@@ -25,20 +25,32 @@
               {% endfor %}
             {% endcapture %}
             <div class="navbar-item has-dropdown is-hoverable">
-              <a class="navbar-link{% if link.url == pagedir %} is-active {% endif %}{{ subpage-is-active }}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
-                {{ link.title }}
+              <a
+                class="navbar-link{% if link.url == pagedir %} is-active {% endif %}{{ subpage-is-active }}"
+                href="{{ link.url | url }}"
+                {% if link.external %} target="_blank"{% endif %}
+              >
+                {{ link.title }}{% if link.external %}{% include "ext-link-marker.html" %}{% endif %}
               </a>
               <div class="navbar-dropdown">
                 {% for sublink in link.subpages %}
-                  <a class="navbar-item{% if sublink.url == pagedir %} is-active{% endif %}" href="{{ sublink.url | url }}"{% if sublink.url contains 'http://' or sublink.url contains 'https://' %} target="_blank"{% endif %}>
-                    {{ sublink.title }}
+                  <a
+                    class="navbar-item{% if sublink.url == pagedir %} is-active{% endif %}"
+                    href="{{ sublink.url | url }}"
+                    {% if sublink.external %} target="_blank"{% endif %}
+                  >
+                    {{ sublink.title }}{% if sublink.external %}{% include "ext-link-marker.html" %}{% endif %}
                   </a>
                 {% endfor %}
               </div>
             </div>
           {% else %}
-            <a class="navbar-item{% if link.url == pagedir %} is-active{% endif %}" href="{{ link.url | url }}"{% if link.url contains 'http://' or link.url contains 'https://' %} target="_blank"{% endif %}>
-              {{ link.title }}
+            <a
+              class="navbar-item{% if link.url == pagedir %} is-active{% endif %}"
+              href="{{ link.url | url }}"
+              {% if link.external %} target="_blank"{% endif %}
+            >
+              {{ link.title }}{% if link.external %}{% include "ext-link-marker.html" %}{% endif %}
             </a>
           {% endif %}
         {% endfor %}