# Building the FineNotes playground `/play/` on the website is FineNotes' own notebook view (`InkView`, with its toolbar, pens, shapes, lasso, text, tables, page sidebar and paper picker) running in a plain web page on the welcome tour notebook. It is built from two parts: - **FineNotes 2.3.0**, unchanged: the `2.3.0` tag of , GPL-3.0-or-later. - **The playground's glue in this folder**: original code written for this site, GPL-3.0-or-later. It stands in for Obsidian around the view. ## What is here | File | What it is | | ------------------ | -------------------------------------------------------------------------------------------------- | | `obsidian-shim.ts` | A browser stand-in for the `obsidian` module: the classes and DOM helpers FineNotes' view imports | | `host.ts` | The app around the view (a vault kept in memory) and the plugin object the view calls | | `playground.ts` | The entry: builds the welcome notebook, opens it in the view, keeps the visitor's notebook | | `section-tabs.ts` | Shows the notebook's section tabs whole when there is room beside the page, hides them on a phone | | `finger-draw.ts` | The "Finger draws" switch for phones and tablets without a pen | | `playground.css` | Design tokens FineNotes' stylesheet reads, styles for the stand-in's DOM, and the top bar | | `index.html` | The page | | `build.mjs` | The build | `obsidian-shim.ts` was written from two public sources: the list of what FineNotes 2.3.0's `src/` imports from `obsidian`, and the API typings in the `obsidian` npm package (MIT). No file of Obsidian's app is used or shipped. Icons are Lucide's (ISC licence), from the `lucide` npm package; only the names the sources use are bundled. ## Build Needs Node 22 and git. ```bash # 1. FineNotes 2.3.0 and its dependencies (esbuild, fflate) git clone --branch 2.3.0 --depth 1 https://github.com/Joost-8/FineNotes.git finenotes-2.3.0 (cd finenotes-2.3.0 && npm ci) # 2. Lucide icons, in a folder of their own mkdir lucide-icons && (cd lucide-icons && npm init -y >/dev/null && npm install lucide@1.45.0) # 3. The playground, written to ../play/ (next to this folder) node build.mjs --src finenotes-2.3.0 --lucide lucide-icons ``` Options: `--out ` writes somewhere else; `--dev` leaves the bundle unminified with an inline source map. The FineNotes checkout is only read. The build writes `play/index.html`, `play/playground.js` (about 950 KB, about 310 KB gzipped), `play/finenotes.css` (FineNotes' own `styles.css`), `play/playground.css` and `play/THIRD_PARTY_NOTICES.txt`. ## What the build leaves out, and how - **The handwriting recogniser (Grape)**: its model (`models/grape-1.0.bin`) is replaced by an empty array and its worker client by a class that throws. The plugin object's reader rejects, which the view already handles. - **PDF export**: `pdf-lib` is replaced by a module that rejects (about 400 KB saved); the Export button shows a notice instead. - Features that need Obsidian, an account or the network (AI, recording and transcription, PDF import, home screen links, opening other notes, the template gallery, settings) show "available in the FineNotes plugin for Obsidian" instead. This is done in `host.ts` and `playground.ts`; FineNotes' source is not changed. ## Input As in FineNotes, a mouse and a pen write, and fingers scroll and pinch. On a device whose only pointer is a finger, "Finger draws" in the bar is on by default: one finger writes, two fingers scroll and zoom. It turns itself off the first time a real pen touches the page, and a visitor's own choice is remembered. ## Storage Nothing is sent anywhere. The notebook (and pictures the visitor adds, up to about 4 MB) is kept in this browser's localStorage under `finenotes-playground:*`, after each save the view makes and when the page is hidden. Reset clears it and reopens the tour.