Skip to content

Instantly share code, notes, and snippets.

@pontusab
pontusab / proximity-prefetch.tsx
Created April 6, 2025 06:43
Next.js Proximity Prefetch (PPF)
"use client";
import { useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { useCallback, useEffect, useState } from "react";
interface ProximityPrefetchProps {
children: ReactNode;
threshold?: number;
predictionInterval?: number;
/* sidenotes.js: standalone JS library for parsing HTML documents with Pandoc-style footnotes and dynamically repositioning them into the left/right margins, when browser windows are wide enough.
Sidenotes are superior to footnotes where possible because they enable the reader to immediately look at them without requiring user action to 'go to' or 'pop up' the footnotes; even floating footnotes require effort by the reader.
sidenotes.js is inspired by the Tufte-CSS sidenotes (https://edwardtufte.github.io/tufte-css/#sidenotes), but where Tufte-CSS uses static footnotes inlined into the body of the page (requiring modifications to Pandoc's compilation), which doesn't always work well for particularly long or frequent sidenotes, sidenotes.js will rearrange sidenotes to fit as best as possible, and will respond to window changes.
Particularly long sidenotes are also partially 'collapsed'.
Author: Said Achmiz
2019-03-11
license: MIT (derivative of footnotes.js, which is PD)
*/