Pages around the chapter
StartPage and EndPage put content of your own at the two ends of the reading sequence, and each end takes as many of them as it is written with. This chapter opens on a notice and a title card, and closes on a next-chapter card and a list of side stories, each of them turned to exactly as a page is.
None of them is counted as a page. The progress reads Pages 1-2 of 7 on the first spread of the chapter, and the page list keeps the indexes it was given, so the numbering a reader sees is the numbering of the document. While the extra pages are the ones on screen, the status names them and their place in the slot instead, as Start pages 1-2 of 2.
In double-page mode they take a half of the spread like any other page. Every index before spreadStartIndex is shown on its own, so this reader counts the spreads from the first start page with spreadStartIndex={-2} to open the chapter on the two of them facing each other; the chapter itself pairs from page 1 either way. At the other end the odd page count leaves the last page without a facing page, so the next-chapter card pairs with it and the side stories arrive on a spread of their own. Each extra page is laid out as a sheet the shape of a page, with its card floating at the centre, so it sits in the spread exactly where a page would. The links and the disclosure inside them stay usable, and the swipe and edge-click page turns leave a control that was pressed alone.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23// The sheet gives the extra page the shape and the colour of a page, and the4// card floats at the centre of it.5const SlotSheet = ({ children }) => (6 <div className={styles.slotSheet}>7 <div className={styles.slotCard}>{children}</div>8 </div>9);1011// A slot holds as many pages as it is written with, in that order, and12// counting the spreads from the first start page pairs the two of them.13export const Reader = ({ pages }) => (14 <ComicViewer.Root pages={pages} spreadStartIndex={-2}>15 <ComicViewer.StartPage>16 <SlotSheet>17 <CoverNotice />18 </SlotSheet>19 </ComicViewer.StartPage>2021 <ComicViewer.StartPage>22 <SlotSheet>23 <ChapterTitleCard />24 </SlotSheet>25 </ComicViewer.StartPage>2627 <ComicViewer.Viewport />2829 <ComicViewer.EndPage>30 <SlotSheet>31 <NextChapterCard />32 </SlotSheet>33 </ComicViewer.EndPage>3435 <ComicViewer.EndPage>36 <SlotSheet>37 <SeriesRecommendations />38 </SlotSheet>39 </ComicViewer.EndPage>4041 <ComicViewer.Toolbar />42 <ComicViewer.PageNavigation />43 </ComicViewer.Root>44);