Webviews for status threads

internal/router/template.go

@@ -23,8 +23,10 @@ import (
 	"html/template"
 	"os"
 	"path/filepath"
+	"time"
 
 	"github.com/gin-gonic/gin"
+	"github.com/superseriousbusiness/gotosocial/internal/api/model"
 	"github.com/superseriousbusiness/gotosocial/internal/config"
 )
 
@@ -37,16 +39,56 @@ func loadTemplates(cfg *config.Config, engine *gin.Engine) error {
 
 	tmPath := filepath.Join(cwd, fmt.Sprintf("%s*", cfg.TemplateConfig.BaseDir))
 
+	println("loading html templates")
 	engine.LoadHTMLGlob(tmPath)
 	return nil
 }
 
+func oddOrEven(n int) string {
+	if n%2 == 0 {
+		return "even"
+	} else {
+		return "odd"
+	}
+}
+
 func noescape(str string) template.HTML {
 	return template.HTML(str)
 }
 
+func timestamp(stamp string) string {
+	t, _ := time.Parse(time.RFC3339, stamp)
+	return t.Format("January 2, 2006, 15:04:05")
+}
+
+type IconWithLabel struct {
+	faIcon string
+	label  string
+}
+
+func visibilityIcon(visibility model.Visibility) template.HTML {
+	var icon IconWithLabel
+
+	if visibility == model.VisibilityPublic {
+		icon = IconWithLabel{"globe", "public"}
+	} else if visibility == model.VisibilityUnlisted {
+		icon = IconWithLabel{"unlock", "unlisted"}
+	} else if visibility == model.VisibilityPrivate {
+		icon = IconWithLabel{"lock", "private"}
+	} else if visibility == model.VisibilityMutualsOnly {
+		icon = IconWithLabel{"handshake-o", "mutuals only"}
+	} else if visibility == model.VisibilityDirect {
+		icon = IconWithLabel{"envelope", "direct"}
+	}
+
+	return template.HTML(fmt.Sprintf(`<i aria-label="Visiblity: %v" class="fa fa-%v"></i>`, icon.label, icon.faIcon))
+}
+
 func loadTemplateFunctions(engine *gin.Engine) {
 	engine.SetFuncMap(template.FuncMap{
-		"noescape": noescape,
+		"noescape":       noescape,
+		"oddOrEven":      oddOrEven,
+		"visibilityIcon": visibilityIcon,
+		"timestamp":      timestamp,
 	})
 }

internal/web/base.go

@@ -59,11 +59,7 @@ func (m *Module) baseHandler(c *gin.Context) {
 
 	// FIXME: fill in more variables?
 	c.HTML(http.StatusOK, "index.tmpl", gin.H{
-		"instance":      instance,
+		"instance": instance,
-		"countUsers":    3,
-		"countStatuses": 42069,
-		"version":       "1.0.0",
-		"adminUsername": "@admin",
 	})
 }
 
@@ -101,6 +97,9 @@ func (m *Module) Route(s router.Router) error {
 	// serve front-page
 	s.AttachHandler(http.MethodGet, "/", m.baseHandler)
 
+	// serve statuses
+	s.AttachHandler(http.MethodGet, "/:user/statuses/:id", m.statusTemplateHandler)
+
 	// 404 handler
 	s.AttachNoRouteHandler(m.NotFoundHandler)
 

internal/web/status.go

@@ -0,0 +1,81 @@
+/*
+   GoToSocial
+   Copyright (C) 2021 GoToSocial Authors admin@gotosocial.org
+
+   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 web
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/superseriousbusiness/gotosocial/internal/oauth"
+)
+
+type StatusLink struct {
+	User string `uri:"user" binding:"required"`
+	ID   string `uri:"id"   binding:"required"`
+}
+
+func (m *Module) statusTemplateHandler(c *gin.Context) {
+	l := m.log.WithField("func", "statusTemplateGET")
+	l.Trace("rendering status template")
+
+	var statusLink StatusLink
+
+	if err := c.ShouldBindUri(&statusLink); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "status not found"})
+		return
+	}
+
+	authed, err := oauth.Authed(c, false, false, false, false) // we don't really need an app here but we want everything else
+	if err != nil {
+		l.Errorf("error authing status GET request: %s", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": "status not found"})
+		return
+	}
+
+	instance, err := m.processor.InstanceGet(c.Request.Context(), m.config.Host)
+	if err != nil {
+		l.Debugf("error getting instance from processor: %s", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "internal server error"})
+		return
+	}
+
+	status, err := m.processor.StatusGet(c.Request.Context(), authed, statusLink.ID)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "status not found"})
+		return
+	}
+
+	println(statusLink.User[:1], statusLink.User, status.Account.Username)
+	if statusLink.User[:1] != "@" || statusLink.User[1:] != status.Account.Username {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "status not found"})
+		return
+	}
+
+	context, err := m.processor.StatusGetContext(c.Request.Context(), authed, statusLink.ID)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "status not found"})
+		return
+	}
+
+	c.HTML(http.StatusOK, "status.tmpl", gin.H{
+		"instance": instance,
+		"status":   status,
+		"context":  context,
+	})
+}

web/template/header.tmpl

@@ -1,19 +1,25 @@
 <!DOCTYPE html>
-<!-- header.tmpl -->
+
+<!-- Header tmpl -->
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta name="og:title" content="{{.instance.Title}}">
+	<meta name="og:title" content="GoToSocial Testing Instance">
-	<meta name="og:description" content="{{.instance.Description}}">
+	<meta name="og:description" content="">
 	<link rel="stylesheet" href="/assets/bundle.css">
-	<link rel="shortcut icon" href="/assets/sloth.png" type="image/png">
+	<link rel="stylesheet" href="/assets/Fork-Awesome/css/fork-awesome.min.css">
+	<link rel="shortcut icon" href="/assets/logo.png" type="image/png">
 	<title>{{.instance.Title}} - GoToSocial</title>
 </head>
 <body>
 	<header>
-		<h1>
+		<img src="/assets/logo.png" alt="Instance Logo"/>
-			{{.instance.Title}}
+		<div>
-		</h1>
+			<h1>
+				{{.instance.Title}}
+			</h1>
+		</div>
+		<div></div>
 	</header>

web/template/status.tmpl

@@ -0,0 +1,100 @@
+{{ template "header.tmpl" .}}
+<main>
+	<div class="thread">
+		{{range .context.Ancestors}}
+			<div class="toot">
+				<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}"></a>
+				<a href="{{.Account.URL}}" class="displayname">{{.Account.DisplayName}}</a>
+				<a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
+				<div class="text">
+					{{.Content |noescape}}
+				</div>
+				{{with .MediaAttachments}}
+					<div class="media {{(len .) | oddOrEven }} {{if eq (len .) 1}}single{{end}}">
+						{{range .}}
+							<a href="{{.URL}}" target="_blank" title="{{.Description}}">
+ 								{{if not .Description}}
+							 		<div class="no-image-desc" aria-hidden="true" >(!)<span>Missing image description</span></div>
+								{{end}}
+								<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
+							</a>
+						{{end}}
+					</div>
+				{{end}}
+				<div class="info">
+					<div id="date">{{.CreatedAt | timestamp}}</div>
+					<div class="stats">
+						<div id="visibility">{{.Visibility | visibilityIcon}}</div>
+						<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div>
+						<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div>
+						<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div>
+					</div>
+				</div>
+				<a href="{{.URL}}" class="toot-link">View toot</a>
+			</div>
+		{{end}}
+		<div class="toot expanded">
+			<a href="{{.status.Account.URL}}" class="avatar"><img src="{{.status.Account.Avatar}}"></a>
+			<a href="{{.status.Account.URL}}" class="displayname">{{.status.Account.DisplayName}}</a>
+			<a href="{{.status.Account.URL}}" class="username">@{{.status.Account.Username}}</a>
+			<div class="text">
+				{{.status.Content |noescape}}
+			</div>
+			{{with .status.MediaAttachments}}
+				<div class="media {{(len .) | oddOrEven }} {{if eq (len .) 1}}single{{end}}">
+					{{range .}}
+						<a href="{{.URL}}" target="_blank" title="{{.Description}}">
+ 							{{if not .Description}}
+							 	<div class="no-image-desc" aria-hidden="true" >(!)<span>Missing image description</span></div>
+							{{end}}
+							<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
+						</a>
+					{{end}}
+				</div>
+			{{end}}
+			<div class="info">
+				<div id="date">{{.status.CreatedAt | timestamp}}</div>
+				<div class="stats">
+					<div id="visibility">{{.status.Visibility | visibilityIcon}}</div>
+					<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.status.RepliesCount}}</div>
+					<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.status.ReblogsCount}}</div>
+					<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.status.FavouritesCount}}</div>
+				</div>
+			</div>
+			<a href="{{.status.URL}}" class="toot-link">View toot</a>
+		</div>
+		{{range .context.Descendants}}
+			<div class="toot">
+				<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}"></a>
+				<a href="{{.Account.URL}}" class="displayname">{{.Account.DisplayName}}</a>
+				<a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
+				<div class="text">
+					{{.Content |noescape}}
+				</div>
+				{{with .MediaAttachments}}
+					<div class="media {{(len .) | oddOrEven }} {{if eq (len .) 1}}single{{end}}">
+						{{range .}}
+							<a href="{{.URL}}" target="_blank" title="{{.Description}}">
+ 								{{if not .Description}}
+							 		<div class="no-image-desc" aria-hidden="true" >(!)<span>Missing image description</span></div>
+								{{end}}
+								<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
+							</a>
+						{{end}}
+					</div>
+				{{end}}
+				<div class="info">
+					<div id="date">{{.CreatedAt | timestamp}}</div>
+					<div class="stats">
+						<div id="visibility">{{.Visibility | visibilityIcon}}</div>
+						<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div>
+						<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div>
+						<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div>
+					</div>
+				</div>
+				<a href="{{.URL}}" class="toot-link">View toot</a>
+			</div>
+		{{end}}
+	</div>
+</main>
+{{ template "footer.tmpl" .}}