Moving to Tailwind (#104)

After the release of Bulma 1.0, the support for dark mode and additional
utilities left a few things up in the air regarding customization
options. Generally the concept isn't bad, but there were a couple
problems which resulted in me picking up this ticket again.

Moving to TailwindCSS + DaisyUI. This also allows us to pick up
sponsorship from @Zenosyne-Technologies as well in the form of
TailwindUI components.

.air.toml

@@ -18,6 +18,8 @@ exclude_dir = [
   "wga_data",
   "wga_sitemap",
   "node_modules",
+  "test-results",
+  "playwright-report",
 ]
 exclude_file = []
 exclude_regex = ["_test.go"]

.dockerignore

@@ -0,0 +1,63 @@
+# flyctl launch added from .gitignore
+# App local data
+**/wga_data
+**/wga_sitemap
+**/analytics.txt
+**/.env
+**/wga
+
+# Go build related files
+**/dist
+**/tmp
+
+# VSCode can output html from mjml
+**/*/mjml/*.html
+
+# Front-end build files
+**/resources/sitebuild/out/style.css
+**/assets/public/css/style.css
+**/assets/public/js/*.js
+**/assets/public/js/*.map
+**/assets/public/js/*.txt
+**/assets/public/css/*.css
+**/assets/public/css/*.map
+**/assets/public/css/*.txt
+**/assets/public/fa-*
+
+# hosts seed data for the guestbook, can't include because of GDPR
+**/guestbook.json
+
+# this file is used for cache only
+**/contributors.json
+
+# Dependecies shouldn't be a part of the source code
+**/node_modules
+**/meta.json
+
+# Ignore templ generated files
+**/*_templ.go
+**/*_templ.txt
+
+# Ignore playwright generated files
+test-results
+playwright-report
+blob-report
+playwright/.cache
+
+# flyctl launch added from .husky/_/.gitignore
+.husky/_/**/*
+
+# flyctl launch added from .idea/.gitignore
+# Default ignored files
+.idea/shelf
+.idea/workspace.xml
+# Editor-based HTTP Client requests
+.idea/httpRequests
+# Datasource local storage ignored files
+.idea/dataSources
+.idea/dataSources.local.xml
+
+# flyctl launch added from assets/public/js/vendor/.gitignore
+assets/public/js/vendor/**/htmx.min.js
+assets/public/js/vendor/**/loading-states.js
+fly.toml

.github/workflows/dev.yml

@@ -0,0 +1,19 @@
+name: Dev Deploy
+on:
+  push:
+    branches:
+      - "**"
+      - "!main"
+jobs:
+  deploy:
+    name: Deploy app
+    runs-on: ubuntu-latest
+    concurrency: deploy-group
+    environment: dev
+    if: contains(github.event.head_commit.message, 'deploy-dev')
+    steps:
+      - uses: actions/checkout@v4
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+      - run: flyctl deploy --remote-only
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/playwright.yml

@@ -9,9 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Set up bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: lts/*
+          bun-version: latest
       - uses: actions/setup-go@v5
         with:
           go-version-file: "go.mod"
@@ -24,9 +25,9 @@ jobs:
       - name: Install go modules
         run: go mod tidy
       - name: Install dependencies
-        run: npm ci
+        run: bun install
       - name: Transpile Frontend
-        run: task build:frontend
+        run: bun run build
       - name: Build the application
         run: go build -o wga
       - uses: actions/upload-artifact@v4
@@ -46,9 +47,10 @@ jobs:
     environment: playwright
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Set up bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: lts/*
+          bun-version: latest
       - name: Fetch the executable
         uses: actions/download-artifact@v4
         with:
@@ -61,7 +63,7 @@ jobs:
       - name: Run Mailpit
         run: ./mailpit > mailpit.log &
       - name: Install NPM dependencies
-        run: npm ci
+        run: bun install
       - name: Get installed Playwright version
         id: playwright-version
         run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['node_modules/@playwright/test'].version)")" >> $GITHUB_ENV
@@ -72,10 +74,10 @@ jobs:
           path: |
             ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-      - run: npx playwright install --with-deps
+      - run: bunx playwright install --with-deps
         name: Install Playwright
         if: steps.playwright-cache.outputs.cache-hit != 'true'
-      - run: npx playwright install-deps
+      - run: bunx playwright install-deps
         name: Install Playwright dependencies
         if: steps.playwright-cache.outputs.cache-hit != 'true'
       - name: Add executable permissions
@@ -102,7 +104,7 @@ jobs:
       - run: ls -lah ./wga_tmp
       - run: ls -lah
       - name: Run Playwright tests
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: bunx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         env:
           WGA_PROTOCOL: ${{ vars.WGA_PROTOCOL }}
           WGA_HOSTNAME: ${{ vars.WGA_HOSTNAME }}
@@ -152,11 +154,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Set up bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: 18
+          bun-version: latest
       - name: Install dependencies
-        run: npm ci
+        run: bun install
 
       - name: Download blob reports from GitHub Actions Artifacts
         uses: actions/download-artifact@v4
@@ -166,7 +169,7 @@ jobs:
           merge-multiple: true
 
       - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
+        run: bunx playwright merge-reports --reporter html ./all-blob-reports
 
       - name: Upload HTML report
         uses: actions/upload-artifact@v4

.github/workflows/release.yml

@@ -16,11 +16,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v2
+      - name: Set up bun
+        uses: oven-sh/setup-bun@v1
         with:
-          node-version: ">=14.17.0"
-          cache: "npm"
+          bun-version: latest
 
       - name: Set up Go
         uses: actions/setup-go@v3

.gitignore

@@ -3,6 +3,8 @@ wga_data
 wga_sitemap
 analytics.txt
 .env
+.env.dev
+.env.uat
 wga
 
 # Go build related files

.goreleaser.yaml

@@ -1,9 +1,10 @@
 before:
   hooks:
-    - npm ci
+    - bun install
     - templ generate
     - go mod tidy
-    - node esbuild.mjs
+    - bun run build:css
+    - bun run build:js
 
 builds:
   - env:

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
+bunx lint-staged

.vscode/settings.json

@@ -15,24 +15,37 @@
     "Automigrate",
     "bluemonday",
     "bulma",
+    "Cloners",
+    "cssnano",
+    "daisyui",
     "daos",
     "esbuild",
     "fontawesome",
+    "Galicz",
     "goarch",
     "godotenv",
     "Goreleaser",
     "Htmx",
     "isaack",
+    "joho",
     "koedijck",
     "labstack",
     "Lexend",
     "Mailpit",
+    "metafile",
     "migratecmd",
+    "Miklós",
+    "onclick",
+    "outbase",
+    "outdir",
+    "pcss",
     "pocketbase",
     "sabloger",
+    "tailwindcss",
     "templ",
     "tmpl",
     "trix",
-    "Upsert"
+    "Upsert",
+    "viewerjs"
   ]
 }

Dockerfile

@@ -0,0 +1,25 @@
+ARG GO_VERSION=1.22.2
+FROM oven/bun:alpine as bun-builder
+
+RUN apk add git
+WORKDIR /app/src
+COPY . .
+RUN bun install
+RUN bun run build
+
+FROM golang:${GO_VERSION}-alpine as go-builder
+
+RUN echo "Building with Go version ${GO_VERSION}"
+
+WORKDIR /app/src
+COPY --from=bun-builder /app/src /app/src
+RUN go mod download && go mod verify
+RUN go install github.com/a-h/templ/cmd/templ@latest
+RUN templ generate
+RUN go build -v -o /run-app .
+
+
+FROM alpine:latest
+
+COPY --from=go-builder /run-app /usr/local/bin/
+CMD ["run-app", "serve", "--http", "0.0.0.0:8090"]

README.md

@@ -10,12 +10,12 @@ This repository contains the code for the Web Gallery of Art project. The projec
 
 The project is built using the following technologies:
 
-- [PocketBase](https://pocketbase.io) - A Go based SaaS platform for building web applications
 - [htmx](https://htmx.org) - A javascript library for building web applications
-- [Bulma](https://bulma.io) - A CSS framework for building responsive web applications
+- [TailwindCSS](https://tailwindcss.com/) - A utility-first CSS framework
+  - [DaisyUI](https://daisyui.com/) - A component library for TailwindCSS
 - [Go](https://go.dev/) 1.21+ - A programming language for building web applications
-- [Sass](https://sass-lang.com/) - A CSS preprocessor for building responsive web applications
-- [Goreleaser](https://goreleaser.com/) - A tool for building and releasing Go applications
+  - [PocketBase](https://pocketbase.io) - A Go based SaaS platform for building web applications
+  - [Goreleaser](https://goreleaser.com/) - A tool for building and releasing Go applications
 
 ## Getting Started
 
@@ -85,9 +85,9 @@ The application will start on port 8090 by default. You can access it by going t
 To build the application you will need to have the following installed:
 
 - [Go](https://go.dev/) 1.21+
-- [NodeJS](https://nodejs.org/en/) 14+
-- [NPM](https://www.npmjs.com/) 6+
+- [Bun](https://bun.sh/) v1.1+
 - [Goreleaser](https://goreleaser.com/)
+- [Templ](https://templ.guide/)
 
 #### Building the application
 
@@ -97,12 +97,22 @@ Building the application relies on [Goreleaser](https://goreleaser.com/) to buil
 goreleaser release --snapshot --clean
 ```
 
-This will build the application and place the binary in the `dist` folder.
+This will build the application and place the binary in the `./dist` folder.
 
 ## Contributing
 
 Contributions are welcome. Please read [CONTRIBUTING.md](CONTRIBUTING.md) for more information.
 
+### Development quick start
+
+#### Docker
+
+The supplied `docker-compose.yml` file will bring up a configured `minio` and `mailpit` instance to simulate the services used in production.
+
+#### Frontend
+
+All frontend assets (templ, postcss) can be built with `npm run dev` (this command will start a dev server as well) and the JS dependencies with `bun run build:js`.
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details