TailwindCSS production.
This commit is contained in:
Clive
@@ -285,6 +285,9 @@ FakesAssemblies/
|
||||
.ntvs_analysis.dat
|
||||
node_modules/
|
||||
|
||||
# Tailwind CSS build output (generated by `npm run build:css`)
|
||||
plushealthtech/wwwroot/css/tailwind.css
|
||||
|
||||
# Visual Studio 6 build log
|
||||
*.plg
|
||||
|
||||
|
||||
@@ -12,14 +12,15 @@ Run from the repo root (the solution directory).
|
||||
|
||||
- Build: `dotnet build plushealthtech.sln`
|
||||
- Run locally: `dotnet run --project plushealthtech` → https://localhost:7070 (http: 5047, per the `https` profile in `Properties/launchSettings.json`); use `dotnet watch --project plushealthtech` for hot reload
|
||||
- Docker image (build context is the repo root, not the project folder): `docker build . -t plushealthtech:latest -f plushealthtech/Dockerfile`
|
||||
- CSS: `npm install` once, then `npm run build:css` compiles the Tailwind v4 bundle into `plushealthtech/wwwroot/css/tailwind.css` (use `npm run watch:css` while editing pages). The layout links this local file — never load the Tailwind Play CDN from markup.
|
||||
- Docker image (build context is the repo root, not the project folder): `docker build . -t plushealthtech:latest -f plushealthtech/Dockerfile` — the Dockerfile's node stage builds the CSS itself, so no local `npm run build:css` is needed before a Docker build.
|
||||
- There is no test project and no linter/formatter configuration.
|
||||
|
||||
## Architecture
|
||||
|
||||
- `plushealthtech/` is the only project. `Program.cs` is the entire pipeline: `AddRazorPages()`, HTTPS redirect, static files — new services would be registered there.
|
||||
- Pages use the Razor Pages convention: `Pages/<Name>.cshtml` + `<Name>.cshtml.cs` (a PageModel). Existing: `Index` (logo hero), `Privacy`, `Error`, and the shared `Shared/_Layout.cshtml`. There are no areas or controllers.
|
||||
- Shared chrome and branding: `Pages/Shared/_Layout.cshtml` (navbar with Home + external blog link, footer) and `wwwroot/css/site.css` (CSS custom properties; `.bg-blue` = `#1c8098` is the brand color used on the navbar). The layout `<head>` loads an external analytics script from analytics.rokoh.com.
|
||||
- Shared chrome and branding: `Pages/Shared/_Layout.cshtml` (navbar with Home + external blog link, footer). Styling is a **Tailwind v4** bundle: source `wwwroot/css/tailwind.input.css` (CSS-first `@theme` with brand colors — `brand` `#1c8098`, `brand-dark` `#145f72`, `brand-light` `#e6f2f5`, `brand-accent` `#0ea5e9`, `brand-vet` `#0d9488`), built by the Tailwind CLI into `wwwroot/css/tailwind.css` and linked in the layout `<head>`. `wwwroot/css/site.css` holds legacy CSS custom properties (`.bg-blue` = `#1c8098`). The layout `<head>` also loads an external analytics script from analytics.rokoh.com.
|
||||
- Brand and UI design guidelines live in `Design.MD` (color palette with `#1c8098` as brand core, typography, component/layout conventions) — follow it when adding or restyling pages.
|
||||
- Client libraries (Bootstrap, jQuery, jquery-validation) are vendored in `wwwroot/lib`; logo and favicon are in `wwwroot/img/`.
|
||||
|
||||
@@ -27,5 +28,4 @@ Run from the repo root (the solution directory).
|
||||
|
||||
- Pushes to Gitea (gitea.rokoh.com) run the Gitea Actions workflow: build the Docker image → push `registry.rokoh.com/plushealthtech:latest` → SSH into `10.10.0.90` and run the container with `-p 7000:80 --restart=always`. Registry and server credentials come from Gitea secrets, not the repo.
|
||||
- The workflow file exists in **two identical copies**: `.gitea/workflows/default.yml` (the one Gitea reads) and `plushealthtech/.gitea/workflows/default.yml` (referenced from the csproj as `<None Include>`). Keep them in sync when editing either.
|
||||
- The Dockerfile is multi-stage (restore → build → publish → aspnet runtime), exposes 80/443, entrypoint `dotnet plushealthtech.dll`.
|
||||
- **Known inconsistency**: the project targets `net10.0`, but the Dockerfile still pins .NET 7 base images (`mcr.microsoft.com/dotnet/{aspnet,sdk}:7.0`), so `docker build` fails as-is. When touching the Dockerfile, bump the base images to .NET 10 to match the TFM.
|
||||
- The Dockerfile is multi-stage (node frontend → restore → build → publish → aspnet runtime), exposes 80/443, entrypoint `dotnet plushealthtech.dll`. The `frontend` stage runs `npm ci && npm run build:css` and feeds the generated `wwwroot/css/tailwind.css` into the dotnet build, so the image always ships freshly compiled CSS.
|
||||
|
||||
Generated
+1170
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "plushealthtech",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build:css": "tailwindcss -i ./plushealthtech/wwwroot/css/tailwind.input.css -o ./plushealthtech/wwwroot/css/tailwind.css --minify",
|
||||
"watch:css": "tailwindcss -i ./plushealthtech/wwwroot/css/tailwind.input.css -o ./plushealthtech/wwwroot/css/tailwind.css --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/cli": "^4.1.0",
|
||||
"tailwindcss": "^4.1.0"
|
||||
}
|
||||
}
|
||||
@@ -5,11 +5,19 @@ WORKDIR /app
|
||||
EXPOSE 80
|
||||
EXPOSE 443
|
||||
|
||||
FROM node:24-alpine AS frontend
|
||||
WORKDIR /src
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY . .
|
||||
RUN npm run build:css
|
||||
|
||||
FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
|
||||
WORKDIR /src
|
||||
COPY ["plushealthtech/plushealthtech.csproj", "plushealthtech/"]
|
||||
RUN dotnet restore "plushealthtech/plushealthtech.csproj"
|
||||
COPY . .
|
||||
COPY --from=frontend /src/plushealthtech/wwwroot/css/tailwind.css ./plushealthtech/wwwroot/css/tailwind.css
|
||||
WORKDIR "/src/plushealthtech"
|
||||
RUN dotnet build "plushealthtech.csproj" -c Release -o /app/build
|
||||
|
||||
|
||||
@@ -4,25 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData["Title"] - Plus Health Tech | Interoperable Clinical Decision Support & Patient Management</title>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
DEFAULT: '#1c8098',
|
||||
dark: '#145f72',
|
||||
light: '#e6f2f5',
|
||||
accent: '#0ea5e9',
|
||||
vet: '#0d9488'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="~/css/tailwind.css" />
|
||||
<!-- FontAwesome for Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="icon" type="image/x-icon" href="~/img/favicon.ico">
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-brand: #1c8098;
|
||||
--color-brand-dark: #145f72;
|
||||
--color-brand-light: #e6f2f5;
|
||||
--color-brand-accent: #0ea5e9;
|
||||
--color-brand-vet: #0d9488;
|
||||
}
|
||||
Reference in New Issue
Block a user