extract navbar svgs (#367)

Author: filipchristiansen

src/server/templates/components/_macros.jinja

@@ -1,5 +1,5 @@
 {# Icon link #}
-{% macro icon_link(href, icon, label) -%}
+{% macro footer_icon_link(href, icon, label) -%}
     <a href="{{ href }}"
        target="_blank"
        rel="noopener noreferrer"

src/server/templates/components/footer.jinja

@@ -1,19 +1,19 @@
-{% from 'components/_macros.jinja' import icon_link %}
+{% from 'components/_macros.jinja' import footer_icon_link %}
 <footer class="w-full border-t-[3px] border-gray-900 mt-auto">
     <div class="max-w-4xl mx-auto px-4 py-4">
         <div class="grid grid-cols-2 items-center text-gray-900 text-sm">
             {# Left column — Chrome + PyPI #}
             <div class="flex items-center space-x-4">
-                {{ icon_link('https://chromewebstore.google.com/detail/adfjahbijlkjfoicpjkhjicpjpjfaood',
+                {{ footer_icon_link('https://chromewebstore.google.com/detail/adfjahbijlkjfoicpjkhjicpjpjfaood',
                                 'icons/chrome.svg',
                                 'Chrome Extension') }}
-                {{ icon_link('https://pypi.org/project/gitingest',
+                {{ footer_icon_link('https://pypi.org/project/gitingest',
                                 'icons/python.svg',
                                 'Python Package') }}
             </div>
             {# Right column - Discord #}
             <div class="flex justify-end">
-                {{ icon_link('https://discord.gg/zerRaGK9EC',
+                {{ footer_icon_link('https://discord.gg/zerRaGK9EC',
                                 'icons/discord.svg',
                                 'Discord') }}
             </div>

src/server/templates/components/git_form.jinja

@@ -40,9 +40,9 @@
                         <!-- Pattern type selector -->
                         <div class="relative flex items-center">
                             <select id="pattern_type"
-                                    onchange="changePattern()"
                                     name="pattern_type"
-                                    class="w-21 py-2 pl-2 pr-6 appearance-none bg-[#e6e8eb] focus:outline-none border-r-[3px] border-gray-900 cursor-pointer">
+                                    onchange="changePattern()"
+                                    class="pattern-select">
                                 <option value="exclude"
                                         {% if pattern_type == 'exclude' or not pattern_type %}selected{% endif %}>
                                     Exclude

src/server/templates/components/navbar.jinja

@@ -1,41 +1,34 @@
 <header class="sticky top-0 bg-[#FFFDF8] border-b-[3px] border-gray-900 z-50">
     <div class="max-w-4xl mx-auto px-4">
         <div class="flex justify-between items-center h-16">
-            <!-- Logo -->
+            {# Logo #}
             <div class="flex items-center gap-4">
                 <h1 class="text-2xl font-bold tracking-tight">
                     <a href="/" class="hover:opacity-80 transition-opacity">
                         <span class="text-gray-900">Git</span><span class="text-[#FE4A60]">ingest</span>
                     </a>
                 </h1>
             </div>
-            <!-- Navigation with updated styling -->
+            {# Navigation with updated styling #}
             <nav class="flex items-center space-x-6">
-                <a href="/llm.txt"
-                   class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center">
+                <a href="/llm.txt" class="link-bounce flex items-center text-gray-900">
                     <span class="badge-new">NEW</span>
                     /llm.txt
                 </a>
+                {# GitHub link #}
                 <div class="flex items-center gap-2">
                     <a href="https://github.com/cyclotruc/gitingest"
                        target="_blank"
                        rel="noopener noreferrer"
-                       class="text-gray-900 hover:-translate-y-0.5 transition-transform flex items-center gap-1.5">
-                        <svg class="w-4 h-4"
-                             fill="currentColor"
-                             viewBox="0 0 24 24"
-                             aria-hidden="true">
-                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd">
-                            </path>
-                        </svg>
+                       class="link-bounce flex items-center gap-1.5 text-gray-900">
+                        <img src="/static/icons/github.svg" class="w-4 h-4" alt="GitHub logo">
                         GitHub
                     </a>
-                    <div class="flex items-center text-sm text-gray-600">
-                        <svg class="w-4 h-4 text-[#ffc480] mr-1"
-                             fill="currentColor"
-                             viewBox="0 0 20 20">
-                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                        </svg>
+                    {# Star counter #}
+                    <div class="no-drag flex items-center text-sm text-gray-600">
+                        <img src="/static/svg/github-star.svg"
+                             class="w-4 h-4 mr-1"
+                             alt="GitHub star icon">
                         <span id="github-stars">0</span>
                     </div>
                 </div>

src/static/css/tailwind.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@layer utilities {
+@layer components {
   .badge-new {
     @apply inline-block -rotate-6 -translate-y-1 mx-1 px-1
            bg-[#FE4A60] border border-gray-900 text-white
@@ -36,9 +36,24 @@
            translate-y-4 sm:translate-y-10 md:translate-y-2 lg:translate-y-4;
   }
 
+  .pattern-select {
+    @apply min-w-max appearance-none pr-6 pl-2 py-2
+           bg-[#e6e8eb] border-r-[3px] border-gray-900
+           cursor-pointer focus:outline-none;
+  }
+
+}
+
+@layer utilities {
+
   .no-drag {
     @apply pointer-events-none select-none;
            -webkit-user-drag: none;
   }
 
+  .link-bounce {
+    @apply transition-transform
+           hover:-translate-y-0.5;
+  }
+
 }