DEV Community

Cover image for Building GitHub-Style Contribution Grids for dev.to Articles with Kiro AI IDE
kirodotdev profile image Gabriel Koo
Gabriel Koo for kirodotdev

Posted on

Building GitHub-Style Contribution Grids for dev.to Articles with Kiro AI IDE

#devto #kirodev #seo #analytics

How I created beautiful GitHub-style contribution graphs and traffic analytics for my dev.to articles using Kiro.dev - without writing much code myself

The Problem: Understanding Your Content's Impact

As a technical writer publishing on dev.to, I found myself constantly wondering about my articles' performance. Sure, dev.to provides basic stats, but I wanted something more comprehensive - something that could show me:

  • GitHub-style contribution grids for my writing activity
  • Traffic source analysis to understand where readers discover my content
  • Historical trends to see how articles perform over time
  • Beautiful visualizations I could embed anywhere

Working frequently with SEO teams, I was particularly interested in understanding traffic sources. Were my articles getting discovered through Google searches? LinkedIn shares? Twitter threads? Newsletter mentions? This data would be crucial for optimizing my content distribution strategy.

The Solution: GitHub-Style Analytics with Traffic Insights

What started as a simple idea turned into a comprehensive analytics system that fetches data from dev.to's API and generates beautiful SVG visualizations. The system creates GitHub-style contribution grids and tracks:

📊 Core Metrics

  • Views: Daily article view counts
  • Reactions: Likes, unicorns, and bookmarks
  • Comments: Reader engagement levels
  • Combined Activity: Weighted scoring system

🌐 Traffic Source Analysis

The system tracks where your readers come from and visualizes it in a beautiful pie chart:

  • Direct traffic (users typing your URL directly)
  • Search engines (Google, Bing, DuckDuckGo)
  • Social media (LinkedIn, Twitter, Facebook)
  • Developer platforms (GitHub, dev.to internal traffic)
  • Newsletters and blogs (Substack, personal blogs)
  • Professional tools (Slack, Microsoft Office)

Traffic sources pie chart showing distribution of 19,096 total views

📈 GitHub-Style Contribution Grids

The system generates six types of beautiful SVG visualizations:

  1. Views Activity Grid - GitHub-style contribution graph with green color scheme
  2. Reactions Activity Grid - Purple-themed grid showing engagement patterns
  3. Combined Activity Grid - Orange-themed weighted activity visualization
  4. Top Articles by Views - Horizontal bar chart of most-viewed content
  5. Top Articles by Reactions - Bar chart highlighting most engaging articles
  6. Traffic Sources Pie Chart - Visual breakdown of where your readers come from

The Magic: Built with Kiro.dev

Here's where the story gets interesting - I didn't write most of this code myself. The entire project was created using Kiro.dev, an AI-powered development environment that acts as your coding partner.

How Kiro.dev Transformed My Workflow

Instead of spending weeks researching APIs, designing data structures, and debugging visualization code, I simply described what I wanted:

"I want to create GitHub-style contribution grids for my dev.to articles, track traffic sources, and generate beautiful SVG visualizations I can embed anywhere."

Kiro.dev understood the requirements and generated the complete system:

  1. Data fetching - fetch_stats.py handles API integration with error handling and rate limiting
  2. Contribution grids - generate_advanced_graph.py creates GitHub-style activity visualizations
  3. Top articles charts - generate_top_articles.py generates ranking visualizations
  4. Traffic analysis - generate_traffic_pie_chart.py creates traffic source breakdowns
  5. Automation - .github/workflows/ sets up daily updates
  6. Data management - Smart incremental updates and referrer tracking

The Development Experience

Working with Kiro.dev felt like pair programming with an expert developer who:

  • Understood context - Grasped the full project scope from minimal descriptions
  • Made smart decisions - Chose appropriate data structures and algorithms
  • Wrote clean code - Generated well-documented, maintainable Python scripts
  • Anticipated needs - Added features I hadn't even thought of, like referrer tracking

The AI didn't just write code - it architected a complete solution.

Technical Deep Dive

Data Architecture

The system organizes data efficiently:

data/
├── articles/           # Individual article analytics
│   ├── {id}-{slug}.json
├── account.json        # Aggregated account stats
└── top_articles.json   # Rankings by metrics
Enter fullscreen mode Exit fullscreen mode

Each article file contains:

  • Basic metrics (views, comments, reactions)
  • Daily breakdown of activity
  • Referrer data showing traffic sources
  • Metadata for URL construction

API Integration

The system uses three dev.to API endpoints:

  • /analytics/historical - Historical analytics data
  • /analytics/referrers - Traffic source information
  • /articles/me/published - Article listings

Smart Updates

The fetcher implements intelligent incremental updates:

  • Only fetches new data since last update
  • Refreshes the second-to-last day to catch delayed analytics
  • Handles API rate limits gracefully
  • Maintains data integrity with backup strategies

Visualization Engine

The SVG generation system creates publication-ready graphics:

  • Responsive design that works at any size
  • Interactive tooltips with detailed information
  • Clickable elements linking to original articles
  • Multiple color schemes for different contexts

Key Insights from Traffic Analysis

After implementing this system, I discovered fascinating patterns in my content's reach:

Traffic Source Breakdown

From my 19,096 total views, the top 10 referrers account for 14,974 views (78.4%):

  1. Direct traffic (41.6%) - 7,939 views from users directly accessing articles
  2. Google.com (24.3%) - 4,639 views from organic search
  3. t.co (3.2%) - 619 views from Twitter links
  4. LinkedIn.com (3.0%) - 582 views from professional network shares
  5. dev.to (2.4%) - 459 views from platform internal discovery
  6. office.net (0.9%) - 172 views from Microsoft Office applications
  7. duckduckgo.com (0.9%) - 172 views from privacy-focused search
  8. bing.com (0.8%) - 158 views from Microsoft search
  9. facebook.com (0.6%) - 121 views from social media shares
  10. mrugalski.pl (0.6%) - 113 views from a personal blog referral

SEO Team Goldmine

This data proved invaluable for SEO strategy discussions:

  • Search dominance - Google alone drives 24.3% of traffic, with additional search engines contributing more
  • Social amplification - Twitter (3.2%) and LinkedIn (3.0%) show strong professional sharing
  • Platform dynamics - Only 2.4% comes from dev.to's internal discovery, showing external reach
  • Direct engagement - 41.6% direct traffic indicates strong brand recognition and bookmarking

Content Performance Patterns

The top-performing article "I bought us-east-1.com" generated 9,021 views with fascinating traffic patterns:

  • 71% direct traffic - Indicating strong word-of-mouth sharing
  • 6.6% Twitter traffic - Viral social media spread
  • 5.7% LinkedIn traffic - Professional network engagement

Showcasing Results: Raw GitHub Content Integration

One of the most powerful features is the ability to embed these visualizations anywhere using GitHub's raw content URLs. Here's how:

Step 1: Generate Your Visualizations 

# GitHub-style contribution grids
python3 generate_advanced_graph.py --metric views --color github
python3 generate_advanced_graph.py --metric reactions --color purple

# Top articles charts  
python3 generate_top_articles.py --metric reactions --count 3

# Traffic sources analysis
python3 generate_traffic_pie_chart.py
Enter fullscreen mode Exit fullscreen mode

Step 2: Embed in README Files 

![Views Activity](https://raw.githubusercontent.com/yourusername/yourrepo/main/graphs/devto_views_graph.svg)
![Top Articles](https://raw.githubusercontent.com/yourusername/yourrepo/main/graphs/top_3_reactions.svg)
![Traffic Sources](https://raw.githubusercontent.com/yourusername/yourrepo/main/graphs/traffic_sources_pie.svg)
Enter fullscreen mode Exit fullscreen mode

Step 3: Use in Documentation

The SVGs work perfectly in:

  • GitHub README files - Showcase your writing activity
  • Portfolio websites - Demonstrate content creation consistency
  • Blog posts - Visual proof of engagement metrics
  • Social media - Eye-catching performance summaries

README file showing embedded SVG graphs

Pro Tips for Display

  1. Repository structure - Keep graphs in a dedicated /graphs folder
  2. Naming convention - Use descriptive filenames like devto_views_graph.svg
  3. Update automation - GitHub Actions ensures graphs stay current
  4. Multiple formats - Generate different metrics and color schemes for various contexts

The Automation Layer

GitHub Actions keeps everything current with daily updates:

# Runs daily at midnight UTC
# Fetches latest analytics
# Generates updated visualizations
# Commits changes automatically
Enter fullscreen mode Exit fullscreen mode

This means your analytics dashboard stays fresh without any manual intervention.

Lessons Learned

1. AI-Assisted Development is Transformative

Kiro.dev didn't just speed up development - it elevated the entire solution. The AI suggested features and optimizations I wouldn't have considered, like:

  • Logarithmic scaling for better visualization distribution
  • Referrer data aggregation for traffic source analysis
  • Incremental update strategies for API efficiency

2. Data Visualization Drives Insights

Having visual representations of my writing activity revealed patterns invisible in raw numbers:

  • Consistency gaps in publishing schedule
  • Correlation between article topics and engagement
  • Traffic source diversity indicating content reach

3. SEO Integration is Crucial

The referrer tracking proved invaluable for SEO discussions:

  • Identifying high-performing traffic sources
  • Understanding content discovery patterns
  • Optimizing distribution strategies

Getting Started

Want to build your own analytics dashboard? The complete system is available as an open-source project. Here's how to get started:

Quick Setup

  1. Fork the repository - 📊 devto-stats-github-action
  2. Add your dev.to API key to GitHub Actions Secrets
  3. Enable GitHub Actions for automatic updates
  4. Customize visualizations to match your brand

Customization Options

  • Color schemes - GitHub green, purple, blue, or orange themes
  • Metrics focus - Emphasize views, reactions, or combined activity
  • Time ranges - Adjust historical data collection periods
  • Graph types - Modify visualization styles and layouts

Conclusion

Building this analytics dashboard taught me that the future of development isn't about replacing developers - it's about amplifying our capabilities. With Kiro.dev as my coding partner, I created a sophisticated system that would have taken weeks to build manually.

The insights gained from traffic source analysis have already improved my content strategy, and the beautiful visualizations provide compelling evidence of writing consistency and engagement.

Most importantly, this project demonstrates how AI-assisted development can help creators focus on what matters most - creating great content - while still building the tools needed to understand and optimize their impact.

Whether you're a technical writer, developer advocate, or content creator, having detailed analytics about your work's reach and impact is invaluable. And with tools like Kiro.dev, building these systems is more accessible than ever.

Ready to build your own analytics dashboard? Check out the complete source code and start tracking your content's impact today.

📊 devto-stats-github-action

Sample

Top comments (0)