[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81645":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":13,"starSnapshotCount":13,"syncStatus":16,"lastSyncTime":30,"discoverSource":31},81645,"Bookmrk","sarvan-2187\u002FBookmrk","sarvan-2187","Bookmrk is a lightweight, open-source bookmark manager built with React, TypeScript, Vite and Tailwind CSS. It is designed as a modern local-first bookmark manager with quick-save keyboard shortcuts, multi-board organization, a canvas-style 4-column board layout, Chrome import fallback, flexible backgrounds and a bunch of themes.","https:\u002F\u002Fbookmrk.dpdns.org",null,"TypeScript",23,0,21,1,2,40.7,"MIT License",false,"main",true,[23,24,25,26],"bookmark-manager","bookmarks-manager","chrome-extension","dashboard-ui","2026-06-12 04:01:34","\n\u003Cimg width=\"2000\" height=\"600\" alt=\"Bookmrk\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd3ce19a4-2b43-4173-a57a-353e3d390613\" \u002F>\n\n\n> ### Bookmrk is a lightweight, open-source bookmark manager built with React, TypeScript, Vite and Tailwind CSS. It is designed as a modern local-first bookmark manager with quick-save keyboard shortcuts, multi-board organization, a canvas-style 4-column board layout, Chrome import fallback, flexible backgrounds and a bunch of themes.\n\n[![The Website for this chrome extension is Powered by DigitalPlat FreeDomain Get a free domain from DigitalPlat.](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDigitalPlat-Get%20a%20free%20domain%20from%20DigitalPlat.-111827?style=flat-square&logo=databricks&logoColor=93c5fd)](https:\u002F\u002Fdash.domain.digitalplat.org\u002Fsignup?ref=rQsyzyJRMl)\n![GitHub Downloads (all assets, all releases)](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fdownloads\u002Fsarvan-2187\u002FBookmrk\u002Ftotal?style=flat-square)\n![GitHub License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fsarvan-2187\u002FBookmrk?style=flat-square)\n![GitHub Repo stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fsarvan-2187\u002FBookmrk?style=flat-square&label=Stars)\n\n\n\n\nThis README is intended to be a comprehensive reference for users and contributors: installation, usage, architecture, data model, storage & migration, development and contribution guidelines, troubleshooting, and FAQs.\n\n\n## Table of Contents\n- **Overview**\n- **Features**\n- **Quick Start (User)**\n- **Keyboard Shortcuts**\n- **Usage & Workflows**\n- **Storage, Import & Export**\n- **Data Model**\n- **Theming & Backgrounds**\n- **Architecture & Code Structure**\n- **Development Setup**\n- **Build & Run Commands**\n- **Testing, Linting & Formatting**\n- **Contribution Guide**\n- **Troubleshooting & FAQ**\n- **Privacy & Data Considerations**\n- **License & Contact**\n\n## Overview\n\nBookmrk helps you capture and organize web pages into Boards and Pages. It focuses on fast keyboard-driven capture (Quick Save), portable storage, and a clean UI with modal-based input and toasts instead of intrusive browser prompts.\n\nKey design goals:\n- Fast capture with minimal friction (Quick Save keyboard binding)\n- Organize bookmarks into Boards and Pages (like folders + boards)\n- Organize boards in a canvas-style 4-column layout, including empty columns as valid drop targets\n- Local-first persistence with optional Chrome bookmarks import\n- Configurable background (image URL, upload)\n- Accessible, centralized modals rendered via portals for consistent UX\n\n## Features\n\n- Quick Save: press Ctrl\u002FCmd + Shift + Y on any page to save it to a `Quick Saves` board (auto-created if missing).\n- Boards & Pages: multiple boards per page, multiple pages; boards can be dragged into any of the four canvas columns, including empty columns. When dragging a board over another board in a different column, the board will be inserted at that position (before or after the target board based on cursor proximity).\n- Centered modals and accessible inputs: all modals are portaled to the app root and theme-aware.\n- Background options: set an external image URL or upload an image (stored as data URL) as homepage background.\n- Toast notifications: replace alerts\u002Fprompts with in-app toasts (auto-dismissable).\n- Board actions: edit name, delete (with confirmation), summon (opens bookmarks without a result toast), add bookmark.\n- Bookmark cards: click the card itself to open the URL, with settings and delete actions available from the card menu.\n- Page actions: rename and delete (with safe-guards preventing deleting the last page).\n- Settings: configurable behavior and appearance options including:\n  - **Behavior**: Open links in new tab, show\u002Fhide bookmark descriptions\n  - **Appearance**: Compact mode for condensed card display\n  - **Support**: Help form with optional contact information (powered by NTFY.sh)\n- Chrome integration: optional import of Chrome bookmarks when running as an extension; a flag prevents repeated imports.\n- Export\u002FImport JSON: export user data with settings metadata (background stripped by default for safe portability), import JSON to restore data.\n\n## Quick Start (User)\n\n### Install via GitHub Releases\n\nPrerequisites:\n- Chromium-based browser (Chrome, Brave, Edge, Arc, etc.)\n- Developer Mode enabled in Extensions\n\n### Installation Steps\n\n1. Download the latest extension ZIP from the GitHub Releases page.\n\n```txt\nRepo → Releases → Download latest boomrk-extension-v1.0.0.zip\n```\n\n2. Extract the ZIP file.\n\nAfter extraction, the folder should contain:\n\n```txt\nmanifest.json\nindex.html\nassets\u002F\nicons\u002F\nbackground.js\ncontent_toast.js\nfavicon.svg\nicons.svg\n```\n\n3. Open your browser extensions page:\n\n```txt\nchrome:\u002F\u002Fextensions\n```\n\n4. Enable **Developer Mode** (top-right corner).\n\n5. Click **Load unpacked**.\n\n6. Select the extracted `boomrk-extension` folder.\n\n7. Bookmrk is now installed 🎉\n\n---\n\n### First-Time Usage\n\n1. Open the Bookmrk extension\u002Fapp.\n2. Create Pages and Boards using the `+` controls.\n3. Open any website in a browser tab.\n4. Press:\n\n```txt\nCtrl\u002FCmd + Shift + Y\n```\n\n5. Bookmrk will instantly save the page into the **Quick Saves** board.\n6. Use the Board settings menu `(⋯)` to rename, delete, organize, or summon bookmarks.\n\n---\n\n### Quick Save Flow\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Discord Theme\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fflow-quick-save.png\" \u002F>\n\n## Keyboard Shortcuts\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Discord Theme\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fkey-board-shortcuts.png\" \u002F>\n\n\u003Cdiv align=\"center\">Keyboard Shortcuts Guide\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\nNotes:\n- Shortcuts are disabled while typing in inputs, textareas, or contenteditable elements.\n- Some actions (like Search) are blocked when Drag Mode is active to prevent accidental triggers.\n\nNote: Browser-level keyboard handling may vary across platforms and OS; when running as an extension, Chrome-specific platform behavior applies.\n\n## Usage & Workflows\n\n- Quick Save workflow: quick-capture many pages during browsing sessions — the Quick Saves board collects these. Periodically move or curate entries into other boards.\n- Summoning bookmarks: use the Summon action on a board to open all bookmarks. Use cautiously — popup blockers or tab explosions may occur.\n- Board organization workflow: drag boards across the canvas to regroup them by column. Empty columns are valid drop targets, so you can build a layout by eye. To insert a board between two existing boards in another column, drag the board and drop it over the target board at the position where you want it inserted.\n\n## Settings\n\nAccess settings via the settings icon in the toolbar. Settings are auto-saved as you adjust them.\n\n**Behavior Settings:**\n- **Open links in new tab**: When enabled, clicking bookmarks opens them in a new browser tab instead of the current tab (default: off).\n- **Show bookmark descriptions**: When enabled, displays saved descriptions below bookmark titles (default: on). Disabled automatically when compact mode is active.\n\n**Appearance Settings:**\n- **Compact mode**: Reduces spacing and card size to show more bookmarks per board. Hides descriptions and shrinks icons and text. Automatically disables \"Show bookmark descriptions\" (default: off).\n\n**Support:**\n- Help contact form powered by NTFY.sh. Submit your email and message to reach the development team.\n\n## Storage, Import & Export\n\nPersistence is provided by `src\u002Fstorage\u002Flocal.ts`. Bookmrk uses the browser extension APIs (when available) and falls back to `localStorage` otherwise.\n\n- Chrome import: When run in an extension context, Bookmrk can import your Chrome bookmarks into an `Imported Bookmarks` board and sets a `chromeBookmarksImported` flag to prevent repeated imports.\n- Export JSON: Exports the application data model as JSON with settings metadata. By design, exported JSON excludes the background image\u002Fdata to keep exports small and portable. The export includes a `_settingsMetadata` section documenting current settings (behavior and appearance) with human-readable labels and descriptions. You can manually include background data if desired for full fidelity.\n- Import JSON: Restore or migrate data by importing a JSON file generated by Bookmrk (or the compatible data structure). The import flow validates basic fields and merges or replaces data depending on import mode.\n\n### Migration notes\n\n- If you have an older Bookmrk export (or another import source), map the fields to the current `BookmrkData` shape. Pay attention to `chromeBookmarksImported` (boolean) and `background` (object | null).\n\n## Data Model\n\nCore TypeScript types are defined in `src\u002Fshared\u002Ftypes.ts`. The important shapes:\n\n- `Bookmark` - { id, url, title, notes?, createdAt }\n- `Board` - { id, name, order, columnIndex?, bookmarks: Bookmark[] }\n- `Page` - { id, name, boards: Board[] }\n- `Settings` - { openLinksInNewTab?: boolean, showBookmarkDescriptions?: boolean, compactMode?: boolean }\n- `BookmrkData` - { pages: Page[], settings: Settings, meta: { createdAt }, chromeBookmarksImported?: boolean, background?: Background | null }\n\nBackground types:\n- { type: 'image', url: 'https:\u002F\u002F...' }\n- { type: 'image', url: 'data:image\u002Fpng;base64,...' }\n\n## Theming & Backgrounds\n\n- The app supports light\u002Fdark surfaces and respects the user's `prefers-color-scheme` by default. Modal surfaces use `#000000` in dark mode and `#FFFFFF` in light mode to ensure contrast and consistent visuals.\n- Backgrounds applied via the Background modal are persisted in the store and affect the home page only. You can set an external image URL or upload an image (stored as data URL). Uploaded images are stored as data URLs — note that large images can inflate storage. Consider compressing images before upload.\n- Modal backgrounds automatically apply glassmorphism (blur + transparency) when an image background is active, creating a modern frosted-glass appearance. When using system defaults (light\u002Fdark mode), modals use solid backgrounds for clarity.\n\n### Themes\n\nBookmrk provides three built-in visual themes (selectable from the Palette menu in the toolbar or via the Appearance settings):\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Discord Theme\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fdiscord-theme.png\" \u002F>\n\n\u003Cbr\u002F>\n\n**Discord** (default): a dense, compact shell inspired by the Discord UI.\n\n\u003Cbr\u002F>\n\n\u003Cimg width=\"1857\" height=\"1025\" alt=\"Simple Theme\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fsimple-theme.png\" \u002F>\n\n\u003Cbr\u002F>\n\n**Simple**: a cleaner top-tab layout with reduced chrome and clearer spacing.\n\n\u003Cbr\u002F>\n\n\u003Cimg width=\"1863\" height=\"1025\" alt=\"NeoBrutalist Theme\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fneobrutalist-theme.png\" \u002F>\n\n\u003Cbr\u002F>\n\n**NeoBrutalist**: high-contrast white-and-black styling with stronger borders and blocky shadows.\n\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\nThese theme choices are persisted in the stored settings as `themeMode` with allowed values `discord`, `simple`, or `neobrutalist` (see `src\u002Fshared\u002Ftypes.ts`).\n\n## Architecture & Code Structure\n\nTop-level structure (important files\u002Fdirectories):\n- `src\u002FApp.tsx` — Application root, global modal mounting and theme fallback.\n- `src\u002Fstore\u002FuseStore.ts` — Zustand store: pages, boards, bookmarks, background, settings, modals, and toasts. Provides actions for settings management (updateSettings, openSettingsModal, closeSettingsModal).\n- `src\u002Fstorage\u002Flocal.ts` — Persistence adapter (chrome.storage.local when available, otherwise localStorage). Handles export\u002Fimport operations with settings metadata in exports.\n- `src\u002Fshared\u002Ftypes.ts` — Central TypeScript types including Settings and getModalBackgroundStyle utility.\n- `src\u002Fcomponents\u002F` — UI components and modal implementations:\n  - `Settings\u002FSettingsModal.tsx` — settings manager with tabs for General (behavior\u002Fappearance), Account, and Support sections. Auto-saves changes with toggle switches.\n  - `Background\u002FBackgroundModal.tsx` — background manager (URL\u002Fupload).\n  - `Shared\u002FInputModal.tsx` — reusable input modal.\n  - `Bookmark\u002FQuickSaveModal.tsx` — Quick Save keyboard handler and UX.\n  - `Board\u002FBoardColumn.tsx` — board UI and BoardSettingsModal.\n  - `Page\u002FPageView.tsx` — canvas-style 4-column board lanes, DnD context, and add-board placement.\n- `src\u002Fstore\u002F` — global state & helpers.\n\nDnD is implemented with `@dnd-kit\u002Fcore` and `@dnd-kit\u002Fsortable`. Portals use `createPortal` from `react-dom` to ensure modals render at the document root and center properly.\n\n## Development Setup\n\nPrerequisites: Node.js 18+ and npm.\n\n1. Install dependencies:\n\n```bash\nnpm install\n```\n\n2. Start development server (hot reload):\n\n```bash\nnpm run dev\n```\n\n3. Build for production:\n\n```bash\nnpm run build\n```\n\n4. Preview production build locally:\n\n```bash\nnpm run preview\n```\n\n## Scripts\n\n- `npm run dev` — start Vite dev server\n- `npm run build` — production build\n- `npm run preview` — preview production build locally\n\n## Testing, Linting & Formatting\n\n- Add tests and linters as needed — repository currently focuses on core functionality. Consider adding `vitest` for unit tests, `eslint` for linting, and `prettier` for formatting.\n\n## Contribution Guide\n\nWe welcome contributions. High-level workflow:\n\n1. Fork the repo and create a topic branch for your change.\n2. Run the app locally and ensure functionality passes.\n3. Open a pull request describing the change, tests, and any migration steps.\n\n## Example Screenshots & Annotated Flows\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Home — 4 column grid\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fhome-4-up.png\" \u002F>\n\n\u003Cbr\u002F>\n\nHome page showing 4-column grid\n\n\u003Cbr\u002F>\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Quick Save Modal\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fquick-save-modal.png\" \u002F>\n\n\u003Cbr\u002F>\n\nQuick Save modal open\n\n\u003Cbr\u002F>\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Board Settings Modal\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fboard-settings-modal.png\" \u002F>\n\n\u003Cbr\u002F>\n\nBoard Settings modal open\n\n\u003Cbr\u002F>\n\n\u003Cimg width=\"1861\" height=\"1021\" alt=\"Background Modal\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fsarvan-2187\u002FBookmrk\u002Frefs\u002Fheads\u002Fmain\u002Fdocs\u002Fscreenshots\u002Fbackground-modal.png\" \u002F>\n\n\u003Cbr\u002F>\n\nBackground modal showing URL\u002Fupload options\n\n\u003C\u002Fdiv>\n\n## Migration Script Example\n\nWhen the persisted data shape changes between releases, a small migration script can help convert older exports to the current `BookmrkData` shape. Add and run this script locally to transform an exported JSON file.\n\nExample script: `scripts\u002Fmigrate_v1_to_v2.ts` — usage:\n\n```bash\n# install ts-node if you don't have it\nnpm install -D ts-node typescript\n\n# run migration\nnpx ts-node scripts\u002Fmigrate_v1_to_v2.ts old-export.json migrated.json\n```\n\nThis example script performs conservative transforms:\n- ensures `chromeBookmarksImported` exists (defaults to `false`)\n- normalizes `background` to explicit `{ type, value } | null`\n- ensures `createdAt` timestamps exist on top-level meta\n\nSee `scripts\u002Fmigrate_v1_to_v2.ts` for the implementation.\n\n## Contributor Checklist & PR Template\n\nI've added a Pull Request template at `.github\u002FPULL_REQUEST_TEMPLATE.md` with a contributor checklist to make reviews faster. The checklist includes items for tests, docs, migrations, and changelog notes.\n\nWhen opening a PR, please include:\n\n- A summary of the change and its rationale.\n- Before\u002Fafter screenshots if UI is affected (place under `docs\u002Fscreenshots\u002F`).\n- Any migration steps or data shape changes and a link to the migration script if applicable.\n- Update to `README.md` or docs when features or developer flows change.\n\n\n## Troubleshooting & FAQ\n\nQ: Quick Save isn't working in my browser.\n\u003Cbr\u002F>\nA: Ensure the page has focus and the app\u002Fextension is active. Browser-level keybindings can conflict; try the toolbar Quick Save button as a fallback.\n\u003Cbr\u002F>\n\u003Cbr\u002F>\n\nQ: I imported Chrome bookmarks and the button is disabled.\n\u003Cbr\u002F>\nA: That's by design, Bookmrk sets `chromeBookmarksImported` to avoid duplicate imports. If you need to re-import, you have two safe options:\n\n- Delete the `Imported Bookmarks` board from the UI; Bookmrk will automatically clear the import lock and re-enable the `Import Chrome` button.\n- Or (advanced) clear the `chromeBookmarksImported` flag manually in storage (not recommended unless you know what you're doing).\n\u003Cbr\u002F>\n\u003Cbr\u002F>\n\nQ: My exported JSON is missing my background image.\n\u003Cbr\u002F>\nA: Bookmrk intentionally omits background data from exported JSON to keep exports small. If you need the background included, open the storage code in `src\u002Fstorage\u002Flocal.ts` and adjust the export function.\n\u003Cbr\u002F>\n\u003Cbr\u002F>\nQ: Summon opened too many tabs.\n\u003Cbr\u002F>\nA: Summon opens all bookmarks in a board. Use with caution with large boards.\n\u003Cbr\u002F>\n\u003Cbr\u002F>\nQ: Where did the open-link icon go on bookmark cards?\n\u003Cbr\u002F>\nA: The bookmark card itself now opens the URL when clicked, so the separate open-link button was removed.\n\u003Cbr\u002F>\n\u003Cbr\u002F>\n\n## Privacy & Data Considerations\n\n- Bookmrk stores data locally (browser storage or extension storage). Uploaded images are persisted as data URLs and may contain sensitive metadata. Avoid uploading very large images.\n- Chrome bookmark import reads local browser bookmarks when the extension has permission — the import is performed locally and not transmitted off-device by default.\n\n## License & Contact\n\nThis project is open source under MIT License.\n\nFor questions, issues, or contributions, open an issue or pull request in the repository.\n\nThe Domain `https:\u002F\u002Fbookmrk.dpdns.org` has been powered by DigitalPlat Domains.\n","Bookmrk 是一个轻量级的开源书签管理器，使用 React、TypeScript、Vite 和 Tailwind CSS 构建。其核心功能包括快速保存键盘快捷键、多板组织、画布风格的四列布局、Chrome 书签导入备份、灵活的背景设置以及多种主题。适合需要高效管理和组织网页书签的用户，特别适用于那些希望在本地优先存储并快速访问书签的场景。","2026-06-11 04:05:50","CREATED_QUERY"]