Prettier format template files

.github/workflows/check-formats.yml

@@ -12,16 +12,17 @@ on:
 
 jobs:
   perltidy:
-    name: Check Perl file formatting with perltidy
+    name: Check file formatting with perltidy and prettier
     runs-on: ubuntu-24.04
-    container:
-      image: perl:5.38
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Install dependencies
-        run: cpanm -n Perl::Tidy@20260204
-      - name: Run perltidy
+        run: |
+          sudo apt-get update && sudo apt-get install -y libmojolicious-perl cpanminus
+          sudo cpanm -n Perl::Tidy@20260204
+
+      - name: Check Perl file formatting with perltidy
         shell: bash
         run: |
           git config --global --add safe.directory "$GITHUB_WORKSPACE"
@@ -42,17 +43,11 @@ jobs:
               git diff --exit-code
           fi
 
-  prettier:
-    name: Check JavaScript, style, and HTML file formatting with prettier
-    runs-on: ubuntu-24.04
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
       - name: Install Node
         uses: actions/setup-node@v6
         with:
           node-version: '24'
       - name: Install Dependencies
         run: cd htdocs && npm ci --ignore-scripts
-      - name: Check formatting with prettier
+      - name: Check JavaScript, style, and HTML file formatting with prettier
         run: cd htdocs && npm run prettier-check

.prettierrc

@@ -4,5 +4,6 @@
 	"printWidth": 120,
 	"semi": true,
 	"singleQuote": true,
-	"trailingComma": "none"
+	"trailingComma": "none",
+	"plugins": ["@openwebwork/prettier-plugin-mojolicious-html-template"]
 }

htdocs/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"generate-assets": "node generate-assets",
 		"prepare": "npm run generate-assets",
-		"prettier-format": "prettier --ignore-path=../.gitignore --write \"**/*.{js,css,scss,html}\" \"../**/*.dist.yml\"",
-		"prettier-check": "prettier --ignore-path=../.gitignore --check \"**/*.{js,css,scss,html}\" \"../**/*.dist.yml\""
+		"prettier-format": "prettier --ignore-path=../.gitignore --write \"**/*.{js,css,scss,html}\" \"../**/*.dist.yml\" \"../templates/**/*.html.ep\"",
+		"prettier-check": "prettier --ignore-path=../.gitignore --check \"**/*.{js,css,scss,html}\" \"../**/*.dist.yml\" \"../templates/**/*.html.ep\""
 	},
 	"repository": {
 		"type": "git",
@@ -27,6 +27,7 @@
 		"sortablejs": "^1.15.7"
 	},
 	"devDependencies": {
+		"@openwebwork/prettier-plugin-mojolicious-html-template": "^0.0.1",
 		"autoprefixer": "^10.5.4",
 		"chokidar": "^5.0.0",
 		"cssnano": "^8.0.2",
@@ -51,5 +52,10 @@
 	"allowScripts": {
 		"@parcel/watcher": false,
 		"iframe-resizer": false
+	},
+	"overrides": {
+		"@awmottaz/prettier-plugin-void-html": {
+			"prettier": "^3.9.5"
+		}
 	}
 }

templates/AchievementEvaluator/cheevoMessage.html.ep

@@ -1,10 +1,9 @@
-<div class="cheevo-toast toast hide" role ="alert" aria-live="polite" aria-atomic="true">
+<div class="cheevo-toast toast hide" role="alert" aria-live="polite" aria-atomic="true">
 	<div class="toast-body d-flex align-items-center">
-		<%= image $ce->{server_root_url} . (
-				$achievement->{icon}
+		<%= image $ce->{server_root_url}
+			. ($achievement->{icon}
 				? "$ce->{courseURLs}{achievements}/$achievement->{icon}"
-				: "$ce->{webworkURLs}{htdocs}/images/defaulticon.png"
-			),
+				: "$ce->{webworkURLs}{htdocs}/images/defaulticon.png"),
 			alt => 'Achievement Icon' =%>
 		<div class="cheevopopuptext">
 			% if ($achievement->category eq 'level') {

templates/ContentGenerator/Achievements/achievement_badges.html.ep

@@ -9,15 +9,18 @@
 		% }
 		% $previousCategory = $achievement->category;
 		%
-		% my $userAchievement = $userAchievements->{$achievement->achievement_id};
-		<div class="d-flex justify-content-start align-items-center mb-3 mx-4 <%=
-			$userAchievement->earned ? 'unlocked' : 'locked' %>">
+		% my $userAchievement = $userAchievements->{ $achievement->achievement_id };
+		<div
+			class="d-flex justify-content-start align-items-center mb-3 mx-4 <%=
+				$userAchievement->earned ? 'unlocked' : 'locked'
+			%>"
+		>
 			<div>
 				<%= image $achievement->{icon}
 					? "$ce->{courseURLs}{achievements}/$achievement->{icon}"
 					: "$ce->{webworkURLs}{htdocs}/images/defaulticon.png",
 					width => 50,
-					alt => $userAchievement->earned ? 'Achievement Earned' : 'Achievement Unearned' =%>
+					alt   => $userAchievement->earned ? 'Achievement Earned' : 'Achievement Unearned' =%>
 			</div>
 			<div class="ms-3">
 				<h3 class="fs-5 mb-1 fw-bold"><%= $achievement->name %></h3>
@@ -27,8 +30,12 @@
 				% if ($achievement->max_counter && !$userAchievement->earned) {
 					% my $percentage = int(100 * ($userAchievement->counter || 0) / $achievement->max_counter);
 					% $percentage = 100 if $percentage > 100;
-					<div class="cheevoouterbar mt-1" title="<%= maketext('[_1]% Complete', $percentage) %>"
-						aria-label="<%= maketext('[_1]% Complete', $percentage) %>" role="figure">
+					<div
+						class="cheevoouterbar mt-1"
+						title="<%= maketext('[_1]% Complete', $percentage) %>"
+						aria-label="<%= maketext('[_1]% Complete', $percentage) %>"
+						role="figure"
+					>
 						<div class="cheevoinnerbar" style="width:<%= $percentage %>%;"></div>
 					</div>
 				% }

templates/ContentGenerator/Achievements/achievement_items.html.ep

@@ -7,16 +7,15 @@
 		<%= maketext(
 			'Achievement rewards can be used to modify assignments. To use a reward, go to the assignment you '
 				. 'wish to apply the reward to, then click the "Use Achievement Reward" button. You currently have '
-				. 'access to the following rewards:'
-		) %>
+				. 'access to the following rewards:') %>
 	</p>
 	<dl class="mx-4">
-	% for my $item (@{ $c->{achievementItems} }) {
-		<dt>
-			<%= $item->remaining_title($c) %>
-		</dt>
-		<dd class="ms-3 mb-2"><%= maketext(@{ $item->description }) %></dd>
-	% }
+		% for my $item (@{ $c->{achievementItems} }) {
+			<dt>
+				<%= $item->remaining_title($c) %>
+			</dt>
+			<dd class="ms-3 mb-2"><%= maketext(@{ $item->description }) %></dd>
+		% }
 	</dl>
 % } else {
 	<p><%= maketext(q{You don't have any rewards!}) %></p>

templates/ContentGenerator/Achievements/cheevobigbox.html.ep

@@ -8,8 +8,12 @@
 		<div>
 			<h1><%= $achievement->name %></h1>
 			% if ($c->{globalData}->next_level_points) {
-				<div class="levelouterbar" title="<%= maketext('[_1]% Complete', $level_percentage) %>"
-					aria-label="<%= maketext('[_1]% Complete', $level_percentage) %>" role="figure">
+				<div
+					class="levelouterbar"
+					title="<%= maketext('[_1]% Complete', $level_percentage) %>"
+					aria-label="<%= maketext('[_1]% Complete', $level_percentage) %>"
+					role="figure"
+				>
 					<div class="levelinnerbar" style="width:<%= $level_percentage %>%"></div>
 				</div>
 				<div><strong><%= maketext('Level Progress:') %></strong> <%= "$level_progress/$level_goal" %></div>

templates/ContentGenerator/AchievementsLeaderboard.html.ep

@@ -49,9 +49,15 @@
 				% }
 				<td>
 					% for my $badge (@$badges) {
-						<button class="btn btn-sm btn-link help-popup p-0" type="button" tabindex="0"
-							data-bs-placement="top" data-bs-toggle="popover" data-bs-html="true"
-							data-bs-content="<strong><%= $badge->{name} %></strong><br><%= $badge->{description} %>">
+						<button
+							class="btn btn-sm btn-link help-popup p-0"
+							type="button"
+							tabindex="0"
+							data-bs-placement="top"
+							data-bs-toggle="popover"
+							data-bs-html="true"
+							data-bs-content="<strong><%= $badge->{name} %></strong><br><%= $badge->{description} %>"
+						>
 							<%= image $badge->{icon}
 								? "$ce->{courseURLs}{achievements}/$badge->{icon}"
 								: "$ce->{webworkURLs}{htdocs}/images/defaulticon.png",

templates/ContentGenerator/Base/admin_links.html.ep

@@ -45,18 +45,17 @@
 		% }
 		<li class="list-group-item nav-item"><%= $makelink->('instructor_job_manager') %></li>
 		<li class="list-group-item nav-item">
-			<%= $makelink->(
-				'instructor_file_manager',
-				systemlink_params => { pwd => '.', unpack => 0, autodelete => 0 }
-			) %>
+			<%= $makelink->('instructor_file_manager',
+				systemlink_params => { pwd => '.', unpack => 0, autodelete => 0 }) %>
 		</li>
 		<li class="list-group-item nav-item">
 			<%= $c->helpMacro('admin_links', { label => maketext('Help'), class => 'nav-link' }) =%>
 		</li>
 		% if ($ce->{webworkURLs}{webwork2BugReporter} && $authz->hasPermissions($userID, 'report_bugs')) {
 			<li class="list-group-item nav-item">
 				<%= link_to maketext('Report bugs') => $ce->{webworkURLs}{webwork2BugReporter},
-					target => 'bug_report', class => 'nav-link' =%>
+					target                          => 'bug_report',
+					class                           => 'nav-link' =%>
 			</li>
 		% }
 	% }

templates/ContentGenerator/Base/error_output.html.ep

@@ -4,11 +4,9 @@
 	<h2><%= maketext('WeBWorK Error') %></h2>
 % }
 <p>
-	<%= maketext(
-		'WeBWorK has encountered a software error. If you are a student, report this error message to your '
-		. 'instructor to have it corrected. If you are a instructor, please consult the error output below for '
-		. 'more information.'
-		) %>
+	<%= maketext('WeBWorK has encountered a software error. If you are a student, report this error message to your '
+			. 'instructor to have it corrected. If you are a instructor, please consult the error output below for '
+			. 'more information.') %>
 </p>
 <h3><%= maketext('Error messages') %></h3>
 <div class="error-output"><%== $error %></div>

templates/ContentGenerator/Base/feedback_macro_email.html.ep

@@ -7,5 +7,6 @@
 		<%= hidden_field $key => $value =%>
 	% }
 	<%= submit_button maketext($ce->{feedback_button_name}) || maketext('Email instructor'),
-		name => 'feedbackForm', class => 'btn btn-primary' =%>
+		name  => 'feedbackForm',
+		class => 'btn btn-primary' =%>
 % end

templates/ContentGenerator/Base/feedback_macro_form.html.ep

@@ -8,18 +8,23 @@
 	% while (my ($key, $value) = each %$params) {
 		% if ($key eq 'pg_object') {
 			<%= hidden_field $key => encode_base64(
-			 	Encode::encode(
-			 		'UTF-8',
-			 		$value->{body_text}
-			 			. ($value->{result}{msg} ? tag('p', tag('b', 'Note: ') . tag('i', $value->{result}{msg})) : '')
-			 	),
-			 	''
+				Encode::encode(
+					'UTF-8',
+					$value->{body_text}
+						. (
+							$value->{result}{msg}
+							? tag('p', tag('b', 'Note: ') . tag('i', $value->{result}{msg}))
+							: ''
+						)
+				),
+				''
 			) =%>
 		% } else {
 			<%= hidden_field $key => $value =%>
 		% }
 	% }
 	%
 	<%= submit_button maketext($ce->{feedback_button_name}) || maketext('Email instructor'),
-		name  => 'feedbackForm', class => 'btn btn-primary' =%>
+		name  => 'feedbackForm',
+		class => 'btn btn-primary' =%>
 <% end =%>