Calendar System Migration Summary

Migration Date

July 16, 2026

Overview

Migrated the calendar system from scattered files in assets/js/pages/calendar/ and _sass/open-coding/calendar.scss into the unified _projects/systems/calendar/ workflow.

Before (Old Structure)

Source Files

assets/js/pages/calendar/
├── CalendarApi.js
├── CalendarData.js
├── CalendarTests.js
├── CalendarUI.js
├── EventBuilder.js
└── calendar.js

_sass/open-coding/
└── calendar.scss

Issues with Old Structure

• JavaScript and styles were in separate, distant locations
• No single place to understand the full calendar system
• Documentation was fragmented across multiple locations
• Build process was manual and error-prone
• No auto-rebuild during development

After (New Structure)

Source Files (Tracked in Git)

_projects/systems/calendar/
├── README.md                   # Comprehensive documentation
├── Makefile                    # Automated build system
├── js/                         # All JavaScript in one place
│   ├── CalendarApi.js
│   ├── CalendarData.js
│   ├── CalendarTests.js
│   ├── CalendarUI.js
│   ├── EventBuilder.js
│   └── calendar.js
├── sass/                       # All styles in one place
│   └── main.scss
└── docs/                       # Project-specific docs
    └── MIGRATION.md           # This file

Generated Files (Ignored by Git)

assets/js/projects/calendar/    # Generated JavaScript
├── CalendarApi.js
├── CalendarData.js
├── CalendarTests.js
├── CalendarUI.js
├── EventBuilder.js
└── calendar.js

_sass/projects/calendar/        # Generated SASS
└── main.scss

assets/css/projects/calendar/   # Generated CSS entry
└── main.scss                   # (with Jekyll frontmatter)

Migration Steps Performed

1. ✅ Created project structure at _projects/systems/calendar/
2. ✅ Copied all JavaScript files to _projects/systems/calendar/js/
3. ✅ Copied calendar.scss to _projects/systems/calendar/sass/main.scss
4. ✅ Created Makefile with build, assets, clean, watch targets
5. ✅ Registered systems/calendar:dev in _projects/.makeprojects
6. ✅ Updated _includes/calendar.html script paths from pages/calendar to projects/calendar
7. ✅ Updated _sass/open-coding/_main.scss import from calendar to projects/calendar/main
8. ✅ Created comprehensive README.md documentation
9. ✅ Tested build system successfully

Benefits of New Structure

1. Single Source of Truth

All calendar code (JS, SASS, docs) lives in one directory: _projects/systems/calendar/

2. Automated Build System

# Build the calendar
make build

# Watch for changes (auto-rebuild)
make watch

# Clean generated files
make clean

3. Better Documentation

• Centralized README with architecture overview
• Clear separation of source vs. generated files
• Migration history (this document)

4. Development Workflow

• Auto-registration via .makeprojects
• Auto-build in dev mode (:dev suffix)
• Watch mode for live reload during development

5. Consistent Patterns

• Follows same structure as other projects (games, lessons, systems)
• Uses template Makefile patterns
• Integrates with existing build toolchain

File Path Changes

JavaScript Loads (in _includes/calendar.html)

Before:

<script src="/assets/js/pages/calendar/CalendarData.js"></script>
<script src="/assets/js/pages/calendar/EventBuilder.js"></script>
<script src="/assets/js/pages/calendar/CalendarApi.js"></script>
<script src="/assets/js/pages/calendar/CalendarUI.js"></script>
<script src="/assets/js/pages/calendar/calendar.js"></script>

After:

<script src="/assets/js/projects/calendar/CalendarData.js"></script>
<script src="/assets/js/projects/calendar/EventBuilder.js"></script>
<script src="/assets/js/projects/calendar/CalendarApi.js"></script>
<script src="/assets/js/projects/calendar/CalendarUI.js"></script>
<script src="/assets/js/projects/calendar/calendar.js"></script>

SASS Import (in _sass/open-coding/_main.scss)

Before:

@import "calendar";

After:

@import "projects/calendar/main";

Old Files Status

✅ All old files have been removed:

• assets/js/pages/calendar/ ✅ Removed
• _sass/open-coding/calendar.scss ✅ Removed
• navigation/calendar.md ✅ Removed (moved to index.md)
• _posts/Foundation/H-code/2026-03-21-calendar-architecture.md ✅ Moved to docs/ARCHITECTURE.md

The migration is complete and verified.

Testing Checklist

• Build system works (make build)
• JavaScript files copied to correct location
• SASS files copied to correct location
• Jekyll frontmatter CSS file created
• Calendar page loads without errors
• All tabs work (Calendar, CS Pathway, Issues, Threads)
• Event creation works
• Issue tracking works
• Theme switching works (dark/light/sepia)
• Watch mode works (make watch)
• Old files removed
• Architecture doc moved to project

✅ Migration complete and verified

Architecture Understanding

Interface Layer vs. Calendar Project

_includes/calendar.html is NOT part of this project:

• It’s the interface layer between sprint pages and the calendar system
• Lives in _includes/ (standard Jekyll location)
• Used by _layouts/sprint.html for “Sync to Calendar” functionality
• Relationship: Sprint system → calendar.html (UI) → calendar API (this project)

This project provides:

• Calendar JS modules (CalendarData, EventBuilder, CalendarApi, CalendarUI, calendar.js)
• Calendar styles (SASS)
• Calendar page (index.md) - main dashboard
• Calendar backend integration

The include is a consumer of the calendar system, not part of it.

References

• Project Architecture: docs/ARCHITECTURE.md
• Project Registration: _projects/REGISTRATION.md
• Build System: Makefile (root)
• Agent Instructions: AGENTS.md