Skip to content

Commit f8547a6

Browse files
SolutionsRMeSolutionsRMe
committed
Fix build issues: install missing dependencies and fix icon imports
- Install @tailwindcss/typography, react-error-boundary, uuid - Remove duplicate App function declaration - Create missing App.css file - Fix FiPalette import (use FiSettings instead) - Build now completes successfully
1 parent f8f0669 commit f8547a6

File tree

9 files changed

+109
-241
lines changed

9 files changed

+109
-241
lines changed

‎dist/assets/index-dJkEJQ3t.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/assets/index-jIr3YNDb.js‎

Lines changed: 0 additions & 141 deletions
This file was deleted.

‎dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
99
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
1010
<link rel="icon" type="image/png" href="/favicon.png">
11-
<script type="module" crossorigin src="/assets/index-jIr3YNDb.js"></script>
12-
<link rel="stylesheet" crossorigin href="/assets/index-dJkEJQ3t.css">
11+
<script type="module" crossorigin src="/markdown-notes/assets/index-BUJnIaeH.js"></script>
12+
<link rel="stylesheet" crossorigin href="/markdown-notes/assets/index-W_f0qYag.css">
1313
</head>
1414
<body class="h-full">
1515
<div id="root"></div>

‎node_modules/.package-lock.json‎

Lines changed: 23 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 26 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,12 @@
1717
"postcss": "^8.4.35",
1818
"react": "^18.2.0",
1919
"react-dom": "^18.2.0",
20+
"react-error-boundary": "^6.0.0",
2021
"react-icons": "^5.0.1",
2122
"react-markdown": "^9.0.0",
2223
"react-syntax-highlighter": "^15.5.0",
23-
"tailwindcss": "^3.4.1"
24+
"tailwindcss": "^3.4.1",
25+
"uuid": "^11.1.0"
2426
},
2527
"devDependencies": {
2628
"@tailwindcss/typography": "^0.5.16",

‎src/App.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* App-specific styles */
2+
3+
/* Ensure proper layout for the app */
4+
.app {
5+
min-height: 100vh;
6+
display: flex;
7+
flex-direction: column;
8+
}
9+
10+
/* Custom scrollbar styles */
11+
.custom-scrollbar::-webkit-scrollbar {
12+
width: 6px;
13+
}
14+
15+
.custom-scrollbar::-webkit-scrollbar-track {
16+
background: transparent;
17+
}
18+
19+
.custom-scrollbar::-webkit-scrollbar-thumb {
20+
background: rgba(156, 163, 175, 0.5);
21+
border-radius: 3px;
22+
}
23+
24+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
25+
background: rgba(156, 163, 175, 0.7);
26+
}
27+
28+
/* Dark mode scrollbar */
29+
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
30+
background: rgba(75, 85, 99, 0.5);
31+
}
32+
33+
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
34+
background: rgba(75, 85, 99, 0.7);
35+
}
36+
37+
/* Smooth transitions */
38+
* {
39+
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
40+
}
41+
42+
/* Focus styles */
43+
.focus-visible:focus-visible {
44+
outline: 2px solid #3b82f6;
45+
outline-offset: 2px;
46+
}
47+
48+
/* Print styles */
49+
@media print {
50+
.no-print {
51+
display: none !important;
52+
}
53+
}

‎src/App.jsx‎

Lines changed: 0 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -506,94 +506,3 @@ export default function AppWrapper() {
506506
</ErrorBoundary>
507507
);
508508
}
509-
510-
// Main App component with all the UI logic
511-
function App() {
512-
const [isFullscreen, setIsFullscreen] = useState(false);
513-
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
514-
const [isPreviewMode, setIsPreviewMode] = useState(true);
515-
const [isEditorMode, setIsEditorMode] = useState(true);
516-
517-
// Toggle fullscreen mode
518-
const toggleFullscreen = useCallback(() => {
519-
if (!document.fullscreenElement) {
520-
document.documentElement.requestFullscreen().catch(err => {
521-
console.error(`Error attempting to enable fullscreen: ${err.message}`);
522-
});
523-
setIsFullscreen(true);
524-
} else {
525-
if (document.exitFullscreen) {
526-
document.exitFullscreen();
527-
setIsFullscreen(false);
528-
}
529-
}
530-
}, []);
531-
532-
// Handle fullscreen change
533-
useEffect(() => {
534-
const handleFullscreenChange = () => {
535-
setIsFullscreen(!!document.fullscreenElement);
536-
};
537-
538-
document.addEventListener('fullscreenchange', handleFullscreenChange);
539-
return () => {
540-
document.removeEventListener('fullscreenchange', handleFullscreenChange);
541-
};
542-
}, []);
543-
544-
// Handle keyboard shortcuts
545-
useEffect(() => {
546-
const handleKeyDown = (e) => {
547-
// Toggle fullscreen with F11
548-
if (e.key === 'F11') {
549-
e.preventDefault();
550-
toggleFullscreen();
551-
}
552-
553-
// Toggle sidebar with Ctrl+B or Cmd+B
554-
if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
555-
e.preventDefault();
556-
setIsSidebarOpen(prev => !prev);
557-
}
558-
559-
// Toggle preview with Ctrl+P or Cmd+P
560-
if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
561-
e.preventDefault();
562-
setIsPreviewMode(prev => !prev);
563-
}
564-
565-
// Toggle editor with Ctrl+E or Cmd+E
566-
if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
567-
e.preventDefault();
568-
setIsEditorMode(prev => !prev);
569-
}
570-
};
571-
572-
document.addEventListener('keydown', handleKeyDown);
573-
return () => {
574-
document.removeEventListener('keydown', handleKeyDown);
575-
};
576-
}, [toggleFullscreen]);
577-
578-
return (
579-
<div className={`flex flex-col min-h-screen bg-white dark:bg-gray-900 ${isFullscreen ? 'fixed inset-0' : ''}`}>
580-
<Header />
581-
<main className="flex-1 flex overflow-hidden">
582-
{isSidebarOpen && <NoteList />}
583-
<div className="flex-1 flex overflow-hidden">
584-
{isEditorMode && (
585-
<div className={isPreviewMode ? 'w-1/2' : 'w-full'}>
586-
<NoteEditor />
587-
</div>
588-
)}
589-
{isPreviewMode && (
590-
<div className={isEditorMode ? 'w-1/2' : 'w-full'}>
591-
<MarkdownPreview />
592-
</div>
593-
)}
594-
</div>
595-
</main>
596-
<Footer />
597-
</div>
598-
);
599-
}

‎src/components/ThemeSwitcher/ThemeSwitcher.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { FiPalette, FiChevronDown, FiSun, FiMoon } from 'react-icons/fi';
2+
import { FiSettings, FiChevronDown, FiSun, FiMoon } from 'react-icons/fi';
33
import { useTheme } from '../../context/ThemeContext';
44

55
export default function ThemeSwitcher() {
@@ -17,7 +17,7 @@ export default function ThemeSwitcher() {
1717
aria-expanded={showDropdown}
1818
aria-haspopup="true"
1919
>
20-
<FiPalette className="w-5 h-5" aria-hidden="true" />
20+
<FiSettings className="w-5 h-5" aria-hidden="true" />
2121
<FiChevronDown className="w-4 h-4" aria-hidden="true" />
2222
</button>
2323

0 commit comments

Comments
 (0)