From 0ff52b71f2c0e970b1f0d43793c019bbed93e112 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Wed, 27 Dec 2023 11:23:52 +0100 Subject: [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 --- internal/router/router.go | 1 - internal/router/template.go | 260 +++++++++++++++++++++++++++++++-------- internal/router/template_test.go | 204 ++++++++++++++++++++++++++++++ 3 files changed, 412 insertions(+), 53 deletions(-) create mode 100644 internal/router/template_test.go (limited to 'internal/router') 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(``, icon.label, icon.faIcon)) + return template.HTML(fmt.Sprintf( + ``, + 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 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)+)
.*
`, 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 `
` 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 .
+
+package router
+
+import (
+	"html/template"
+	"testing"
+)
+
+func TestOutdentPre(t *testing.T) {
+	const html = template.HTML(`
+        

+            
                
+                
Here's a bunch of HTML, read it and weep, weep then!

+                
<section class="about-user">
+                    <div class="col-header">
+                        <h2>About</h2>
+                    </div>            
+                    <div class="fields">
+                        <h3 class="sr-only">Fields</h3>
+                        <dl>
+                            <div class="field">
+                                <dt>should you follow me?</dt>
+                                <dd>maybe!</dd>
+                            </div>
+                            <div class="field">
+                                <dt>age</dt>
+                                <dd>120</dd>
+                            </div>
+                        </dl>
+                    </div>
+                    <div class="bio">
+                        <h3 class="sr-only">Bio</h3>
+                        <p>i post about things that concern me</p>
+                    </div>
+                    <div class="sr-only" role="group">
+                        <h3 class="sr-only">Stats</h3>
+                        <span>Joined in Jun, 2022.</span>
+                        <span>8 posts.</span>
+                        <span>Followed by 1.</span>
+                        <span>Following 1.</span>
+                    </div>
+                    <div class="accountstats" aria-hidden="true">
+                        <b>Joined</b><time datetime="2022-06-04T13:12:00.000Z">Jun, 2022</time>
+                        <b>Posts</b><span>8</span>
+                        <b>Followed by</b><span>1</span>
+                        <b>Following</b><span>1</span>
+                    </div>
+                </section>
+                

+                
There, hope you liked that!

+            

+        

+        

+            
                
+                
Here's a bunch of HTML, read it and weep, weep then!

+                
<section class="about-user">
+                    <div class="col-header">
+                        <h2>About</h2>
+                    </div>            
+                    <div class="fields">
+                        <h3 class="sr-only">Fields</h3>
+                        <dl>
+                            <div class="field">
+                                <dt>should you follow me?</dt>
+                                <dd>maybe!</dd>
+                            </div>
+                            <div class="field">
+                                <dt>age</dt>
+                                <dd>120</dd>
+                            </div>
+                        </dl>
+                    </div>
+                    <div class="bio">
+                        <h3 class="sr-only">Bio</h3>
+                        <p>i post about things that concern me</p>
+                    </div>
+                    <div class="sr-only" role="group">
+                        <h3 class="sr-only">Stats</h3>
+                        <span>Joined in Jun, 2022.</span>
+                        <span>8 posts.</span>
+                        <span>Followed by 1.</span>
+                        <span>Following 1.</span>
+                    </div>
+                    <div class="accountstats" aria-hidden="true">
+                        <b>Joined</b><time datetime="2022-06-04T13:12:00.000Z">Jun, 2022</time>
+                        <b>Posts</b><span>8</span>
+                        <b>Followed by</b><span>1</span>
+                        <b>Following</b><span>1</span>
+                    </div>
+                </section>
+                

+                
There, hope you liked that!

+            

+        

+`)
+
+	const expected = template.HTML(`
+        

+            
                
+                
Here's a bunch of HTML, read it and weep, weep then!

+
<section class="about-user">
+    <div class="col-header">
+        <h2>About</h2>
+    </div>            
+    <div class="fields">
+        <h3 class="sr-only">Fields</h3>
+        <dl>
+            <div class="field">
+<dt>should you follow me?</dt>
+<dd>maybe!</dd>
+            </div>
+            <div class="field">
+<dt>age</dt>
+<dd>120</dd>
+            </div>
+        </dl>
+    </div>
+    <div class="bio">
+        <h3 class="sr-only">Bio</h3>
+        <p>i post about things that concern me</p>
+    </div>
+    <div class="sr-only" role="group">
+        <h3 class="sr-only">Stats</h3>
+        <span>Joined in Jun, 2022.</span>
+        <span>8 posts.</span>
+        <span>Followed by 1.</span>
+        <span>Following 1.</span>
+    </div>
+    <div class="accountstats" aria-hidden="true">
+        <b>Joined</b><time datetime="2022-06-04T13:12:00.000Z">Jun, 2022</time>
+        <b>Posts</b><span>8</span>
+        <b>Followed by</b><span>1</span>
+        <b>Following</b><span>1</span>
+    </div>
+</section>
+

+                
There, hope you liked that!

+            

+        

+        

+            
                
+                
Here's a bunch of HTML, read it and weep, weep then!

+
<section class="about-user">
+    <div class="col-header">
+        <h2>About</h2>
+    </div>            
+    <div class="fields">
+        <h3 class="sr-only">Fields</h3>
+        <dl>
+            <div class="field">
+<dt>should you follow me?</dt>
+<dd>maybe!</dd>
+            </div>
+            <div class="field">
+<dt>age</dt>
+<dd>120</dd>
+            </div>
+        </dl>
+    </div>
+    <div class="bio">
+        <h3 class="sr-only">Bio</h3>
+        <p>i post about things that concern me</p>
+    </div>
+    <div class="sr-only" role="group">
+        <h3 class="sr-only">Stats</h3>
+        <span>Joined in Jun, 2022.</span>
+        <span>8 posts.</span>
+        <span>Followed by 1.</span>
+        <span>Following 1.</span>
+    </div>
+    <div class="accountstats" aria-hidden="true">
+        <b>Joined</b><time datetime="2022-06-04T13:12:00.000Z">Jun, 2022</time>
+        <b>Posts</b><span>8</span>
+        <b>Followed by</b><span>1</span>
+        <b>Following</b><span>1</span>
+    </div>
+</section>
+

+                
There, hope you liked that!

+            

+        

+`)
+
+	out := outdentPre(html)
+	if out != expected {
+		t.Fatalf("unexpected output:\n`%s`\n", out)
+	}
+}
-- 
cgit v1.2.3