CodeZen/templates/_projects_partial.html

<div class="flex flex-col gap-2">
    <p class="text-slate-900 dark:text-white text-4xl font-black leading-tight tracking-[-0.033em]">CodeZen</p>
    <p class="text-slate-500 dark:text-slate-400 text-lg font-medium leading-tight">一个专注中文区的 GitHub 项目发现</p>
</div>

<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800 mt-6">
    <a  href="/?topic={{ current_topic|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-get="/?topic={{ current_topic|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if not current_lang }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">所有语言</p>
    </a>
    {% for lang in languages %}
    <a  href="/?lang={{ lang|urlencode }}&topic={{ current_topic|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-get="/?lang={{ lang|urlencode }}&topic={{ current_topic|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if current_lang == lang }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">{{ lang }}</p>
    </a>
    {% endfor %}
</div>

{% if popular_topics %}
<div class="flex flex-wrap gap-3 mt-4">
    <a  href="/?lang={{ current_lang|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-get="/?lang={{ current_lang|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if not current_topic }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">所有主题</p>
    </a>
    {% for topic in popular_topics %}
    <a  href="/?topic={{ topic|urlencode }}&lang={{ current_lang|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-get="/?topic={{ topic|urlencode }}&lang={{ current_lang|urlencode }}&sort={{ current_sort }}&q={{ search_query }}"
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if current_topic == topic }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">{{ topic }}</p>
    </a>
    {% endfor %}
</div>
{% endif %}

<div class="flex flex-wrap gap-3 mt-4"> 
    <a  href="/?sort=pushed_at&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
        hx-get="/?sort=pushed_at&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}" 
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if current_sort == 'pushed_at' }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">按时间排序</p>
        <div class="text-slate-600 dark:text-slate-400"><span class="material-symbols-outlined">expand_more</span></div>
    </a>
    <a  href="/?sort=stars&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}" 
        hx-get="/?sort=stars&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
        hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
        class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-slate-200 dark:bg-slate-800 px-4 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors duration-200 no-underline {{ 'filter-button-active' if current_sort == 'stars' }}">
        <p class="text-slate-800 dark:text-white text-sm font-medium leading-normal">按热度排序</p>
        <div class="text-slate-600 dark:text-slate-400"><span class="material-symbols-outlined">expand_more</span></div>
    </a>
</div>

<div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-6 mt-6"> 
    {% for project in projects %}
    <a href="{{ project['url'] }}" target="_blank" class="no-underline flex flex-col gap-4 p-5 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        
        <div class="flex items-center gap-3">
            {% if project['owner_avatar_url'] %}
            <img src="{{ project['owner_avatar_url'] }}" alt="avatar" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
            {% endif %}
            <p class="text-slate-900 dark:text-white text-xl font-bold leading-normal truncate">{{ project['name'] }}</p>

        </div>
        
        <p class="text-slate-600 dark:text-slate-400 text-sm font-normal leading-normal min-h-[4rem] pt-4 border-t border-slate-200 dark:border-slate-700">{{ project['display_text'] }}</p>
        
        {% if project['topics'] %}
        <div classg="flex flex-wrap gap-2 -mt-2">
            {% for topic in project['topics'][:5] %}
            <span class="text-xs font-medium bg-blue-100 text-primary dark:bg-slate-800 dark:text-blue-300 px-2.5 py-0.5 rounded-full">{{ topic }}</span>
            {% endfor %}
        </div>
        {% endif %}
        
        <div class="flex items-center gap-4 text-slate-500 dark:text-slate-500 text-sm mt-auto pt-3 border-t border-slate-200 dark:border-slate-700">
            <div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-yellow-500" style="font-size: 16px;">star</span><span>{{ format_stars(project['stars']) }}</span></div>
            {% if project['language'] and project['language'] != 'N/A' %}
            <div class="flex items-center gap-1.5">
                <span class="w-2.5 h-2.5 rounded-full {{ language_colors.get(project['language'], 'bg-gray-400') }}"></span>
                <span>{{ project['language'] }}</span>
            </div>
            {% endif %}
        </div>
    </a>
    {% else %}
    <div class="col-span-full flex flex-col px-4 py-16 items-center justify-center">
         <div class="flex flex-col items-center gap-6 text-center">
            <div class="text-slate-400 dark:text-slate-600"><span class="material-symbols-outlined" style="font-size: 96px;">search_off</span></div>
            <div class="flex max-w-md flex-col items-center gap-2">
                <p class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">未找到项目</p>
                <p class="text-slate-600 dark:text-slate-400 text-sm font-normal leading-normal">数据库为空或没有项目匹配您的筛选条件。</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if total_pages > 1 %}
<nav class="flex justify-center items-center gap-2 mt-6">
    {% if current_page > 1 %}
        <a  href="/?page={{ current_page - 1 }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}" 
            hx-get="/?page={{ current_page - 1 }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
            hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
            class="pagination-link pagination-link-inactive hover:bg-slate-300 dark:hover:bg-slate-600">‹</a>
    {% else %}
        <span class="pagination-link pagination-link-disabled">‹</span>
    {% endif %}
    {% for page_num in range(1, total_pages + 1) %}
        {% if page_num == current_page %}
            <span class="pagination-link pagination-link-active">{{ page_num }}</span>
        {% elif page_num > current_page - 3 and page_num < current_page + 3 %}
            <a  href="/?page={{ page_num }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
                hx-get="/?page={{ page_num }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
                hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
                class="pagination-link pagination-link-inactive hover:bg-slate-300 dark:hover:bg-slate-600">{{ page_num }}</a>
        {% elif page_num == current_page - 3 and page_num > 1 %}
            <span class="pagination-link">...</span>
        {% elif page_num == current_page + 3 and page_num < total_pages %}
            <span class="pagination-link">...</span>
        {% endif %}
    {% endfor %}
    {% if current_page < total_pages %}
        <a  href="/?page={{ current_page + 1 }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
            hx-get="/?page={{ current_page + 1 }}&sort={{ current_sort }}&q={{ search_query }}&lang={{ current_lang|urlencode }}&topic={{ current_topic|urlencode }}"
            hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true"
            class="pagination-link pagination-link-inactive hover:bg-slate-300 dark:hover:bg-slate-600">›</a>
    {% else %}
        <span class="pagination-link pagination-link-disabled">›</span>
    {% endif %}
</nav>
{% endif %}