Merge pull request openwebwork#2317 from drgrice1/prettier

Add prettier formatting of JavaScript, style, and HTML files, and check formatting in a workflow.

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+max_line_length = 120
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.pg]
+trim_trailing_whitespace = false

.github/workflows/check-formats.yml

@@ -0,0 +1,44 @@
+---
+name: Check Formatting of Code Base
+
+defaults:
+  run:
+    shell: bash
+
+on:
+  push:
+    branches-ignore: [main, develop]
+  pull_request:
+
+jobs:
+  perltidy:
+    name: Check Perl file formatting with perltidy
+    runs-on: ubuntu-22.04
+    container:
+      image: perl:5.34
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Install dependencies
+        run: cpanm -n Perl::Tidy@20220613
+      - name: Run perltidy
+        shell: bash
+        run: |
+          git config --global --add safe.directory "$GITHUB_WORKSPACE"
+          shopt -s extglob globstar nullglob
+          perltidy --pro=./.perltidyrc -b -bext='/' ./**/*.p[lm] ./**/*.t && git diff --exit-code
+
+  prettier:
+    name: Check JavaScript, style, and HTML file formatting with prettier
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Install Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install Dependencies
+        run: cd htdocs && npm ci --ignore-scripts
+      - name: Check formatting with prettier
+        run: cd htdocs && npm run prettier-check

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"printWidth": 120,
+	"semi": true,
+	"singleQuote": true,
+	"trailingComma": "none"
+}

htdocs/css/rtl.css

@@ -17,4 +17,3 @@
 /* The changes which were needed here in WeBWorK 2.16 are no
  * longer needed in WeBWorK 2.17. The file is being retained
  * for potential future use. */
-

htdocs/generate-assets.js

@@ -15,7 +15,10 @@ const rtlcss = require('rtlcss');
 const cssMinify = require('cssnano');
 
 const argv = yargs
-	.usage('$0 Options').version(false).alias('help', 'h').wrap(100)
+	.usage('$0 Options')
+	.version(false)
+	.alias('help', 'h')
+	.wrap(100)
 	.option('enable-sourcemaps', {
 		alias: 's',
 		description: 'Generate source maps. (Not for use in production!)',
@@ -30,8 +33,7 @@ const argv = yargs
 		alias: 'd',
 		description: 'Delete all generated files.',
 		type: 'boolean'
-	})
-	.argv;
+	}).argv;
 
 const assetFile = path.resolve(__dirname, 'static-assets.json');
 const assets = {};
@@ -48,7 +50,7 @@ const cleanDir = (dir) => {
 			}
 		}
 	}
-}
+};
 
 // The is set to true after all files are processed for the first time.
 let ready = false;
@@ -75,12 +77,13 @@ const processFile = async (file, _details) => {
 				return;
 			}
 
-			const minJS = result.code + (
-				argv.enableSourcemaps && result.map
-				? `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${
-							Buffer.from(result.map).toString('base64')}`
-				: ''
-			);
+			const minJS =
+				result.code +
+				(argv.enableSourcemaps && result.map
+					? `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${Buffer.from(
+							result.map
+						).toString('base64')}`
+					: '');
 
 			const contentHash = crypto.createHash('sha256');
 			contentHash.update(minJS);
@@ -114,18 +117,19 @@ const processFile = async (file, _details) => {
 				return;
 			}
 
-			if (result.sourceMap) result.sourceMap.sources = [ baseName ];
+			if (result.sourceMap) result.sourceMap.sources = [baseName];
 
 			// Pass the compiled css through the autoprefixer.
 			// This is really only needed for the bootstrap.css files, but doesn't hurt for the rest.
 			let prefixedResult = await postcss([autoprefixer, cssMinify]).process(result.css, { from: baseName });
 
-			const minCSS = prefixedResult.css + (
-				argv.enableSourcemaps && result.sourceMap
-				? `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${
-							Buffer.from(JSON.stringify(result.sourceMap)).toString('base64')}*/`
-				: ''
-			);
+			const minCSS =
+				prefixedResult.css +
+				(argv.enableSourcemaps && result.sourceMap
+					? `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${Buffer.from(
+							JSON.stringify(result.sourceMap)
+						).toString('base64')}*/`
+					: '');
 
 			const contentHash = crypto.createHash('sha256');
 			contentHash.update(minCSS);
@@ -149,18 +153,21 @@ const processFile = async (file, _details) => {
 			// Pass the compiled css through rtlcss and autoprefixer to generate css for right-to-left languages.
 			let rtlResult = await postcss([rtlcss, autoprefixer, cssMinify]).process(result.css, { from: baseName });
 
-			const rtlCSS = rtlResult.css + (
-				argv.enableSourcemaps && result.sourceMap
-				? `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${
-							Buffer.from(JSON.stringify(result.sourceMap)).toString('base64')}*/`
-				: ''
-			);
+			const rtlCSS =
+				rtlResult.css +
+				(argv.enableSourcemaps && result.sourceMap
+					? `/*# sourceMappingURL=data:application/json;charset=utf-8;base64,${Buffer.from(
+							JSON.stringify(result.sourceMap)
+						).toString('base64')}*/`
+					: '');
 
 			const rtlContentHash = crypto.createHash('sha256');
 			rtlContentHash.update(rtlCSS);
 
-			const newRTLVersion = file.replace(/\.s?css$/,
-				`.rtl.${rtlContentHash.digest('hex').substring(0, 8)}.min.css`);
+			const newRTLVersion = file.replace(
+				/\.s?css$/,
+				`.rtl.${rtlContentHash.digest('hex').substring(0, 8)}.min.css`
+			);
 			fs.writeFileSync(path.resolve(__dirname, newRTLVersion), rtlCSS);
 
 			const rtlAssetName = file.replace(/\.s?css$/, '.rtl.css');
@@ -180,8 +187,9 @@ const processFile = async (file, _details) => {
 		}
 	} else {
 		if (argv.watchFiles)
-			console.log('\x1b[33mWatches established, and initial build complete.\n'
-				+ 'Press Control-C to stop.\x1b[0m');
+			console.log(
+				'\x1b[33mWatches established, and initial build complete.\n' + 'Press Control-C to stop.\x1b[0m'
+			);
 		ready = true;
 	}
 
@@ -202,20 +210,25 @@ for (const file of fs.readdirSync(themesDir, { withFileTypes: true })) {
 	if (!file.isDirectory()) continue;
 	if (!fs.existsSync(path.resolve(themesDir, file.name, 'math4-overrides.js')))
 		fs.closeSync(fs.openSync(path.resolve(themesDir, file.name, 'math4-overrides.js'), 'w'));
-	if (!fs.existsSync(path.resolve(themesDir, file.name, 'math4-overrides.css'))
-		&& !fs.existsSync(path.resolve(themesDir, file.name, 'math4-overrides.scss')))
+	if (
+		!fs.existsSync(path.resolve(themesDir, file.name, 'math4-overrides.css')) &&
+		!fs.existsSync(path.resolve(themesDir, file.name, 'math4-overrides.scss'))
+	)
 		fs.closeSync(fs.openSync(path.resolve(themesDir, file.name, 'math4-overrides.css'), 'w'));
 }
 
 // Set up the watcher.
 if (argv.watchFiles) console.log('\x1b[32mEstablishing watches and performing initial build.\x1b[0m');
-chokidar.watch(['js', 'themes'], {
-	ignored: /layouts|\.min\.(js|css)$/,
-	cwd: __dirname, // Make sure all paths are given relative to the htdocs directory.
-	awaitWriteFinish: { stabilityThreshold: 500 },
-	persistent: argv.watchFiles ? true : false
-})
-	.on('add', processFile).on('change', processFile).on('ready', processFile)
+chokidar
+	.watch(['js', 'themes'], {
+		ignored: /layouts|\.min\.(js|css)$/,
+		cwd: __dirname, // Make sure all paths are given relative to the htdocs directory.
+		awaitWriteFinish: { stabilityThreshold: 500 },
+		persistent: argv.watchFiles ? true : false
+	})
+	.on('add', processFile)
+	.on('change', processFile)
+	.on('ready', processFile)
 	.on('unlink', (file) => {
 		// If a file is deleted, then also delete the corresponding generated file.
 		if (assets[file]) {

htdocs/index.dist.html

@@ -1,17 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" dir="ltr">
 	<head>
 		<title>WeBWorK Placeholder Page</title>
 	</head>
 	<body>
 		<h1>WeBWorK Placeholder Page</h1>
 		<p>Exploring?</p>
-		<p>
-			This is the default page for the root url of this site.
-		</p>
+		<p>This is the default page for the root url of this site.</p>
 		<p>
 			If you want to see something better here, then copy webwork2/htdocs/index.dist.html (this file) to
-			webwork/htdocs/index.html, and modify it to show what you want to show.  Then that file will be displayed
+			webwork/htdocs/index.html, and modify it to show what you want to show. Then that file will be displayed
 			instead.
 		</p>
 		<p>

htdocs/js/DatePicker/datepicker.js

@@ -50,11 +50,11 @@
 			// Compute the time difference between the current browser timezone and the course timezone.
 			// flatpickr gives the time in the browser's timezone, and this is used to adjust to the course timezone.
 			// Note that this is in seconds.
-			const timezoneAdjustment = (
-				(new Date((new Date).toLocaleString('en-US'))).getTime() -
-				(new Date((new Date).toLocaleString('en-US',
-					{ timeZone: rule.dataset.timezone ?? 'America/New_York' }))).getTime()
-			);
+			const timezoneAdjustment =
+				new Date(new Date().toLocaleString('en-US')).getTime() -
+				new Date(
+					new Date().toLocaleString('en-US', { timeZone: rule.dataset.timezone ?? 'America/New_York' })
+				).getTime();
 
 			const fp = flatpickr(rule.parentNode, {
 				allowInput: true,