Experimenting with ios links

src/components/CheckList.tsx

@@ -1,7 +1,7 @@
 import { For, createEffect, createSignal } from 'solid-js'
 import styles from './CheckList.module.scss'
 import planText from '../data/five-day.txt?raw'
-import { CheckListItem, isRangeComplete } from '../model'
+import { CheckListItem, isRangeComplete, versionLink } from '../model'
 import { loadCheckListState, saveCheckListState } from '../data'
 
 export function CheckList() {
@@ -71,8 +71,10 @@ export function CheckList() {
                       }}
                     />
                     <span>{id + 1}</span>
-                    {/* youversion://bible?reference=JHN.1.1 */}
-                    <span>{label}</span>
+                    {/* <span>{label}</span> */}
+                    {label.split('; ').map((l) => (
+                      <a href={versionLink(l)}>{l}</a>
+                    ))}
                   </label>
                 </li>
               ) : null}

src/index.css

@@ -32,7 +32,8 @@ input[type='checkbox'] {
   border-radius: 0.5rem;
   &::before {
     content: '';
-    clip-path: polygon(9% 37%, 46% 68%, 88% 1%, 100% 8%, 50% 91%, 0 48%);
+    /* https://bennettfeely.com/clippy/ */
+    clip-path: polygon(11% 34%, 46% 68%, 88% 1%, 100% 8%, 50% 91%, 0 48%);
     width: var(--cb-size);
     height: var(--cb-size);
     transform: scale(0);

src/model/CheckListModel.ts

@@ -23,3 +23,19 @@ export function isRangeComplete(
 
   return true
 }
+
+const youVersionBookMap: Record<string, string> = {
+  JOHN: 'JHN',
+  JUDGES: 'JDG',
+  PHILEMON: 'PHM',
+}
+
+const bookChapterRegEx = /(.*) (\d+(?:-\d+)?)$/
+
+export function versionLink(label: string) {
+  const [, book = label, chapters = '1'] = bookChapterRegEx.exec(label) ?? []
+  const [ch1] = chapters.split('-')
+  const bookUc = book.toUpperCase()
+  const chAbbrev = youVersionBookMap[bookUc] ?? bookUc
+  return `youversion://bible?reference=${chAbbrev.substring(0, 3)}.${ch1}`
+}