Improve package edit hints

app/public/static/js/package_edit.js

@@ -40,45 +40,55 @@ window.addEventListener("load", () => {
 		window.open("https://forum.minetest.net/viewtopic.php?t=" + forumsField.value, "_blank");
 	});
 
-	let hint = null;
+	function setupHints(id, hints) {
-	function showHint(ele, text) {
+		function onChange(val) {
-		if (hint) {
+			val = val.toLowerCase();
-			hint.remove();
+			Object.entries(hints).forEach(([key, func]) => {
+				if (func(val)) {
+					document.getElementById(key).classList.remove("d-none");
+				} else {
+					document.getElementById(key).classList.add("d-none");
+				}
+			});
 		}
 
-		hint = document.createElement("div");
+		const field = document.getElementById(id);
-		hint.classList.add("alert");
+		if (field.easy_mde) {
-		hint.classList.add("alert-warning");
+			field.easy_mde.codemirror.on("change", () => {
-		hint.classList.add("my-1");
+				const value = field.easy_mde.value();
-		hint.innerHTML = text;
+				onChange(value);
-
+			});
-		ele.parentNode.appendChild(hint);
+		} else {
-	}
+			field.addEventListener("change", () => onChange(field.value));
-
+			field.addEventListener("paste", () => onChange(field.value));
-	let hint_mtmods = `Tip:
+			field.addEventListener("keyup", () => onChange(field.value));
-		Don't include <i>Minetest</i>, <i>mod</i>, or <i>modpack</i> anywhere in the short description.
+			field.addEventListener("input", () => onChange(field.value));
-		It is unnecessary and wastes characters.`;
-
-	let hint_thegame = `Tip:
-		It's obvious that this adds something to Minetest,
-		there's no need to use phrases such as \"adds X to the game\".`;
-
-	const shortDescField = document.getElementById("short_desc");
-
-	function handleShortDescChange() {
-		const val = shortDescField.value.toLowerCase();
-		if (val.indexOf("minetest") >= 0 || val.indexOf("mod") >= 0 ||
-				val.indexOf("modpack") >= 0 || val.indexOf("mod pack") >= 0) {
-			showHint(shortDescField, hint_mtmods);
-		} else if (val.indexOf("the game") >= 0) {
-			showHint(shortDescField, hint_thegame);
-		} else if (hint) {
-			hint.remove();
-			hint = null;
 		}
+		onChange(field.value);
 	}
 
-	shortDescField.addEventListener("change", handleShortDescChange);
+	setupHints("short_desc", {
-	shortDescField.addEventListener("paste", handleShortDescChange);
+		"short_desc_mods": (val) => val.indexOf("minetest") >= 0 || val.indexOf("mod") >= 0 ||
-	shortDescField.addEventListener("keyup", handleShortDescChange);
+				val.indexOf("modpack") >= 0 || val.indexOf("mod pack") >= 0,
+	});
+
+	setupHints("desc", {
+		"desc_page_link": (val) => {
+			let packageUrl = window.location.href.replace("/edit/", "");
+			if (packageUrl.indexOf("/packages/new/") >= 0) {
+				const author = document.querySelector("form[data-author]").getAttribute("data-author");
+				const name = document.getElementById("name").value;
+				packageUrl = `/packages/${author}/${name}/`;
+			}
+			return val.indexOf(packageUrl.toLowerCase()) >= 0;
+		},
+		"desc_page_topic": (val) => {
+			const topicId = document.getElementById("forums").value;
+			return topicId && val.indexOf(`forum.minetest.net/viewtopic.php?t=${topicId}`) >= 0;
+		},
+		"desc_page_repo": (val) => {
+			const repoUrl = document.getElementById("repo").value;
+			return repoUrl && val.indexOf(repoUrl.toLowerCase()) >= 0;
+		},
+	});
 })

app/templates/packages/create_edit.html

@@ -21,7 +21,7 @@
 		<script src="/static/js/polltask.js"></script>
 		<script src="/static/js/package_create.js"></script>
 	{% endif %}
-	<script src="/static/js/package_edit.js"></script>
+	<script src="/static/js/package_edit.js?v=2"></script>
 {% endblock %}
 
 {% block content %}
@@ -59,7 +59,7 @@
 
 	{{ package_lists() }}
 
-	<form method="POST" action="" class="tableform">
+	<form method="POST" action="" class="tableform" data-author="{{ author.username }}">
 		{{ form.hidden_tag() }}
 
 		<fieldset class="pkg_meta">
@@ -76,6 +76,10 @@
 			{% endif %}
 			</div>
 			{{ render_field(form.short_desc, class_="pkg_meta") }}
+			<p class="form-text text-warning d-none" id="short_desc_mods">
+				{{ _("Tip: Don't include <i>Minetest</i>, <i>mod</i>, or <i>modpack</i> anywhere in the short description. It is unnecessary and wastes characters.") }}
+			</p>
+
 			{{ render_field(form.dev_state, class_="pkg_meta", hint=_("Please choose 'Work in Progress' if your package is unstable, and shouldn't be recommended to all players")) }}
 			{{ render_multiselect_field(form.tags, class_="pkg_meta") }}
 			{{ render_multiselect_field(form.content_warnings, class_="pkg_meta") }}
@@ -84,6 +88,15 @@
 				{{ render_field(form.media_license, class_="col-sm-6", hint=_("If there is no media, set the Media License to the same as the License.")) }}
 			</div>
 			{{ render_field(form.desc, class_="pkg_meta", fieldclass="form-control markdown") }}
+			<p class="form-text text-danger d-none" id="desc_page_link">
+				{{ _("There's no need to link to the package on ContentDB in the long description, the user is already here!") }}
+			</p>
+			<p class="form-text text-warning d-none" id="desc_page_topic">
+				{{ _("There's no need to include the forum topic in the long description, it's already shown on the page.") }}
+			</p>
+			<p class="form-text text-warning d-none" id="desc_page_repo">
+				{{ _("There's no need to include the repository URL in the long description, it's already shown on the page.") }}
+			</p>
 			<p class="pkg_meta form-text text-muted">
 				<a href="/help/appealing_page/#long-description" target="_blank">
 					{{ _("What to write in the long description") }}