feat(navigation): add support for external links in navbar, add podcast link

Author: moxvallix

src/_data/navigation.json

@@ -16,5 +16,11 @@
       "text": "Docs",
       "url": "/docs/"
     }
+  ],
+  "external_items": [
+    {
+      "text": "Podcast",
+      "url": "https://podcast.datapack.dev"
+    }
   ]
 }

src/_includes/layouts/project.html

@@ -21,7 +21,7 @@
       <p>
         {% heroicon "outline" "link" "" 'width=16 class="inline mr-0.5 mb-0.5"' %}
         <span class="font-bold">Project Page:</span>
-        <a href="{{ project_link[1] }}">
+        <a href="{{ project_link[1] }}" target="_blank">
           {{ project_link[0] }}{% heroicon "outline" "external-link" "" 'width=10 class="inline ml-0.5 mb-2"' %}
         </a>
       </p>
@@ -30,7 +30,7 @@
         <span class="font-bold">Project Links:</span>
         <ul class="ml-[2.25rem] list-disc">
           {% for link in other_links %}
-            <li><a href="{{ link[1] }}">{{ link[0] }}{% heroicon "outline" "external-link" "" 'width=10 class="inline ml-0.5 mb-2"' %}</a></li>
+            <li><a href="{{ link[1] }}" target="_blank">{{ link[0] }}{% heroicon "outline" "external-link" "" 'width=10 class="inline ml-0.5 mb-2"' %}</a></li>
           {% endfor %}
         </ul>
       {% endif %} {% if docs %}
@@ -47,7 +47,7 @@
       <ul class="ml-[2.25rem] list-disc">
         {% for author in authors %}
         <li>
-          <a href="{{ author[1] }}" alt="Visit profile of {{ author[0] }}.">
+          <a href="{{ author[1] }}" alt="Visit profile of {{ author[0] }}." target="_blank">
             {{ author[0] }}{% heroicon "outline" "external-link" "" 'width=10 class="inline ml-0.5 mb-2"' %}
           </a>
         </li>
@@ -64,6 +64,7 @@
           <a
             href="{{ contributor[1] }}"
             alt="Visit profile of {{ contributor[0] }}."
+            target="_blank"
           >
             {{ contributor[0] }}{% heroicon "outline" "external-link" "" 'width=10 class="inline ml-0.5 mb-2"' %}
           </a>

src/_includes/partials/navigation.html

@@ -8,7 +8,20 @@
     href="{{ item.url }}"
     class="no-style hover:gmdu-link font-bold underline decoration-purple-500"
   >
-    {{ item.text }}
+    {{ item.text }} {% if item.external %}{% heroicon "outline" "external-link"
+    "" 'width=10 class="inline mb-2"' %}{% endif %}
   </a>
 </li>
-{% endif %} {% endfor %}
+{% endif %} {% endfor %} {% if navigation.external_items.size > 0 %}
+<span class="hidden xs:inline">|</span>
+<hr class="my-4 mx-auto max-w-[10rem] xs:hidden" />
+{% endif %} {% for item in navigation.external_items %}
+<li>
+  <a
+    href="{{ item.url }}"
+    class="no-style hover:gmdu-link font-bold underline decoration-purple-500"
+  >
+    {{ item.text }} {% heroicon "outline" "external-link" "" 'width=10 class="inline mb-2"' %}
+  </a>
+</li>
+{% endfor %}

src/_includes/partials/site-header.html

@@ -2,7 +2,7 @@
   class="relative z-10 flex select-none bg-gradient-to-r from-header-start to-header-end shadow-black xs:shadow sm:shadow-2xl"
 >
   <nav
-    class="flex h-16 grow items-center justify-between gap-4 px-4 text-white"
+    class="flex h-16 grow items-center justify-between gap-1 px-2 text-white sm:px-4"
   >
     <a href="/" class="heading no-style hover:underline">
       <figure class="flex flex-shrink-0 items-center space-x-1">
@@ -21,7 +21,7 @@
         </figcaption>
       </figure>
     </a>
-    <ul class="hidden gap-2 text-base leading-8 xs:flex">
+    <ul class="hidden gap-1 text-base leading-8 xs:flex sm:gap-2">
       {% include "partials/navigation.html"%}
     </ul>
     <div class="xs:hidden">
@@ -60,7 +60,7 @@
         <div
           class="absolute left-0 top-16 flex w-screen flex-col items-center gap-4 bg-black/40 p-4 text-center backdrop-blur-lg"
         >
-          <ul class="text-2xl">
+          <ul class="w-full space-y-2 text-center text-2xl">
             {% include "partials/navigation.html"%}
           </ul>
         </div>