add formatter

.editorconfig

@@ -7,14 +7,13 @@ indent_size = 2
 trim_trailing_whitespace = true
 end_of_line = lf
 insert_final_newline = true
-max_line_length = 132
-
+max_line_length = 140
 [Dockerfile]
 indent_style = tab
 
 [{package.json,package-lock.json}]
 max_line_length = off
 
 [*.md]
-max_line_length = 120
+max_line_length = 140
 trim_trailing_whitespace = false

.github/workflows/format.yml

@@ -0,0 +1,30 @@
+name: format
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  formatter:
+    name: formatter
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: frontend/.node-version
+          cache: "npm"
+          cache-dependency-path: frontend/package-lock.json
+      - name: Install packages
+        run: npm ci
+        working-directory: ./frontend
+      - name: format
+        run: npm run format
+        working-directory: ./frontend
+      - uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: Apply php-cs-fixer changes

frontend/.node-version

@@ -0,0 +1 @@
+20.10.0

frontend/.prettierignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+package-lock.json
+package.json

frontend/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

frontend/README.md

@@ -1,5 +1,4 @@
-
-# build 
+# build
 
 ```bash
 npm install --save-dev smui-theme
@@ -9,10 +8,7 @@ npx smui-theme template src/theme
 npm run prepare
 ```
 
-
-
-
-*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+_Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_
 
 ---
 
@@ -27,8 +23,7 @@ npx degit sveltejs/template svelte-app
 cd svelte-app
 ```
 
-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
-
+_Note that you will need to have [Node.js](https://nodejs.org) installed._
 
 ## Get started
 
@@ -61,12 +56,11 @@ npm run build
 
 You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
 
-
 ## Single-page app mode
 
 By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
 
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json:
 
 ```js
 "start": "sirv public --single"

frontend/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
+    "format": "prettier --write .",
     "start": "sirv dist --no-clear",
     "prepare": "npm run smui-theme-light && npm run smui-theme-dark",
     "smui-theme-light": "smui-theme compile dist/smui.css -i src/theme",
@@ -22,6 +23,8 @@
     "path": "^0.12.7",
     "postcss": "^8.4.7",
     "postcss-url": "^10.1.3",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-livereload": "^2.0.5",

frontend/rollup.config.js

@@ -1,92 +1,93 @@
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import {terser} from 'rollup-plugin-terser';
-import copy from 'rollup-plugin-copy';
-import postcss from 'rollup-plugin-postcss'
-import autoprefixer from 'autoprefixer';
-
+import svelte from "rollup-plugin-svelte";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import copy from "rollup-plugin-copy";
+import postcss from "rollup-plugin-postcss";
+import autoprefixer from "autoprefixer";
 
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
-	let server;
+  let server;
 
-	function toExit() {
-		if (server) server.kill(0);
-	}
+  function toExit() {
+    if (server) server.kill(0);
+  }
 
-	return {
-		writeBundle() {
-			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require("child_process").spawn(
+        "npm",
+        ["run", "start", "--", "--dev"],
+        {
+          stdio: ["ignore", "inherit", "inherit"],
+          shell: true,
+        },
+      );
 
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
+      process.on("SIGTERM", toExit);
+      process.on("exit", toExit);
+    },
+  };
 }
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'dist/bundle.js'
-	},
-	plugins: [
-		svelte({
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		postcss({
-			minimize: true,
-            extract: 'bundle.css',
-            sourceMap: true,
-            plugins: [
-                autoprefixer()
-            ]
-		}),
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte']
-		}),
-		commonjs(),
-		copy({
-			targets: [
-				{src: 'src/index.html', dest: 'dist/'},
-				{src: 'src/global.css', dest: 'dist/'},
-				{src: 'src/assets', dest: 'dist/'},
-				{src: 'node_modules/material-icons/iconfont', dest: 'dist/'},
-                //{ src: 'src/cssreset.css', dest: 'dist/' },
-			]
-		}),
+  input: "src/main.js",
+  output: {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: "dist/bundle.js",
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    postcss({
+      minimize: true,
+      extract: "bundle.css",
+      sourceMap: true,
+      plugins: [autoprefixer()],
+    }),
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+    }),
+    commonjs(),
+    copy({
+      targets: [
+        { src: "src/index.html", dest: "dist/" },
+        { src: "src/global.css", dest: "dist/" },
+        { src: "src/assets", dest: "dist/" },
+        { src: "node_modules/material-icons/iconfont", dest: "dist/" },
+        //{ src: 'src/cssreset.css', dest: 'dist/' },
+      ],
+    }),
 
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
 
-		// Watch the `dist` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('dist'),
+    // Watch the `dist` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("dist"),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
 };