Daily Devlog UI

A static web interface that displays your daily development logs by parsing a CSV file generated from your automated devlog scripts. This project provides a simple, responsive UI to showcase your GitHub activities—such as commits, issues, pull requests, forks, and releases—in a clean card-based layout that is easily publishable via GitHub Pages.

Overview

The Daily Devlog UI project is designed to complement your development portfolio. It uses a CSV output file (devlog-csv.csv) generated by a Python script (devlog_csv.py) that collects and aggregates your GitHub activity. The web interface (built with vanilla HTML, CSS, and JavaScript) reads the CSV data, groups entries by date, and displays them in an organized and readable manner.

By publishing the project on GitHub Pages, the website is served as a static site with all assets (HTML, CSS, JavaScript, and CSV data) bundled together. This eliminates the need for a backend server during runtime.

Features

• CSV-Driven Content:
  Reads data from the devlog-csv.csv file to display your GitHub activity logs.

• Grouped and Sorted Display:
  Entries are automatically grouped by date and sorted by time to accurately reflect your daily progress.

• Responsive UI:
  The card-based design works on both desktop and mobile devices.

• Static Hosting Friendly:
  Easily deployed on GitHub Pages or any other static hosting service.

• Easy Data Update Workflow:
  Run the Python script (devlog_csv.py) to update the CSV file with your latest devlog data, then republish the site.

File Structure

.
├── index.html        # Main HTML file that sets up the web interface.
├── styles.css        # Stylesheet for the UI layout and design.
├── script.js         # JavaScript that fetches, parses, and renders CSV data.
├── devlog-csv.csv    # CSV file with devlog data (generated by devlog_csv.py).
├── devlog_csv.py     # Python script to generate/update the CSV file.
└── README.md         # This file.

Getting Started

Prerequisites

• GitHub Account & GitHub Pages:
  Set up a GitHub repository and enable GitHub Pages to publish the project.

• Python Environment (for updating CSV):
  Ensure you have Python 3.x installed to run the CSV generation script.

• GitHub Token:
  For generating the CSV file via devlog_csv.py, set the GITHUB_TOKEN environment variable with the appropriate permissions.

Development

1. Clone the Repository:

   git clone https://github.com/yourusername/your-repo-name.git
   cd your-repo-name

2. Generate/Update the CSV File:

   Update line 16 of the Python script: USERNAME = 'YOUR_USERNAME', to include your github username.

   Run the Python script to generate or update the CSV file:

   python devlog_csv.py -since YYYY-MM-DD

   Replace YYYY-MM-DD with the desired start date for collecting GitHub activity.

3. Test Locally:

   While you can simply open index.html for testing, some browsers require a local server to properly load external files. You can run a simple HTTP server with Python:

   python -m http.server 8000

   Then navigate to http://localhost:8000.

4. Review and Modify:

   Open the project files (index.html, styles.css, and script.js) in your preferred editor to make any adjustments. The UI is designed to read the CSV file from the project folder without additional server-side processing.

How It Works

1. CSV Generation:
   The devlog_csv.py script fetches your GitHub activity (commits, issues, pull requests, forks, and releases) via the GitHub API and writes the results to devlog-csv.csv. Each row represents an activity with the following columns:

   • date (YYYY-MM-DD)
   • time (HH:MM:SS)
   • repository
   • activity (e.g., commit, issue, pull_request, fork, release)
   • description

2. CSV Parsing and UI Rendering:
   The JavaScript in script.js:

   • Reads the CSV file using the Fetch API.
   • Parses the CSV text into JavaScript objects.
   • Groups log entries by date and sorts them in the proper order.
   • Dynamically generates HTML elements to display the information in a card-based layout.

3. Deployment:
   Once the CSV and web files are updated, commit all changes to the repository. GitHub Pages automatically serves the static site with all of the latest content.

Deployment on GitHub Pages

If your repository is set up for GitHub Pages, simply push your latest commits to the repository. GitHub Pages will serve all files (including index.html, styles.css, script.js, and devlog-csv.csv) automatically.

Make sure your repository structure looks similar to the one detailed above and that your CSV file is in the correct relative path. Your project should work on GitHub Pages without any additional configuration.

Contributing

Contributions are welcome! If you have suggestions or improvements, please:

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes and push to your branch.
4. Create a Pull Request detailing your changes.