# Markdown Blog

[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=flat-square&logo=next.js&logoColor=white)](https://nextjs.org/)
[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-3.4-blue?style=flat-square&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Electron](https://img.shields.io/badge/Electron-28-47848F?style=flat-square&logo=electron&logoColor=white)](https://www.electronjs.org/)
[![Docker](https://img.shields.io/badge/Docker-24-2496ED?style=flat-square&logo=docker&logoColor=white)](https://www.docker.com/)
[![MIT License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)

A modern, cross-platform blog system built with **Next.js**, **Markdown**, and **Electron**. Write posts in Markdown, manage content visually, and deploy to web or desktop.

---

## ✨ Features

- ✍️ **Markdown-based posts** — Write and organize content in Markdown files
- ⚡ **Hot reloading** — See changes instantly as you edit posts
- 🗂️ **Folder & tag organization** — Structure your content with folders and tags
- 🖥️ **Electron desktop app** — Run your blog as a native desktop app
- 📱 **Responsive UI** — Mobile-friendly and clean design
- 🛠️ **Admin dashboard** — Manage posts and folders visually
- 🐳 **Docker support** — Easy deployment with Docker containers

---

## 🚀 Getting Started

### Prerequisites

- [Node.js 18+](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
- [Docker](https://www.docker.com/) (for containerized deployment)

### Installation

```bash
git clone 
cd markdownblog
npm install
```

### Development

- **Web:**  
  `npm run dev`
- **Desktop (Electron):**  
  `npm run electron-dev`

### Production

- **Web build:**  
  `npm run build`
- **Desktop build:**  
  `npm run electron-build`

---

## 🐳 Docker Deployment

The project includes Docker support for easy deployment. A `manage_container.sh` script is provided to simplify container management.

### Docker Setup

1. Make sure Docker is installed and running on your system
2. Update the `MARKDOWN_DIR` path in `manage_container.sh` to point to your local markdown directory
3. Make the script executable:
   ```bash
   chmod +x manage_container.sh
   ```

### Container Management

The `manage_container.sh` script provides several commands:

```bash
# Build the Docker image
./manage_container.sh build

# Start the container
./manage_container.sh start

# Stop the container
./manage_container.sh stop

# Restart the container
./manage_container.sh restart

# View container logs
./manage_container.sh logs

# Check container status
./manage_container.sh status

# Remove the container
./manage_container.sh remove
```

### Container Features

- **Health Checks**: Automatic health monitoring
- **Auto-restart**: Container restarts automatically if it crashes
- **Volume Mounting**: Your markdown files are mounted into the container
- **Port Mapping**: Access the blog at http://localhost:8080

### Container Status

The status command shows:
- Container running state
- Health check status
- Access URL

### Troubleshooting

If the container fails to start:
1. Check the logs: `./manage_container.sh logs`
2. Verify Docker is running
3. Ensure port 8080 is available
4. Check the markdown directory path in `manage_container.sh`

---

## 📝 Writing Posts

Add Markdown files to the `posts/` directory. Each post should have frontmatter:

```markdown
---
title: "Your Post Title"
date: "YYYY-MM-DD"
tags: ["tag1", "tag2"]
summary: "A brief summary of your post"
---

Your post content here...
```

---

## 🗂️ Project Structure

```
markdownblog/
├── posts/           # Markdown blog posts
├── src/
│   ├── app/         # Next.js app directory
│   └── lib/         # Utility functions
├── electron/        # Desktop app code
├── public/          # Static assets (favicons, etc.)
├── Dockerfile       # Docker configuration
├── .dockerignore    # Docker ignore rules
└── manage_container.sh  # Docker management script
```

---

## 🔒 Admin Password Security

- The admin password is stored securely using the bcrypt hashing algorithm (work factor 12, as recommended by [OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html)).
- The hash is saved in `posts/admin.json`, which is excluded from git via `.gitignore`.
- Password changes are written atomically to prevent file corruption.
- If the password file is missing or corrupted, the default login is `admin`/`admin` (with a bcrypt hash generated at runtime).
- Passwords longer than 72 bytes are rejected (bcrypt's safe max).
- You can change the admin password from the admin dashboard after logging in.

**Never share or commit your `posts/admin.json` file!**

---

## 🌐 Favicon

Place your favicon files (e.g., `favicon.ico`, `favicon-32x32.png`, `favicon-16x16.png`) in the `public` directory at the project root.  
Next.js will automatically serve these at the root URL (e.g., `/favicon.ico`).

---

## 🛠️ Technologies Used

- [Next.js 14](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Electron](https://www.electronjs.org/)
- [Remark](https://remark.js.org/) (Markdown)
- [date-fns](https://date-fns.org/)
- [Docker](https://www.docker.com/)

---

## 📄 License

MIT