{"id":30852339,"url":"https://github.com/neonwatty/blog","last_synced_at":"2026-05-12T18:20:43.000Z","repository":{"id":312184773,"uuid":"1046620542","full_name":"neonwatty/blog","owner":"neonwatty","description":"Personal blog about AI, tools, apps, and the exponential timeline we live in.","archived":false,"fork":false,"pushed_at":"2026-03-03T11:19:30.000Z","size":37582,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-03T13:48:47.301Z","etag":null,"topics":["ai-tools","blog","claude-code","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://neonwatty.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neonwatty.png","metadata":{"files":{"readme":"README.md","changelog":"newsletter-logos/default-thumbnail.png","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-08-29T00:55:36.000Z","updated_at":"2026-03-03T11:19:34.000Z","dependencies_parsed_at":"2025-08-29T05:52:16.600Z","dependency_job_id":"48d59874-7bf1-40e3-8bc5-c08b19a5cd61","html_url":"https://github.com/neonwatty/blog","commit_stats":null,"previous_names":["neonwatty/modern-nextjs-blog","neonwatty/blog"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/neonwatty/blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neonwatty%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neonwatty%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neonwatty%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neonwatty%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neonwatty","download_url":"https://codeload.github.com/neonwatty/blog/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neonwatty%2Fblog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30130032,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T12:40:50.676Z","status":"ssl_error","status_checked_at":"2026-03-05T12:39:32.209Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-tools","blog","claude-code","nextjs","typescript"],"created_at":"2025-09-07T08:04:31.168Z","updated_at":"2026-03-05T14:05:55.838Z","avatar_url":"https://github.com/neonwatty.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jeremy Watt's Blog\n\nA production-ready, high-performance blog built with Next.js 15, featuring excellent SEO, accessibility, and user experience.\n\n## ✨ Features\n\n- **🚀 Next.js 15** - Latest React framework with App Router\n- **📱 Responsive Design** - Mobile-first approach with Tailwind CSS\n- **🔍 Advanced SEO** - Structured data, meta tags, and sitemap\n- **♿ Accessibility** - WCAG 2.1 compliant with full keyboard navigation\n- **🔎 Search Functionality** - Fast, accessible search with keyboard navigation\n- **📊 Analytics Integration** - Built-in analytics and performance monitoring\n- **🧪 Testing Suite** - Unit tests with Jest and E2E tests with Playwright\n- **🎨 Modern UI** - Clean, professional design with dark mode support\n- **📄 Static Export** - Generates static files for optimal performance\n- **🔒 Security** - Security headers and best practices\n- **📡 RSS Feeds** - Multiple feed formats (RSS 2.0, JSON, Atom)\n- **🏷️ Tagging System** - Organized content with tag-based navigation\n- **📤 Social Sharing** - Native and platform-specific sharing options\n\n## 🛠️ Tech Stack\n\n- **Framework**: Next.js 15 with App Router\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS with custom design system\n- **Content**: Markdown with frontmatter\n- **Analytics**: Vercel Analytics \u0026 Speed Insights\n- **Testing**: Jest (unit) + Playwright (E2E)\n- **Deployment**: GitHub Pages via GitHub Actions\n- **Icons**: Heroicons + Lucide React\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ \n- npm or yarn\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003cyour-repo-url\u003e\ncd modern-blog\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Development Scripts\n\n```bash\n# Development\nnpm run dev          # Start development server\nnpm run dev:clean    # Clean .next and start dev server\n\n# Building\nnpm run build        # Build for production\nnpm run start        # Start production server\n\n# Code Quality\nnpm run lint         # Run ESLint\nnpm run lint:fix     # Fix ESLint errors\nnpm run type-check   # Run TypeScript checks\n\n# Testing\nnpm run test         # Run unit tests\nnpm run test:ci      # Run tests in CI mode with coverage\nnpm run test:e2e     # Run E2E tests\nnpm run test:e2e:ui  # Run E2E tests with UI\n\n# Content Generation\nnpm run generate:rss     # Generate RSS feeds\nnpm run generate:sitemap # Generate sitemap\n\n# Analysis\nnpm run analyze      # Analyze bundle size\n```\n\n## 📝 Content Management\n\n### Adding Blog Posts\n\n1. Create a new `.md` file in the `posts/` directory\n2. Add frontmatter with required fields:\n\n```markdown\n---\ntitle: \"Your Blog Post Title\"\ndate: \"2025-01-15\"\nexcerpt: \"A brief description of your post\"\ntags: [\"Next.js\", \"React\", \"TypeScript\"]\nfeatured: false\nauthor: \"Your Name\"\nimage: \"/images/post-image.jpg\" # Optional\nseoTitle: \"Custom SEO Title\" # Optional\nmetaDescription: \"Custom meta description\" # Optional\n---\n\n# Your Blog Post Content\n\nWrite your content here using standard Markdown syntax.\n```\n\n### Required Frontmatter Fields\n\n- `title`: Post title\n- `date`: Publication date (YYYY-MM-DD format)\n- `excerpt`: Brief description for previews\n- `tags`: Array of relevant tags\n- `author`: Author name\n\n### Optional Frontmatter Fields\n\n- `featured`: Set to `true` for featured posts\n- `image`: Featured image path\n- `seoTitle`: Custom SEO title (defaults to title)\n- `metaDescription`: Custom meta description (defaults to excerpt)\n- `canonicalUrl`: Custom canonical URL\n- `relatedPosts`: Array of related post IDs\n\n## 🎨 Customization\n\n### Styling\n\nThe blog uses Tailwind CSS with a custom configuration. Key files:\n\n- `tailwind.config.js` - Tailwind configuration\n- `app/globals.css` - Global styles and CSS variables\n- `components/` - Reusable styled components\n\n### Site Configuration\n\nUpdate these files to customize your blog:\n\n- `app/layout.tsx` - Site metadata and global settings\n- `components/Header.tsx` - Navigation and site title  \n- `components/Footer.tsx` - Footer content and links\n- `next.config.mjs` - Next.js configuration\n\n### Environment Variables\n\nCreate a `.env.local` file for local development:\n\n```env\nNEXT_PUBLIC_SITE_URL=http://localhost:3000\nNEXT_PUBLIC_GA_ID=your-google-analytics-id\nGOOGLE_VERIFICATION_CODE=your-google-verification-code\n```\n\n## 📊 Analytics Setup\n\n### Google Analytics Integration\n\nThe blog includes built-in Google Analytics 4 (GA4) support for tracking visitor traffic and engagement.\n\n#### Setup Instructions:\n\n1. **Create a Google Analytics Account**:\n   - Visit [Google Analytics](https://analytics.google.com/)\n   - Create a new GA4 property for your website\n   - Get your Measurement ID (format: `G-XXXXXXXXXX`)\n\n2. **Configure for Local Development**:\n   - Add to `.env.local`:\n   ```env\n   NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX\n   ```\n\n3. **Configure for Production (GitHub Pages)**:\n   - Go to your GitHub repository Settings\n   - Navigate to Secrets and variables → Actions\n   - Add a new repository secret named `GA_TRACKING_ID` with your GA4 ID\n\n#### Features Tracked:\n\n- **Page Views**: Automatic tracking of all page visits\n- **Blog Engagement**: \n  - Post views with reading progress (25%, 50%, 75%, 100%)\n  - Time on page for each post\n  - Tag clicks and navigation\n  - Social sharing events\n- **User Behavior**:\n  - Scroll depth tracking\n  - External link clicks\n  - Search usage\n  - Overall time on site\n- **Performance Metrics**:\n  - Page load times\n  - Search latency\n  - Image load performance\n\n#### Viewing Analytics:\n\nOnce configured, you can view your analytics at:\n- [Google Analytics Dashboard](https://analytics.google.com/)\n- Real-time data usually appears within minutes\n- Historical data and trends available after 24-48 hours\n\n### Alternative Analytics Options\n\nIf you prefer privacy-focused alternatives:\n\n1. **Cloudflare Web Analytics** (Recommended for privacy):\n   - Free, cookie-less analytics\n   - No personal data collection\n   - Server-side tracking available with custom domain\n\n2. **Plausible Analytics**:\n   - Privacy-friendly, GDPR compliant\n   - Simple, lightweight script\n   - Self-hosting option available\n\n3. **Umami**:\n   - Open-source, self-hosted\n   - Privacy-focused\n   - Simple setup\n\nTo use an alternative, replace the Google Analytics script in `app/layout.tsx` with your chosen provider's tracking code.\n\n## 🔍 SEO Features\n\n- **Structured Data**: JSON-LD for articles and website\n- **Meta Tags**: Open Graph and Twitter Card support\n- **Sitemap**: Auto-generated XML sitemap\n- **Robots.txt**: Search engine directives\n- **RSS Feeds**: Multiple feed formats\n- **Performance**: Optimized Core Web Vitals\n\n## ♿ Accessibility Features\n\n- **WCAG 2.1 AA Compliant**\n- **Keyboard Navigation**: Full keyboard accessibility\n- **Screen Reader Support**: Proper ARIA labels and landmarks  \n- **Focus Management**: Visible focus indicators\n- **Color Contrast**: Meets accessibility standards\n- **Semantic HTML**: Proper heading hierarchy and structure\n\n## 🧪 Testing\n\n### Unit Tests\n\nLocated in `__tests__/` directory. Run with:\n\n```bash\nnpm run test\nnpm run test:ci # With coverage\n```\n\n### E2E Tests  \n\nLocated in `tests/e2e/` directory. Run with:\n\n```bash\nnpm run test:e2e\nnpm run test:e2e:ui # With Playwright UI\n```\n\n### Test Coverage\n\nThe project maintains high test coverage with thresholds:\n- Branches: 70%\n- Functions: 70% \n- Lines: 70%\n- Statements: 70%\n\n## 🚀 Deployment\n\n### GitHub Pages (Recommended)\n\n1. Enable GitHub Pages in your repository settings\n2. Set source to \"GitHub Actions\"\n3. Push to main branch - deployment happens automatically\n4. Update `NEXT_PUBLIC_SITE_URL` in the workflow file\n\n### Manual Deployment\n\n```bash\nnpm run build\n# Copy the 'out' folder to your static hosting provider\n```\n\n### Environment Variables for Production\n\nSet these in your deployment environment:\n\n- `NEXT_PUBLIC_SITE_URL`: Your site's URL\n- `NEXT_PUBLIC_GA_ID`: Google Analytics ID (optional)\n\n## 📊 Performance\n\nThe blog is optimized for performance:\n\n- **Static Generation**: All pages pre-rendered at build time\n- **Image Optimization**: Next.js Image component with WebP support\n- **Code Splitting**: Automatic code splitting and lazy loading\n- **Bundle Analysis**: Built-in bundle analyzer\n- **Core Web Vitals**: Monitored with Vercel Speed Insights\n\n## 🔒 Security\n\nSecurity best practices implemented:\n\n- **Security Headers**: CSP, HSTS, and other protective headers\n- **Input Sanitization**: Safe markdown processing\n- **Dependencies**: Regular security audits and updates\n- **Environment Variables**: Secure handling of sensitive data\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Commit your changes: `git commit -m 'Add amazing feature'`\n4. Push to the branch: `git push origin feature/amazing-feature`\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🆘 Support\n\nIf you encounter any issues or have questions:\n\n1. Check the existing issues in the repository\n2. Create a new issue with a detailed description\n3. Include steps to reproduce the problem\n\n## 🙏 Acknowledgments\n\n- Next.js team for the amazing framework\n- Tailwind CSS for the utility-first CSS framework\n- Vercel for hosting and analytics solutions\n- The open-source community for inspiration and tools\n\n---\n\nBuilt with ❤️ using modern web technologies","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneonwatty%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneonwatty%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneonwatty%2Fblog/lists"}