Skip to content

refactor(ui): Tailwind layer refactor, reusable icons, new hover & select helpers #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 3, 2025
Merged

refactor(ui): Tailwind layer refactor, reusable icons, new hover & select helpers #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/server/templates/components/_macros.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
8 changes: 4 additions & 4 deletions src/server/templates/components/footer.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/server/templates/components/git_form.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
29 changes: 11 additions & 18 deletions src/server/templates/components/navbar.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
17 changes: 16 additions & 1 deletion src/static/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
}

}
4 changes: 4 additions & 0 deletions src/static/icons/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/static/svg/github-star.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading