Skip to content

README.md

Latest commit

 

History

History
106 lines (85 loc) · 6.02 KB

README.md

File metadata and controls

106 lines (85 loc) · 6.02 KB
Raw

Mark-MediNote

Ask DeepWiki

Mark-MediNote is a powerful, self-hosted web-based Markdown editor designed for students and professionals, with a special focus on the needs of medical students. It combines a clean, distraction-free writing environment with a rich feature set to enhance productivity and note-taking.

The application features a dual-pane interface with a live-rendering preview, extensive Markdown support, and specialized tools like KaTeX for mathematical notation and Mermaid for diagramming. It includes user authentication, server-side file management, and modern features like biometric login (WebAuthn) and a built-in Pomodoro timer with an integrated YouTube music player.

Key Features

  • Advanced Markdown Editor:

    • Live Split-Screen Preview: See your rendered notes update in real-time as you type.
    • Resizable Panes: Adjust the editor and preview panels to your preference.
    • GitHub-Flavored Markdown: Full support for GFM, including tables, task lists, and code blocks.
    • Rich Formatting Toolbar: A comprehensive toolbar for headings, emphasis, lists, links, and more.
    • Contextual Selection Menu: A floating tooltip appears when you select text for quick formatting.

  • Specialized Formatting:

    • KaTeX Integration: Write beautiful LaTeX mathematical and scientific formulas with $...$ for inline and $$...$$ for block equations.
    • Mermaid.js Support: Create and embed complex diagrams, flowcharts, and sequence diagrams directly in your notes.
    • Syntax Extensions: Includes support for ==highlighting==, ~subscript~, and ^superscript^.
    • Smart Typography: Automatically converts common markup like ---, --, and ... into their correct typographic symbols (—, –, …).

  • Productivity Tools:

    • Pomodoro Timer: A fully-featured Pomodoro clock with customizable work, short break, and long break intervals to help you stay focused.
    • YouTube Music Player: An integrated music queue. Paste YouTube URLs to create a background music playlist for your study sessions.
    • Find & Replace: A powerful search tool with support for case sensitivity and regular expressions.
    • PDF Export: Generate a clean, printable PDF of your rendered notes.

  • User and File Management:

    • User Authentication: Secure user registration and login system. Notes are stored privately for each user.
    • Biometric Login (WebAuthn): Enable fast and secure sign-in using Face ID, Touch ID, or other platform authenticators.
    • Server-Side Storage: All your notes are saved as .md files on the server, neatly organized in per-user directories.
    • File Manager: An in-app modal to open, rename, and delete your saved notes.
    • Auto-Drafting: Your current work is automatically saved to local storage, preventing data loss from accidental page reloads.

Tech Stack

  • Backend: PHP
  • Frontend: Vanilla JavaScript (ES6 Modules), HTML5, CSS3
  • Libraries:
    • marked.js: Markdown parsing
    • KaTeX: Mathematical typesetting
    • Mermaid.js: Diagram rendering
    • html2pdf.js: PDF generation
    • DaisyUI & Tailwind CSS (Browser Build): UI components and styling

Getting Started

Mark-MediNote is a self-hosted application. To set it up, you will need a web server with PHP support (e.g., Apache, Nginx).

  1. Clone the Repository Clone this repository to a directory accessible by your web server.

    git clone https://github.com/VitStudio/Mark-MediNote.git
cd Mark-MediNote

  2. Set Permissions The application stores user accounts, notes, and other data in the data/ directory. Ensure your web server has write permissions for this directory.

    # Grant ownership to the web server user (e.g., www-data for Apache/Nginx on Debian/Ubuntu)
sudo chown -R www-data:www-data data/

# Or, set write permissions for all users (less secure, good for local dev)
chmod -R 777 data/

  3. Access the Application Navigate to the application's URL in your web browser. You will be directed to the login.html page to register a new account or sign in.

File Structure

The repository is organized into a PHP backend, modular JavaScript frontend, and a data storage directory.

.
├── js/
│   ├── app.js               # Main application entry point
│   ├── biometric.js         # WebAuthn (Face ID/fingerprint) logic
│   ├── editor-core.js       # Toolbar, tooltip, and selection helpers
│   ├── file-manager.js      # File open/save/delete/rename UI logic
│   ├── find-replace.js      # Find & Replace modal logic
│   ├── markdown-engine.js   # Markdown, KaTeX, and Mermaid rendering
│   ├── panels.js            # Split-pane management and resizing
│   ├── pdf-export.js        # PDF generation logic
│   └── pomodoro.js          # Pomodoro timer and YouTube player
│
├── auth-check.php           # Verifies if a user is logged in
├── auth.php                 # Core authentication helper functions
├── delete.php               # Handles file deletion
├── index.php                # Main editor application page
├── list.php                 # Lists a user's saved files
├── load.php                 # Loads the content of a file
├── login.html               # Login and registration page
├── login.php                # Handles user login
├── logout.php               # Handles user logout
├── register.php             # Handles new user registration
├── save.php                 # Saves a markdown file
├── webauthn-*.php           # Backend scripts for WebAuthn logic
└── LICENSE                  # AGPL-3.0 License

License

This project is licensed under the GNU Affero General Public License v3.0. See the LICENSE file for more details.