## Building the Plugin

You can build the plugin into a wheel file using any PEP-517 compatible build frontend. The build process will automatically:

1. Install UI dependencies using pnpm
2. Build the React frontend
3. Package everything into a wheel file

This is handled by a custom Hatch build hook (`hatch_build.py`).

### Example build commands

```bash
# Using uv (recommended)
uv build

# Or using pip
pip wheel .

# Or using hatch directly
hatch build
```

The build process will fail if `pnpm` is not installed or if the UI build fails.

## Quick Test Checklist

After building, you can quickly verify that the UI static files are included in the wheel:

```bash
# one-liner smoke test
rm -rf ui/dist && uv build
unzip -l dist/airflow_markdown_view_plugin-*.whl | grep 'ui/dist/index.*.js'
```

If the grep shows your JS bundles, you’re golden. If not, the hook didn’t run—fix it before shipping.

# Markdown View Airflow Plugin

This plugin allows users to render Markdown content from a `view.md` file directly within the Airflow UI.

## Features

*   Displays content from a `markdown_view_plugin/view.md` file.
*   Uses FastAPI for the backend and React/Vite for the frontend.
*   Integrates with Airflow's UI theme, including light/dark mode support.
*   Provides a theme toggle button within the plugin's view.

## Setup

1.  **Place the Plugin:** Put the entire `markdown_view_plugin` directory into your Airflow `plugins` folder.
2.  **Install UI Dependencies:** Navigate to the `markdown_view_plugin/ui` directory and run:
    ```bash
    pnpm install
    ```
3.  **Build the UI:** After installing dependencies, build the React frontend:
    ```bash
    pnpm run build
    ```
    This will create a `dist` folder inside `markdown_view_plugin/ui`.
4.  **Restart Airflow Webserver:** After adding the plugin and building the UI, restart your Airflow webserver and scheduler.
5.  **Access the Plugin:** In the Airflow UI, navigate to the "Plugins" menu. You should find a link to the "Markdown View" (the exact name and category might depend on future menu link configuration in `markdown_view_plugin.py`). Clicking this link will take you to the plugin's page.

## Customization

*   To change the displayed content, edit the `markdown_view_plugin/view.md` file.
*   The UI can be further customized by modifying the React components in `markdown_view_plugin/ui/src/`.
*   The backend logic is in `markdown_view_plugin/markdown_view_plugin.py`.

## Development

*   **Backend:** The FastAPI application is defined in `markdown_view_plugin.py`.
*   **Frontend:** The React/Vite application is in the `markdown_view_plugin/ui/` directory.
    *   To run the frontend in development mode (with hot reloading), navigate to `markdown_view_plugin/ui` and run `pnpm run dev`.
    *   Ensure your `vite.config.ts` has the correct `base` path and any necessary proxy configurations if you are developing against a running Airflow instance.