a tool for shared writing and social publishing

fix footnote rendering and counts

+16 -6
+1 -1
app/globals.css
··· 490 animation-timing-function: ease-in; 491 } 492 493 - .postPageContent { 494 counter-reset: footnote; 495 } 496 .footnote-ref {
··· 490 animation-timing-function: ease-in; 491 } 492 493 + .footnote-scope { 494 counter-reset: footnote; 495 } 496 .footnote-ref {
+2
app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
··· 12 13 export function PublishedFootnoteSideColumn(props: { 14 footnotes: PublishedFootnote[]; 15 }) { 16 let items: PublishedFootnoteItem[] = props.footnotes.map((fn) => ({ 17 ...fn, ··· 47 <FootnoteSideColumnLayout 48 items={items} 49 visible={props.footnotes.length > 0} 50 getAnchorSelector={getAnchorSelector} 51 renderItem={renderItem} 52 />
··· 12 13 export function PublishedFootnoteSideColumn(props: { 14 footnotes: PublishedFootnote[]; 15 + fullPageScroll?: boolean; 16 }) { 17 let items: PublishedFootnoteItem[] = props.footnotes.map((fn) => ({ 18 ...fn, ··· 48 <FootnoteSideColumnLayout 49 items={items} 50 visible={props.footnotes.length > 0} 51 + fullPageScroll={props.fullPageScroll} 52 getAnchorSelector={getAnchorSelector} 53 renderItem={renderItem} 54 />
+1 -1
app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
··· 72 pageOptions={pageOptions} 73 footnoteSideColumn={ 74 !props.hasContentToRight ? ( 75 - <PublishedFootnoteSideColumn footnotes={footnotes} /> 76 ) : undefined 77 } 78 >
··· 72 pageOptions={pageOptions} 73 footnoteSideColumn={ 74 !props.hasContentToRight ? ( 75 + <PublishedFootnoteSideColumn footnotes={footnotes} fullPageScroll={fullPageScroll} /> 76 ) : undefined 77 } 78 >
+1 -1
app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
··· 28 did: string; 29 }) { 30 return ( 31 - <div className="postContent flex flex-col"> 32 {blocks.map((b, index) => { 33 return <Block block={b} did={did} key={index} />; 34 })}
··· 28 did: string; 29 }) { 30 return ( 31 + <div className="postContent footnote-scope flex flex-col"> 32 {blocks.map((b, index) => { 33 return <Block block={b} did={did} key={index} />; 34 })}
+1 -1
components/Footnotes/FootnotePopover.tsx
··· 44 // were inserted out of order within a block. 45 let displayIndex = useMemo(() => { 46 if (!anchorElement || !footnote) return footnote?.index ?? 0; 47 - let container = anchorElement.closest(".postPageContent"); 48 if (!container) return footnote.index; 49 let allRefs = Array.from(container.querySelectorAll(".footnote-ref")); 50 let pos = allRefs.indexOf(anchorElement);
··· 44 // were inserted out of order within a block. 45 let displayIndex = useMemo(() => { 46 if (!anchorElement || !footnote) return footnote?.index ?? 0; 47 + let container = anchorElement.closest('.footnote-scope'); 48 if (!container) return footnote.index; 49 let allRefs = Array.from(container.querySelectorAll(".footnote-ref")); 50 let pos = allRefs.indexOf(anchorElement);
+2
components/Footnotes/FootnoteSideColumn.tsx
··· 16 export function FootnoteSideColumn(props: { 17 pageEntityID: string; 18 visible: boolean; 19 }) { 20 let { footnotes } = useFootnoteContext(); 21 let { permissions } = useEntitySetContext(); ··· 54 <FootnoteSideColumnLayout 55 items={items} 56 visible={props.visible} 57 getAnchorSelector={getAnchorSelector} 58 renderItem={renderItem} 59 />
··· 16 export function FootnoteSideColumn(props: { 17 pageEntityID: string; 18 visible: boolean; 19 + fullPageScroll?: boolean; 20 }) { 21 let { footnotes } = useFootnoteContext(); 22 let { permissions } = useEntitySetContext(); ··· 55 <FootnoteSideColumnLayout 56 items={items} 57 visible={props.visible} 58 + fullPageScroll={props.fullPageScroll} 59 getAnchorSelector={getAnchorSelector} 60 renderItem={renderItem} 61 />
+6 -1
components/Footnotes/FootnoteSideColumnLayout.tsx
··· 13 export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: { 14 items: T[]; 15 visible: boolean; 16 getAnchorSelector: (item: T) => string; 17 renderItem: (item: T & { top: number }) => ReactNode; 18 }) { ··· 106 return ( 107 <div 108 ref={containerRef} 109 - className="footnote-side-column hidden lg:block absolute top-0 left-full w-[200px] ml-3 pointer-events-none" 110 style={{ height: "100%" }} 111 > 112 <div
··· 13 export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: { 14 items: T[]; 15 visible: boolean; 16 + fullPageScroll?: boolean; 17 getAnchorSelector: (item: T) => string; 18 renderItem: (item: T & { top: number }) => ReactNode; 19 }) { ··· 107 return ( 108 <div 109 ref={containerRef} 110 + className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] pointer-events-none ${ 111 + props.fullPageScroll 112 + ? "left-[calc(50%+var(--page-width-units)/2+12px)]" 113 + : "left-full ml-3" 114 + }`} 115 style={{ height: "100%" }} 116 > 117 <div
+2 -1
components/Pages/Page.tsx
··· 76 <FootnoteSideColumn 77 pageEntityID={props.entityID} 78 visible={sideColumnVisible} 79 /> 80 } 81 > ··· 146 `} 147 > 148 <div 149 - className={`postPageContent 150 ${props.fullPageScroll ? "sm:max-w-[var(--page-width-units)] mx-auto" : "w-full h-full"} 151 `} 152 >
··· 76 <FootnoteSideColumn 77 pageEntityID={props.entityID} 78 visible={sideColumnVisible} 79 + fullPageScroll={props.fullPageScroll} 80 /> 81 } 82 > ··· 147 `} 148 > 149 <div 150 + className={`postPageContent footnote-scope 151 ${props.fullPageScroll ? "sm:max-w-[var(--page-width-units)] mx-auto" : "w-full h-full"} 152 `} 153 >