abhishekbhakat
e6d03a2c2e
- Implemented main application structure with App and View components. - Integrated React Markdown for rendering Markdown content. - Added API function to fetch Markdown content from the backend. - Created a custom Chakra UI theme to align with Airflow's design. - Configured Vite for building the application with appropriate asset paths. - Included a sample Markdown file for initial content display. - Set up TypeScript configuration for better development experience.
77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
|
||
## 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.
|