Skip to content

TODO.md

Latest commit

 

History

History
95 lines (81 loc) · 4.69 KB

TODO.md

File metadata and controls

95 lines (81 loc) · 4.69 KB
Raw

Keksmeister — TODO

Phase 1: Core (MVP)

  • Project setup (Vite + TypeScript + package.json)
  • Core types and interfaces
  • CookieStore — read/write/clear consent cookie
  • ConsentManager — consent state machine with EventTarget
  • ScriptBlocker — MutationObserver-based script activation
  • i18n — German and English translations
  • KeksmeisterBanner — Web Component with Shadow DOM
  • CSS Custom Properties theming system
  • Demo page
  • README with full documentation
  • ServiceAdapter interface + ServiceRegistry
  • Built-in adapters: PostHog, Matomo, GA4, Meta Pixel, Hotjar, Mixpanel, HubSpot
  • Install dependencies and verify build (6.63 kB gzipped)
  • Unit tests for ConsentManager (21 tests)
  • Unit tests for CookieStore (8 tests)
  • Unit tests for ScriptBlocker (3 tests)
  • Unit tests for ServiceRegistry (8 tests)
  • Unit tests for PostHog adapter (6 tests)
  • Integration test: full consent flow with adapters (10 tests)

CI/CD & Infrastructure

  • GitHub Actions: CI workflow (typecheck, test, build, bundle size check)
  • GitHub Actions: npm publish workflow on release/tag (with provenance)
  • GitHub Actions: deploy demo page to GitHub Pages
  • Conventional Commits: commitlint + husky for commit message validation
  • Renovate for dependency updates
  • Bundle size tracking (built into CI, 10 kB gzip limit)
  • Code coverage reporting (Codecov via @vitest/coverage-v8)

Phase 2: Polish & Compliance

  • Full WCAG 2.1 AA audit (aria-labelledby, aria-describedby, aria-checked, role=switch)
  • Keyboard navigation: Tab cycling (focus trap) within modal, Escape to close
  • Screen reader support: sr-only inputs, label[for], aria-label on required toggles
  • "Immer aktiv" / "Always active" i18n via translations
  • Privacy link text i18n ("Datenschutzerklärung" / "Privacy policy")
  • Auto-detect browser language (attribute → document.lang → navigator.language → 'de')
  • Animation: respect prefers-reduced-motion: reduce
  • Print styles (hide banner)
  • Focus restoration after banner/modal close
  • Public manager getter for ServiceRegistry integration
  • Cleanup on disconnectedCallback (stop ScriptBlocker)
  • Consent expiry re-prompt (consentMaxAgeDays config option)
  • Live screen reader testing with VoiceOver/NVDA

Phase 3: Extended Features

  • Google Consent Mode v2 — test with real gtag
  • Google Tag Manager dataLayer push on consent change
  • Per-service display in settings modal (showServices config)
  • Cookie auto-scan: list cookies per category in the modal
  • Consent history: allow user to see when they last consented
  • <keksmeister-trigger> — small floating button to re-open settings
  • Additional translations: fr, es, it, nl, pl (lazy-loaded via keksmeister/i18n/*)
  • registerTranslation() API for runtime language registration
  • Opt-out mode for non-EU visitors (CCPA style, mode: 'opt-out')
  • Plausible adapter (localStorage flag)
  • TikTok Pixel adapter (grantConsent/revokeConsent)
  • Segment adapter
  • Adapter auto-detection: scan window for known globals and suggest adapters

Phase 4: Ecosystem

  • Angular integration guide (keksmeister/angular — native CUSTOM_ELEMENTS_SCHEMA)
  • React wrapper (keksmeister/react — thin wrapper with config-as-prop)
  • Vue integration guide (keksmeister/vue — native isCustomElement)
  • Server-side consent logging server (Bun, file-based, Docker — see server/)
  • Built-in consent logger transport (logging config: sendBeacon + offline retry queue, logs revocations too)
  • Audit fields on ConsentRecord (pseudonymous subjectId, action: grant/update/revoke)
  • Consent proof export (ZIP of log files for audits — server/scripts/export.sh)
  • Storybook / component playground
  • npm publish as keksmeister
  • CDN distribution via unpkg/jsdelivr

Phase 5: Advanced

  • TCF 2.2 support (only if needed for programmatic ads)
  • IAB __tcfapi compatibility layer
  • Consent Mode for additional ad platforms (TikTok, LinkedIn Insight)
  • A/B testing: measure accept/reject rates
  • Visual banner editor (drag & drop layout configurator)

Research / Open Questions

  • Should we support <slot> elements for custom banner content?
  • Should the Web Component auto-register or require explicit customElements.define()?
    • Current: auto-registers on import. Consider a /register sub-export.
  • Should we support a JSON config via <script type="application/json"> inside the component?
  • Evaluate Declarative Shadow DOM for SSR scenarios.
  • Evaluate Constructable Stylesheets (adoptedStyleSheets) vs <style> in Shadow DOM.