Show ellipsis or "Read more" for truncation of tags listing descriptions

[hedyhli]

https://www.pythondiscord.com/pages/tags/

The descriptions are truncated off, possibly from some word or character limit. It would be helpful if we add a ellipsis or "Read more" link at the end.

Since this is such a trivial issue I intended to fix it myself, but after a few minutes of failing to find where the description is truncated, I decided to leave it for others or later instead.

[wookie184]

Good idea.

A related improvement would be to do the truncation using css to cap it to a fixed height but avoid stopping in the middle of a line. A bit like this: https://codepen.io/Nuke66/pen/LgzRLW. That may be more complicated though, i'm not sure.

[lemonyte]

The length trimming logic is in listing.js.

site/pydis_site/static/js/content/listing.js

Lines 4 to 39 in f4f359c

	function trimTag() {
	const containers = document.getElementsByClassName("tag-container");
	for (const container of containers) {
	if (container.textContent.startsWith("Contains the following tags:")) {
	// Tag group, no need to trim
	continue;
	}
	// Remove every element after the first two paragraphs
	while (container.children.length > 2) {
	container.removeChild(container.lastChild);
	}
	// Trim down the elements if they are too long
	const containerLength = container.textContent.length;
	if (containerLength > 300) {
	if (containerLength - container.firstChild.textContent.length > 300) {
	// The first element alone takes up more than 300 characters
	container.removeChild(container.lastChild);
	}
	let last = container.lastChild.lastChild;
	while (container.textContent.length > 300 && container.lastChild.childNodes.length > 0) {
	last = container.lastChild.lastChild;
	last.remove();
	}
	if (container.textContent.length > 300 && (last instanceof HTMLElement && last.tagName !== "CODE")) {
	// Add back the final element (up to a period if possible)
	const stop = last.textContent.indexOf(".");
	last.textContent = last.textContent.slice(0, stop > 0 ? stop + 1: null);
	container.lastChild.appendChild(last);
	}
	}
	}
	}

After spending some time debugging this in the browser, it seems it doesn't work properly in lines 20-23. Is it worth it to modify this script or would it be better to move the truncation to the backend?

[hedyhli]

A bit like this: https://codepen.io/Nuke66/pen/LgzRLW. That may be more complicated though, i'm not sure.

It looks a bit overkill, but if we're opting for it why not change the read more to an expand instead? The tags are used in the server anyway so they can't be several pages long. Tag content in the listing can then be truncated with a "expand" link/button which could expand to display the entire tag.

After spending some time debugging this in the browser, it seems it doesn't work properly in lines 20-23. Is it worth it to modify this script or would it be better to move the truncation to the backend?

Thanks for finding it!
IMO It doesn't seem right to be manipulating non-interactive content with JS. If it's done in the template we can much more easily add the read more link. Although if we're doing my expand idea above then JS could be better.

[lemonyte]

I think this should be handled in the template as well.
The "expand" idea is worth trying, but I also don't want to lose the direct links to tags.

[wookie184]

It looks a bit overkill, but if we're opting for it why not change the read more to an expand instead?

Yeah, I think the expand idea could work nicely, while keeping the individual tag pages. As for being overkill, I think it might actually be simpler to be able to replace the current listing.js logic that has to work out where to trim things with just some css to limit the size of the container so it doesn't all display.