33 navigate to verse passage

.eslintrc.cjs

@@ -1,55 +1,56 @@
-/** @type {import("eslint").Linter.Config} */
+/** @type {import('eslint').Linter.Config} */
 const config = {
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true
-  },
-  plugins: ["@typescript-eslint", "prettier"],
-  extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "ignorePatterns": ["/styled-system/*"],
-  rules: {
-    // These opinionated rules are enabled in stylistic-type-checked above.
-    // Feel free to reconfigure them to your own preference.
-    "@typescript-eslint/array-type": "off",
-    "@typescript-eslint/consistent-type-definitions": "off",
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		project: true,
+	},
+	plugins: ['@typescript-eslint', 'prettier'],
+	extends: [
+		'next/core-web-vitals',
+		'plugin:@typescript-eslint/recommended-type-checked',
+		'plugin:@typescript-eslint/stylistic-type-checked',
+		'plugin:prettier/recommended',
+		'plugin:storybook/recommended',
+		'plugin:tailwindcss/recommended',
+	],
+	'ignorePatterns': ['/styled-system/*'],
+	rules: {
+		// These opinionated rules are enabled in stylistic-type-checked above.
+		// Feel free to reconfigure them to your own preference.
+		'@typescript-eslint/array-type': 'off',
+		'@typescript-eslint/consistent-type-definitions': 'off',
 
-    "@typescript-eslint/consistent-type-imports": [
-      "warn",
-      {
-        prefer: "type-imports",
-        fixStyle: "inline-type-imports"
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-misused-promises": [
-      2,
-      {
-        checksVoidReturn: { attributes: false }
-      }
-    ],
+		'@typescript-eslint/consistent-type-imports': [
+			'warn',
+			{
+				prefer: 'type-imports',
+				fixStyle: 'inline-type-imports',
+			},
+		],
+		'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+		'@typescript-eslint/no-misused-promises': [
+			2,
+			{
+				checksVoidReturn: { attributes: false },
+			},
+		],
 
-    "react/jsx-curly-brace-presence": ["error", { props: "never", children: "never" }],
-    "prefer-arrow-callback": "error",
-    "arrow-body-style": "error",
+		'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
+		'prefer-arrow-callback': 'error',
+		'arrow-body-style': 'error',
 
-    "prettier/prettier": [
-      "warn",
-      {},
-      {
-        "usePrettierrc": true
-      }
-    ],
-    "@typescript-eslint/ban-ts-comment": "warn",
+		'prettier/prettier': [
+			'warn',
+			{},
+			{
+				'usePrettierrc': true,
+			},
+		],
+		'@typescript-eslint/ban-ts-comment': 'warn',
 
-    "no-console": ["error", { allow: ["warn", "error"] }],
-    "import/no-cycle": "error"
-  }
-};
+		'no-console': ['warn', { allow: ['warn', 'error'] }],
+		'import/no-cycle': 'error',
+	},
+}
 
-module.exports = config;
+module.exports = config

package.json

@@ -24,6 +24,7 @@
     "@t3-oss/env-nextjs": "^0.7.0",
     "@tailwindcss/forms": "^0.5.7",
     "cheerio": "1.0.0-rc.12",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "fast-xml-parser": "^4.3.2",
     "file-system-cache": "^2.4.4",
     "jotai": "^2.5.1",

src/_pages/ReaderPage/Reader.page.tsx

@@ -1,12 +1,18 @@
-import { NavBar } from '~/_pages/ReaderPage/components/NavBar'
-import { ReaderNavButtons } from '~/_pages/ReaderPage/components/ReaderNavButtons'
+import { renderChapterContent } from '~/_pages/ReaderPage/chapterDataProcessing/renderChapterContent'
 import { getBookWithCache, getChapterWithCache } from '~/db'
-import { getChapterObjectModel } from './chapterContentData/getChapterObjectModel'
-import { ChapterContent } from './components/ChapterContent'
+import { getChapterObjectModel } from './chapterDataProcessing/getChapterObjectModel'
+import { ChapterContentContainer } from './components/ChapterContentContainer'
+import { NavBar } from './components/NavBar'
+import { ReaderNavButtons } from './components/ReaderNavButtons'
 import { ReaderPageContainer } from './components/ReaderPageContainer'
 import { READER_MODE, type ReaderPageParams } from './ReaderPage.types'
 
-export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
+export const ReaderPage = async ({
+	params,
+}: {
+	params: ReaderPageParams
+	searchParams: { 'verse-start': string; 'verse-end': string }
+}) => {
 	const { bookCode, chapter, readerMode } = params
 
 	const isStudyMode = readerMode === READER_MODE.Study
@@ -20,7 +26,7 @@ export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
 		throw new Error('No chapter data')
 	}
 
-	const chapterContentHtml = getChapterObjectModel(chapterData.content)
+	const chapterObjectModel = getChapterObjectModel(chapterData.content)
 
 	const book = await getBookWithCache(bookCode.toUpperCase())
 
@@ -32,10 +38,9 @@ export const ReaderPage = async ({ params }: { params: ReaderPageParams }) => {
 		<>
 			<NavBar bookName={book.name} chapter={chapter} />
 			<ReaderPageContainer>
-				<ChapterContent
-					chapterContentHtml={chapterContentHtml}
-					isStudyMode={isStudyMode}
-				/>
+				<ChapterContentContainer>
+					{renderChapterContent(chapterObjectModel, isStudyMode)}
+				</ChapterContentContainer>
 				<ReaderNavButtons
 					bookCode={bookCode}
 					chapter={chapter}

src/_pages/ReaderPage/chapterContentData/getChapterObjectModel.tsx → src/_pages/ReaderPage/chapterDataProcessing/getChapterObjectModel.tsx

@@ -4,10 +4,12 @@ import { type JSX } from 'react/jsx-runtime'
 
 export type IntrinsicEl = keyof JSX.IntrinsicElements
 
+export type VerseId = `${string}.${number}.${number}`
+
 export type ElNode = {
 	[key in IntrinsicEl]: ChapterOMNode[]
 } & {
-	':@': { attrs: { className: string } }
+	':@': { attrs: { className: string; 'data-usfm'?: VerseId } }
 }
 
 export type TextNode = { '#text': string }

src/_pages/ReaderPage/chapterContentData/renderChapterContent.tsx → src/_pages/ReaderPage/chapterDataProcessing/renderChapterContent.tsx

@@ -9,14 +9,15 @@ import {
 	Paragraph,
 	Quote,
 	SectionTitle,
-	Verse,
 	VerseLabel,
 } from '../components/ReaderComponents'
+import { Verse } from '../components/ReaderComponents.client'
 import {
 	type ChapterOM,
 	type ChapterOMNode,
 	type IntrinsicEl,
 	type TextNode,
+	type VerseId,
 } from './getChapterObjectModel'
 
 function isTextNode(node: ChapterOMNode): node is TextNode {
@@ -97,9 +98,11 @@ export const renderChapterContent = (
 		}
 
 		if (nodeClass === 'verse') {
+			const verseId = item[':@'].attrs['data-usfm']!
+
 			return [
 				...acc,
-				<Verse key={i} isStudyMode={isStudyMode}>
+				<Verse key={i} isStudyMode={isStudyMode} verseId={verseId}>
 					{renderChapterContent(item[NodeType], isStudyMode)}
 				</Verse>,
 			]

src/_pages/ReaderPage/components/ChapterContentContainer.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { type ReactNode, useEffect } from 'react'
+import { twMerge } from 'tailwind-merge'
+import './ChapterContent.css'
+
+export const ChapterContentContainer = ({
+	children,
+}: {
+	children: ReactNode
+}) => {
+	const searchParams = useSearchParams()
+	const verseStart = parseInt(searchParams.get('verse-start')!)
+
+	useEffect(() => {
+		const passageStartVerse = document.querySelector(
+			`.rc-verse[data-verse-order="${verseStart}"]`,
+		)
+		const passageStartVerseQuote =
+			passageStartVerse?.parentElement?.classList?.contains('rc-quote') &&
+			passageStartVerse.parentElement
+		if (passageStartVerseQuote) {
+			passageStartVerseQuote?.scrollIntoView()
+		} else {
+			passageStartVerse?.scrollIntoView()
+		}
+	}, [verseStart])
+	return (
+		<div
+			className={twMerge(
+				'reader',
+				'mt-reader-gap md:mt-reader-gap-md text-base md:text-lg leading-[2em] md:leading-[2.25em]',
+			)}
+		>
+			{children}
+		</div>
+	)
+}

src/_pages/ReaderPage/components/NavBar.tsx

@@ -3,10 +3,10 @@ import { wChildren, wClassName, wName } from '~/component-helpers'
 import { setPageWidthCls } from '~/components/Page'
 
 const NavBarContainer = wChildren(({ children }) => (
-	<div className="z-10 sticky top-0 w-full bg-bgSurface">
+	<div id="navbar" className="sticky top-0 z-10 w-full bg-bgSurface">
 		<div className={setPageWidthCls}>
 			<div className="border-b border-b-borderEmphasized">
-				<nav className="flex sm:flex-row gap-6 justify-between items-center h-16">
+				<nav className="flex h-16 items-center justify-between gap-6 sm:flex-row">
 					{children}
 				</nav>
 			</div>

src/_pages/ReaderPage/components/ReaderComponents.client.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export const Verse = ({
+	children,
+	isStudyMode,
+	verseId,
+	initialIsFocused,
+}: {
+	children: ReactNode
+	isStudyMode: boolean
+	verseId: `${string}.${number}.${number}`
+	initialIsFocused?: boolean
+}) => {
+	const [isFocused, setIsFocused] = useState(useRef(initialIsFocused).current)
+
+	const verseOrder = parseInt(verseId.split('.')[2]!)
+
+	const searchParams = useSearchParams()
+	const verseStart = parseInt(searchParams.get('verse-start')!)
+	const verseEnd = parseInt(searchParams.get('verse-end')!)
+
+	useEffect(() => {
+		const isIncludedInPassage =
+			verseOrder >= verseStart && verseOrder <= verseEnd
+		setIsFocused(isIncludedInPassage)
+	}, [verseEnd, verseOrder, verseStart])
+
+	return (
+		<span
+			data-verse-order={verseOrder}
+			className={twMerge(
+				'rc-verse scroll-mt-[65px]',
+				isStudyMode && 'block relative',
+			)}
+		>
+			<span
+				className={twMerge(
+					'border-b-2 border-b-transparent transition duration-quick ease-in',
+					isFocused && 'border-b-borderEmphasized',
+				)}
+			>
+				{children}
+			</span>
+		</span>
+	)
+}