index.html

---
layout: default
title: Home
---

{% assign all_posts = site.til | sort: "date" | reverse %}
{% assign total_posts = all_posts | size %}
{% assign display_count = 5 %}

<div class="home-wrapper">
    <div class="home-content">
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stats-item">
                    <span class="stats-number">{{ total_posts }}</span>
                    <span class="stats-label">Total TILs</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number">{{ site.til | map: "category" | compact | uniq | size }}</span>
                    <span class="stats-label">Categories</span>
                </div>
                <div class="stats-item">
                    <span class="stats-number">{{ site.til | map: "tags" | compact | flatten | uniq | size }}</span>
                    <span class="stats-label">Unique Tags</span>
                </div>
            </div>
        </section>

        <section class="recent-posts">
            <div class="container">
                <div class="recent-learnings">
                    <h1>Recent Learnings</h1>
                </div>
                <a href="{{ '/categories' | relative_url }}" class="view-all">View All →</a>
            </div>
            
            <div class="posts-list">
            {% for post in all_posts limit:display_count %}
                <article class="post-item">
                    <div class="post-meta">
                        <span class="date-category">
                            <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
                            {% if post.category %}<a href="{{ '/categories' | relative_url }}#{{ post.category | slugify }}" class="category-link">{{ post.category }}</a>{% endif %}
                        </span>
                    </div>
                    <h2 class="post-title">
                        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
                    </h2>
                    {% if post.description %}
                    <p class="post-description">{{ post.description }}</p>
                    {% endif %}
                    {% if post.tags.size > 0 %}
                    <div class="tags">
                        {% for tag in post.tags %}
                        <a href="{{ '/tags' | relative_url }}#{{ tag | slugify }}" class="tag">{{ tag }}</a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </article>
            {% endfor %}
            </div>
        </section>

        <section class="popular-tags">
            <div class="container">
                <div class="popular-topics">
                    <h2>Popular Tags</h2>
                </div>
                <a href="{{ '/tags' | relative_url }}" class="view-all">View All →</a>
            </div>
            <div class="tags-cloud">
                {% assign all_tags = site.til | map: "tags" | compact | flatten %}
                {% assign tag_counts = all_tags | group_by_exp: "tag", "tag" %}
                {% assign sorted_tags = tag_counts | sort: "size" | reverse %}
                {% for tag in sorted_tags limit:10 %}
                    {% assign tag_size = tag.size | times: 1.0 %}
                    {% assign max_size = sorted_tags.first.size | times: 1.0 %}
                    {% assign size_ratio = tag_size | divided_by: max_size %}
                    {% assign font_size = size_ratio | times: 0.4 | plus: 0.8 %}
                    <a href="{{ '/tags' | relative_url }}#{{ tag.name | slugify }}"
                       class="tag-item"
                       style="--tag-size: {{ font_size }}">
                        <span class="tag-name">{{ tag.name }}</span>
                        <span class="tag-count">{{ tag.size }}</span>
                    </a>
                {% endfor %}
            </div>
        </section>
    </div>
</div>