Real-Time Sync
GitHub Sync Engine
The RealTimeGitHubSync class manages all content synchronization with GitHub, ensuring the site always displays the latest content.
1
Class Initialization
On page load,
RealTimeGitHubSync reads stored github_api_token and repository config from localStorage. Sets up internal state: lastSyncTime, isActiveSyncing = false.2
30-second Polling Timer
A
setInterval fires every 30,000 ms. Before making any network call, it checks isActiveSyncing — if already syncing, it skips that tick to prevent concurrent requests.setInterval(() => sync(), 30000)
3
Window Focus Trigger
A
window.addEventListener('focus') listener fires an immediate sync when the user returns to the tab. This ensures content is fresh even if the tab was in the background for a long time.window.addEventListener('focus', () => sync())
4
GitHub API Call
Fetches from
https://api.github.com/repos/{username}/{repository} using the stored token as Bearer auth. Lists repository contents and compares with locally cached versions.5
Merge & Cache Update
New content from GitHub is merged with any local
a3km_posts entries. Posts with _source:'localStorage' flag are kept even if not on GitHub. lastSyncTime is updated in localStorage. Concurrent sync protection
The isActiveSyncing boolean prevents multiple overlapping sync operations. If you rapidly switch tabs or rapidly focus the window, only one sync runs at a time. This prevents race conditions and duplicate API calls.
Bookmarks
Video Bookmarks
The bookmark button in the video viewer header saves/unsaves video IDs to localStorage. All bookmarks persist across sessions.
Saving a Bookmark
Tap the bookmark icon in the video viewer header. The icon turns filled. The video ID is added to the
savedVideos localStorage array. Instantly persisted — no server required.Viewing Saved Videos
The video list page reads
savedVideos from localStorage and filters the video grid. Bookmarked videos are visually highlighted. Remove a bookmark by tapping the icon again.Like State
The video player also tracks
isLiked state via a separate localStorage key. Unlike bookmarks (saved for later), likes are simple engagement markers. Both states are independent.Works Offline
Because bookmarks are localStorage-only, they work completely offline. If you bookmark a video while offline, the bookmark is still there when you reconnect. No sync to server happens for bookmarks.
Storage Reference
All localStorage Keys
Every key that A3KM Studio reads or writes to localStorage — your complete reference for debugging and understanding persistence.
| Key | What it stores | Where set | Type |
|---|---|---|---|
| savedVideos | Array of bookmarked video IDs | Video viewer header bookmark button | JSON array |
| a3km_posts | Written posts (both GitHub + locally drafted). Each post may have _source:'localStorage' flag |
Post Reader, GitHub sync merge | JSON array |
| lastSyncTime | Timestamp of last successful GitHub sync (Date.now()) | RealTimeGitHubSync after each sync | Number (ms) |
| github_api_token | GitHub Personal Access Token for API calls | Only-Boss Command Center > API Config | String |
| youtube_api_key | YouTube Data API v3 key for enriched video data | Only-Boss Command Center > API Config | String |
| a3km_last_update_check | Timestamp of last version.json check by update notifier | update-notifier.js (checks every 6h) | Number (ms) |
| pwa_install_dismissed | How many times the PWA install prompt was dismissed | pwa-install-prompt.js | Number (max 3) |
| pwa_install_remind_after | Timestamp after which to re-show the install prompt | pwa-install-prompt.js (set to +7 days) | Number (ms) |
Debug tip: clear specific keys
Open DevTools > Application > Local Storage to inspect or delete any of these keys. Deleting pwa_install_dismissed will re-enable the install prompt. Deleting a3km_last_update_check forces an immediate version check on next load.
Navbar Auto-Hide
Smart Navbar Behavior
The navbar auto-hides on scroll through a priority system — not a simple show/hide toggle.
1
Mouse hover (highest priority)
Moving the mouse near the top of the screen immediately reveals the navbar. Overrides scroll state.
2
Scroll direction
Scrolling up shows the navbar; scrolling down hides it. Direction is calculated from delta between scroll positions.
3
Inactivity timer
After 3 seconds of no scroll and no mouse movement, the navbar auto-hides (on sub-pages only, not the home page).
Applies to sub-pages only
The navbar auto-hide only activates on sub-pages (content pages, viewers, project pages). The home page always shows the navbar. This prevents disorientation on landing.
Desktop behavior
- Mouse proximity to top reveals instantly
- Scroll down 80px → hide
- Scroll up any amount → show
- 3s inactivity → auto-hide
- CSS transition: opacity + transform
Mobile behavior
- No mouse, scroll direction only
- Swipe up → hide navbar
- Swipe down → show navbar
- Touch end → short grace period before hide
- More aggressive hiding for vertical space
Technical Details
Code Reference
Key Files
GitHub sync class
Optimization/realtime-github-sync.js → RealTimeGitHubSync
Sync interval
30,000 ms (30 seconds)
Sync trigger 2
window.addEventListener('focus', ...)
Concurrent lock
isActiveSyncing (bool, prevents overlapping)
GitHub API endpoint
https://api.github.com/repos/{username}/{repository}
Bookmark storage
localStorage: savedVideos (JSON array of IDs)
Posts key
localStorage: a3km_posts (JSON array, merged)
Local post flag
_source:'localStorage' property on post object
Navbar auto-hide
Optimization/navbar-autohide.js + navbar-autohide.css
Navbar priority
Mouse proximity > Scroll direction > Inactivity timer
Update check interval
Every 6 hours → version.json → update-notifier.js
Explore More
Other Feature Guides
More deep-dives into A3KM Studio features — shortcuts, hidden tricks, mobile vs desktop comparisons and code references.