denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Clean up old files

Browse Source
This commit is contained in:
denshooter
2026-01-08 17:55:29 +01:00
parent cd4d2367ab
commit 3b2c94c699
35 changed files with 317 additions and 5472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
docs/CODING_DETECTION_DEBUG.md
View File

@@ -1,215 +0,0 @@
# Coding Detection Debug Guide
## Current Status
Your n8n webhook is returning:
```json
{
"coding": null
}
```
This means your n8n workflow isn't detecting coding activity.
## Quick Fix: Test Your n8n Workflow
### Step 1: Check What n8n Is Actually Receiving
Open your n8n workflow for `denshooter-71242/status` and check:
1. **Do you have a node that fetches coding data?**
- WakaTime API call?
- Discord API for Rich Presence?
- Custom webhook receiver?
2. **Is that node active and working?**
- Check execution history in n8n
- Look for errors
### Step 2: Add Temporary Mock Data (Testing)
To see how it looks while you set up real detection, add this to your n8n workflow:
**Add a Function Node** after your Discord/Music fetching, before the final response:
```javascript
// Get existing data
const existingData = $json;
// Add mock coding data for testing
const mockCoding = {
isActive: true,
project: "Portfolio Website",
file: "app/components/ActivityFeed.tsx",
language: "TypeScript",
stats: {
time: "2h 15m",
topLang: "TypeScript",
topProject: "Portfolio"
}
};
// Return combined data
return {
json: {
...existingData,
coding: mockCoding
}
};
```
**Save and test** - you should now see coding activity!
### Step 3: Real Coding Detection Options
#### Option A: WakaTime (Recommended - Automatic)
1. **Sign up**: https://wakatime.com/
2. **Install plugin** in VS Code/your IDE
3. **Get API key**: https://wakatime.com/settings/account
4. **Add HTTP Request node** in n8n:
```javascript
// n8n HTTP Request Node
URL: https://wakatime.com/api/v1/users/current/heartbeats
Method: GET
Authentication: Bearer Token
Token: YOUR_WAKATIME_API_KEY
// Then add Function Node to process:
const wakaData = $json.data;
const isActive = wakaData && wakaData.length > 0;
const latest = wakaData?.[0];
return {
json: {
coding: {
isActive: isActive,
project: latest?.project || null,
file: latest?.entity || null,
language: latest?.language || null,
stats: {
time: "calculating...",
topLang: latest?.language || "Unknown",
topProject: latest?.project || "Unknown"
}
}
}
};
```
#### Option B: Discord Rich Presence (If Using VS Code)
1. **Install extension**: "Discord Presence" in VS Code
2. **Enable broadcasting** in extension settings
3. **Add Discord API call** in n8n:
```javascript
// n8n HTTP Request Node
URL: https://discord.com/api/v10/users/@me
Method: GET
Authentication: Bearer Token
Token: YOUR_DISCORD_BOT_TOKEN
// Then process activities:
const activities = $json.activities || [];
const codingActivity = activities.find(a =>
a.name === 'Visual Studio Code' ||
a.application_id === 'vscode_app_id'
);
return {
json: {
coding: codingActivity ? {
isActive: true,
project: codingActivity.state || "Unknown Project",
file: codingActivity.details || "",
language: codingActivity.assets?.large_text || null
} : null
}
};
```
#### Option C: Simple Time-Based Detection
If you just want to show "coding during work hours":
```javascript
// n8n Function Node
const now = new Date();
const hour = now.getHours();
const isWorkHours = hour >= 9 && hour <= 22; // 9 AM - 10 PM
return {
json: {
coding: isWorkHours ? {
isActive: true,
project: "Active Development",
file: "Working on projects...",
language: "TypeScript",
stats: {
time: "Active",
topLang: "TypeScript",
topProject: "Portfolio"
}
} : null
}
};
```
## Test Your Changes
After updating your n8n workflow:
```bash
# Test the webhook
curl https://n8n.dk0.dev/webhook/denshooter-71242/status | jq .
# Should now show:
{
"coding": {
"isActive": true,
"project": "...",
"file": "...",
...
}
}
```
## Common Issues
### "Still shows null"
- Make sure n8n workflow is **Active** (toggle in top right)
- Check execution history for errors
- Test each node individually
### "Shows old data"
- Clear your browser cache
- Wait 30 seconds (cache revalidation time)
- Hard refresh: Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
### "WakaTime API returns empty"
- Make sure you've coded for at least 1 minute
- Check WakaTime dashboard to verify it's tracking
- Verify API key is correct
## What You're Doing RIGHT NOW
Based on the latest data:
- ✅ **Music**: Listening to "I'm Gonna Be (500 Miles)" by The Proclaimers
- ❌ **Coding**: Not detected (null)
- ❌ **Gaming**: Not playing
To make coding appear:
1. Use mock data (Option from Step 2) - instant
2. Set up WakaTime (Option A) - 5 minutes
3. Use Discord RPC (Option B) - 10 minutes
4. Use time-based (Option C) - instant but not accurate
## Need Help?
The activity feed will now show a warning when coding isn't detected with a helpful tip!
---
**Quick Start**: Use the mock data from Step 2 to see how it looks, then set up real tracking later!

375
docs/IMPROVEMENTS_SUMMARY.md
View File

@@ -1,375 +0,0 @@
# Portfolio Improvements Summary
**Date**: January 8, 2026
**Status**: ✅ All Issues Resolved
---
## 🎉 Issues Fixed
### 1. Safari `originalFactory.call` Error ✅
**Problem**: Runtime TypeError in Safari when visiting the site during development.
**Error Message**:
```
Runtime TypeError
undefined is not an object (evaluating 'originalFactory.call')
```
**Root Cause**:
- React 19 + Next.js 15.5.9 + Webpack's module concatenation causing factory initialization issues
- Safari's stricter module handling exposed the problem
- Mixed CommonJS/ES6 module exports in `next.config.ts`
**Solution**:
1. Fixed `next.config.ts` to use proper ES6 module syntax (`export default` instead of `module.exports`)
2. Disabled webpack's `concatenateModules` in development mode for Safari compatibility
3. Added proper webpack optimization settings
4. Cleared `.next` build cache
5. Updated Jest configuration for Next.js 15 compatibility
**Files Modified**:
- ✅ `next.config.ts` - Fixed module exports and webpack config
- ✅ `jest.setup.ts` - Updated for Next.js 15 + React 19
- ✅ `jest.config.ts` - Modernized configuration
---
### 2. n8n Webhook Integration ✅
**Problem**: n8n status endpoint returning HTML error page instead of JSON.
**Error Message**:
```
Error fetching n8n status: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
```
**Root Cause**: Missing `/webhook/` prefix in the API URL path.
**Solution**:
Updated all n8n API routes to include the correct `/webhook/` prefix:
```diff
- ${process.env.N8N_WEBHOOK_URL}/denshooter-71242/status
+ ${process.env.N8N_WEBHOOK_URL}/webhook/denshooter-71242/status
```
**Files Modified**:
- ✅ `app/api/n8n/status/route.ts` - Fixed webhook URL
- ✅ `app/api/n8n/generate-image/route.ts` - Fixed webhook URL
- ✅ `app/api/n8n/chat/route.ts` - Already correct
- ✅ `env.example` - Added n8n configuration
**Test Results**:
```json
{
"status": {"text": "idle", "color": "yellow"},
"music": null,
"gaming": null,
"coding": null,
"timestamp": "2026-01-08T00:57:20.932Z"
}
```
---
## 🎨 Visual Improvements
### 3. Activity Feed Redesign ✅
**Improvements**:
- ✨ **Collapsible Design**: Smart minimize/expand functionality
- 🎯 **"RIGHT NOW" Indicators**: Clear visual badges for live activities
- 📦 **Compact Mode**: Minimizes to a small icon when closed
- 🎨 **Better Visual Hierarchy**: Gradient backgrounds, glows, and animations
- 📊 **Activity Counter**: Shows number of active activities at a glance
- 🎭 **Improved Animations**: Smooth transitions with Framer Motion
- 🌈 **Better Color Coding**:
- Coding: Green gradient with pulse effect
- Gaming: Indigo/Purple gradient with glow
- Music: Green with Spotify branding
- ⚡ **Smart Auto-Expand**: Opens automatically when new activity detected
- 🧹 **Clean Footer**: Status indicator + update frequency
**Before**: Multiple stacked cards, always visible, cluttered
**After**: Single collapsible widget, clean design, smart visibility
**Features Added**:
- Minimize button (X) - collapses to small icon
- Expand/collapse toggle with chevron icons
- Activity count badge on minimized icon
- "Right Now" badges for live activities
- Better typography and spacing
- Improved mobile responsiveness
---
### 4. Chat Widget Implementation ✅
**New Feature**: AI-powered chat assistant using n8n + Ollama
**Features**:
- 💬 **Beautiful Chat Interface**: Modern design with gradients
- 🤖 **AI-Powered Responses**: Integration with Ollama LLM via n8n
- 💾 **Conversation Memory**: Stores chat history in localStorage
- 🔄 **Session Management**: Unique conversation ID per user
- ⚡ **Real-time Typing Indicators**: Shows when AI is thinking
- 📝 **Quick Suggestions**: Pre-populated question buttons
- 🎨 **Dark Mode Support**: Adapts to user preferences
- 🧹 **Clear Chat Function**: Reset conversation easily
- ⌨️ **Keyboard Shortcuts**: Enter to send, Shift+Enter for new line
- 📱 **Mobile Responsive**: Works perfectly on all screen sizes
- 🎯 **Smart Positioning**: Bottom-left corner, doesn't overlap activity feed
**Files Created**:
- ✅ `app/components/ChatWidget.tsx` - Main chat component
- ✅ `docs/N8N_CHAT_SETUP.md` - Complete setup guide (503 lines!)
**Integration**:
- Added to `app/layout.tsx`
- Uses existing `/api/n8n/chat` route
- Supports multiple concurrent users
- Rate limiting ready (documented in setup guide)
---
## ⚡ Performance Optimizations
### 5. API Request Optimization ✅
**Changes**:
1. **Activity Feed Polling**: Reduced from 10s to 30s
- Matches server-side cache (30s revalidate)
- Reduces unnecessary requests by 66%
- No user-visible impact (data updates at same rate)
2. **Smarter Caching**:
- Changed from `cache: "no-store"` to `cache: "default"`
- Respects server-side cache headers
- Reduces server load
3. **Request Analysis**:
- n8n Status: 30s intervals ✅ (optimized)
- Projects API: Once on load ✅ (already optimal)
- Chat API: User-triggered only ✅ (already optimal)
**Before**: ~360 requests/hour per user
**After**: ~120 requests/hour per user (66% reduction)
---
## 📚 Documentation
### 6. Comprehensive Guides Created ✅
**N8N_CHAT_SETUP.md** (503 lines):
- Complete setup guide for n8n + Ollama chat integration
- Step-by-step workflow creation
- Conversation memory implementation (Redis/Session storage)
- Multi-user handling explained
- Rate limiting examples
- Security best practices
- Troubleshooting section
- Example n8n workflow JSON
- Performance tips
- 10+ code examples
**IMPROVEMENTS_SUMMARY.md** (this file):
- Complete overview of all changes
- Before/after comparisons
- Test results
- File change tracking
---
## 🧪 Testing Results
### All Tests Passing ✅
```bash
Test Suites: 11 passed, 11 total
Tests: 17 passed, 17 total
Time: 0.726s
```
**Tests Updated**:
- ✅ API route tests (email, fetchAllProjects, fetchProject, etc.)
- ✅ Component tests (Header, Hero, Toast)
- ✅ Error boundary tests
- ✅ Next.js 15 + React 19 compatibility
---
## 🔧 Configuration Changes
### Files Modified
**Core Configuration**:
- `next.config.ts` - ES6 exports, webpack config, Safari fixes
- `jest.setup.ts` - Next.js 15 compatible mocks
- `jest.config.ts` - Modernized settings
- `package.json` - No changes needed
- `tsconfig.json` - No changes needed
**API Routes**:
- `app/api/n8n/status/route.ts` - Fixed webhook URL
- `app/api/n8n/generate-image/route.ts` - Fixed webhook URL
- `app/api/n8n/chat/route.ts` - Already correct
**Components**:
- `app/components/ActivityFeed.tsx` - Complete redesign
- `app/components/ChatWidget.tsx` - New component
- `app/layout.tsx` - Added ChatWidget
**Documentation**:
- `docs/N8N_CHAT_SETUP.md` - New comprehensive guide
- `docs/IMPROVEMENTS_SUMMARY.md` - This file
- `env.example` - Added n8n configuration
---
## 🚀 Deployment Checklist
### Before Deploying
- [x] All tests passing
- [x] Safari error fixed
- [x] n8n integration working
- [x] Activity feed redesigned
- [x] Chat widget implemented
- [x] API requests optimized
- [x] Documentation complete
- [ ] Set up n8n chat workflow (follow N8N_CHAT_SETUP.md)
- [ ] Install and configure Ollama
- [ ] Test chat functionality end-to-end
- [ ] Verify activity feed updates correctly
- [ ] Test on Safari, Chrome, Firefox
- [ ] Test mobile responsiveness
- [ ] Set up monitoring/analytics
### Environment Variables Required
```bash
# n8n Integration
N8N_WEBHOOK_URL=https://n8n.dk0.dev
N8N_SECRET_TOKEN=your-secret-token # Optional
N8N_API_KEY=your-api-key # Optional
# Ollama (configured in n8n workflow)
OLLAMA_URL=http://localhost:11434
OLLAMA_MODEL=llama3.2
```
---
## 📊 Metrics
### Performance Improvements
| Metric | Before | After | Improvement |
|--------|--------|-------|-------------|
| API Requests/Hour | ~360 | ~120 | 66% reduction |
| Build Errors | 2 | 0 | 100% fixed |
| Safari Compatibility | ❌ | ✅ | Fixed |
| Test Pass Rate | 100% | 100% | Maintained |
| Code Quality | Good | Excellent | Improved |
### User Experience
| Feature | Before | After |
|---------|--------|-------|
| Activity Visibility | Always on | Smart collapse |
| Activity Indicators | Basic | "RIGHT NOW" badges |
| Chat Feature | ❌ None | ✅ AI-powered |
| Mobile Experience | Good | Excellent |
| Visual Design | Good | Premium |
| Performance | Good | Optimized |
---
## 🎯 Next Steps
### Recommended Improvements
1. **Chat Enhancements**:
- Implement conversation memory (Redis)
- Add rate limiting
- Implement streaming responses
- Add user analytics
2. **Activity Feed**:
- Add more activity types (reading, learning, etc.)
- Implement activity history view
- Add activity notifications
3. **Performance**:
- Implement Service Worker caching
- Add request deduplication
- Optimize bundle size
4. **Monitoring**:
- Add error tracking (Sentry)
- Implement uptime monitoring
- Add performance metrics
5. **Security**:
- Add CAPTCHA to chat
- Implement authentication for n8n webhooks
- Add CSP headers
---
## 🙏 Credits
**Technologies Used**:
- Next.js 15.5.9
- React 19
- TypeScript
- Framer Motion
- Tailwind CSS
- n8n (workflow automation)
- Ollama (local LLM)
- Jest (testing)
**Key Fixes**:
- Safari compatibility issue resolved
- n8n integration debugged and documented
- Performance optimizations implemented
- Beautiful UI/UX improvements
---
## 📞 Support
### If Issues Occur
1. **Safari Error Returns**:
- Clear `.next` directory: `rm -rf .next`
- Clear browser cache
- Check `next.config.ts` for proper ES6 exports
2. **n8n Not Working**:
- Verify webhook URL includes `/webhook/` prefix
- Test directly: `curl https://n8n.dk0.dev/webhook/denshooter-71242/status`
- Check n8n workflow is activated
3. **Chat Not Responding**:
- Verify Ollama is running: `curl http://localhost:11434/api/tags`
- Check n8n chat workflow is active
- Review n8n logs for errors
4. **Activity Feed Not Updating**:
- Check browser console for errors
- Verify n8n status endpoint returns valid JSON
- Check network tab for failed requests
---
**Status**: ✅ All systems operational
**Next Deploy**: Ready when chat workflow is configured
**Documentation**: Complete
---
*Last Updated: January 8, 2026*