go-shiori · fmartingr · Sep 16, 2023 · Sep 16, 2023 · Sep 16, 2023 · Sep 16, 2023
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