From https://once.com/writebook

app/javascript/controllers/reading_tracker_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus"
+import { nextFrame } from "helpers/timing_helpers"
+import { getReadingProgress, storeReadingProgress } from "helpers/reading_progress_helpers"
+
+export default class extends Controller {
+  static values = { bookId: Number, leafId: Number }
+
+  async connect() {
+    this.paragraphs = Array.from(document.querySelectorAll("main p"))
+
+    this.visibleParagraphs = new Set()
+    this.lastReadParagraphIndex = 0
+
+    await nextFrame()
+    this.#scrollToLastReadParagraph()
+
+    await nextFrame()
+    this.#observeReadingProgress()
+    this.#storeProgress()
+  }
+
+  disconnect() {
+    this.observer.disconnect()
+  }
+
+  #scrollToLastReadParagraph() {
+    const [ leafId, lastReadParagraphIndex ] = getReadingProgress(this.bookIdValue)
+
+    if (leafId === this.leafIdValue && lastReadParagraphIndex > 0) {
+      const lastReadParagraph = this.paragraphs[lastReadParagraphIndex]
+      lastReadParagraph?.scrollIntoView({ behavior: "instant", block: "end" })
+    }
+  }
+
+  #observeReadingProgress() {
+    this.observer = new IntersectionObserver(this.#intersectionChange, { threshold: 0.5 })
+    this.paragraphs.forEach(p => this.observer.observe(p))
+  }
+
+  #intersectionChange = (entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.visibleParagraphs.add(entry.target)
+      } else {
+        this.visibleParagraphs.delete(entry.target)
+      }
+    })
+
+    this.#updateLastReadParagraph()
+    this.#storeProgress()
+  }
+
+  #updateLastReadParagraph() {
+    const sortedVisibleParagraphs = Array.from(this.visibleParagraphs).sort((p1, p2) => {
+      return this.paragraphs.indexOf(p1) - this.paragraphs.indexOf(p2)
+    })
+
+    if (sortedVisibleParagraphs.length > 0) {
+      const lastVisibleParagraph = sortedVisibleParagraphs[sortedVisibleParagraphs.length - 1]
+      this.lastReadParagraphIndex = this.paragraphs.indexOf(lastVisibleParagraph)
+    }
+  }
+
+  #storeProgress() {
+    storeReadingProgress(this.bookIdValue, this.leafIdValue, this.lastReadParagraphIndex)
+  }
+}