# Welcome to MarkDrop — The Ultimate Markdown Guide & Example 🚀

Welcome to **MarkDrop**, your ultra-fast, minimalist, cloud-powered Markdown publishing platform and pastebin! This document is an interactive example note designed to demonstrate all capabilities, formatting syntax, and workflow features available to you.

---

## ⚡ How to Use MarkDrop

Writing and publishing on **MarkDrop** takes less than 30 seconds. Here is the step-by-step workflow:

1. **Compose in the Editor**: Go to the homepage ([md.jcnino.dev](https://md.jcnino.dev/)) and start writing. Use the **Text** tab to write Markdown, or the **Preview** tab to see your formatting rendered in real-time.
2. **Choose a Custom Link (Slug)**: Under *Custom Link*, enter a unique path (like `/my-notes` or `/project-roadmap`). If you leave it empty, the platform will auto-generate a random short code for you.
3. **Set an Edit Password (Optional)**: Choose a private edit code so only you (or people you share the code with) can edit the note in the future.
4. **Publish & Share**: Click **Publish Note** or press `⌘ + Enter` (`Ctrl + Enter`). Your note is instantly live on the global Edge CDN!
5. **View Raw Plain-Text**: Want raw Markdown for terminal scripts or AI tools? Append `/raw` to any URL (e.g. `md.jcnino.dev/welcome/raw`).

---

## 📑 Dynamic Table of Contents & Outline

Notice the **Document Outline** sidebar? **MarkDrop** automatically scans all headings (`#`, `##`, `###`) in your document to construct an interactive Table of Contents.
- **Scrollspy Tracking**: As you scroll through the article, the outline highlights your current reading position.
- **Direct Anchor Links**: Click any item in the outline to jump smoothly to that section.
- **Shareable Heading Links**: Hover over any heading and click the `#` symbol to copy a direct link to that exact section.

---

## ✍️ Markdown Formatting Showcase

Here is a full breakdown of supported GitHub Flavored Markdown (GFM) elements:

### 1. Typography & Emphasis

- **Bold Text**: `**Bold Text**` or `__Bold Text__` → **Bold Text**
- *Italic Text*: `*Italic Text*` or `_Italic Text_` → *Italic Text*
- ***Bold & Italic***: `***Bold & Italic***` → ***Bold & Italic***
- ~~Strikethrough~~: `~~Strikethrough~~` → ~~Strikethrough~~
- `Inline Code`: `` `console.log("Hello!")` `` → `console.log("Hello!")`

### 2. Interactive Task Lists

Keep track of todos, project milestones, and checklists:

- [x] Create your first Markdown note
- [x] Customize your vanity URL slug
- [x] Set an edit password for security
- [x] Read the dynamic Table of Contents
- [ ] Share your note link with a colleague or friend
- [ ] Star the project on GitHub

### 3. Syntax-Highlighted Code Blocks

**MarkDrop** renders clean, preformatted code blocks with syntax styling:

```typescript
// TypeScript Example: Fetching a note from MarkDrop
interface NoteResponse {
  slug: string;
  content: string;
  views: number;
}

async function fetchNote(slug: string): Promise<NoteResponse> {
  const res = await fetch(`https://md.jcnino.dev/api/paste?slug=${slug}`);
  if (!res.ok) throw new Error('Note not found');
  return res.json();
}

console.log('MarkDrop is ready!');
```

```python
# Python Example: Reading raw Markdown
import requests

response = requests.get("https://md.jcnino.dev/welcome/raw")
print(response.text)
```

```bash
# cURL CLI Example: Output raw Markdown directly into terminal
curl -s https://md.jcnino.dev/welcome/raw
```

---

## 📊 Responsive Data Tables

Organize complex data with clean, mobile-responsive tables:

| Feature | Description | Status |
| :--- | :--- | :--- |
| **Instant SSR** | Blazing fast server-side rendering on Vercel Edge | ✅ Available |
| **Password Lock** | Lock edits with private custom passwords | ✅ Available |
| **Raw Endpoint** | Unparsed Markdown accessible via `/[slug]/raw` | ✅ Available |
| **Auto Dark Mode** | Automatic detection of device OS color preferences | ✅ Available |
| **View Tracking** | Real-time page view counter for every link | ✅ Available |

---

## 💬 Blockquotes & Callout Alerts

> 💡 **Pro-Tip**: You can use blockquotes for highlight callouts, important warnings, or memorable quotations.
>
> *"Simplicity is prerequisite for reliability."* — Edsger W. Dijkstra

> 🔒 **Security Notice**: If you set an Edit Password, make sure to write it down or remember it. For privacy and simplicity, passwords are not recoverable via email.

---

## ⌨️ Keyboard Shortcuts Cheatsheet

Boost your writing speed with built-in keyboard shortcuts:

| Shortcut | Action | Where |
| :--- | :--- | :--- |
| <kbd>⌘</kbd> + <kbd>N</kbd> / <kbd>Ctrl</kbd> + <kbd>N</kbd> | Open new paste editor | Anywhere |
| <kbd>⌘</kbd> + <kbd>Enter</kbd> / <kbd>Ctrl</kbd> + <kbd>Enter</kbd> | Publish / Save note | In editor |
| <kbd>Tab</kbd> | Insert 2-space tab indent | In editor |
| <kbd>Esc</kbd> | Close mobile menu / outline drawer | Mobile view |

---

## 🔗 Useful Links & Next Steps

- 🚀 [**Create a New Note**](/) — Open the Markdown editor and publish your thoughts.
- ℹ️ [**About MarkDrop**](/about) — Learn about the architecture, tech stack, and creator profile.
- 💻 [**GitHub Profile**](https://github.com/jcnino2020/) — View open-source code and projects.
- 📸 [**Instagram Photography**](https://www.instagram.com/photos.jcnino) — Explore visual stories and photography.