[chore] Refactor HTML templates and CSS (#2480)

* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports

3 files changed, 412 insertions, 53 deletions

diff --git a/internal/router/router.go b/internal/router/router.go
index f71dc97ef..b2fb7418e 100644
--- a/internal/router/router.go
+++ b/internal/router/router.go
@@ -83,7 +83,6 @@ func New(ctx context.Context) (*Router, error) {
 
 	// Attach functions used by HTML templating,
 	// and load HTML templates into the engine.
-	LoadTemplateFunctions(engine)
 	if err := LoadTemplates(engine); err != nil {
 		return nil, err
 	}
diff --git a/internal/router/template.go b/internal/router/template.go
index d1f6f297c..981c3fcf4 100644
--- a/internal/router/template.go
+++ b/internal/router/template.go
@@ -18,52 +18,121 @@
 package router
 
 import (
+	"bytes"
 	"fmt"
 	"html/template"
 	"os"
 	"path/filepath"
 	"reflect"
+	"regexp"
 	"strings"
 	"time"
 	"unsafe"
 
 	"github.com/gin-gonic/gin"
+	"github.com/gin-gonic/gin/render"
 	apimodel "github.com/superseriousbusiness/gotosocial/internal/api/model"
 	"github.com/superseriousbusiness/gotosocial/internal/config"
+	"github.com/superseriousbusiness/gotosocial/internal/gtserror"
 	"github.com/superseriousbusiness/gotosocial/internal/log"
+	"github.com/superseriousbusiness/gotosocial/internal/regexes"
 	"github.com/superseriousbusiness/gotosocial/internal/text"
 	"github.com/superseriousbusiness/gotosocial/internal/util"
 )
 
-const (
-	justTime     = "15:04"
-	dateYear     = "Jan 02, 2006"
-	dateTime     = "Jan 02, 15:04"
-	dateYearTime = "Jan 02, 2006, 15:04"
-	monthYear    = "Jan, 2006"
-	badTimestamp = "bad timestamp"
-)
-
-// LoadTemplates loads html templates for use by the given engine
+// LoadTemplates loads templates found at `web-template-base-dir`
+// into the Gin engine, or errors if templates cannot be loaded.
+//
+// The special functions "include" and "includeAttr" will be added
+// to the template funcMap for use in any template. Use these "include"
+// functions when you need to pass a template through a pipeline.
+// Otherwise, prefer the built-in "template" function.
 func LoadTemplates(engine *gin.Engine) error {
 	templateBaseDir := config.GetWebTemplateBaseDir()
 	if templateBaseDir == "" {
-		return fmt.Errorf("%s cannot be empty and must be a relative or absolute path", config.WebTemplateBaseDirFlag())
+		return gtserror.Newf(
+			"%s cannot be empty and must be a relative or absolute path",
+			config.WebTemplateBaseDirFlag(),
+		)
 	}
 
-	templateBaseDir, err := filepath.Abs(templateBaseDir)
+	templateDirAbs, err := filepath.Abs(templateBaseDir)
 	if err != nil {
-		return fmt.Errorf("error getting absolute path of %s: %s", templateBaseDir, err)
+		return gtserror.Newf(
+			"error getting absolute path of web-template-base-dir %s: %w",
+			templateBaseDir, err,
+		)
+	}
+
+	indexTmplPath := filepath.Join(templateDirAbs, "index.tmpl")
+	if _, err := os.Stat(indexTmplPath); err != nil {
+		return gtserror.Newf(
+			"cannot find index.tmpl in web template directory %s: %w",
+			templateDirAbs, err,
+		)
+	}
+
+	// Bring base template into scope.
+	tmpl := template.New("base")
+
+	// Set additional "include" functions to render
+	// provided template name using the base template.
+	funcMap["include"] = func(name string, data any) (template.HTML, error) {
+		var buf strings.Builder
+		err := tmpl.ExecuteTemplate(&buf, name, data)
+
+		// Template was already escaped by
+		// ExecuteTemplate so we can trust it.
+		return noescape(buf.String()), err
 	}
 
-	if _, err := os.Stat(filepath.Join(templateBaseDir, "index.tmpl")); err != nil {
-		return fmt.Errorf("%s doesn't seem to contain the templates; index.tmpl is missing: %w", templateBaseDir, err)
+	funcMap["includeAttr"] = func(name string, data any) (template.HTMLAttr, error) {
+		var buf strings.Builder
+		err := tmpl.ExecuteTemplate(&buf, name, data)
+
+		// Template was already escaped by
+		// ExecuteTemplate so we can trust it.
+		return noescapeAttr(buf.String()), err
 	}
 
-	engine.LoadHTMLGlob(filepath.Join(templateBaseDir, "*"))
+	// Load functions into the base template, and
+	// associate other templates with base template.
+	templateGlob := filepath.Join(templateDirAbs, "*")
+	tmpl, err = tmpl.Funcs(funcMap).ParseGlob(templateGlob)
+	if err != nil {
+		return gtserror.Newf("error loading templates: %w", err)
+	}
+
+	// Almost done; teach the
+	// engine how to render.
+	engine.SetFuncMap(funcMap)
+	engine.HTMLRender = render.HTMLProduction{Template: tmpl}
+
 	return nil
 }
 
+var funcMap = template.FuncMap{
+	"add":              add,
+	"acctInstance":     acctInstance,
+	"demojify":         demojify,
+	"deref":            deref,
+	"emojify":          emojify,
+	"escape":           escape,
+	"increment":        increment,
+	"indent":           indent,
+	"indentAttr":       indentAttr,
+	"isNil":            isNil,
+	"outdentPre":       outdentPre,
+	"noescapeAttr":     noescapeAttr,
+	"noescape":         noescape,
+	"oddOrEven":        oddOrEven,
+	"subtract":         subtract,
+	"timestampPrecise": timestampPrecise,
+	"timestamp":        timestamp,
+	"timestampVague":   timestampVague,
+	"visibilityIcon":   visibilityIcon,
+}
+
 func oddOrEven(n int) string {
 	if n%2 == 0 {
 		return "even"
@@ -71,21 +140,40 @@ func oddOrEven(n int) string {
 	return "odd"
 }
 
+// escape HTML escapes the given string,
+// returning a trusted template.
 func escape(str string) template.HTML {
 	/* #nosec G203 */
 	return template.HTML(template.HTMLEscapeString(str))
 }
 
+// noescape marks the given string as a
+// trusted template. The provided string
+// MUST have already passed through a
+// template or escaping function.
 func noescape(str string) template.HTML {
 	/* #nosec G203 */
 	return template.HTML(str)
 }
 
+// noescapeAttr marks the given string as a
+// trusted HTML attribute. The provided string
+// MUST have already passed through a template
+// or escaping function.
 func noescapeAttr(str string) template.HTMLAttr {
 	/* #nosec G203 */
 	return template.HTMLAttr(str)
 }
 
+const (
+	justTime     = "15:04"
+	dateYear     = "Jan 02, 2006"
+	dateTime     = "Jan 02, 15:04"
+	dateYearTime = "Jan 02, 2006, 15:04"
+	monthYear    = "Jan, 2006"
+	badTimestamp = "bad timestamp"
+)
+
 func timestamp(stamp string) string {
 	t, err := util.ParseISO8601(stamp)
 	if err != nil {
@@ -127,38 +215,55 @@ func timestampVague(stamp string) string {
 	return t.Format(monthYear)
 }
 
-type iconWithLabel struct {
-	faIcon string
-	label  string
-}
-
 func visibilityIcon(visibility apimodel.Visibility) template.HTML {
-	var icon iconWithLabel
+	var (
+		label string
+		icon  string
+	)
 
 	switch visibility {
 	case apimodel.VisibilityPublic:
-		icon = iconWithLabel{"globe", "public"}
+		label = "public"
+		icon = "globe"
 	case apimodel.VisibilityUnlisted:
-		icon = iconWithLabel{"unlock", "unlisted"}
+		label = "unlisted"
+		icon = "unlock"
 	case apimodel.VisibilityPrivate:
-		icon = iconWithLabel{"lock", "private"}
+		label = "private"
+		icon = "lock"
 	case apimodel.VisibilityMutualsOnly:
-		icon = iconWithLabel{"handshake-o", "mutuals only"}
+		label = "mutuals-only"
+		icon = "handshake-o"
 	case apimodel.VisibilityDirect:
-		icon = iconWithLabel{"envelope", "direct"}
+		label = "direct"
+		icon = "envelope"
 	}
 
 	/* #nosec G203 */
-	return template.HTML(fmt.Sprintf(`<i aria-label="Visibility: %v" class="fa fa-%v"></i>`, icon.label, icon.faIcon))
+	return template.HTML(fmt.Sprintf(
+		`<i aria-label="Visibility: %s" class="fa fa-%s"></i>`,
+		label, icon,
+	))
 }
 
-// text is a template.HTML to affirm that the input of this function is already escaped
-func emojify(emojis []apimodel.Emoji, inputText template.HTML) template.HTML {
-	out := text.Emojify(emojis, string(inputText))
+// emojify replaces emojis in the given
+// html fragment with suitable <img> tags.
+//
+// The provided input must have been
+// escaped / templated already!
+func emojify(
+	emojis []apimodel.Emoji,
+	html template.HTML,
+) template.HTML {
+	return text.EmojifyWeb(emojis, html)
+}
 
-	/* #nosec G203 */
-	// (this is escaped above)
-	return template.HTML(out)
+// demojify replaces emoji shortcodes in
+// the given fragment with empty strings.
+//
+// Output must then be escaped as appropriate.
+func demojify(input string) string {
+	return text.Demojify(input)
 }
 
 func acctInstance(acct string) string {
@@ -170,10 +275,79 @@ func acctInstance(acct string) string {
 	return ""
 }
 
+// increment adds 1
+// to the given int.
 func increment(i int) int {
 	return i + 1
 }
 
+// add adds n2 to n1.
+func add(n1 int, n2 int) int {
+	return n1 + n2
+}
+
+// subtract subtracts n2 from n1.
+func subtract(n1 int, n2 int) int {
+	return n1 - n2
+}
+
+var (
+	indentRegex  = regexp.MustCompile(`(?m)^`)
+	indentStr    = "    "
+	indentStrLen = len(indentStr)
+	indents      = strings.Repeat(indentStr, 12)
+	indentPre    = regexp.MustCompile(fmt.Sprintf(`(?Ums)^((?:%s)+)<pre>.*</pre>`, indentStr))
+)
+
+// indent appropriately indents the given html
+// by prepending each line with the indentStr.
+func indent(n int, html template.HTML) template.HTML {
+	out := indentRegex.ReplaceAllString(
+		string(html),
+		indents[:n*indentStrLen],
+	)
+	return noescape(out)
+}
+
+// indentAttr appropriately indents the given html
+// attribute by prepending each line with the indentStr.
+func indentAttr(n int, html template.HTMLAttr) template.HTMLAttr {
+	out := indentRegex.ReplaceAllString(
+		string(html),
+		indents[:n*indentStrLen],
+	)
+	return noescapeAttr(out)
+}
+
+// outdentPre outdents all `<pre></pre>` tags in the
+// given HTML so that they render correctly in code
+// blocks, even if they were indented before.
+func outdentPre(html template.HTML) template.HTML {
+	input := string(html)
+	output := regexes.ReplaceAllStringFunc(indentPre, input,
+		func(match string, buf *bytes.Buffer) string {
+			// Reuse the regex to pull out submatches.
+			matches := indentPre.FindAllStringSubmatch(match, -1)
+			if len(matches) != 1 {
+				return match
+			}
+
+			var (
+				indented = matches[0][0]
+				indent   = matches[0][1]
+			)
+
+			// Outdent everything in the inner match, add
+			// a newline at the end to make it a bit neater.
+			outdented := strings.ReplaceAll(indented, indent, "")
+
+			// Replace original match with the outdented version.
+			return strings.ReplaceAll(match, indented, outdented)
+		},
+	)
+	return noescape(output)
+}
+
 // isNil will safely check if 'v' is nil without
 // dealing with weird Go interface nil bullshit.
 func isNil(i interface{}) bool {
@@ -193,21 +367,3 @@ func deref(i any) any {
 
 	return vOf.Elem()
 }
-
-func LoadTemplateFunctions(engine *gin.Engine) {
-	engine.SetFuncMap(template.FuncMap{
-		"escape":           escape,
-		"noescape":         noescape,
-		"noescapeAttr":     noescapeAttr,
-		"oddOrEven":        oddOrEven,
-		"visibilityIcon":   visibilityIcon,
-		"timestamp":        timestamp,
-		"timestampVague":   timestampVague,
-		"timestampPrecise": timestampPrecise,
-		"emojify":          emojify,
-		"acctInstance":     acctInstance,
-		"increment":        increment,
-		"isNil":            isNil,
-		"deref":            deref,
-	})
-}
diff --git a/internal/router/template_test.go b/internal/router/template_test.go
new file mode 100644
index 000000000..19bf759e0
--- /dev/null
+++ b/internal/router/template_test.go
@@ -0,0 +1,204 @@
+// GoToSocial
+// Copyright (C) GoToSocial Authors admin@gotosocial.org
+// SPDX-License-Identifier: AGPL-3.0-or-later
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+package router
+
+import (
+	"html/template"
+	"testing"
+)
+
+func TestOutdentPre(t *testing.T) {
+	const html = template.HTML(`
+        <div class="text">
+            <div class="content" lang="en">                
+                <p>Here's a bunch of HTML, read it and weep, weep then!</p>
+                <pre><code class="language-html">&lt;section class=&#34;about-user&#34;&gt;
+                    &lt;div class=&#34;col-header&#34;&gt;
+                        &lt;h2&gt;About&lt;/h2&gt;
+                    &lt;/div&gt;            
+                    &lt;div class=&#34;fields&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Fields&lt;/h3&gt;
+                        &lt;dl&gt;
+                            &lt;div class=&#34;field&#34;&gt;
+                                &lt;dt&gt;should you follow me?&lt;/dt&gt;
+                                &lt;dd&gt;maybe!&lt;/dd&gt;
+                            &lt;/div&gt;
+                            &lt;div class=&#34;field&#34;&gt;
+                                &lt;dt&gt;age&lt;/dt&gt;
+                                &lt;dd&gt;120&lt;/dd&gt;
+                            &lt;/div&gt;
+                        &lt;/dl&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;bio&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Bio&lt;/h3&gt;
+                        &lt;p&gt;i post about things that concern me&lt;/p&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;sr-only&#34; role=&#34;group&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Stats&lt;/h3&gt;
+                        &lt;span&gt;Joined in Jun, 2022.&lt;/span&gt;
+                        &lt;span&gt;8 posts.&lt;/span&gt;
+                        &lt;span&gt;Followed by 1.&lt;/span&gt;
+                        &lt;span&gt;Following 1.&lt;/span&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;accountstats&#34; aria-hidden=&#34;true&#34;&gt;
+                        &lt;b&gt;Joined&lt;/b&gt;&lt;time datetime=&#34;2022-06-04T13:12:00.000Z&#34;&gt;Jun, 2022&lt;/time&gt;
+                        &lt;b&gt;Posts&lt;/b&gt;&lt;span&gt;8&lt;/span&gt;
+                        &lt;b&gt;Followed by&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+                        &lt;b&gt;Following&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/section&gt;
+                </code></pre>
+                <p>There, hope you liked that!</p>
+            </div>
+        </div>
+        <div class="text">
+            <div class="content" lang="en">                
+                <p>Here's a bunch of HTML, read it and weep, weep then!</p>
+                <pre><code class="language-html">&lt;section class=&#34;about-user&#34;&gt;
+                    &lt;div class=&#34;col-header&#34;&gt;
+                        &lt;h2&gt;About&lt;/h2&gt;
+                    &lt;/div&gt;            
+                    &lt;div class=&#34;fields&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Fields&lt;/h3&gt;
+                        &lt;dl&gt;
+                            &lt;div class=&#34;field&#34;&gt;
+                                &lt;dt&gt;should you follow me?&lt;/dt&gt;
+                                &lt;dd&gt;maybe!&lt;/dd&gt;
+                            &lt;/div&gt;
+                            &lt;div class=&#34;field&#34;&gt;
+                                &lt;dt&gt;age&lt;/dt&gt;
+                                &lt;dd&gt;120&lt;/dd&gt;
+                            &lt;/div&gt;
+                        &lt;/dl&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;bio&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Bio&lt;/h3&gt;
+                        &lt;p&gt;i post about things that concern me&lt;/p&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;sr-only&#34; role=&#34;group&#34;&gt;
+                        &lt;h3 class=&#34;sr-only&#34;&gt;Stats&lt;/h3&gt;
+                        &lt;span&gt;Joined in Jun, 2022.&lt;/span&gt;
+                        &lt;span&gt;8 posts.&lt;/span&gt;
+                        &lt;span&gt;Followed by 1.&lt;/span&gt;
+                        &lt;span&gt;Following 1.&lt;/span&gt;
+                    &lt;/div&gt;
+                    &lt;div class=&#34;accountstats&#34; aria-hidden=&#34;true&#34;&gt;
+                        &lt;b&gt;Joined&lt;/b&gt;&lt;time datetime=&#34;2022-06-04T13:12:00.000Z&#34;&gt;Jun, 2022&lt;/time&gt;
+                        &lt;b&gt;Posts&lt;/b&gt;&lt;span&gt;8&lt;/span&gt;
+                        &lt;b&gt;Followed by&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+                        &lt;b&gt;Following&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/section&gt;
+                </code></pre>
+                <p>There, hope you liked that!</p>
+            </div>
+        </div>
+`)
+
+	const expected = template.HTML(`
+        <div class="text">
+            <div class="content" lang="en">                
+                <p>Here's a bunch of HTML, read it and weep, weep then!</p>
+<pre><code class="language-html">&lt;section class=&#34;about-user&#34;&gt;
+    &lt;div class=&#34;col-header&#34;&gt;
+        &lt;h2&gt;About&lt;/h2&gt;
+    &lt;/div&gt;            
+    &lt;div class=&#34;fields&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Fields&lt;/h3&gt;
+        &lt;dl&gt;
+            &lt;div class=&#34;field&#34;&gt;
+&lt;dt&gt;should you follow me?&lt;/dt&gt;
+&lt;dd&gt;maybe!&lt;/dd&gt;
+            &lt;/div&gt;
+            &lt;div class=&#34;field&#34;&gt;
+&lt;dt&gt;age&lt;/dt&gt;
+&lt;dd&gt;120&lt;/dd&gt;
+            &lt;/div&gt;
+        &lt;/dl&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;bio&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Bio&lt;/h3&gt;
+        &lt;p&gt;i post about things that concern me&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;sr-only&#34; role=&#34;group&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Stats&lt;/h3&gt;
+        &lt;span&gt;Joined in Jun, 2022.&lt;/span&gt;
+        &lt;span&gt;8 posts.&lt;/span&gt;
+        &lt;span&gt;Followed by 1.&lt;/span&gt;
+        &lt;span&gt;Following 1.&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;accountstats&#34; aria-hidden=&#34;true&#34;&gt;
+        &lt;b&gt;Joined&lt;/b&gt;&lt;time datetime=&#34;2022-06-04T13:12:00.000Z&#34;&gt;Jun, 2022&lt;/time&gt;
+        &lt;b&gt;Posts&lt;/b&gt;&lt;span&gt;8&lt;/span&gt;
+        &lt;b&gt;Followed by&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+        &lt;b&gt;Following&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+</code></pre>
+                <p>There, hope you liked that!</p>
+            </div>
+        </div>
+        <div class="text">
+            <div class="content" lang="en">                
+                <p>Here's a bunch of HTML, read it and weep, weep then!</p>
+<pre><code class="language-html">&lt;section class=&#34;about-user&#34;&gt;
+    &lt;div class=&#34;col-header&#34;&gt;
+        &lt;h2&gt;About&lt;/h2&gt;
+    &lt;/div&gt;            
+    &lt;div class=&#34;fields&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Fields&lt;/h3&gt;
+        &lt;dl&gt;
+            &lt;div class=&#34;field&#34;&gt;
+&lt;dt&gt;should you follow me?&lt;/dt&gt;
+&lt;dd&gt;maybe!&lt;/dd&gt;
+            &lt;/div&gt;
+            &lt;div class=&#34;field&#34;&gt;
+&lt;dt&gt;age&lt;/dt&gt;
+&lt;dd&gt;120&lt;/dd&gt;
+            &lt;/div&gt;
+        &lt;/dl&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;bio&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Bio&lt;/h3&gt;
+        &lt;p&gt;i post about things that concern me&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;sr-only&#34; role=&#34;group&#34;&gt;
+        &lt;h3 class=&#34;sr-only&#34;&gt;Stats&lt;/h3&gt;
+        &lt;span&gt;Joined in Jun, 2022.&lt;/span&gt;
+        &lt;span&gt;8 posts.&lt;/span&gt;
+        &lt;span&gt;Followed by 1.&lt;/span&gt;
+        &lt;span&gt;Following 1.&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&#34;accountstats&#34; aria-hidden=&#34;true&#34;&gt;
+        &lt;b&gt;Joined&lt;/b&gt;&lt;time datetime=&#34;2022-06-04T13:12:00.000Z&#34;&gt;Jun, 2022&lt;/time&gt;
+        &lt;b&gt;Posts&lt;/b&gt;&lt;span&gt;8&lt;/span&gt;
+        &lt;b&gt;Followed by&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+        &lt;b&gt;Following&lt;/b&gt;&lt;span&gt;1&lt;/span&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+</code></pre>
+                <p>There, hope you liked that!</p>
+            </div>
+        </div>
+`)
+
+	out := outdentPre(html)
+	if out != expected {
+		t.Fatalf("unexpected output:\n`%s`\n", out)
+	}
+}