mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-08 22:47:02 +02:00
8f2f055566
* docs: add plan for repository tree visualization feature Comprehensive plan covering: - git-natural-api library analysis and API documentation - useGitTree/useGitBlob hooks for fetching git data - FileTreeView component using Radix Collapsible - Shiki migration with on-demand language loading - Multi-server fallback for redundant clone URLs - Dexie caching for offline access * docs: add comprehensive Shiki migration plan Detailed plan for migrating from Prism.js to Shiki with lazy loading: - Analysis of all 8 components using SyntaxHighlight - Shiki service with singleton highlighter and on-demand language loading - Custom Grimoire dark theme matching current Prism styles - Language alias mapping for 50+ extensions - React hook for async highlighting with loading states - CSS theme preserving minimalistic dark aesthetics - Migration steps with rollback plan * feat: migrate syntax highlighting from Prism.js to Shiki Replace Prism.js with Shiki for syntax highlighting with several key improvements: - Lazy loading: Languages loaded on-demand via dynamic imports instead of bundling all upfront - Broader language support: 200+ TextMate grammars vs 11 statically imported - Singleton highlighter: Core languages (JS, TS, JSON, diff, bash) preloaded, others loaded on first use New files: - src/lib/shiki.ts: Shiki service with highlightCode(), normalizeLanguage(), language aliases - src/hooks/useHighlightedCode.ts: React hook for async highlighting with loading states - src/styles/shiki-theme.css: Grimoire dark theme matching previous minimalistic style Updated components: - SyntaxHighlight: Now uses Shiki with graceful loading/error states - CodeSnippetRenderer/DetailRenderer: Simplified, removed manual language mapping - MarkdownContent: Removed type casts, any language now supported Removed: - prismjs and @types/prismjs dependencies - src/styles/prism-theme.css * feat: add repository file tree visualization Add file tree explorer to the Repository detail renderer (kind 30617) using @fiatjaf/git-natural-api for fetching git trees via HTTP. New files: - src/lib/git-types.ts: TypeScript types for DirectoryTree, SelectedFile, etc. - src/hooks/useGitTree.ts: Hook to fetch git repository tree from clone URLs - Tries multiple clone URLs in sequence - Uses getDirectoryTreeAt with filter capability when available - Falls back to shallowCloneRepositoryAt otherwise - src/hooks/useGitBlob.ts: Hook to fetch individual file content by hash - Detects binary files - Returns both raw Uint8Array and decoded text - src/components/ui/FileTreeView.tsx: Recursive tree view component - Collapsible directories with chevron icons - File icons based on extension (code, json, text, image, etc.) - Alphabetical sorting with directories first - src/components/nostr/kinds/RepositoryFilesSection.tsx: Main integration - Side-by-side tree and file preview layout - Syntax-highlighted file content using existing SyntaxHighlight - Binary file detection with appropriate UI - Loading/error states Modified: - RepositoryDetailRenderer.tsx: Added RepositoryFilesSection below relays Dependencies: - Added @fiatjaf/git-natural-api from JSR * fix: improve repository tree visualization UX - Collapse directories by default in file tree - Hide files section on tree loading error - Add code-like skeleton loader with file header - Fix syntax highlight size jump between loading/loaded states - Replace purple accent with grayscale theme - Preload Rust and Markdown languages for reliable highlighting * refactor: improve git tree and syntax highlighting - Remove shallow clone fallback from useGitTree, only use no-blobs fetch Servers without filter capability are skipped instead of downloading blobs - Add light theme support for Shiki syntax highlighting Theme is automatically selected based on current color scheme * fix: improve dark theme contrast for syntax highlighting * fix: address code review issues - useGitTree: use useStableArray for cloneUrls to fix dependency tracking - useGitTree/useGitBlob: add isMounted checks to prevent state updates after unmount - RepositoryFilesSection: remove unnecessary useMemo for language - FileTreeView: use path instead of hash for React keys - shiki: track failed languages to avoid repeated console warnings * fix: improve dark theme contrast for syntax highlighting - Add CSS variables for syntax highlighting instead of hardcoded colors - Add --syntax-constant and --syntax-tag variables to light and dark themes - Use high contrast colors for dark mode (bright green strings, purple keywords) - Simplify Shiki transformer to output CSS classes instead of inline styles - Remove unused parameters from transformer callback * fix: restore syntax highlighting colors Revert the CSS class-based approach which was failing to classify tokens. Instead, keep Shiki's inline styles from the theme and only remove backgrounds to let CSS handle those. The theme colors now provide syntax highlighting directly. * feat: add copy button and CSS variable-based syntax highlighting - Add copy button next to file name in file viewer header (icon-only) - Use Shiki's createCssVariablesTheme for proper theme integration - Map Shiki CSS variables to our theme system variables - Syntax highlighting now works correctly across all themes (light/dark) * refactor: create IconCopyButton component and use CopyCheck consistently - Add IconCopyButton component for reusable icon-only copy buttons - Refactor RepositoryFilesSection to use IconCopyButton - Replace Check with CopyCheck in ChatMessageContextMenu - Replace Check with CopyCheck in BaseEventRenderer - Use text-success instead of text-green-500 for consistency * fix: add HTML, CSS, TOML to core languages and expand token mappings - Add html, css, toml to CORE_LANGUAGES for eager loading - Add variableDefaults to cssVarsTheme for proper initialization - Expand shiki-theme.css with more token type mappings: - HTML/XML: tag, attribute, attr-value - CSS: selector, property - Additional: variable, operator, number, boolean, regex, etc. * fix: improve diff line spacing with flex layout - Use flex-col with gap-0 on code element for tight line packing - Reduce line-height from 1.5 to 1.4 for tighter spacing - Add .line display:block with min-height for consistent sizing - Simplify diff background styling (remove negative margin hack) * fix: improve code block line spacing and wrap long lines - Increase line-height from 1.4 to 1.5 for better readability - Use pre-wrap instead of pre to allow long line wrapping - Add overflow-wrap: break-word to break long URLs/strings * chore: remove planning docs * chore: update @fiatjaf/git-natural-api to 0.2.3 * fix: make code blocks horizontally scrollable with full-width diff backgrounds - Use white-space: pre for horizontal scrolling instead of wrapping - Add width: fit-content and min-width: 100% to code element - Ensure diff line backgrounds extend full width when scrolling --------- Co-authored-by: Claude <noreply@anthropic.com>
124 lines
3.9 KiB
JSON
124 lines
3.9 KiB
JSON
{
|
|
"name": "grimoire",
|
|
"private": true,
|
|
"version": "0.1.0",
|
|
"type": "module",
|
|
"license": "MIT",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"lint": "eslint .",
|
|
"lint:fix": "eslint . --fix",
|
|
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
|
|
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
|
|
"preview": "vite preview",
|
|
"test": "vitest",
|
|
"test:ui": "vitest --ui",
|
|
"test:run": "vitest run",
|
|
"generate-icons": "node scripts/generate-pwa-icons.mjs"
|
|
},
|
|
"dependencies": {
|
|
"@fiatjaf/git-natural-api": "npm:@jsr/fiatjaf__git-natural-api@^0.2.3",
|
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
"@radix-ui/react-avatar": "^1.1.11",
|
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
"@radix-ui/react-collapsible": "^1.1.12",
|
|
"@radix-ui/react-context-menu": "^2.2.16",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-hover-card": "^1.1.15",
|
|
"@radix-ui/react-popover": "^1.1.15",
|
|
"@radix-ui/react-progress": "^1.1.8",
|
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
"@radix-ui/react-select": "^2.2.6",
|
|
"@radix-ui/react-slider": "^1.3.6",
|
|
"@radix-ui/react-slot": "^1.2.4",
|
|
"@radix-ui/react-switch": "^1.2.6",
|
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
"@tiptap/core": "^3.15.3",
|
|
"@tiptap/extension-mention": "^3.15.3",
|
|
"@tiptap/extension-placeholder": "^3.15.3",
|
|
"@tiptap/pm": "^3.15.3",
|
|
"@tiptap/react": "^3.15.3",
|
|
"@tiptap/starter-kit": "^3.15.3",
|
|
"@tiptap/suggestion": "^3.15.3",
|
|
"@types/qrcode": "^1.5.6",
|
|
"applesauce-accounts": "^5.0.0",
|
|
"applesauce-actions": "^5.0.0",
|
|
"applesauce-common": "^5.0.0",
|
|
"applesauce-content": "^5.0.0",
|
|
"applesauce-core": "^5.0.0",
|
|
"applesauce-loaders": "^5.0.0",
|
|
"applesauce-react": "^5.0.1",
|
|
"applesauce-relay": "^5.0.0",
|
|
"applesauce-signers": "^5.0.0",
|
|
"applesauce-wallet": "^5.0.0",
|
|
"applesauce-wallet-connect": "^5.0.1",
|
|
"blossom-client-sdk": "^4.1.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.1.1",
|
|
"date-fns": "^4.1.0",
|
|
"dexie": "^4.2.1",
|
|
"dexie-react-hooks": "^4.2.0",
|
|
"flexsearch": "^0.8.212",
|
|
"framer-motion": "^12.23.26",
|
|
"hash-sum": "^2.0.0",
|
|
"hls-video-element": "^1.5.10",
|
|
"hls.js": "^1.6.15",
|
|
"jotai": "^2.15.2",
|
|
"js-yaml": "^4.1.1",
|
|
"lucide-react": "latest",
|
|
"media-chrome": "^4.17.2",
|
|
"qrcode": "^1.5.4",
|
|
"react": "^19.2.1",
|
|
"react-dom": "^19.2.1",
|
|
"react-markdown": "^10.1.0",
|
|
"react-medium-image-zoom": "^5.4.0",
|
|
"react-mosaic-component": "^6.1.1",
|
|
"react-router": "^7.1.0",
|
|
"react-virtuoso": "^4.17.0",
|
|
"remark-gfm": "^4.0.1",
|
|
"rxjs": "^7.8.1",
|
|
"shell-quote": "^1.8.3",
|
|
"shiki": "^3.20.0",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^2.5.5",
|
|
"tippy.js": "^6.3.7"
|
|
},
|
|
"devDependencies": {
|
|
"@eslint/js": "^9.17.0",
|
|
"@react-router/dev": "^7.1.0",
|
|
"@tailwindcss/vite": "^4.0.0",
|
|
"@testing-library/dom": "^10.4.1",
|
|
"@testing-library/react": "^16.3.1",
|
|
"@types/js-yaml": "^4.0.9",
|
|
"@types/node": "^24.10.1",
|
|
"@types/react": "^19.2.7",
|
|
"@types/react-dom": "^19.2.3",
|
|
"@types/shell-quote": "^1.7.5",
|
|
"@types/uuid": "^10.0.0",
|
|
"@types/ws": "^8.18.1",
|
|
"@vitejs/plugin-react": "^4.3.4",
|
|
"@vitest/ui": "^4.0.15",
|
|
"eslint": "^9.17.0",
|
|
"eslint-config-prettier": "^10.1.8",
|
|
"eslint-plugin-prettier": "^5.5.4",
|
|
"eslint-plugin-react-hooks": "^5.1.0",
|
|
"eslint-plugin-react-refresh": "^0.4.16",
|
|
"fake-indexeddb": "^6.2.5",
|
|
"globals": "^15.14.0",
|
|
"happy-dom": "^20.0.11",
|
|
"jsdom": "^27.4.0",
|
|
"postcss": "^8.4.49",
|
|
"prettier": "^3.7.4",
|
|
"sharp": "^0.34.5",
|
|
"tailwindcss": "^4.0.0",
|
|
"typescript": "~5.6.2",
|
|
"typescript-eslint": "^8.18.2",
|
|
"vite": "^6.0.5",
|
|
"vitest": "^4.0.15"
|
|
}
|
|
}
|