feat: build css from less files locally (#735)

* build less using lessc and bun * build * make styles-check * Added workflow to check updates * avoid embed less files * docs * updated tests to reflect changes * typo * fixed archive page css * call styles check on pull requests * comments in style.less * fix archive styles affecting other pages * minify using clean-css * Split archive.css and style.css * Updated docs
go-shiori · Sep 16, 2023 · 4df7e1d · 4df7e1d
1 parent 3fb3f60
commit 4df7e1d
Show file tree

Hide file tree

Showing 50 changed files with 138 additions and 24 deletions.
diff --git a/.github/workflows/_styles-check.yml b/.github/workflows/_styles-check.yml
@@ -0,0 +1,18 @@
+name: "styles-check"
+
+on: workflow_call
+
+jobs:
+  styles-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@a1800f471a0bc25cddac36bb13e6f436ddf341d7 # v1
+        with:
+          bun-version: "1.0.1"
+
+      - name: Check
+        run: make styles-check
+
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -16,8 +16,10 @@ jobs:
     uses: ./.github/workflows/_test.yml
   call-swagger-check:
     uses: ./.github/workflows/_swagger-check.yml
+  call-styles-check:
+    uses: ./.github/workflows/_styles-check.yml
   call-gorelease:
-    needs: [call-lint, call-test, call-swagger-check]
+    needs: [call-lint, call-test, call-swagger-check, call-styles-check]
     uses: ./.github/workflows/_gorelease.yml
   call-buildx:
     needs: call-gorelease

diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,6 @@ dist/
 
 # macOS trash files
 .DS_Store
+
+# frontend
+node_modules
diff --git a/Makefile b/Makefile
@@ -23,6 +23,9 @@ SHIORI_DEVELOPMENT ?= true
 SWAG_VERSION := $(shell grep "swaggo/swag" go.mod | cut -d " " -f 2)
 SWAGGER_DOCS_PATH ?= ./docs/swagger
 
+# Frontend
+CLEANCSS_OPTS ?= --with-rebase
+
 # Help documentatin à la https://marmelab.com/blog/2016/02/29/auto-documented-makefile.html
 .PHONY: help
 help:
@@ -71,6 +74,16 @@ golangci-lint:
 unittest:
 	GIN_MODE=$(GIN_MODE) GO_TEST_FLAGS="$(GO_TEST_FLAGS)" GOTESTFMT_FLAGS="$(GOTESTFMT_FLAGS)" $(BASH) -xe ./scripts/test.sh
 
+## Build styles
+.PHONY: styles
+styles:
+	CLEANCSS_OPTS=$(CLEANCSS_OPTS) $(BASH) ./scripts/styles.sh
+
+## Build styles
+.PHONY: styles-check
+styles-check:
+	CLEANCSS_OPTS=$(CLEANCSS_OPTS) $(BASH) ./scripts/styles_check.sh
+
 ## Build binary
 .PHONY: build
 build: clean

diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/Contribute.md b/docs/Contribute.md
@@ -33,6 +33,20 @@ Then, run the following command:
 make swagger
 ```
 
+## Updating the frontend styles
+
+The styles that are bundled with Shiori are stored under `internal/view/assets/css/style.css` and `internal/view/assets/css/archive.css` and created from the less files under `internal/views/assets/less`.
+
+If you want to make frontend changes you need to do that under the less files and then compile them to css. In order to do that, you need to have installed [bun](https://bun.sh) (preferred) or [lessc](http://lesscss.org/usage/#command-line-usage)/[clean-css-cli](https://github.com/clean-css/clean-css-cli).
+
+Then, run the following command:
+
+```bash
+make styles
+```
+
+The `style.css`/`archive.css` will be updated and changes **needs to be commited** to the repository.
+
 ## Lint the code
 
 In order to lint the code, you need to have installed [golangci-lint](https://golangci-lint.run) and [swag](https://github.com/swaggo/swag).

diff --git a/internal/http/routes/frontend_test.go b/internal/http/routes/frontend_test.go
@@ -35,9 +35,9 @@ func TestFrontendRoutes(t *testing.T) {
 		require.Equal(t, 200, w.Code)
 	})
 
-	t.Run("/css/stylesheet.css", func(t *testing.T) {
+	t.Run("/css/style.css", func(t *testing.T) {
 		w := httptest.NewRecorder()
-		req, _ := http.NewRequest("GET", "/assets/css/stylesheet.css", nil)
+		req, _ := http.NewRequest("GET", "/assets/css/style.css", nil)
 		g.ServeHTTP(w, req)
 		require.Equal(t, 200, w.Code)
 	})

diff --git a/internal/view/404.html b/internal/view/404.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="assets/css/style.css" rel="stylesheet">
     <title>Shiori</title>
 </head>
 <body>

diff --git a/internal/view/assets/css/archive.css b/internal/view/assets/css/archive.css
diff --git a/internal/view/assets/css/bookmark-item.css b/internal/view/assets/css/bookmark-item.css
diff --git a/internal/view/assets/css/custom-dialog.css b/internal/view/assets/css/custom-dialog.css
diff --git a/internal/view/assets/css/fontawesome.min.css → .../view/assets/css/libs/fontawesome.min.css b/internal/view/assets/css/fontawesome.min.css → .../view/assets/css/libs/fontawesome.min.css
diff --git a/...l/view/assets/css/fonts/fa-brands-400.eot → ...w/assets/css/libs/fonts/fa-brands-400.eot b/...l/view/assets/css/fonts/fa-brands-400.eot → ...w/assets/css/libs/fonts/fa-brands-400.eot
diff --git a/...l/view/assets/css/fonts/fa-brands-400.svg → ...w/assets/css/libs/fonts/fa-brands-400.svg b/...l/view/assets/css/fonts/fa-brands-400.svg → ...w/assets/css/libs/fonts/fa-brands-400.svg
diff --git a/...l/view/assets/css/fonts/fa-brands-400.ttf → ...w/assets/css/libs/fonts/fa-brands-400.ttf b/...l/view/assets/css/fonts/fa-brands-400.ttf → ...w/assets/css/libs/fonts/fa-brands-400.ttf
diff --git a/.../view/assets/css/fonts/fa-brands-400.woff → .../assets/css/libs/fonts/fa-brands-400.woff b/.../view/assets/css/fonts/fa-brands-400.woff → .../assets/css/libs/fonts/fa-brands-400.woff
diff --git a/...view/assets/css/fonts/fa-brands-400.woff2 → ...assets/css/libs/fonts/fa-brands-400.woff2 b/...view/assets/css/fonts/fa-brands-400.woff2 → ...assets/css/libs/fonts/fa-brands-400.woff2
diff --git a/.../view/assets/css/fonts/fa-regular-400.eot → .../assets/css/libs/fonts/fa-regular-400.eot b/.../view/assets/css/fonts/fa-regular-400.eot → .../assets/css/libs/fonts/fa-regular-400.eot
diff --git a/.../view/assets/css/fonts/fa-regular-400.svg → .../assets/css/libs/fonts/fa-regular-400.svg b/.../view/assets/css/fonts/fa-regular-400.svg → .../assets/css/libs/fonts/fa-regular-400.svg
diff --git a/.../view/assets/css/fonts/fa-regular-400.ttf → .../assets/css/libs/fonts/fa-regular-400.ttf b/.../view/assets/css/fonts/fa-regular-400.ttf → .../assets/css/libs/fonts/fa-regular-400.ttf
diff --git a/...view/assets/css/fonts/fa-regular-400.woff → ...assets/css/libs/fonts/fa-regular-400.woff b/...view/assets/css/fonts/fa-regular-400.woff → ...assets/css/libs/fonts/fa-regular-400.woff
diff --git a/...iew/assets/css/fonts/fa-regular-400.woff2 → ...ssets/css/libs/fonts/fa-regular-400.woff2 b/...iew/assets/css/fonts/fa-regular-400.woff2 → ...ssets/css/libs/fonts/fa-regular-400.woff2
diff --git a/...al/view/assets/css/fonts/fa-solid-900.eot → ...ew/assets/css/libs/fonts/fa-solid-900.eot b/...al/view/assets/css/fonts/fa-solid-900.eot → ...ew/assets/css/libs/fonts/fa-solid-900.eot
diff --git a/...al/view/assets/css/fonts/fa-solid-900.svg → ...ew/assets/css/libs/fonts/fa-solid-900.svg b/...al/view/assets/css/fonts/fa-solid-900.svg → ...ew/assets/css/libs/fonts/fa-solid-900.svg
diff --git a/...al/view/assets/css/fonts/fa-solid-900.ttf → ...ew/assets/css/libs/fonts/fa-solid-900.ttf b/...al/view/assets/css/fonts/fa-solid-900.ttf → ...ew/assets/css/libs/fonts/fa-solid-900.ttf
diff --git a/...l/view/assets/css/fonts/fa-solid-900.woff → ...w/assets/css/libs/fonts/fa-solid-900.woff b/...l/view/assets/css/fonts/fa-solid-900.woff → ...w/assets/css/libs/fonts/fa-solid-900.woff
diff --git a/.../view/assets/css/fonts/fa-solid-900.woff2 → .../assets/css/libs/fonts/fa-solid-900.woff2 b/.../view/assets/css/fonts/fa-solid-900.woff2 → .../assets/css/libs/fonts/fa-solid-900.woff2
diff --git a/.../fonts/source-sans-pro-v13-latin-200.woff → .../fonts/source-sans-pro-v13-latin-200.woff b/.../fonts/source-sans-pro-v13-latin-200.woff → .../fonts/source-sans-pro-v13-latin-200.woff
diff --git a/...fonts/source-sans-pro-v13-latin-200.woff2 → ...fonts/source-sans-pro-v13-latin-200.woff2 b/...fonts/source-sans-pro-v13-latin-200.woff2 → ...fonts/source-sans-pro-v13-latin-200.woff2
diff --git a/.../fonts/source-sans-pro-v13-latin-600.woff → .../fonts/source-sans-pro-v13-latin-600.woff b/.../fonts/source-sans-pro-v13-latin-600.woff → .../fonts/source-sans-pro-v13-latin-600.woff
diff --git a/...fonts/source-sans-pro-v13-latin-600.woff2 → ...fonts/source-sans-pro-v13-latin-600.woff2 b/...fonts/source-sans-pro-v13-latin-600.woff2 → ...fonts/source-sans-pro-v13-latin-600.woff2
diff --git a/.../fonts/source-sans-pro-v13-latin-700.woff → .../fonts/source-sans-pro-v13-latin-700.woff b/.../fonts/source-sans-pro-v13-latin-700.woff → .../fonts/source-sans-pro-v13-latin-700.woff
diff --git a/...fonts/source-sans-pro-v13-latin-700.woff2 → ...fonts/source-sans-pro-v13-latin-700.woff2 b/...fonts/source-sans-pro-v13-latin-700.woff2 → ...fonts/source-sans-pro-v13-latin-700.woff2
diff --git a/...ts/source-sans-pro-v13-latin-regular.woff → ...ts/source-sans-pro-v13-latin-regular.woff b/...ts/source-sans-pro-v13-latin-regular.woff → ...ts/source-sans-pro-v13-latin-regular.woff
diff --git a/...s/source-sans-pro-v13-latin-regular.woff2 → ...s/source-sans-pro-v13-latin-regular.woff2 b/...s/source-sans-pro-v13-latin-regular.woff2 → ...s/source-sans-pro-v13-latin-regular.woff2
diff --git a/internal/view/assets/css/libs/source-sans-pro.min.css b/internal/view/assets/css/libs/source-sans-pro.min.css
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 200;
+    src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(fonts/source-sans-pro-v13-latin-200.woff2) format('woff2'), url(fonts/source-sans-pro-v13-latin-200.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/source-sans-pro-v13-latin-regular.woff2) format('woff2'), url(fonts/source-sans-pro-v13-latin-regular.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(fonts/source-sans-pro-v13-latin-600.woff2) format('woff2'), url(fonts/source-sans-pro-v13-latin-600.woff) format('woff')
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(fonts/source-sans-pro-v13-latin-700.woff2) format('woff2'), url(fonts/source-sans-pro-v13-latin-700.woff) format('woff')
+}
diff --git a/internal/view/assets/css/source-sans-pro.min.css b/internal/view/assets/css/source-sans-pro.min.css
diff --git a/internal/view/assets/css/style.css b/internal/view/assets/css/style.css