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="home-search-section">
            <div class="home-search-container">
                <input type="text" 
                       class="home-search-input" 
                       id="home-search-input" 
                       placeholder="Search for learnings..."
                       autocomplete="off">
                <div id="home-search-results" class="home-search-results"></div>
            </div>
        </section>

        <!-- Load search scripts -->
        <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
        <script>
            // Pre-compute URLs
            const tagsBaseUrl = "{{ '/tags' | relative_url }}";
            
            // Initialize search data with lazy loading
            let searchStore = null;
            let fuse = null;
            let debounceTimeout = null;
            const DEBOUNCE_DELAY = 300; // milliseconds

            // Lazy load search data
            async function initializeSearchStore() {
                if (searchStore === null) {
                    searchStore = {
                        {% for post in site.til %}
                        "{{ post.url | slugify }}": {
                            "title": "{{ post.title | xml_escape }}",
                            "content": {{ post.content | strip_html | strip_newlines | escape | jsonify }},
                            "url": "{{ post.url | xml_escape | relative_url }}",
                            "date": "{{ post.date | date: '%B %-d, %Y' }}",
                            "tags": "{{ post.tags | join: ', ' }}"
                        }{% unless forloop.last %},{% endunless %}
                        {% endfor %}
                    };

                    // Initialize Fuse.js with the loaded data
                    const documents = Object.values(searchStore);
                    fuse = new Fuse(documents, {
                        keys: [
                            { name: 'title', weight: 0.7 },
                            { name: 'content', weight: 0.3 },
                            { name: 'tags', weight: 0.3 }
                        ],
                        includeScore: true,
                        threshold: 0.4,
                        ignoreLocation: true
                    });
                }
                return searchStore;
            }

            let selectedIndex = -1;

            // Initialize Fuse.js when the page loads
            document.addEventListener('DOMContentLoaded', async () => {
                // Focus on search input when page loads
                const searchInput = document.getElementById('home-search-input');
                if (searchInput) {
                    // Wait a bit for the page to render
                    setTimeout(() => {
                        searchInput.focus();
                    }, 500);
                }
            });

            // Handle keyboard navigation
            document.addEventListener('keydown', (e) => {
                const results = document.querySelectorAll('.home-search-result');
                if (!results.length) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
                    updateSelection(results);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedIndex = Math.max(selectedIndex - 1, -1);
                    updateSelection(results);
                } else if (e.key === 'Enter' && selectedIndex >= 0) {
                    e.preventDefault();
                    const selectedResult = results[selectedIndex].querySelector('a');
                    if (selectedResult) selectedResult.click();
                } else if (e.key === 'Escape') {
                    document.getElementById('home-search-input').value = '';
                    document.getElementById('home-search-results').innerHTML = '';
                    selectedIndex = -1;
                }
            });

            function updateSelection(results) {
                results.forEach((result, index) => {
                    result.classList.toggle('selected', index === selectedIndex);
                    if (index === selectedIndex) {
                        result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    }
                });
            }

            // Handle search input with debouncing
            document.getElementById('home-search-input').addEventListener('input', (e) => {
                if (debounceTimeout) {
                    clearTimeout(debounceTimeout);
                }
                
                debounceTimeout = setTimeout(async () => {
                    // Ensure search store is initialized
                    if (!searchStore) {
                        await initializeSearchStore();
                    }
                    performSearch(e.target.value);
                }, DEBOUNCE_DELAY);
            });

            function highlightText(text, searchTerm) {
                if (!searchTerm) return text;
                const regex = new RegExp(`(${searchTerm})`, 'gi');
                return text.replace(regex, '<mark class="search-highlight">$1</mark>');
            }

            function hasExactMatch(text, searchTerm) {
                if (!text || !searchTerm) return false;
                return text.toLowerCase().includes(searchTerm.toLowerCase());
            }

            function createResultElement(item, searchTerm) {
                const resultDiv = document.createElement('div');
                resultDiv.className = 'home-search-result';

                // Create and append title
                const title = document.createElement('h3');
                const titleLink = document.createElement('a');
                titleLink.href = item.url;
                titleLink.innerHTML = highlightText(item.title, searchTerm);
                title.appendChild(titleLink);
                resultDiv.appendChild(title);

                // Create and append meta information
                const metaDiv = document.createElement('div');
                metaDiv.className = 'home-search-result-meta';

                // Add date
                const timeElement = document.createElement('time');
                timeElement.textContent = item.date;
                metaDiv.appendChild(timeElement);

                // Add tags if they exist
                if (item.tags) {
                    const tagsDiv = document.createElement('div');
                    tagsDiv.className = 'tags';
                    
                    item.tags.split(', ').forEach(tag => {
                        const tagLink = document.createElement('a');
                        tagLink.href = `${tagsBaseUrl}#${tag.toLowerCase()}`;
                        tagLink.className = 'tag';
                        tagLink.innerHTML = highlightText(tag, searchTerm);
                        tagsDiv.appendChild(tagLink);
                    });

                    metaDiv.appendChild(tagsDiv);
                }

                resultDiv.appendChild(metaDiv);
                return resultDiv;
            }

            async function performSearch(searchTerm) {
                const searchResults = document.getElementById('home-search-results');
                selectedIndex = -1;
                
                if (!searchTerm) {
                    searchResults.innerHTML = '';
                    return;
                }

                try {
                    // Ensure search store is initialized
                    if (!searchStore) {
                        await initializeSearchStore();
                    }

                    const results = fuse.search(searchTerm)
                        .filter(result => {
                            const item = result.item;
                            return hasExactMatch(item.title, searchTerm) || 
                                   hasExactMatch(item.content, searchTerm) || 
                                   hasExactMatch(item.tags, searchTerm);
                        })
                        .slice(0, 5); // Limit to 5 results for homepage
                    
                    // Create document fragment for batch DOM updates
                    const fragment = document.createDocumentFragment();
                    
                    if (results.length > 0) {
                        // Create all result elements in memory first
                        results.forEach(result => {
                            const resultElement = createResultElement(result.item, searchTerm);
                            fragment.appendChild(resultElement);
                        });
                        
                        // Note: We've removed the 'View all results' link since the search page has been removed
                        
                        // Clear previous results and append new ones in a single operation
                        searchResults.textContent = '';
                        searchResults.appendChild(fragment);
                    } else {
                        const noResultsDiv = document.createElement('div');
                        noResultsDiv.className = 'home-search-no-results';
                        const message = document.createElement('p');
                        message.textContent = `No results found for "${searchTerm}"`;
                        noResultsDiv.appendChild(message);
                        fragment.appendChild(noResultsDiv);
                        
                        searchResults.textContent = '';
                        searchResults.appendChild(fragment);
                    }
                } catch (e) {
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'home-search-no-results';
                    const errorMessage = document.createElement('p');
                    errorMessage.textContent = 'An error occurred while searching.';
                    errorDiv.appendChild(errorMessage);
                    
                    searchResults.textContent = '';
                    searchResults.appendChild(errorDiv);
                }
            }
        </script>

        <!-- Code block enhancement script -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Handle code blocks for better mobile experience
                const codeBlocks = document.querySelectorAll('pre, .highlight');
                
                codeBlocks.forEach(block => {
                    // Add touch indicator for mobile
                    if (window.innerWidth <= 768) {
                        const indicator = document.createElement('div');
                        indicator.className = 'code-scroll-indicator';
                        indicator.innerHTML = '<span>Scroll to view code</span>';
                        indicator.style.cssText = 'text-align: center; font-size: 0.7rem; color: var(--secondary-text); padding: 0.25rem 0; opacity: 0.8;';
                        
                        // Only show indicator if content overflows
                        if (block.scrollWidth > block.clientWidth) {
                            block.parentNode.insertBefore(indicator, block.nextSibling);
                            
                            // Hide indicator after user has scrolled
                            block.addEventListener('scroll', function() {
                                indicator.style.display = 'none';
                            }, { once: true });
                        }
                    }
                    
                    // Add horizontal scroll indicator for touch devices
                    if ('ontouchstart' in window && block.scrollWidth > block.clientWidth) {
                        block.classList.add('has-horizontal-scroll');
                        
                        // Add subtle horizontal scroll indicator
                        const scrollIndicator = document.createElement('div');
                        scrollIndicator.className = 'horizontal-scroll-indicator';
                        scrollIndicator.innerHTML = '<span>⟷</span>';
                        scrollIndicator.style.cssText = 'position: absolute; right: 10px; bottom: 5px; background: rgba(0,0,0,0.1); border-radius: 10px; padding: 2px 8px; font-size: 12px; opacity: 0.7;';
                        
                        block.style.position = 'relative';
                        block.appendChild(scrollIndicator);
                        
                        // Hide indicator after user has scrolled
                        block.addEventListener('scroll', function() {
                            scrollIndicator.style.opacity = '0';
                            setTimeout(() => {
                                scrollIndicator.remove();
                            }, 300);
                        }, { once: true });
                    }
                });
                
                // Copy functionality is now handled by copy-code.js
                
                // Copy functionality is now handled by copy-code.js
            });
        </script>

        <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">
                    <h2 class="post-title">
                        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
                    </h2>
                    {% if post.description %}
                    <p class="post-description">{{ post.description | truncate: 120 }}</p>
                    {% endif %}
                    <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>
                        {% if post.tags.size > 0 %}
                        <span class="tags-inline">
                            {% for tag in post.tags %}
                            <a href="{{ '/tags' | relative_url }}#{{ tag | slugify }}" class="tag-inline">#{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
                            {% endfor %}
                        </span>
                        {% endif %}
                    </div>
                </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>