defuss-shadcn / Application / Scaffolds / scaffold-notes
Notes & Docs
A Notion-style workspace as a clickdummy - "Folio". Click into any page and write: / inserts a block, #, - or [] and a space turn the line into a heading, a bullet or a to-do, selecting text shows a format bar, and the ⋮⋮ handle drags a block. Open the Product Roadmap for a database with table, board and gallery views. Every control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Notes and docs
The whole workspace in one source. Pages are URL fragments (#p-roadmap…) shown with :target; the database views and the toggles are CSS state; blocks are contenteditable elements with a data-type, so turning a line into a heading or a to-do is one attribute and a prefix element.
§How it works
A page, not a component: it composes the library and keeps its own glue small - the block editor is the one part that needs real script.
- Shell - the Sidebar holds two Tree Views (Favorites, Private pages; a page with sub-pages is a branch), search and new-page actions and the Trash Popover; the top bar has a Breadcrumb, Share (a Popover with a Switch), favorite and a Dropdown of page options - font, small text and full width as radio and checkbox items, copy link, move to trash.
- Pages - every page is an
<article>with an id, shown with:target. Its title, icon (an emoji Popover) and name stay in step across the tree, the breadcrumb and the Command palette (⌘K). New pages are stamped from a<template>and offer starter templates. - Blocks - each block is a
contenteditableelement with adata-type: Enter splits, Backspace at the start merges or turns the block back into text, arrows move between blocks, markdown shortcuts convert. Numbered lists count with CSS counters, to-dos strike through with:has(:checked). - Slash and block menus - the Context Menu, opened at the caret through its State API: type to filter, arrows and Enter to pick. The ⋮⋮ handle opens Turn into / Duplicate / Delete, and drags the block with native drag and drop.
- Format bar - the Toolbar in a manual popover above the selection: bold, italic, underline and strikethrough through the browser's editing commands, inline code and highlight by wrapping the range.
- Database - the roadmap is one set of items in three views: a Table with Select status pills, a board you drag cards across, a gallery with covers. Opening an item shows it in a Sheet; every edit reaches all three views.
- Full screen - app-notes.html is generated from this page's example at build time.
Comments, ideas or improvements? Edit this page's source on GitHub