<?php
// Feedback form handler - saves suggestions to markdown file
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['suggestion'])) {
    $suggestion = htmlspecialchars(trim($_POST['suggestion']));
    $digestDate = basename(__DIR__);
    $timestamp = date('Y-m-d H:i:s');

    $entry = "\n## From digest: $digestDate\n";
    $entry .= "**Submitted:** $timestamp\n\n";
    $entry .= "$suggestion\n\n---\n";

    // Path: from WEB or digest-archive/date/ to project root
    $suggestionsFile = __DIR__ . '/../SUGGESTIONS-FROM-USER.MD';
    if (strpos(__DIR__, 'digest-archive') !== false) {
        $suggestionsFile = __DIR__ . '/../../SUGGESTIONS-FROM-USER.MD';
    }

    file_put_contents($suggestionsFile, $entry, FILE_APPEND | LOCK_EX);
    $submitted = true;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digest — Dec 29, 2024</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" type="image/png" href="assets/favicon.png">
</head>
<body>
    <div class="container">
        <div class="main-card">

            <!-- =================================================================
                 PAGE HEADER
                 - Always include at the start of every digest
                 - Update the date in both the <title> and here
                 ================================================================= -->
            <header class="page-header content-item">
                <span class="page-header__date">December 29, 2024</span>
                <span class="page-header__credits">AI-DIGEST BY MAURO SICARD</span>
            </header>


            <!-- =================================================================
                 PRODUCT HUNT SECTION

                 GUIDELINES:
                 - Use card--ph for Product Hunt items
                 - ALWAYS link to the product's actual website (e.g., studio.giselles.ai)
                   NOT to producthunt.com/posts/xxx
                 - Favicon is auto-loaded from the href domain via JS
                 - data-size="32" for PH cards (larger favicon)
                 - Include vote count with triangle symbol
                 - Show domain in meta section
                 ================================================================= -->
            <div class="source-header content-item">
                <img src="assets/producthunt-logo.svg" alt="Product Hunt" class="source-header__logo">
                <span class="source-header__label">From Product Hunt</span>
            </div>

            <!-- Source tags: Link to the source (producthunt.com for PH section) -->
            <div class="source-tags content-item">
                <a href="https://producthunt.com" class="source-tag">Product Hunt</a>
            </div>

            <!-- Section intro: Brief editorial context about what caught your attention -->
            <p class="section-intro content-item">AI tools and Mac utilities caught my attention today.</p>

            <!-- PRODUCT HUNT CARD
                 Structure:
                 - <a> wraps entire card, links to PRODUCT SITE (not PH)
                 - .card__favicon with data-size="32" (auto-populated by JS)
                 - .card__title: "Product Name — Short Tagline"
                 - .card__desc: 1-2 sentence description
                 - .card--ph__meta: vote count + domain
            -->
            <a href="https://studio.giselles.ai" class="card card--ph content-item">
                <img class="card__favicon" data-size="32" alt="">
                <div class="card__content">
                    <span class="card__title">Giselle — AI Workflow Builder</span>
                    <span class="card__desc">Built to design and run AI workflows that actually complete. Zero infra setup—just build and run with a visual node editor and real-time tracking.</span>
                    <div class="card--ph__meta">
                        <span class="card--ph__votes">&#9650; 425</span>
                        <span>·</span>
                        <span>studio.giselles.ai</span>
                    </div>
                </div>
            </a>

            <a href="https://extrabar.app" class="card card--ph content-item">
                <img class="card__favicon" data-size="32" alt="">
                <div class="card__content">
                    <span class="card__title">ExtraBar — Mac Menu Bar Commands</span>
                    <span class="card__desc">Transform your macOS menu bar into a customizable command center. Deep link into apps, run scripts, and access anything with keyboard shortcuts.</span>
                    <div class="card--ph__meta">
                        <span class="card--ph__votes">&#9650; 198</span>
                        <span>·</span>
                        <span>extrabar.app</span>
                    </div>
                </div>
            </a>

            <a href="https://installkit.app" class="card card--ph content-item">
                <img class="card__favicon" data-size="32" alt="">
                <div class="card__content">
                    <span class="card__title">InstallKit — Mac Setup in Minutes</span>
                    <span class="card__desc">Select apps and generate a brew install command. Set up your new Mac in minutes instead of hours hunting for downloads.</span>
                    <div class="card--ph__meta">
                        <span class="card--ph__votes">&#9650; 163</span>
                        <span>·</span>
                        <span>installkit.app</span>
                    </div>
                </div>
            </a>

            <a href="https://githubwrapped.xyz" class="card card--ph content-item">
                <img class="card__favicon" data-size="32" alt="">
                <div class="card__content">
                    <span class="card__title">GitHub Wrapped 2025</span>
                    <span class="card__desc">Your Year in Code — view your GitHub contributions, stats, and coding journey. Shareable, no login required.</span>
                    <div class="card--ph__meta">
                        <span class="card--ph__votes">&#9650; 292</span>
                        <span>·</span>
                        <span>githubwrapped.xyz</span>
                    </div>
                </div>
            </a>


            <!-- =================================================================
                 REDDIT SECTION

                 GUIDELINES:
                 - Group related subreddits together thematically
                 - Source tags link to actual subreddits
                 - Section intro provides editorial context
                 - Use different card types based on importance:
                   * card--featured: Major news/announcements (1 per section max)
                   * card--link: Standard news items
                   * card--link.is-compact: Quick hits, minor updates
                 ================================================================= -->
            <div class="source-header content-item">
                <img src="assets/reddit-logo.svg" alt="Reddit" class="source-header__logo">
                <span class="source-header__label">From Reddit</span>
            </div>

            <!-- Source tags: List the subreddits this section draws from -->
            <div class="source-tags content-item">
                <a href="https://reddit.com/r/anthropic" class="source-tag">r/anthropic</a>
                <a href="https://reddit.com/r/openai" class="source-tag">r/openai</a>
                <a href="https://reddit.com/r/LocalLLaMA" class="source-tag">r/LocalLLaMA</a>
            </div>

            <p class="section-intro content-item">Big day for LLMs. Anthropic dropped a major release, and there's movement across the board from Alibaba and the open-source community.</p>


            <!-- =================================================================
                 FEATURED CARD

                 USE FOR:
                 - Major product launches
                 - Significant announcements
                 - Breaking news that deserves prominence
                 - Use sparingly: 1 per section maximum

                 GUIDELINES:
                 - Link to the PRIMARY SOURCE (company blog, official announcement)
                   NOT to Reddit thread
                 - data-size="28" for featured card favicon
                 - Body can have multiple <p> tags for longer content
                 - Meta shows domain + subreddit where it was discussed
                 ================================================================= -->
            <a href="https://anthropic.com/news/claude-4" class="card card--featured content-item">
                <div class="card--featured__header">
                    <img class="card__favicon" data-size="28" alt="">
                    <span class="card--featured__title">Claude 4 is here</span>
                </div>
                <div class="card--featured__body">
                    <p>Anthropic released Claude 4 with native computer use. Beats GPT-4o on reasoning benchmarks. Same $20/month pricing.</p>
                    <p>The computer use feature is now built into the standard API — no separate endpoint needed. Early tests show it's significantly more reliable than the previous beta.</p>
                </div>
                <div class="card--featured__meta">
                    <span>anthropic.com</span> · <span>r/anthropic</span>
                </div>
            </a>


            <!-- =================================================================
                 LINK CARDS (Standard)

                 USE FOR:
                 - Regular news items
                 - Product updates
                 - Interesting finds

                 GUIDELINES:
                 - Link to the ACTUAL SOURCE (docs, blog, product page)
                   NOT to Reddit thread
                 - data-size="18" for standard favicon
                 - Description: 2-3 sentences, informative but concise
                 ================================================================= -->
            <a href="https://huggingface.co/Qwen/Qwen2.5-72B-Instruct" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Qwen 3 72B released</span>
                    <span class="card__desc">Alibaba's new flagship runs on 48GB VRAM and beats Llama 3 70B across most benchmarks. Quantized versions already available on Hugging Face. The 32B variant is particularly impressive for its size.</span>
                </div>
            </a>

            <a href="https://www.deepseek.com" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">DeepSeek V3 leak hints at MoE architecture</span>
                    <span class="card__desc">Leaked benchmarks suggest the upcoming DeepSeek V3 uses a mixture-of-experts setup similar to Mixtral. Could be the first Chinese lab to ship production MoE. Expected release in early January.</span>
                </div>
            </a>


            <!-- =================================================================
                 COMPACT LINK CARDS

                 USE FOR:
                 - Quick hits
                 - Minor updates
                 - Tool integrations
                 - Version releases without major changes

                 GUIDELINES:
                 - Add .is-compact class to card--link
                 - Description: 1 sentence only
                 - Group these together under a "Quick hits" intro
                 ================================================================= -->
            <p class="section-intro content-item">Quick hits — tools, integrations, and smaller updates.</p>

            <a href="https://raycast.com/ai" class="card card--link is-compact content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Raycast AI 2.0 adds Claude</span>
                    <span class="card__desc">Claude 3.5 Sonnet now available natively. Requires Pro.</span>
                </div>
            </a>

            <a href="https://github.com/makenotion/notion-mcp-server" class="card card--link is-compact content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Official Notion MCP server</span>
                    <span class="card__desc">Full database access, works with Claude Code out of the box.</span>
                </div>
            </a>

            <a href="https://cursor.com/changelog" class="card card--link is-compact content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Cursor 0.45 released</span>
                    <span class="card__desc">Composer improvements and faster tab completions.</span>
                </div>
            </a>


            <!-- =================================================================
                 ADDITIONAL REDDIT SECTIONS

                 You can have multiple Reddit sections grouped by theme:
                 - AI/LLMs (r/anthropic, r/openai, r/LocalLLaMA)
                 - GenAI/Images (r/StableDiffusion, r/midjourney, r/comfyui)
                 - Apps/Software (r/macapps, r/selfhosted, r/apple)
                 - etc.

                 Each section follows the same pattern:
                 1. source-header (with Reddit logo)
                 2. source-tags (relevant subreddits)
                 3. section-intro (editorial context)
                 4. cards (featured, link, or compact as appropriate)
                 ================================================================= -->
            <div class="source-header content-item">
                <img src="assets/reddit-logo.svg" alt="Reddit" class="source-header__logo">
                <span class="source-header__label">From Reddit</span>
            </div>
            <div class="source-tags content-item">
                <a href="https://reddit.com/r/StableDiffusion" class="source-tag">r/StableDiffusion</a>
                <a href="https://reddit.com/r/midjourney" class="source-tag">r/midjourney</a>
                <a href="https://reddit.com/r/comfyui" class="source-tag">r/comfyui</a>
            </div>

            <p class="section-intro content-item">GenAI — image models got attention this week.</p>

            <a href="https://ideogram.ai" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Ideogram 3.0 ships</span>
                    <span class="card__desc">Text rendering finally works reliably. The new model handles complex typography, multiple text blocks, and even curved text without the usual artifacts. Free tier gets 25 generations/day.</span>
                </div>
            </a>

            <a href="https://blackforestlabs.ai" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">FLUX 1.1 Pro available via API</span>
                    <span class="card__desc">Black Forest Labs opened API access to FLUX 1.1 Pro. Faster than 1.0, better prompt adherence, and native 2K output. Pricing is $0.04/image which undercuts Midjourney significantly.</span>
                </div>
            </a>


            <!-- Another themed section -->
            <div class="source-header content-item">
                <img src="assets/reddit-logo.svg" alt="Reddit" class="source-header__logo">
                <span class="source-header__label">From Reddit</span>
            </div>
            <div class="source-tags content-item">
                <a href="https://reddit.com/r/macapps" class="source-tag">r/macapps</a>
                <a href="https://reddit.com/r/selfhosted" class="source-tag">r/selfhosted</a>
                <a href="https://reddit.com/r/apple" class="source-tag">r/apple</a>
            </div>

            <p class="section-intro content-item">Apps and software.</p>

            <a href="https://arc.net/blog" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Arc Search "Browse for Me" v2</span>
                    <span class="card__desc">The AI browsing feature got a major overhaul. Now handles multi-step research, cites sources inline, and can compare products across sites. Still iOS only but Mac version coming in January.</span>
                </div>
            </a>

            <a href="https://warp.dev" class="card card--link content-item">
                <img class="card__favicon" data-size="18" alt="">
                <div class="card__content">
                    <span class="card__title">Warp terminal adds AI agent mode</span>
                    <span class="card__desc">Warp's new agent can execute multi-step terminal workflows autonomously. Point it at a task like "set up a Python project with tests" and it handles the rest. Free for personal use.</span>
                </div>
            </a>


            <!-- =================================================================
                 FEEDBACK SECTION

                 GUIDELINES:
                 - Always include at the end of every digest
                 - PHP handles form submission, saves to SUGGESTIONS-FROM-USER.MD
                 - JS handles expand/collapse animation
                 ================================================================= -->
            <?php if (!empty($submitted)): ?>
                <div class="feedback feedback--success content-item" style="text-align: center; padding: 2rem;">
                    <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#10003;</div>
                    <p style="margin: 0; font-weight: 500;">Thanks! Your suggestion has been saved.</p>
                    <p style="margin: 0.5rem 0 0; opacity: 0.7; font-size: 0.875rem;">I'll review it for tomorrow's digest.</p>
                </div>
            <?php else: ?>
                <form method="POST" class="feedback content-item" data-feedback>
                    <button type="button" class="feedback__trigger" data-feedback-trigger>
                        Tell me what to change for tomorrow
                    </button>
                    <div class="feedback__content" data-feedback-content>
                        <textarea name="suggestion" class="feedback__textarea" placeholder="What would you like me to change? More of something, less of another, different topics..."></textarea>
                        <div class="feedback__actions">
                            <button type="button" class="btn btn--secondary" data-feedback-cancel>Cancel</button>
                            <button type="submit" class="btn btn--primary">Send</button>
                        </div>
                    </div>
                </form>
            <?php endif; ?>

        </div>
    </div>

    <!-- =================================================================
         JAVASCRIPT

         The app.js handles:
         - Theme detection (auto dark/light mode based on system preference)
         - Animation system (staggered fade-in via content-item class)
         - Favicon loading (auto-fetches from href domain)
         - External links (adds target="_blank" and rel="noopener")
         - Feedback form expand/collapse

         IMPORTANT FOR ANIMATIONS:
         - Every animated element needs the "content-item" class
         - The JS assigns --animation-index based on DOM order
         - Cards use fadeIn (not fadeInUp) to avoid transform conflicts
         ================================================================= -->
    <script src="js/app.js"></script>
</body>
</html>
