mirror/TimeTracker
1
0
Fork 0
mirror of https://github.com/DRYTRIX/TimeTracker.git synced 2026-05-23 06:40:53 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
ed934100a026960c5d4f7d038db286853c4f5cab
TimeTracker/docs/ASSETS.md
T
Dries Peeters 8fc823c252 feat(pwa): static manifest, root-scoped worker, offline fallback 
Add app/static/manifest.json (TimeTracker / Tracker, indigo theme) and PNG install icons via scripts/generate_pwa_icons.py.

Replace inline Flask service worker with app/static/js/sw.js served at /service-worker.js for full-site scope. Cache name timetracker-v1: cache-first for /static, network-first for HTML and non-v1 /api, no interception of /api/v1/* (preserves Authorization).

Add public GET /offline and offline.html for SW navigation fallback; redirect /manifest.webmanifest to the static manifest.

Wire base.html (manifest link, theme-color #4F46E5, SW registration) and pwa-enhancements.js (ready/update/push without duplicate registration). Remove legacy app/static/service-worker.js and manifest.webmanifest.

Tests: service worker and offline routes, manifest redirect, TestPWA expectations; drop duplicate test_enhanced_ui app/client fixtures in favor of conftest.

Docs: ASSETS.md, BUILD_CONFIGURATION.md, implementation notes, and incomplete-features analysis updated for new paths.
2026-04-27 18:43:14 +02:00

6.4 KiB
Raw Blame History

Asset Management Guide

This document provides an inventory of all branding assets and their usage in the TimeTracker application.

Asset Inventory

Logo Files

Primary Logos

  • app/static/images/timetracker-logo.svg - Main logo (default)

    • Usage: Primary branding, headers, navigation
    • Format: SVG (vector)

  • app/static/images/timetracker-logo-light.svg - Light background variant

    • Usage: Light mode interfaces
    • Format: SVG (vector)

  • app/static/images/timetracker-logo-dark.svg - Dark background variant

    • Usage: Dark mode interfaces
    • Format: SVG (vector)

  • app/static/images/timetracker-logo-icon.svg - Icon-only variant

    • Usage: Favicons, app icons, small spaces
    • Format: SVG (vector)

  • app/static/images/timetracker-logo-horizontal.svg - Horizontal layout

    • Usage: Wide headers, marketing materials
    • Format: SVG (vector)

  • desktop/assets/logo.svg - Desktop app logo

    • Usage: Desktop application branding
    • Format: SVG (vector)

Favicon Files

Web Application Favicons

  • app/static/images/favicon.ico - Traditional favicon

    • Status: ⚠️ Needs generation
    • Sizes: 16x16, 32x32, 48x48
    • Usage: Browser tabs, bookmarks

  • app/static/images/apple-touch-icon.png - Apple Touch Icon

    • Status: ⚠️ Needs generation
    • Size: 180x180px
    • Usage: iOS home screen

  • app/static/images/android-chrome-192x192.png - Android Chrome Icon (small)

    • Status: ⚠️ Needs generation
    • Size: 192x192px
    • Usage: Android home screen, PWA

  • app/static/images/android-chrome-512x512.png - Android Chrome Icon (large)

    • Status: ⚠️ Needs generation
    • Size: 512x512px
    • Usage: Android home screen, PWA

Desktop Application Icons

Windows

  • desktop/assets/icon.ico - Windows application icon
    • Status: ⚠️ Needs generation
    • Sizes: 16x16, 32x32, 48x48, 256x256 (multi-resolution)
    • Usage: Windows taskbar, file explorer, installer

macOS

  • desktop/assets/icon.icns - macOS application icon
    • Status: ⚠️ Needs generation
    • Size: 512x512px (multi-resolution)
    • Usage: macOS dock, Finder, installer

Linux

  • desktop/assets/icon.png - Linux application icon
    • Status: ⚠️ Needs generation
    • Size: 512x512px
    • Usage: Linux launchers, AppImage

Social Media Assets

Open Graph Image

  • app/static/images/og-image.png - Open Graph social sharing image
    • Status: ⚠️ Needs creation
    • Size: 1200x630px
    • Format: PNG
    • Usage: Social media link previews (Twitter, Facebook, LinkedIn)

Screenshots

  • assets/screenshots/ - Application screenshots
    • Status: ✅ Existing
    • Usage: Documentation, marketing, app stores

Generation Instructions

Automated Generation

Use the provided script to generate most icons:

cd TimeTracker
npm install sharp  # If not already installed
node scripts/generate-icons.js

This will generate:

  • PNG versions of icons
  • Basic favicon files
  • Desktop icon placeholders

Manual Generation Required

Some formats require manual conversion:

Windows .ico File

  1. Use the generated desktop/assets/icon-256x256.png
  2. Convert using:
    • Online: CloudConvert or ConvertICO
    • ImageMagick: convert icon-256x256.png -define icon:auto-resize=256,128,64,48,32,16 icon.ico
  3. Save as desktop/assets/icon.ico

macOS .icns File

  1. Use the generated desktop/assets/icon-512x512.png
  2. On macOS, create icon set: 
    mkdir icon.iconset
# Copy PNG at various sizes into iconset
iconutil -c icns icon.iconset -o icon.icns
  3. Or use online converter: iConvert Icons
  4. Save as desktop/assets/icon.icns

Open Graph Image

  1. Create 1200x630px image
  2. Include:
    • TimeTracker logo
    • Tagline: "Professional Time Tracking"
    • Brand gradient background
  3. Save as app/static/images/og-image.png

Recommended Tools

Online Converters:

Design Tools:

  • Figma - For creating OG images
  • Adobe Illustrator - For logo variations
  • Canva - For social media graphics

Command Line:

  • ImageMagick - For batch processing
  • Sharp (Node.js) - For programmatic generation

File Size Guidelines

  • SVG logos: Keep under 50KB
  • PNG icons: Optimize, keep under 100KB each
  • ICO files: Multi-resolution, typically 50-200KB
  • ICNS files: Multi-resolution, typically 200-500KB
  • OG images: Optimize, keep under 500KB

Usage Locations

Web Application

  • Base template: app/templates/base.html
  • Login page: app/templates/auth/login.html
  • About page: app/templates/main/about.html
  • PWA manifest: app/static/manifest.json (linked from base.html; GET /manifest.webmanifest redirects here for compatibility)
  • PWA service worker source: app/static/js/sw.js (served at GET /service-worker.js for site-wide scope; registered from base.html)
  • PWA offline fallback page: app/templates/offline.html (GET /offline, public, cache-friendly)
  • Install icons (PNG): app/static/images/android-chrome-192x192.png, android-chrome-512x512.png — regenerate with python3 scripts/generate_pwa_icons.py after visual changes

Desktop Application

  • Main window: desktop/src/main/window.js
  • Splash screen: desktop/src/renderer/splash.html
  • Login screen: desktop/src/renderer/index.html
  • Package config: desktop/package.json

Maintenance

Version Control

  • All assets are tracked in git
  • Document changes in commit messages
  • Archive old versions when updating

Updates

  1. Update source SVG if logo changes
  2. Regenerate all derived assets
  3. Update references in code
  4. Test on all platforms
  5. Update documentation

Quality Checks

  • Verify all sizes render correctly
  • Test on target platforms
  • Check file sizes
  • Validate formats
  • Ensure accessibility (contrast, readability)

Notes

  • SVG is preferred for logos (scalable, small file size)
  • PNG is used for raster icons and screenshots
  • ICO/ICNS are platform-specific formats
  • Always maintain aspect ratios
  • Use high-quality source images
  • Optimize for web delivery

Last Updated: 2024 Maintainer: Development Team

Reference in New Issue View Git Blame Copy Permalink