Merge pull request #1010 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/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;
 	}
 
@@ -195,13 +203,16 @@ if (argv.clean) process.exit();
 
 // Set up the watcher.
 if (argv.watchFiles) console.log('\x1b[32mEstablishing watches and performing initial build.\x1b[0m');
-chokidar.watch(['js'], {
-	ignored: /\.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'], {
+		ignored: /\.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/helpFiles/Entering-Angles.html

@@ -6,21 +6,22 @@ <h2 style="text-align: center">Entering Angles</h2>
 		<blockquote>
 			<p style="margin-top: 0">
 				For an angle of 60 degrees, enter it in radians as <code style="color: black">pi/3</code> or
-				<code style="color: black">1.04719...</code>, but <b>not <code style="color: black">60</code></b>.
+				<code style="color: black">1.04719...</code>, but <b>not <code style="color: black">60</code></b
+				>.
 			</p>
 			<p style="margin-top: 0.25rem">
 				By default, trig functions are evaluated in radians, so
 				<code style="color: black">cos(pi/3) = 1/2</code>, but
-				<code style="color: black">cos(60) = -0.9524</code> since it is radians.
-				You must convert degrees to radians before applying a trig function to an angle.
+				<code style="color: black">cos(60) = -0.9524</code> since it is radians. You must convert degrees to
+				radians before applying a trig function to an angle.
 			</p>
 		</blockquote>
 	</li>
 	<li>
 		<u>Occasionally, units are required on angles:</u>
 		<blockquote>
-			If asked for units on an angle, enter, for example, <code style="color: black">pi/6 rad</code>
-			(including rad) or <code style="color: black">30 deg</code> (including deg).
+			If asked for units on an angle, enter, for example, <code style="color: black">pi/6 rad</code> (including
+			rad) or <code style="color: black">30 deg</code> (including deg).
 		</blockquote>
 	</li>
 	<li>

htdocs/helpFiles/Entering-Equations.html

@@ -12,8 +12,8 @@ <h2 style="text-align: center">Entering Equations</h2>
 		<u>Examples of valid equations that are equivalent:</u>
 		<blockquote>
 			<p>
-				<code style="color: black">32 = 5*x + 2</code> is the same as <code style="color: black">30 = 5x</code>
-				or <code style="color: black">x = 6</code>
+				<code style="color: black">32 = 5*x + 2</code> is the same as
+				<code style="color: black">30 = 5x</code> or <code style="color: black">x = 6</code>
 			</p>
 
 			<p>

htdocs/helpFiles/Entering-Formulas.html

@@ -12,17 +12,15 @@ <h2 style="text-align: center">Entering Formulas</h2>
 	<li>
 		<u>Examples of valid formulas:</u>
 		<blockquote>
-			<ul style="list-style-type:disc">
+			<ul style="list-style-type: disc">
 				<li>
 					<code style="color: black">5*sin((pi*x)/2)</code> or <code style="color: black">5 sin(pi x/2)</code>
 				</li>
 				<li>
 					<code style="color: black">e^(-x)</code> or <code style="color: black">e**(-x)</code> or
 					<code style="color: black">1/(e^x)</code>
 				</li>
-				<li>
-					<code style="color: black">abs(5y)</code> or <code style="color: black">|5y|</code>
-				</li>
+				<li><code style="color: black">abs(5y)</code> or <code style="color: black">|5y|</code></li>
 				<li>
 					<code style="color: black">sqrt(9 - z^2)</code> or <code style="color: black">(9 - z^2)^(1/2)</code>
 				</li>
@@ -40,8 +38,8 @@ <h2 style="text-align: center">Entering Formulas</h2>
 	<li>
 		<u>Entering logarithms:</u>
 		<blockquote>
-			In this question, use <code style="color: black">ln(x)</code> or <code style="color: black">log(x)</code>
-			for natural log, and <code style="color: black">logten(x)</code> or
+			In this question, use <code style="color: black">ln(x)</code> or
+			<code style="color: black">log(x)</code> for natural log, and <code style="color: black">logten(x)</code> or
 			<code style="color: black">log10(x)</code> for the base 10 logarithm. Enter log base b as
 			<code style="color: black">ln(x)/ln(b)</code>.
 		</blockquote>
@@ -55,14 +53,14 @@ <h2 style="text-align: center">Entering Formulas</h2>
 		<blockquote>
 			Addition <code style="color: black">+</code>, subtraction <code style="color: black">-</code>,
 			multiplication <code style="color: black">*</code>, division <code style="color: black">/</code>,
-			exponentiation <code style="color: black">^</code> (or <code style="color: black">**</code>),
-			factorial <code style="color: black">!</code>
+			exponentiation <code style="color: black">^</code> (or <code style="color: black">**</code>), factorial
+			<code style="color: black">!</code>
 		</blockquote>
 	</li>
 	<li>
 		<u>Examples of functions used in formulas:</u>
 		<blockquote>
-			<ul style="list-style-type:disc">
+			<ul style="list-style-type: disc">
 				<li><code style="color: black">sqrt(x) = x^(1/2)</code></li>
 				<li><code style="color: black">abs(x) = |x|</code></li>
 				<li><code style="color: black">2^x</code></li>

htdocs/helpFiles/Entering-Formulas10.html

@@ -12,17 +12,15 @@ <h2 style="text-align: center">Entering Formulas</h2>
 	<li>
 		<u>Examples of valid formulas:</u>
 		<blockquote>
-			<ul style="list-style-type:disc">
+			<ul style="list-style-type: disc">
 				<li>
 					<code style="color: black">5*sin((pi*x)/2)</code> or <code style="color: black">5 sin(pi x/2)</code>
 				</li>
 				<li>
 					<code style="color: black">e^(-x)</code> or <code style="color: black">e**(-x)</code> or
 					<code style="color: black">1/(e^x)</code>
 				</li>
-				<li>
-					<code style="color: black">abs(5y)</code> or <code style="color: black">|5y|</code>
-				</li>
+				<li><code style="color: black">abs(5y)</code> or <code style="color: black">|5y|</code></li>
 				<li>
 					<code style="color: black">sqrt(9 - z^2)</code> or <code style="color: black">(9 - z^2)^(1/2)</code>
 				</li>
@@ -55,14 +53,14 @@ <h2 style="text-align: center">Entering Formulas</h2>
 		<blockquote>
 			Addition <code style="color: black">+</code>, subtraction <code style="color: black">-</code>,
 			multiplication <code style="color: black">*</code>, division <code style="color: black">/</code>,
-			exponentiation <code style="color: black">^</code> (or <code style="color: black">**</code>),
-			factorial <code style="color: black">!</code>
+			exponentiation <code style="color: black">^</code> (or <code style="color: black">**</code>), factorial
+			<code style="color: black">!</code>
 		</blockquote>
 	</li>
 	<li>
 		<u>Examples of functions used in formulas:</u>
 		<blockquote>
-			<ul style="list-style-type:disc">
+			<ul style="list-style-type: disc">
 				<li><code style="color: black">sqrt(x) = x^(1/2)</code></li>
 				<li><code style="color: black">abs(x) = |x|</code></li>
 				<li><code style="color: black">2^x</code></li>