feat: add sticky announcement banner for Golden Kodee Community Awards#2427
Open
DevPicon wants to merge 47 commits intobarryclark:masterfrom
Open
feat: add sticky announcement banner for Golden Kodee Community Awards#2427DevPicon wants to merge 47 commits intobarryclark:masterfrom
DevPicon wants to merge 47 commits intobarryclark:masterfrom
Conversation
Major changes: - Migrated from Jekyll to Next.js 14 with TypeScript - Implemented responsive layout with avatar left, content right - Added dark/light theme toggle with localStorage persistence - Integrated optimized logos (96% size reduction) with correct aspect ratio - Created dynamic content management system via JSON - Implemented smooth animations with Framer Motion - Added sticky navbar with @DevPicon branding - Configured GitHub Actions for automatic deployment - Created comprehensive documentation (CLAUDE.md, CONTENT_GUIDE.md, IMAGE_OPTIMIZATION.md) Technical stack: - Next.js 14 (SSG), TypeScript, Tailwind CSS - Framer Motion, Lucide React icons - Image optimization with Sharp - Bilingual support structure (ES/EN ready) Performance improvements: - Logos: 231KB → 8KB (96% reduction) - Avatar: optimized to 800x800px - Responsive images with Next.js Image component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Armando Picón <[email protected]>
Features: - GitHub Action for daily content updates (8:00 AM UTC) - Secure API key management via GitHub Secrets - Script to fetch latest content from YouTube, Spotify, Dev.to, and Medium - Dev.to and Medium already working (no config needed) - YouTube and Spotify ready for API configuration Changes: - Added .github/workflows/update-content.yml for automation - Added scripts/update-content.js with API integrations - Added dotenv for environment variable management - Updated content.json structure with image support - Created comprehensive documentation: - GITHUB_SECRETS_SETUP.md (step-by-step secrets config) - API_SETUP.md (detailed API setup guide) - .env.local.example (template for local dev) Security: - API keys stored in GitHub Secrets (never in code) - .gitignore protects .env.local files - Safe for public repositories Usage: - Manual: npm run update:content - Automatic: Daily via GitHub Actions - Manual trigger available in Actions tab 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Armando Picón <[email protected]>
- Added YOUTUBE_QUICKSTART.md with 10-min setup guide - Added get-youtube-channel-id.js helper script - Makes YouTube API configuration easier Co-Authored-By: Armando Picón <[email protected]>
feat: Complete redesign from Jekyll to Next.js 14
This is more secure as it allows manual review before merging content updates. - Uses peter-evans/create-pull-request action - Creates auto-update-content branch - Automatically deletes branch after merge - Adds labels for easy filtering Co-Authored-By: Armando Picón <[email protected]>
Updated at 2025-10-31T18:53:54Z 🤖 Automated update via GitHub Actions Co-authored-by: DevPicon <[email protected]> Co-authored-by: Armando Picón <[email protected]>
Updated at 2025-10-31T18:56:35Z 🤖 Automated update via GitHub Actions Co-authored-by: DevPicon <[email protected]> Co-authored-by: Armando Picón <[email protected]>
Co-Authored-By: Armando Picón <[email protected]>
Now the content update workflow will only run when manually triggered, giving you full control over when to update the site content. Co-Authored-By: Armando Picón <[email protected]>
Session Summary (2025-10-31): - Complete redesign from Jekyll to Next.js 14 ✅ - Implemented dark/light theme toggle ✅ - Optimized images (96% reduction) ✅ - Set up automated content fetching (YouTube, Dev.to, Medium) ✅ - Configured GitHub Actions with secure API management ✅ - Changed workflow to PR-based updates ✅ - Fixed YouTube Channel ID ✅ - Configured manual workflow trigger ✅ - Successfully deployed to GitHub Pages ✅ Documentation Updates: - Updated CLAUDE.md with latest project state and recent updates - Created GEMINI.md for Google Gemini AI context - Created AGENTS.md for ChatGPT/Codex/Copilot context - Created SESSION_SUMMARY_2025-10-31.md with comprehensive session details All context files now synchronized with current project state. Site live at: https://devpicon.github.io 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Added Client Credentials OAuth flow - Fetches latest podcast episode from Spotify - Handles authentication and token management - Extracts episode title, description, URL, date, and image Co-Authored-By: Armando Picón <[email protected]>
Updated at 2025-10-31T21:33:08Z 🤖 Automated update via GitHub Actions Co-authored-by: DevPicon <[email protected]> Co-authored-by: Armando Picón <[email protected]>
…tion Updates all AI context files and session summary with complete Spotify API integration details: - CLAUDE.md: Added Spotify secrets configuration and integration details - GEMINI.md: Added Spotify Web API endpoints and OAuth flow documentation - AGENTS.md: Added Spotify configuration and environment variables - SESSION_SUMMARY_2025-10-31.md: Added detailed Spotify implementation section All 4 content sources now fully documented: - YouTube (video) via Data API v3 - Spotify (podcast) via Web API + OAuth - Dev.to (blog) via REST API - Medium (blog) via RSS feed Site live at: https://devpicon.github.io Latest podcast episode successfully integrated and displaying. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Created comprehensive contact page with: - ContactHero with animated background gradients - NewsletterSection with Mailchimp integration (placeholder) - ProfessionalContact with [email protected] and copy button - SocialLinks with YouTube, Spotify, GitHub, LinkedIn, Dev.to, Medium - Updated Navbar to include 'Inicio' and 'Contacto' links - Responsive design with dark/light mode support - Framer Motion animations throughout Features: • Email copy-to-clipboard functionality • Specialties showcase (Android, Architecture, Consulting, Speaking) • Social media cards with hover effects • Mailchimp integration ready (needs form embed code) • Full mobile responsiveness Co-Authored-By: Armando Picón <[email protected]>
- Implement next-intl for bilingual support (Spanish/English) - Add complete translation files for all components - Add language switcher to Navbar with language detection - Update all components to use i18n hooks - Translate page metadata for SEO - Add special note in English about Spanish content - Integrate Mailchimp newsletter form with translations - Simplify newsletter form to only request email - Fix navigation links to include locale prefix - Add root page with browser language detection 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…tion Updated all AI context files with comprehensive documentation of the evening session work including: - Complete internationalization implementation (Spanish/English) - next-intl integration with locale routing - Language switcher with flag icons - Complete translation files (150+ keys per language) - Mailchimp newsletter integration (email-only form) - Navigation improvements with locale-aware links - SEO metadata in both languages Documentation updates: - CLAUDE.md: Added i18n implementation details and technical decisions - GEMINI.md: Updated status, features, and future enhancements - AGENTS.md: Added evening session summary and completion status - SESSION_SUMMARY_2025-10-31.md: Comprehensive evening session log All changes committed (056db57) and tested successfully. Site ready for production deployment with bilingual support. Generated with Claude Code Co-Authored-By: Claude <[email protected]>
- Update all context files to reflect new custom domain - Change deployment URL from devpicon.github.io to picon.dev - Update project status with custom domain configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Analytics Implementation: - Integrate Google Analytics 4 (G-WRZ0G12DGD) - Add GoogleAnalytics component with consent mode - Track newsletter subscriptions as custom events - Optimize script loading with Next.js Script component GDPR Compliance: - Add CookieConsent banner with accept/reject options - Implement consent management with localStorage - Respect user privacy choices (analytics_storage) - Support bilingual consent messages (ES/EN) - Banner appears at bottom of page on first visit Privacy Features: - Analytics disabled by default until user accepts - Consent preference persists across sessions - Link to privacy policy (to be created) - Fully compliant with EU GDPR regulations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Privacy Policy Implementation: - Create comprehensive Privacy Policy page (/privacy) - Cover all data collection practices (Analytics, Newsletter) - Explain cookie usage and user rights (GDPR) - Detail third-party services (Google Analytics, Mailchimp) - Include contact information for privacy requests Features: - Complete Spanish and English translations - Professional layout with clear sections - Links to Google and Mailchimp privacy policies - Footer link to privacy page on all pages - Responsive design matching site theme - SEO optimized metadata GDPR Compliance: - Explains user rights (access, rectification, erasure, etc.) - Details data collection and usage - Describes cookie types and control options - Provides clear contact method for privacy requests - Links from cookie consent banner Sections Included: 1. Introduction 2. Information We Collect 3. How We Use Your Information 4. Cookies 5. Third-Party Services 6. Your Rights (GDPR) 7. Data Security 8. Changes to This Policy 9. Contact Information 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Complete documentation of session work including: - Custom domain picon.dev configuration - Google Analytics 4 integration with GDPR consent mode - GDPR-compliant cookie consent banner implementation - Comprehensive Privacy Policy page in both languages All AI context files (CLAUDE.md, GEMINI.md, AGENTS.md) synchronized with latest changes. Session summary updated with detailed implementation notes and technical decisions. Site now fully GDPR compliant and live at https://picon.dev 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Issue: - Previous implementation didn't properly initialize consent mode - Consent state was set after gtag.js loaded (incorrect order) - Missing proper Consent Mode v2 configuration Solution: - Load consent mode configuration BEFORE gtag.js (strategy: beforeInteractive) - Set default consent to 'denied' for all storage types - Check localStorage and update consent if user previously accepted - Properly configure all Consent Mode v2 parameters: * analytics_storage * ad_storage * ad_user_data * ad_personalization - Add wait_for_update: 500ms to allow consent banner to load Technical Changes: - Split into 3 separate scripts with correct loading order: 1. Consent Mode initialization (beforeInteractive) 2. gtag.js library (afterInteractive) 3. GA configuration (afterInteractive) - Removed useState/useEffect (not needed, localStorage check is synchronous) - Added all required Consent Mode v2 parameters for GDPR compliance This follows Google's official documentation for custom consent implementations without Tag Manager. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Problem: - window.gtag was undefined when user clicked accept/reject - Consent update commands weren't being sent to GA - Tag Assistant showed consent remained 'denied' after accepting Solution: - Initialize window.dataLayer if not exists - Define window.gtag function if not exists - Ensure gtag is available before calling consent update - Add console.log for debugging consent state changes This ensures the consent update command is properly sent to Google Analytics when the user accepts or rejects cookies. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Updated all AI context files with details from continuation session: - Fixed Google Consent Mode v2 implementation - Removed @next/third-parties package - Implemented proper gtag.js approach per Google documentation - Fixed script loading order (beforeInteractive for consent) - Verified with Google Tag Assistant - All consent flows working correctly Added comprehensive session summary documenting the consent mode fix and verification process. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Updated at 2025-11-01T03:53:27Z 🤖 Automated update via GitHub Actions Co-authored-by: DevPicon <[email protected]> Co-authored-by: Armando Picón <[email protected]>
Updated content fetching and display to show the 2 most recent YouTube videos to prevent newer content from being quickly replaced when posting frequently. Changes: - Modified update-content.js to fetch 2 videos (maxResults=2) - Changed data structure from single video object to videos array - Updated LatestContentSection to map and render multiple videos - Adjusted responsive grid from 3 to 4 columns (2 videos + podcast + blog) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Updated at 2025-11-20T23:33:50Z 🤖 Automated update via GitHub Actions Co-authored-by: DevPicon <[email protected]> Co-authored-by: Armando Picón <[email protected]>
Add a dismissible sticky banner above the navbar inviting visitors to vote for Armando Picón in the "In-Person Presence" category of the Golden Kodee Community Awards (deadline: March 22, 2026). - New AnnouncementBanner component with purple Kotlin-brand styling - Auto-hides after March 22 deadline (no manual cleanup needed) - Dismissible with localStorage persistence - Bilingual support (ES/EN) with short text variant for mobile - Fixed header wrapper in locale layout (banner + navbar stacked) - Dynamic paddingTop via CSS variable for correct content offset - Removed pt-16 from HeroSection (now handled by layout wrapper) Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
AnnouncementBannercomponent with purple Kotlin-brand styling above the navbarChanges
src/components/AnnouncementBanner.tsx— dismissible banner with localStorage persistence, bilingual (ES/EN), responsive (short text on mobile)src/app/[locale]/layout.tsx— wraps banner + navbar in a singlefixedcontainer; adds dynamicpaddingTopvia CSS variable--announcement-heightsrc/components/Navbar.tsx— removed ownfixedpositioning (now handled by parent wrapper)src/components/HeroSection.tsx— removedpt-16(now handled by layout wrapper)messages/es.json+messages/en.json— addedannouncementBannertranslation keysTest plan
kotl.in/f273m4in a new tabgolden-kodee-banner-dismissedfrom localStorage brings it back/,/contact,/privacy) is not hidden behind the header🤖 Generated with Claude Code