Skip to content

architecture.md

Latest commit

 

History

History
101 lines (82 loc) · 4 KB

architecture.md

File metadata and controls

101 lines (82 loc) · 4 KB
Raw

Architecture

Bihar Police Notebook is a static website (the editor). There is no application server that stores your notes. Documents live in the browser (IndexedDB). Optional backup copies them into your Google Drive when you choose to sync.

Live editor: https://bpdiary.arverma.dev/ (bpdiary is the domain alias for Bihar Police Notebook.)

High-level system

flowchart LR
  User([User])
  Editor[Editor_site]
  IDB[(IndexedDB)]
  GIT[Google_Input_Tools]
  Drive[Google_Drive]
  Print[Native_print_or_raster_PDF]

  User --> Editor
  Editor --> IDB
  Editor --> GIT
  Editor --> Drive
  Editor --> Print
Loading
Piece Role
Editor site UI: header, History, Letter/Diary pages, overlays
IndexedDB Local autosave on this device
Google Input Tools Hinglish → Hindi suggestions (network; desktop/tablet)
Google Drive Manual backup / restore into your Drive folder
Print / PDF Shared A4 print document → native print (desktop) or raster PDF (iOS/iPadOS)

Editor internals (modules)

flowchart TB
  main[main.js]
  sheets[Letter_Diary_sheets]
  exportPipe[export_router]
  scale[page-scale.js]
  store[document-store.js]
  drive[drive-auth_drive-sync]
  translit[translit.js]
  dict[dictation.js_ui]

  main --> sheets
  main --> exportPipe
  main --> scale
  main --> store
  main --> drive
  main --> translit
  main --> dict
  sheets --> store
Loading
Module area Files Detail page
Shell / History / save editor/js/main.js Editor shell
Letter / Diary letter-sheet.js, diary-sheet.js, quill-pages.js Templates
Document export export/router.js, export/print-document.js, export/raster-pdf.js Templates
Screen scale page-scale.js Page preview
Local DB document-store.js Storage
Drive drive-config.js, drive-auth.js, drive-sync.js Drive backup
Typing translit.js, word-boundaries.js Typing
Voice dictation.js, dictation-ui.js Dictation
Prefs prefs.js Used by Drive + dictation
Styles editor/css/editor.css (+ responsive/layout modules) Editor shell
Hosting .github/workflows/pages.yml Deploy

Module naming convention

  • Lowercase kebab-case filenames; name by domain responsibility, not implementation mechanics.
  • Prefer suffixes that match the job: -sheet, -store, -pages, -document, -pdf, or a clear verb noun (router.js).
  • Group a multi-file subsystem in a folder when the layers are distinct — export lives under editor/js/export/ (print-document → router → raster-pdf).
  • Keep conventional entry/clear names (main.js, drive-*, dictation.js) even when shorter alternatives exist.
  • Colocate Vitest as name.test.js next to name.js; Playwright specs under tests/ use behavior names, not -test suffixes.

Phone vs computer

Behavior changes at 768px width. See Desktop vs mobile.

Testing

Layer Location Command
Unit (Vitest) editor/js/**/*.test.js npm test
E2E (Playwright) tests/*.spec.js npm run test:e2e

See tests/README.md.

Important constants

Item Value
Live origin https://bpdiary.arverma.dev
Drive folder Bihar Police Notebook Backup — do not delete
Drive scope drive.file (files the app creates)
IndexedDB (docs) bp-writing-tool
IndexedDB (auth) bp-writing-tool-auth
Mobile breakpoint max-width: 768px
Autosave debounce 600ms