mirror of
https://github.com/superseriousbusiness/gotosocial
synced 2025-06-05 21:59:39 +02:00
[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
This commit is contained in:
tobi
GitHub
@@ -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
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
)
|
||||
}
|
||||
|
||||
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)
|
||||
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,
|
||||
)
|
||||
}
|
||||
|
||||
engine.LoadHTMLGlob(filepath.Join(templateBaseDir, "*"))
|
||||
// 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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
// 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,
|
||||
})
|
||||
}
|
||||
|
||||
204
internal/router/template_test.go
Normal file
204
internal/router/template_test.go
Normal file
@@ -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"><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>
|
||||
</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"><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>
|
||||
</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"><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>
|
||||
</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"><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>
|
||||
</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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user