|
1 | 1 | # π Markdown Notes |
2 | 2 |
|
3 | 3 | [](https://thesolutiondeskandcompany.github.io/markdown-notes/) |
4 | | -[](https://github.com/thesolutiondeskandcompany/markdown-notes/actions) |
5 | 4 | [](https://opensource.org/licenses/MIT) |
6 | 5 | [](http://makeapullrequest.com) |
7 | 6 | [](https://github.com/thesolutiondeskandcompany/markdown-notes/issues) |
8 | 7 | [](https://github.com/thesolutiondeskandcompany/markdown-notes/stargazers) |
9 | 8 |
|
10 | | -> A beautiful, feature-rich markdown note-taking application with live preview, built with React and Tailwind CSS. |
11 | | -
|
12 | | -**Perfect for developers, writers, and anyone who loves markdown!** β¨ |
| 9 | +--- |
13 | 10 |
|
14 | 11 | ## π Live Demo |
15 | 12 |
|
16 | | -Try it out: [https://thesolutiondeskandcompany.github.io/markdown-notes/](https://thesolutiondeskandcompany.github.io/markdown-notes/) |
| 13 | +π [Try it now!](https://thesolutiondeskandcompany.github.io/markdown-notes/) |
17 | 14 |
|
18 | | -```text |
19 | | -π Markdown Editor (Left) | ποΈ Live Preview (Right) |
20 | | ----------------------------------------------- |
21 | | -| # Welcome! | # Welcome! | |
22 | | -| Start writing... | Start writing... | |
23 | | -| - Lists | β’ Lists | |
24 | | -| `code` | code (syntax) | |
25 | | -| **bold** | **bold** | |
26 | | -``` |
| 15 | +--- |
27 | 16 |
|
28 | 17 | ## β‘ Quick Start |
29 | 18 |
|
30 | | -### Option 1: Use Online (Recommended) |
31 | | -Just visit the [live demo](https://thesolutiondeskandcompany.github.io/markdown-notes/) - no installation needed! |
| 19 | +**Use Online:** |
| 20 | +Just visit the [live demo](https://thesolutiondeskandcompany.github.io/markdown-notes/) β no install needed! |
32 | 21 |
|
33 | | -### Option 2: Run Locally |
| 22 | +**Run Locally:** |
34 | 23 |
|
35 | 24 | ```bash |
36 | | -# Clone the repository |
37 | 25 | git clone https://github.com/thesolutiondeskandcompany/markdown-notes.git |
38 | 26 | cd markdown-notes |
39 | | - |
40 | | -# Install dependencies |
41 | 27 | npm install |
42 | | - |
43 | | -# Start development server |
44 | 28 | npm run dev |
45 | | - |
46 | | -# Open http://localhost:5173 in your browser |
| 29 | +# Visit http://localhost:5173 |
47 | 30 | ``` |
48 | 31 |
|
49 | | -### Option 3: Deploy Your Own |
| 32 | +--- |
50 | 33 |
|
51 | | -```bash |
52 | | -# Build for production |
53 | | -npm run build |
| 34 | +## π‘ Features |
54 | 35 |
|
55 | | -# Deploy to GitHub Pages |
56 | | -npm run deploy |
57 | | -``` |
| 36 | +* **Live Markdown Preview** as you type |
| 37 | +* **Multiple Notes:** create, edit, organize |
| 38 | +* **Dark/Light Mode** toggle |
| 39 | +* **Keyboard Shortcuts:** work faster |
| 40 | +* **Export:** save notes as Markdown files |
| 41 | +* **Responsive:** desktop & mobile ready |
| 42 | +* **Local Storage:** automatic save |
| 43 | +* **Syntax Highlighting** for code blocks |
58 | 44 |
|
59 | | -## π‘ Usage Examples |
| 45 | +--- |
| 46 | + |
| 47 | +## π Usage Examples |
60 | 48 |
|
61 | | -### Basic Markdown |
62 | 49 | ```markdown |
63 | 50 | # Heading 1 |
64 | | -## Heading 2 |
65 | 51 |
|
66 | 52 | **Bold text** and *italic text* |
67 | 53 |
|
68 | 54 | - Bullet points |
69 | | -- [ ] Todo items |
70 | | -- [x] Completed tasks |
| 55 | +- [ ] Todo item |
| 56 | +- [x] Done item |
71 | 57 |
|
72 | | -[Links](https://example.com) and `inline code` |
| 58 | +[Links](https://example.com) |
| 59 | +`inline code` |
73 | 60 | ``` |
74 | 61 |
|
75 | | -### Code Blocks with Syntax Highlighting |
76 | 62 | ```javascript |
| 63 | +// Code block with syntax highlighting |
77 | 64 | function greetUser(name) { |
78 | | - console.log(`Hello, ${name}!`); |
79 | | - return `Welcome to Markdown Notes!`; |
| 65 | + return `Hello, ${name}!`; |
80 | 66 | } |
81 | 67 | ``` |
82 | 68 |
|
83 | | -### Tables and More |
84 | | -```markdown |
85 | | -| Feature | Status | |
86 | | -|---------|--------| |
87 | | -| Live Preview | β
| |
88 | | -| Dark Mode | β
| |
89 | | -| Export | β
| |
90 | | - |
91 | | -> Blockquotes for important notes |
92 | | - |
93 | | - |
94 | | -``` |
95 | | - |
96 | | -## β¨ Features |
97 | | - |
98 | | -- **Live Markdown Preview** - See your markdown rendered in real-time |
99 | | -- **Multiple Notes** - Create, edit, and organize multiple notes |
100 | | -- **Dark/Light Mode** - Toggle between light and dark themes |
101 | | -- **Keyboard Shortcuts** - Work faster with handy keyboard shortcuts |
102 | | -- **Export Options** - Save your notes as Markdown files |
103 | | -- **Responsive Design** - Works on desktop and mobile devices |
104 | | -- **Local Storage** - Notes are automatically saved in your browser |
105 | | -- **Syntax Highlighting** - Code blocks with syntax highlighting |
106 | | - |
107 | | -## π Deployment |
108 | | - |
109 | | -### Using GitHub Pages |
110 | | - |
111 | | -The app is automatically deployed to GitHub Pages at: |
112 | | -[thesolutiondeskandcompany.github.io/markdown-notes](https://thesolutiondeskandcompany.github.io/markdown-notes/) |
113 | | - |
114 | | -### GitHub Pages Setup |
115 | | - |
116 | | -The site is automatically deployed to GitHub Pages at: |
117 | | -`https://thesolutiondeskandcompany.github.io/markdown-notes/` |
118 | | - |
119 | | -To set up GitHub Pages: |
120 | | -1. Go to your repository β Settings β Pages |
121 | | -2. Set source to "Deploy from a branch" |
122 | | -3. Select branch: `gh-pages` (created automatically by the workflow) |
123 | | -4. Your site will be available within a few minutes |
124 | | - |
125 | | -## π Getting Started |
126 | | - |
127 | | -### Prerequisites |
128 | | - |
129 | | -- Node.js (v14 or later) |
130 | | -- npm or yarn |
131 | | - |
132 | | -### Installation |
133 | | - |
134 | | -1. Clone the repository: |
135 | | - ```bash |
136 | | - git clone https://github.com/yourusername/markdown-notes.git |
137 | | - cd markdown-notes |
138 | | - ``` |
139 | | - |
140 | | -2. Install dependencies: |
141 | | - ```bash |
142 | | - npm install |
143 | | - # or |
144 | | - yarn |
145 | | - ``` |
146 | | - |
147 | | -3. Start the development server: |
148 | | - ```bash |
149 | | - npm run dev |
150 | | - # or |
151 | | - yarn dev |
152 | | - ``` |
153 | | - |
154 | | -4. Open [http://localhost:3000](http://localhost:3000) in your browser. |
155 | | - |
156 | | -## π¨ Features in Detail |
| 69 | +--- |
157 | 70 |
|
158 | | -### Editor |
159 | | -- Live preview updates as you type |
160 | | -- Syntax highlighting for code blocks |
161 | | -- Word and character count |
162 | | -- Keyboard shortcuts for common actions |
| 71 | +## π¨ Advanced Features |
163 | 72 |
|
164 | | -### Notes Management |
165 | | -- Create new notes |
166 | | -- Delete existing notes |
167 | | -- Auto-save functionality |
168 | | -- Search through your notes |
| 73 | +* Word & character count |
| 74 | +* Fullscreen mode |
| 75 | +* Customizable note titles |
| 76 | +* Search notes |
169 | 77 |
|
170 | | -### Customization |
171 | | -- Toggle between light and dark themes |
172 | | -- Fullscreen mode |
173 | | -- Customizable note titles |
| 78 | +--- |
174 | 79 |
|
175 | 80 | ## β¨οΈ Keyboard Shortcuts |
176 | 81 |
|
177 | | -- `Ctrl+N` - Create a new note |
178 | | -- `Ctrl+S` - Save current note (auto-saves by default) |
179 | | -- `Ctrl+D` - Toggle dark/light mode |
180 | | -- `F11` - Toggle fullscreen mode |
181 | | - |
182 | | -## π Deployment |
183 | | - |
184 | | -### Local Development |
185 | | - |
186 | | -```bash |
187 | | -npm install |
188 | | -npm run dev |
189 | | -``` |
| 82 | +* `Ctrl+N` β New note |
| 83 | +* `Ctrl+S` β Save note |
| 84 | +* `Ctrl+D` β Toggle dark/light mode |
| 85 | +* `F11` β Fullscreen |
190 | 86 |
|
191 | | -### Building for Production |
| 87 | +--- |
192 | 88 |
|
193 | | -```bash |
194 | | -npm run build |
195 | | -``` |
| 89 | +## π οΈ Deployment |
196 | 90 |
|
197 | | -### Deploying to GitHub Pages |
| 91 | +* **Already Deployed:** [GitHub Pages](https://thesolutiondeskandcompany.github.io/markdown-notes/) |
| 92 | +* **Build & Deploy:** |
198 | 93 |
|
199 | | -```bash |
200 | | -# Build and deploy |
201 | | -npm run deploy |
202 | | -``` |
| 94 | + ```bash |
| 95 | + npm run build |
| 96 | + npm run deploy |
| 97 | + ``` |
203 | 98 |
|
204 | | -This will automatically: |
205 | | -1. Build the production version |
206 | | -2. Push to the `gh-pages` branch |
207 | | -3. Make it available at your GitHub Pages URL |
| 99 | +--- |
208 | 100 |
|
209 | 101 | ## π€ Contributing |
210 | 102 |
|
211 | | -We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details. |
212 | | - |
213 | | -### Ways to Contribute |
214 | | - |
215 | | -- π **Report Bugs**: [Open an issue](https://github.com/thesolutiondeskandcompany/markdown-notes/issues/new?template=bug_report.md) |
216 | | -- π‘ **Request Features**: [Suggest new features](https://github.com/thesolutiondeskandcompany/markdown-notes/issues/new?template=feature_request.md) |
217 | | -- π§ **Submit PRs**: Help us improve the codebase |
218 | | -- π **Improve Docs**: Documentation improvements are always welcome |
219 | | -- β **Star the Repo**: Show your support! |
| 103 | +We welcome PRs and ideas! |
| 104 | +See [CONTRIBUTING.md](CONTRIBUTING.md). |
220 | 105 |
|
221 | | -## π Community |
| 106 | +**Ways to contribute:** |
222 | 107 |
|
223 | | -- π¬ **Discussions**: [GitHub Discussions](https://github.com/thesolutiondeskandcompany/markdown-notes/discussions) |
224 | | -- π **Issues**: [Report bugs or request features](https://github.com/thesolutiondeskandcompany/markdown-notes/issues) |
225 | | -- π§ **Contact**: [The Solution Desk & Company](https://thesolutiondesk.ca) |
| 108 | +* Report bugs / suggest features ([issues](https://github.com/thesolutiondeskandcompany/markdown-notes/issues)) |
| 109 | +* Submit PRs to improve code or docs |
| 110 | +* Star β and share the repo! |
226 | 111 |
|
227 | | -## π Acknowledgments |
228 | | - |
229 | | -- Built with [React](https://reactjs.org/) and [Vite](https://vitejs.dev/) |
230 | | -- Styled with [Tailwind CSS](https://tailwindcss.com/) |
231 | | -- Markdown parsing by [react-markdown](https://github.com/remarkjs/react-markdown) |
232 | | -- Syntax highlighting by [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) |
233 | | -- Icons from [React Icons](https://react-icons.github.io/react-icons/) |
234 | | -- Animations by [Framer Motion](https://www.framer.com/motion/) |
| 112 | +--- |
235 | 113 |
|
236 | | -## π Support |
| 114 | +## π Credits |
237 | 115 |
|
238 | | -If you find this project helpful, please consider: |
| 116 | +* [React](https://reactjs.org/), [Vite](https://vitejs.dev/) |
| 117 | +* [Tailwind CSS](https://tailwindcss.com/) |
| 118 | +* [react-markdown](https://github.com/remarkjs/react-markdown) |
| 119 | +* [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) |
| 120 | +* [React Icons](https://react-icons.github.io/react-icons/) |
| 121 | +* [Framer Motion](https://www.framer.com/motion/) |
239 | 122 |
|
240 | | -- β **Starring** the repository |
241 | | -- π **Reporting** any bugs you find |
242 | | -- π‘ **Suggesting** new features |
243 | | -- π **Sharing** with others who might find it useful |
| 123 | +--- |
244 | 124 |
|
245 | 125 | ## π License |
246 | 126 |
|
247 | | -This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
| 127 | +[MIT](LICENSE) |
248 | 128 |
|
249 | 129 | --- |
250 | 130 |
|
251 | | -<div align="center"> |
252 | | - <strong>Made with β€οΈ by <a href="https://thesolutiondesk.ca">The Solution Desk & Company</a></strong> |
253 | | -</div> |
| 131 | +<div align="center"><strong>Made with β€οΈ by <a href="https://thesolutiondesk.ca">The Solution Desk & Company</a></strong></div> |
0 commit comments