feat: Add project management tool

This commit replaces the Makefile with a Python CLI tool. The tool
manages the project, including building the Docker image, running the
app in a container, and running the app locally. The tool also builds
the Tailwind CSS stylesheet.

The app always runs with hot template reloading enabled.
In development mode, it also runs with hot code reloading.

.dockerignore

@@ -0,0 +1,6 @@
+# Copyright DB InfraGO AG and contributors
+# SPDX-License-Identifier: CC0-1.0
+
+static/css/main*.css
+static/js/tailwind*.js
+static/js/typography*.js

.gitignore

@@ -165,3 +165,6 @@ package*.json
 
 # IntelliJ project files
 .idea/
+
+# stylesheet generated by tailwindcss cli
+static/css/main-*.css

Dockerfile

@@ -2,54 +2,88 @@
 # SPDX-License-Identifier: Apache-2.0
 
 FROM python:3.12-slim-bookworm
-WORKDIR /app
+ARG TAILWIND_CSS_VERSION
+ARG TAILWIND_CSS_CLI_VERSION
+ARG TAILWIND_CSS_TYPOGRAPHY_VERSION
 USER root
+WORKDIR /app
+ENV HOME=/home
+ENV MODEL_ENTRYPOINT=/model
+# Expose the port the app runs on
+EXPOSE 8000
+
 # install system pkgs {{{
 RUN apt-get update && \
   apt-get install --yes --no-install-recommends \
   curl \
   git \
   git-lfs \
-  libgirepository1.0-dev \
-  libcairo2-dev \
   gir1.2-pango-1.0 \
   graphviz \
-  make && \
+  libcairo2-dev \
+  libgirepository1.0-dev \
+  npm && \
+  apt-get autoremove --yes && \
+  apt-get clean && \
   rm -rf /var/lib/apt/lists/*
 # }}}
-# copy needed app assets {{{
+
+# copy files {{{
 COPY capella_model_explorer capella_model_explorer
 COPY static static
 COPY templates templates
 COPY Makefile pyproject.toml ./
 COPY .git .git
 COPY entrypoint.sh /
-# }}}
-# Expose the port the app runs on
-EXPOSE 8000
-ENV HOME=/home
 RUN chmod +x /entrypoint.sh
-ENV MODEL_ENTRYPOINT=/model
+# }}}
 
+# misc setup {{{
 RUN git config --global --add safe.directory /model && \
   git config --global --add safe.directory /model/.git && \
   chmod -R 777 /app && \
   chmod -R 777 /home
+# }}}
 
 # Run as non-root user per default
 USER 1000
 
+# install tailwindcss stuff {{{
+RUN npm install -D \
+  tailwindcss@${TAILWIND_CSS_VERSION} \
+  @tailwindcss/cli@${TAILWIND_CSS_CLI_VERSION} \
+  @tailwindcss/typography@${TAILWIND_CSS_TYPOGRAPHY_VERSION}
+# }}}
+
 # install uv {{{
 RUN curl -Lo /tmp/install.sh https://astral.sh/uv/install.sh && \
   chmod +x /tmp/install.sh && \
   UV_NO_MODIFY_PATH=1 sh /tmp/install.sh && \
   rm /tmp/install.sh
 # }}}
 
+# install app incl. its cli and build stylesheet {{{
 RUN $HOME/.local/bin/uv venv && \
   # install app
   $HOME/.local/bin/uv pip install --no-cache-dir . && \
   # Install elk.js automatically into a persistent local cache directory
   # in order to prepare the elk.js execution environment ahead of time.
-  $HOME/.local/bin/uv run python3 -c "from capellambse_context_diagrams import install_elk; install_elk()"
+  $HOME/.local/bin/uv run python3 -c "from capellambse_context_diagrams import install_elk; install_elk()" && \
+  # build stylesheet
+  python3 -m capella_model_explorer build css
+# }}}
+
+
+# clean up as root {{{
+USER root
+RUN apt-get purge --remove --yes curl npm && \
+  apt-get autoremove --yes && \
+  apt-get clean && \
+  rm -rf /var/lib/apt/lists/* \
+  rm -rf node_modules
+# }}}
+
+# Back to non-root user
+USER 1000
+
 ENTRYPOINT ["/entrypoint.sh"]

Makefile

@@ -25,16 +25,48 @@ help:
 	@echo '- dev              -- Run the app in development (reload) mode'
 	@echo '- pre-commit-setup -- Setup the pre-commit environment'
 
+build-tailwind-css:
+	@echo "Checking for static/css/tailwind.css..."
+	if [ -f $PWD/static/css/tailwind.css ]; then \
+		echo "File static/css/tailwind.css exists. Exiting."; \
+		exit 0; \
+	fi; \
+	# check if Tailwind CLI is installed
+	if ! command -v tailwind > /dev/null; then \
+		echo "Error: Command `tailwind` (Tailwind CLI) not found."; \
+		exit 1; \
+	fi; \
+	echo "Building Tailwind CSS..."; \
+	tailwind --minify \
+	-i static/css/main.css \
+	-o static/css/tailwind.css
+
+ensure-tailwind-assets:
+	# do nothing, when Tailwind CLI has already built `tailwind.css`
+	if [ -f static/css/tailwind.css ]; then \
+		exit 0; \
+	fi; \
+	# check if `curl` is installed
+	if ! command -v curl > /dev/null; then \
+		echo "Error: curl is not installed."; \
+		exit 1; \
+	fi; \
+	[ -f static/js/tailwind.min.js ] || \
+		curl -Lo static/js/tailwind.min.js https://cdn.tailwindcss.com/4.0.0; \
+	[ -f static/js/typography.min.js ] || \
+		curl -Lo static/js/typography.min.js \
+		https://cdn.tailwindcss.com/3.4.16\?plugins\=[email protected]
+
 .PHONY: run
-run:
+run: build-tailwind-css
 	python -c "from capellambse_context_diagrams import install_elk; install_elk()"
 	MODEL="$$MODEL" TEMPLATES_DIR="$$TEMPLATES_DIR" uvicorn \
 		--host=$(HOST) \
 		--port=$(PORT) \
 		capella_model_explorer.main:app
 
 .PHONY: dev
-dev:
+dev: ensure-tailwind-assets
 	python -c "from capellambse_context_diagrams import install_elk; install_elk()"
 	MODEL="$$MODEL" TEMPLATES_DIR="$$TEMPLATES_DIR" LIVE=1 uvicorn \
 		--host=$(HOST) \

README.md

@@ -31,18 +31,20 @@ There are a few more use cases but we will reveal them a bit later.
 
 # Quick start
 
-Ensure that you enable host networking in Docker settings. This is needed to
-access the app from the host machine.
+Clone this repository, then build a Docker container:
 
-Clone, then build and run locally with Docker:
+```bash
+python3 -m capella_model_explorer build image
+python3 -m capella_model_explorer run container
+```
+
+Run in a container with Docker:
 
 ```bash
-docker build -t model-explorer:latest .
-docker run --rm --name=cme \
-  -e MODEL_ENTRYPOINT='{"path": "git+https://github.com/eclipse-capella/capella","revision": "v7.0.0", "entrypoint": "samples/In-Flight Entertainment System/In-Flight Entertainment System.aird"}' \
+docker run --rm \
+  -e MODEL_ENTRYPOINT='{"path": "git+https://github.com/DSD-DBS/Capella-IFE-sample.git","revision": "master", "entrypoint": "In-Flight Entertainment System.aird"}' \
   -p 8000:8000 \
-  --net=host \
-  model-explorer
+  capella-model-explorer
 ```
 
 If you want to be able to explore a local Capella model, and/ or live edit and
@@ -51,12 +53,10 @@ container and enable live hot code reloading:
 
 ```bash
 docker build -t model-explorer:latest .
-docker run --rm --name=cme \
-  -e LIVE="1" \
-  -v /absolute/path/to/your/model/folder/on/host:/model \
-  -v "$PWD/templates:/app/templates" \
+docker run --rm -e LIVE="1" \
   -p 8000:8000 \
-  --net=host \
+  -v /absolute/path/to/your/model/folder/on/host:/model \
+  -v "$(pwd)/templates:/app/templates" \
   model-explorer
 ```