---
layout: layout.njk
title: Public Reading Schedule
pagination:
  data: publicreading
  size: 10
  alias: page
---






<h1 class="sr-only">Public Reading Schedule</h1>

<!-- DEBUG: pagination diagnostics -->
<div class="p-4 bg-yellow-50 text-sm text-gray-800">
  <div><strong>pagination.pageNumber:</strong> undefined</div>
  <div><strong>pagination.pages length:</strong> 0</div>
  <div><strong>pagination.items length:</strong> 0</div>
  <div><strong>first item preview:</strong> </div>
</div>


<!-- component -->
<style>
  #journal-scroll::-webkit-scrollbar {
            width: 4px;
            cursor: pointer;
            /*background-color: rgba(229, 231, 235, var(--bg-opacity));*/

        }
        #journal-scroll::-webkit-scrollbar-track {
            background-color: rgba(229, 231, 235, var(--bg-opacity));
            cursor: pointer;
            /*background: red;*/
        }
        #journal-scroll::-webkit-scrollbar-thumb {
            cursor: pointer;
            background-color: #a0aec0;
            /*outline: 1px solid slategrey;*/
        }
</style>



<div class="max-w-3xl mx-auto py-10 px-2">
    <div class="bg-white rounded-2xl shadow p-4">
        <div class="text-4xl font-extralight text-black px-5 py-2 border-b border-black border-b-2">
            Upcoming Readings
        </div>
        <div class="overflow-auto" id="journal-scroll">
            <table class="w-full">
                <tbody>




    
    



                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Client-side pagination controls (10 items per page) -->
<div class="max-w-3xl mx-auto py-6 px-2">
    <nav id="pr-pager" data-start-index="0" class="flex items-center justify-center gap-2" aria-label="Pagination"></nav>
</div>

<script>
    (function(){
        const pageSize = 10;
        const tbody = document.currentScript ? document.currentScript.parentNode.querySelector('table tbody') : document.querySelector('#journal-scroll table tbody');
        if (!tbody) return;
        const rows = Array.from(tbody.querySelectorAll('tr[data-pr-index]'));
        const total = rows.length;
        if (total === 0) return;
        const totalPages = Math.ceil(total / pageSize);

        const pager = document.getElementById('pr-pager');
        if (!pager) return;

        // server-provided startIndex (row index to prefer)
        let startIndex = 0;
        if (pager.dataset && pager.dataset.startIndex) {
            const s = parseInt(pager.dataset.startIndex, 10);
            if (!isNaN(s)) startIndex = s;
        }

        // If hash present, use it (deep-link): #page=2 (1-based)
        function pageFromHash() {
            const h = location.hash.replace(/^#/, '');
            const m = h.match(/page=(\d+)/);
            if (m) return Math.max(0, parseInt(m[1], 10) - 1);
            return null;
        }

        let initialPage = pageFromHash();
        if (initialPage === null) {
            // page that contains startIndex
            initialPage = Math.floor(startIndex / pageSize) || 0;
        }
        let currentPage = Math.min(Math.max(0, initialPage), totalPages - 1);

        function showPage(page, alignToStartIndex) {
            let start = page * pageSize;
            if (alignToStartIndex && startIndex > 0) {
                // align whole page so that startIndex is included on that page
                const containing = Math.floor(startIndex / pageSize);
                start = containing * pageSize;
            }
            const end = start + pageSize;
            rows.forEach((r, idx) => r.style.display = (idx >= start && idx < end) ? '' : 'none');
            currentPage = Math.floor(start / pageSize);
            buildPager(currentPage);
            // update hash for deep-linking
            history.replaceState(null, '', `#page=${currentPage + 1}`);
        }

        function buildPager(activePage) {
            pager.innerHTML = '';
            const prev = document.createElement('button');
            prev.textContent = 'Prev';
            prev.className = 'px-3 py-2 rounded border bg-white text-gray-900';
            prev.disabled = activePage === 0;
            prev.addEventListener('click', () => { if (activePage > 0) showPage(activePage - 1); });
            pager.appendChild(prev);

            const maxButtons = 7;
            let start = Math.max(0, activePage - 3);
            let finish = Math.min(totalPages - 1, start + maxButtons - 1);
            if (finish - start + 1 < maxButtons) {
                start = Math.max(0, finish - maxButtons + 1);
            }
            for (let i = start; i <= finish; i++) {
                const btn = document.createElement('button');
                btn.textContent = (i + 1).toString();
                btn.className = (i === activePage) ? 'px-3 py-2 rounded bg-gray-900 text-white' : 'px-3 py-2 rounded bg-white text-gray-900 border';
                btn.addEventListener('click', () => showPage(i));
                pager.appendChild(btn);
            }

            const next = document.createElement('button');
            next.textContent = 'Next';
            next.className = 'px-3 py-2 rounded border bg-white text-gray-900';
            next.disabled = activePage >= totalPages - 1;
            next.addEventListener('click', () => { if (activePage < totalPages - 1) showPage(activePage + 1); });
            pager.appendChild(next);
        }

        // react to back/forward
        window.addEventListener('hashchange', () => {
            const p = pageFromHash();
            if (p !== null) showPage(Math.min(Math.max(0, p), totalPages - 1));
        });

        // initial render: if server provided a startIndex, prefer showing that exact row
        // as the top of the list (so the include begins exactly one reading after nextReading).
        // Fallback to page-aligned behavior when startIndex is 0 or out-of-range.
        if (startIndex > 0 && startIndex < total) {
            // compute start page so that the top row is startIndex
            const startPage = Math.floor(startIndex / pageSize);
            // compute offset within the page for exact top-row placement
            const offsetInPage = startIndex % pageSize;
            // If offsetInPage is 0, startIndex already aligns to page top; just show that page.
            if (offsetInPage === 0) {
                showPage(startPage, false);
            } else {
                // To place startIndex at the top, we'll temporarily show the window [startIndex .. startIndex+pageSize-1]
                const start = startIndex;
                const end = Math.min(start + pageSize, total);
                rows.forEach((r, idx) => r.style.display = (idx >= start && idx < end) ? '' : 'none');
                currentPage = Math.floor(start / pageSize);
                buildPager(currentPage);
                history.replaceState(null, '', `#page=${currentPage + 1}`);
            }
        } else {
            // no server preference; show page containing currentPage (or from hash)
            showPage(currentPage, true);
        }
    })();
</script>


<nav class="mt-6 flex items-center justify-center gap-3" aria-label="Pagination">
  
  

  
    
    
    
    
    
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
      
        
      
      <a href="/publicreading/" class="px-3 py-2 rounded bg-white text-gray-900 border">1</a>
    
      
        
      
      <a href="/publicreading/2/" class="px-3 py-2 rounded bg-white text-gray-900 border">2</a>
    
      
        
      
      <a href="/publicreading/3/" class="px-3 py-2 rounded bg-white text-gray-900 border">3</a>
    
      
        
      
      <a href="/publicreading/4/" class="px-3 py-2 rounded bg-white text-gray-900 border">4</a>
    
      
        
      
      <a href="/publicreading/5/" class="px-3 py-2 rounded bg-white text-gray-900 border">5</a>
    
      
        
      
      <a href="/publicreading/6/" class="px-3 py-2 rounded bg-white text-gray-900 border">6</a>
    
      
        
      
      <a href="/publicreading/7/" class="px-3 py-2 rounded bg-white text-gray-900 border">7</a>
    
      
        
      
      <a href="/publicreading/8/" class="px-3 py-2 rounded bg-white text-gray-900 border">8</a>
    
      
        
      
      <a href="/publicreading/9/" class="px-3 py-2 rounded bg-white text-gray-900 border">9</a>
    
      
        
      
      <a href="/publicreading/10/" class="px-3 py-2 rounded bg-white text-gray-900 border">10</a>
    
      
        
      
      <a href="/publicreading/11/" class="px-3 py-2 rounded bg-white text-gray-900 border">11</a>
    
      
        
      
      <a href="/publicreading/12/" class="px-3 py-2 rounded bg-white text-gray-900 border">12</a>
    
      
        
      
      <a href="/publicreading/13/" class="px-3 py-2 rounded bg-white text-gray-900 border">13</a>
    
      
        
      
      <a href="/publicreading/14/" class="px-3 py-2 rounded bg-white text-gray-900 border">14</a>
    
      
        
      
      <a href="/publicreading/15/" class="px-3 py-2 rounded bg-white text-gray-900 border">15</a>
    
      
        
      
      <a href="/publicreading/16/" class="px-3 py-2 rounded bg-white text-gray-900 border">16</a>
    
      
        
      
      <a href="/publicreading/17/" class="px-3 py-2 rounded bg-white text-gray-900 border">17</a>
    
      
        
      
      <a href="/publicreading/18/" class="px-3 py-2 rounded bg-white text-gray-900 border">18</a>
    
      
        
      
      <a href="/publicreading/19/" class="px-3 py-2 rounded bg-white text-gray-900 border">19</a>
    
      
        
      
      <a href="/publicreading/20/" class="px-3 py-2 rounded bg-white text-gray-900 border">20</a>
    
      
        
      
      <a href="/publicreading/21/" class="px-3 py-2 rounded bg-white text-gray-900 border">21</a>
    
      
        
      
      <a href="/publicreading/22/" class="px-3 py-2 rounded bg-white text-gray-900 border">22</a>
    
      
        
      
      <a href="/publicreading/23/" class="px-3 py-2 rounded bg-white text-gray-900 border">23</a>
    
      
        
      
      <a href="/publicreading/24/" class="px-3 py-2 rounded bg-white text-gray-900 border">24</a>
    
      
        
      
      <a href="/publicreading/25/" class="px-3 py-2 rounded bg-white text-gray-900 border">25</a>
    
      
        
      
      <a href="/publicreading/26/" class="px-3 py-2 rounded bg-white text-gray-900 border">26</a>
    
      
        
      
      <a href="/publicreading/27/" class="px-3 py-2 rounded bg-white text-gray-900 border">27</a>
    
      
        
      
      <a href="/publicreading/28/" class="px-3 py-2 rounded bg-white text-gray-900 border">28</a>
    
      
        
      
      <a href="/publicreading/29/" class="px-3 py-2 rounded bg-white text-gray-900 border">29</a>
    
      
        
      
      <a href="/publicreading/30/" class="px-3 py-2 rounded bg-white text-gray-900 border">30</a>
    
      
        
      
      <a href="/publicreading/31/" class="px-3 py-2 rounded bg-white text-gray-900 border">31</a>
    
      
        
      
      <a href="/publicreading/32/" class="px-3 py-2 rounded bg-white text-gray-900 border">32</a>
    
      
        
      
      <a href="/publicreading/33/" class="px-3 py-2 rounded bg-white text-gray-900 border">33</a>
    
      
        
      
      <a href="/publicreading/34/" class="px-3 py-2 rounded bg-white text-gray-900 border">34</a>
    
      
        
      
      <a href="/publicreading/35/" class="px-3 py-2 rounded bg-white text-gray-900 border">35</a>
    
      
        
      
      <a href="/publicreading/36/" class="px-3 py-2 rounded bg-white text-gray-900 border">36</a>
    
      
        
      
      <a href="/publicreading/37/" class="px-3 py-2 rounded bg-white text-gray-900 border">37</a>
    
  

  
</nav>