Add prettier for CSS and JS

.github/workflows/format-check.yml

@@ -0,0 +1,17 @@
+name: Format Check
+
+on:
+  push:
+    branches: [ test ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+    - run: make format-check

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

CONTRIBUTING.md

@@ -13,7 +13,7 @@ Any other reasonable changes are more than welcome. Keep in mind the guidelines:
 - keep the code as minimal as possible, and avoid comments in the code unless needed;
 - keep the parameters (e.g. in hugo.toml) as concise and clear as possible;
 - update the [wiki](https://github.com/tomfran/typo/tree/main/wiki) if needed, trying to maintain the current style of writing;
-- squash your change in a single commit.
+- run `make format` to format JS and CSS files before committing: you need to install node for this.
 
 **On Breaking Changes**
 

Makefile

@@ -1,13 +1,23 @@
-.PHONY: release release-bump release-minor release-major
+.PHONY: release release-bump release-minor release-major format format-check help
 
-release:
+release: ## Manual release
 	@./scripts/release.sh manual
 
-release-bump:
+release-bump: ## Bump version and release
 	@./scripts/release.sh bump
 
-release-minor:
+release-minor: ## Minor version release
 	@./scripts/release.sh minor
 
-release-major:
-	@./scripts/release.sh major
+release-major: ## Major version release
+	@./scripts/release.sh major
+
+format: ## Format JS and CSS files
+	npx prettier --write "**/*.{js,css}"
+
+format-check: ## Check if JS and CSS files are formatted
+	npx prettier --check "**/*.{js,css}"
+
+help: ## Show available targets
+	@echo 'Available commands:'
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf " - %-15s %s\n", $$1, $$2}'

assets/css/colors/base16-cupcake.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(88, 80, 98); /*base07*/
-    --content-secondary-light: rgb(165, 157, 175); /*base04*/
-    --background-light: rgb(251, 241, 242); /*base00*/
-    --code-background-light: rgb(242, 241, 244); /*base01*/
-    --code-border-light: rgb(216, 213, 221); /*base02*/
+  --content-primary-light: rgb(88, 80, 98); /*base07*/
+  --content-secondary-light: rgb(165, 157, 175); /*base04*/
+  --background-light: rgb(251, 241, 242); /*base00*/
+  --code-background-light: rgb(242, 241, 244); /*base01*/
+  --code-border-light: rgb(216, 213, 221); /*base02*/
 
-    --content-primary-dark: rgb(251, 241, 242); /*base00*/
-    --content-secondary-dark: rgb(191, 185, 198); /*base03*/
-    --background-dark: rgb(88, 80, 98); /*base07*/
-    --code-background-dark: rgb(114, 103, 126); /*base06*/
-    --code-border-dark: rgb(139, 129, 152); /*base05*/
-}
+  --content-primary-dark: rgb(251, 241, 242); /*base00*/
+  --content-secondary-dark: rgb(191, 185, 198); /*base03*/
+  --background-dark: rgb(88, 80, 98); /*base07*/
+  --code-background-dark: rgb(114, 103, 126); /*base06*/
+  --code-border-dark: rgb(139, 129, 152); /*base05*/
+}

assets/css/colors/base16-default.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(24, 24, 24); /*base07*/
-    --content-secondary-light: rgb(88, 88, 88); /*base04*/
-    --background-light: rgb(248, 248, 248); /*base00*/
-    --code-background-light: rgb(232, 232, 232); /*base01*/
-    --code-border-light: rgb(216, 216, 216); /*base02*/
+  --content-primary-light: rgb(24, 24, 24); /*base07*/
+  --content-secondary-light: rgb(88, 88, 88); /*base04*/
+  --background-light: rgb(248, 248, 248); /*base00*/
+  --code-background-light: rgb(232, 232, 232); /*base01*/
+  --code-border-light: rgb(216, 216, 216); /*base02*/
 
-    --content-primary-dark: rgb(248, 248, 248); /*base00*/
-    --content-secondary-dark: rgb(184, 184, 184); /*base03*/
-    --background-dark: rgb(24, 24, 24); /*base07*/
-    --code-background-dark: rgb(40, 40, 40); /*base06*/
-    --code-border-dark: rgb(56, 56, 56); /*base05*/
-}
+  --content-primary-dark: rgb(248, 248, 248); /*base00*/
+  --content-secondary-dark: rgb(184, 184, 184); /*base03*/
+  --background-dark: rgb(24, 24, 24); /*base07*/
+  --code-background-dark: rgb(40, 40, 40); /*base06*/
+  --code-border-dark: rgb(56, 56, 56); /*base05*/
+}

assets/css/colors/base16-eighties.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(45, 45, 45); /*base00*/
-    --content-secondary-light: rgb(116, 115, 105); /*base03*/
-    --background-light: rgb(242, 240, 236); /*base07*/
-    --code-background-light: rgb(232, 230, 223); /*base06*/
-    --code-border-light: rgb(211, 208, 200); /*base05*/
+  --content-primary-light: rgb(45, 45, 45); /*base00*/
+  --content-secondary-light: rgb(116, 115, 105); /*base03*/
+  --background-light: rgb(242, 240, 236); /*base07*/
+  --code-background-light: rgb(232, 230, 223); /*base06*/
+  --code-border-light: rgb(211, 208, 200); /*base05*/
 
-    --content-primary-dark: rgb(242, 240, 236); /*base07*/
-    --content-secondary-dark: rgb(160, 159, 147); /*base04*/
-    --background-dark: rgb(45, 45, 45); /*base00*/
-    --code-background-dark: rgb(57, 57, 57); /*base01*/
-    --code-border-dark: rgb(81, 81, 81); /*base02*/
-}
+  --content-primary-dark: rgb(242, 240, 236); /*base07*/
+  --content-secondary-dark: rgb(160, 159, 147); /*base04*/
+  --background-dark: rgb(45, 45, 45); /*base00*/
+  --code-background-dark: rgb(57, 57, 57); /*base01*/
+  --code-border-dark: rgb(81, 81, 81); /*base02*/
+}

assets/css/colors/base16-mocha.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(59, 50, 40); /*base00*/
-    --content-secondary-light: rgb(126, 112, 90); /*base03*/
-    --background-light: rgb(245, 238, 235); /*base07*/
-    --code-background-light: rgb(233, 225, 221); /*base06*/
-    --code-border-light: rgb(208, 200, 198); /*base05*/
+  --content-primary-light: rgb(59, 50, 40); /*base00*/
+  --content-secondary-light: rgb(126, 112, 90); /*base03*/
+  --background-light: rgb(245, 238, 235); /*base07*/
+  --code-background-light: rgb(233, 225, 221); /*base06*/
+  --code-border-light: rgb(208, 200, 198); /*base05*/
 
-    --content-primary-dark: rgb(245, 238, 235); /*base07*/
-    --content-secondary-dark: rgb(184, 175, 173); /*base04*/
-    --background-dark: rgb(59, 50, 40); /*base00*/
-    --code-background-dark: rgb(83, 70, 54); /*base01*/
-    --code-border-dark: rgb(100, 82, 64); /*base02*/
-}
+  --content-primary-dark: rgb(245, 238, 235); /*base07*/
+  --content-secondary-dark: rgb(184, 175, 173); /*base04*/
+  --background-dark: rgb(59, 50, 40); /*base00*/
+  --code-background-dark: rgb(83, 70, 54); /*base01*/
+  --code-border-dark: rgb(100, 82, 64); /*base02*/
+}

assets/css/colors/base16-ocean.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(43, 48, 59); /*base00*/
-    --content-secondary-light: rgb(101, 115, 126); /*base03*/
-    --background-light: rgb(239, 241, 245); /*base07*/
-    --code-background-light: rgb(223, 225, 232); /*base06*/
-    --code-border-light: rgb(192, 197, 206); /*base05*/
+  --content-primary-light: rgb(43, 48, 59); /*base00*/
+  --content-secondary-light: rgb(101, 115, 126); /*base03*/
+  --background-light: rgb(239, 241, 245); /*base07*/
+  --code-background-light: rgb(223, 225, 232); /*base06*/
+  --code-border-light: rgb(192, 197, 206); /*base05*/
 
-    --content-primary-dark: rgb(239, 241, 245); /*base07*/
-    --content-secondary-dark: rgb(167, 173, 186); /*base04*/
-    --background-dark: rgb(43, 48, 59); /*base00*/
-    --code-background-dark: rgb(52, 61, 70); /*base01*/
-    --code-border-dark: rgb(79, 91, 102); /*base02*/
-}
+  --content-primary-dark: rgb(239, 241, 245); /*base07*/
+  --content-secondary-dark: rgb(167, 173, 186); /*base04*/
+  --background-dark: rgb(43, 48, 59); /*base00*/
+  --code-background-dark: rgb(52, 61, 70); /*base01*/
+  --code-border-dark: rgb(79, 91, 102); /*base02*/
+}

assets/css/colors/catpuccin.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(76, 79, 105);
-    --content-secondary-light: rgb(108, 111, 133);
-    --background-light: rgb(239, 241, 245);
-    --code-background-light: rgb(230, 233, 239);
-    --code-border-light: rgb(188, 192, 204);
+  --content-primary-light: rgb(76, 79, 105);
+  --content-secondary-light: rgb(108, 111, 133);
+  --background-light: rgb(239, 241, 245);
+  --code-background-light: rgb(230, 233, 239);
+  --code-border-light: rgb(188, 192, 204);
 
-    --content-primary-dark: rgb(198, 208, 245);
-    --content-secondary-dark: rgb(165, 173, 206);
-    --background-dark: rgb(48, 52, 70);
-    --code-background-dark: rgb(41, 44, 60);
-    --code-border-dark: rgb(81, 87, 109);
-}
+  --content-primary-dark: rgb(198, 208, 245);
+  --content-secondary-dark: rgb(165, 173, 206);
+  --background-dark: rgb(48, 52, 70);
+  --code-background-dark: rgb(41, 44, 60);
+  --code-border-dark: rgb(81, 87, 109);
+}

assets/css/colors/default.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(36, 36, 36);
-    --content-secondary-light: rgb(117, 117, 117);
-    --background-light: rgb(255, 255, 255);
-    --code-background-light: rgb(249, 249, 249);
-    --code-border-light: rgb(229, 229, 229);
+  --content-primary-light: rgb(36, 36, 36);
+  --content-secondary-light: rgb(117, 117, 117);
+  --background-light: rgb(255, 255, 255);
+  --code-background-light: rgb(249, 249, 249);
+  --code-border-light: rgb(229, 229, 229);
 
-    --content-primary-dark: rgb(218, 218, 218);
-    --content-secondary-dark: rgb(140, 140, 140);
-    --background-dark: rgb(20, 20, 20);
-    --code-background-dark: rgb(30, 30, 30);
-    --code-border-dark: rgb(50, 50, 50);
-}
+  --content-primary-dark: rgb(218, 218, 218);
+  --content-secondary-dark: rgb(140, 140, 140);
+  --background-dark: rgb(20, 20, 20);
+  --code-background-dark: rgb(30, 30, 30);
+  --code-border-dark: rgb(50, 50, 50);
+}

assets/css/colors/eink.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(0, 0, 0);
-    --content-secondary-light: rgb(0, 0, 0);
-    --background-light: rgb(255, 255, 255);
-    --code-background-light: rgb(255, 255, 255);
-    --code-border-light: rgb(0, 0, 0);
+  --content-primary-light: rgb(0, 0, 0);
+  --content-secondary-light: rgb(0, 0, 0);
+  --background-light: rgb(255, 255, 255);
+  --code-background-light: rgb(255, 255, 255);
+  --code-border-light: rgb(0, 0, 0);
 
-    --content-primary-dark: rgb(255, 255, 255);
-    --content-secondary-dark: rgb(255, 255, 255);
-    --background-dark: rgb(0, 0, 0);
-    --code-background-dark: rgb(0, 0, 0);
-    --code-border-dark: rgb(255, 255, 255);
-}
+  --content-primary-dark: rgb(255, 255, 255);
+  --content-secondary-dark: rgb(255, 255, 255);
+  --background-dark: rgb(0, 0, 0);
+  --code-background-dark: rgb(0, 0, 0);
+  --code-border-dark: rgb(255, 255, 255);
+}

assets/css/colors/gruvebox.css

@@ -1,13 +1,13 @@
 :root {
-    --content-primary-light: rgb(60, 56, 54);
-    --content-secondary-light: rgb(148, 133, 112);
-    --background-light: rgb(251, 241, 199);
-    --code-background-light: rgb(241, 231, 189);
-    --code-border-light: rgb(178, 163, 142);
+  --content-primary-light: rgb(60, 56, 54);
+  --content-secondary-light: rgb(148, 133, 112);
+  --background-light: rgb(251, 241, 199);
+  --code-background-light: rgb(241, 231, 189);
+  --code-border-light: rgb(178, 163, 142);
 
-    --content-primary-dark: rgb(235, 219, 178);
-    --content-secondary-dark: rgb(132, 122, 114);
-    --background-dark: rgb(40, 40, 40);
-    --code-background-dark: rgb(50, 50, 50);
-    --code-border-dark: rgb(112, 102, 94);
-}
+  --content-primary-dark: rgb(235, 219, 178);
+  --content-secondary-dark: rgb(132, 122, 114);
+  --background-dark: rgb(40, 40, 40);
+  --code-background-dark: rgb(50, 50, 50);
+  --code-border-dark: rgb(112, 102, 94);
+}

assets/css/custom.css

@@ -1 +1 @@
-/* Place custom css here */
+/* Place custom css here */

assets/css/fonts.css

@@ -1,47 +1,47 @@
 @font-face {
-    font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-Light.woff2') format('woff2');
-    font-weight: light;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Literata";
+  src: url("/fonts/Literata/Literata-Light.woff2") format("woff2");
+  font-weight: light;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-LightItalic.woff2') format('woff2');
-    font-weight: light;
-    font-style: italic;
-    font-display: swap;
+  font-family: "Literata";
+  src: url("/fonts/Literata/Literata-LightItalic.woff2") format("woff2");
+  font-weight: light;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-SemiBold.woff2') format('woff2');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Literata";
+  src: url("/fonts/Literata/Literata-SemiBold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Literata';
-    src: url('/fonts/Literata/Literata-SemiBoldItalic.woff2') format('woff2');
-    font-weight: bold;
-    font-style: italic;
-    font-display: swap;
+  font-family: "Literata";
+  src: url("/fonts/Literata/Literata-SemiBoldItalic.woff2") format("woff2");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Monaspace';
-    src: url('/fonts/Monaspace/MonaspaceArgon-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Monaspace";
+  src: url("/fonts/Monaspace/MonaspaceArgon-Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Monaspace';
-    src: url('/fonts/Monaspace/MonaspaceArgon-SemiBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Monaspace";
+  src: url("/fonts/Monaspace/MonaspaceArgon-SemiBold.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }