mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

[feature/frontend] Add login button to index page which reiterates info about clients (#3377) 

* Add login button to index page which reiterates info about clients

* bit of CSS fiddling, move apps from front page to login info

* fix indentation

---------

Co-authored-by: tobi <tobi.smethurst@protonmail.com>
This commit is contained in:
Vivian Lim ⭐ 2025-01-27 05:24:31 -08:00 committed by GitHub
parent 702d49207f
commit 7b7fc528f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 386 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
internal/web/index.go
View File

@ -60,7 +60,14 @@ func (m *Module) indexHandler(c *gin.Context) {
Instance: instance,
OGMeta: apiutil.OGBase(instance),
Stylesheets: []string{cssAbout, cssIndex},
Extra: map[string]any{"showStrap": true},
Extra: map[string]any{
// Render "home to x
// users [etc]" strap.
"showStrap": true,
// Show "log in" button
// in top-right corner.
"showLoginButton": true,
},
}
apiutil.TemplateWebPage(c, page)

60
internal/web/login-info.go Normal file
View File

@ -0,0 +1,60 @@
// 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 web
import (
"context"
"github.com/gin-gonic/gin"
apimodel "github.com/superseriousbusiness/gotosocial/internal/api/model"
apiutil "github.com/superseriousbusiness/gotosocial/internal/api/util"
"github.com/superseriousbusiness/gotosocial/internal/gtserror"
)
const (
loginPath = "/login"
)
func (m *Module) loginGETHandler(c *gin.Context) {
instance, errWithCode := m.processor.InstanceGetV1(c.Request.Context())
if errWithCode != nil {
apiutil.WebErrorHandler(c, errWithCode, m.processor.InstanceGetV1)
return
}
// Return instance we already got from the db,
// don't try to fetch it again when erroring.
instanceGet := func(ctx context.Context) (*apimodel.InstanceV1, gtserror.WithCode) {
return instance, nil
}
// We only serve text/html at this endpoint.
if _, err := apiutil.NegotiateAccept(c, apiutil.TextHTML); err != nil {
apiutil.WebErrorHandler(c, gtserror.NewErrorNotAcceptable(err, err.Error()), instanceGet)
return
}
page := apiutil.WebPage{
Template: "login_info.tmpl",
Instance: instance,
OGMeta: apiutil.OGBase(instance),
Stylesheets: []string{cssAbout, cssLoginInfo},
}
apiutil.TemplateWebPage(c, page)
}

2
internal/web/web.go
View File

@ -62,6 +62,7 @@ const (
cssFA = assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css"
cssAbout = distPathPrefix + "/about.css"
cssIndex = distPathPrefix + "/index.css"
cssLoginInfo = distPathPrefix + "/login-info.css"
cssStatus = distPathPrefix + "/status.css"
cssThread = distPathPrefix + "/thread.css"
cssProfile = distPathPrefix + "/profile.css"
@ -121,6 +122,7 @@ func (m *Module) Route(r *router.Router, mi ...gin.HandlerFunc) {
r.AttachHandler(http.MethodPost, confirmEmailPath, m.confirmEmailPOSTHandler)
r.AttachHandler(http.MethodGet, robotsPath, m.robotsGETHandler)
r.AttachHandler(http.MethodGet, aboutPath, m.aboutGETHandler)
r.AttachHandler(http.MethodGet, loginPath, m.loginGETHandler)
r.AttachHandler(http.MethodGet, domainBlockListPath, m.domainBlockListGETHandler)
r.AttachHandler(http.MethodGet, tagsPath, m.tagGETHandler)
r.AttachHandler(http.MethodGet, signupPath, m.signupGETHandler)

5
web/assets/ellipsis.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg" fill="#fafaff" width="800px" height="800px" viewBox="0 0 56 56">
<path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 19.7265 28.0234 C 19.7265 29.8750 18.1093 31.5156 16.2343 31.5156 C 14.3358 31.5156 12.7655 29.8750 12.7655 28.0234 C 12.7655 26.1484 14.3124 24.5078 16.2343 24.5078 C 18.1093 24.5078 19.7265 26.1719 19.7265 28.0234 Z M 31.4452 28.0234 C 31.4452 29.8750 29.8514 31.5156 27.9765 31.5156 C 26.1014 31.5156 24.5077 29.8750 24.5077 28.0234 C 24.5077 26.1484 26.0780 24.5078 27.9765 24.5078 C 29.8514 24.5078 31.4452 26.1719 31.4452 28.0234 Z M 43.1874 28.0234 C 43.1874 29.8750 41.5936 31.5156 39.6952 31.5156 C 37.8436 31.5156 36.2030 29.8750 36.2030 28.0234 C 36.2030 26.1484 37.8202 24.5078 39.6952 24.5078 C 41.5936 24.5078 43.1874 26.1719 43.1874 28.0234 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

50
web/source/css/index.css
View File

@ -75,53 +75,3 @@
max-width: 100%;
}
}
.apps {
align-self: start;
.applist {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5rem;
align-content: start;
.applist-entry {
display: grid;
grid-template-columns: 25% 1fr;
grid-template-areas: "logo text";
gap: 1.5rem;
padding: 0.5rem;
.applist-logo {
grid-area: logo;
align-self: center;
justify-self: center;
width: 100%;
object-fit: contain;
flex: 1 1 auto;
}
.applist-logo.redraw {
fill: $fg;
stroke: $fg;
}
.applist-text {
grid-area: text;
a {
font-weight: bold;
}
}
}
}
}
@media screen and (max-width: 600px) {
.apps .applist {
grid-template-columns: 1fr;
}
}

114
web/source/css/login-info.css Normal file
View File

@ -0,0 +1,114 @@
/*
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/>.
*/
/*
Reuse about styling, but rework it
to separate sections a bit more.
*/
.about {
padding: 0;
background: initial;
box-shadow: initial;
border: initial;
border-radius: initial;
.about-section {
padding: 2rem;
background: $bg-accent;
box-shadow: $boxshadow;
border: $boxshadow-border;
border-radius: $br;
h3 {
margin-top: 0px;
}
}
& > .about-section.settings {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
p.settings-text {
margin-top: auto;
margin-bottom: auto;
flex: auto;
}
.settings-button {
flex: auto;
}
}
& > .about-section.apps {
align-self: start;
.applist {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5rem;
align-content: start;
.applist-entry {
display: grid;
grid-template-columns: 25% 1fr;
grid-template-areas: "logo text";
gap: 1.5rem;
padding: 0.5rem;
.applist-logo {
grid-area: logo;
align-self: center;
justify-self: center;
width: 100%;
object-fit: contain;
flex: 1 1 auto;
}
.applist-logo.redraw {
fill: $fg;
stroke: $fg;
}
.applist-text {
grid-area: text;
a {
font-weight: bold;
}
}
}
}
@media screen and (max-width: 600px) {
.applist {
grid-template-columns: 1fr;
}
}
}
}

6
web/source/css/page.css
View File

@ -135,3 +135,9 @@
text-align: center;
}
}
.login {
position: absolute;
top: 2vh;
right: 2vh;
}

1
web/template/index.tmpl
View File

@ -36,6 +36,5 @@
</section>
{{- include "index_what_is_this.tmpl" . | indent 1 }}
{{- include "index_register.tmpl" . | indent 1 }}
{{- include "index_apps.tmpl" . | indent 1 }}
</main>
{{- end }}

118
web/template/index_apps.tmpl
View File

@ -1,118 +0,0 @@
{{- /*
// 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/>.
*/ -}}
{{- with . }}
<section role="region" class="about-section apps" aria-labelledby="apps">
<h3 id="apps">Client applications</h3>
<div class="about-section-contents">
<p>
Have an account on this instance and want to log in?
GoToSocial does not provide its own webclient, but implements the Mastodon client API.
You can use a variety of clients to log in to your account here:
</p>
<ul class="applist nodot" role="group">
<li class="applist-entry">
<div class="applist-text">
<p><strong>Pinafore</strong> is a web client designed for speed and simplicity.</p>
<a
href="https://pinafore.social/"
rel="nofollow noreferrer noopener"
target="_blank"
>
Use Pinafore
</a>
</div>
<svg
role="img"
aria-labelledby="pinafore-title pinafore-desc"
class="applist-logo redraw"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 10000 10000"
width="100"
height="100"
>
<title id="pinafore-title">The Pinafore logo</title>
<desc id="pinafore-desc">A sailboat</desc>
<path d="M9212 5993H5987V823c1053 667 2747 2177 3225 5170zM3100 2690A12240 12240 0 01939 6035h2161zm676 7210h2448a3067 3067 0 003067-3067H5052V627a527 527 0 00-1052 0v6206H709a3067 3067 0 003067 3067z"></path>
</svg>
</li>
<li class="applist-entry">
<div class="applist-text">
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
<a
href="https://tusky.app"
rel="nofollow noreferrer noopener"
target="_blank"
>
Get Tusky
</a>
</div>
<img
class="applist-logo"
src="/assets/tusky.svg"
alt="The Tusky mascot, a cartoon elephant tooting happily"
title="The Tusky mascot, a cartoon elephant tooting happily"
width="100"
height="100"
/>
</li>
<li class="applist-entry">
<div class="applist-text">
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
<a
href="https://github.com/feditext/feditext"
rel="nofollow noreferrer noopener"
target="_blank"
>
Get Feditext
</a>
</div>
<img
class="applist-logo"
src="/assets/feditext.svg"
alt="The Feditext logo, the characters 'ft' at a slight angle"
title="The Feditext logo, the characters 'ft' at a slight angle"
width="100"
height="100"
/>
</li>
<li class="applist-entry">
<div class="applist-text">
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
<a
href="https://joinmastodon.org/apps"
rel="nofollow noreferrer noopener"
target="_blank"
>
Get Mastodon apps
</a>
</div>
<img
class="applist-logo"
src="/assets/mastodon.svg"
alt="The Mastodon logo, the character 'M' in a speech bubble"
title="The Mastodon logo, the character 'M' in a speech bubble"
width="100"
height="100"
/>
</li>
</ul>
</div>
</section>
{{- end }}

22
web/template/login_button.tmpl Normal file
View File

@ -0,0 +1,22 @@
{{- /*
// 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/>.
*/ -}}
{{- if .showLoginButton }}
<div class="login"><a href="/login" class="button with-icon">Log in</a></div>
{{- end }}

157
web/template/login_info.tmpl Normal file
View File

@ -0,0 +1,157 @@
{{- /*
// 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/>.
*/ -}}
{{- with . }}
<main class="about">
<section role="region" class="about-section settings">
<p class="settings-text">
Looking to configure your profile and other settings?
</p>
<a
class="settings-button button with-icon"
href="/settings"
alt="Log in to the GoToSocial settings panel"
title="Log in to the GoToSocial settings panel"
>
Settings
</a>
</section>
<section role="region" class="about-section apps" aria-labelledby="apps">
<h3 id="apps">Client applications</h3>
<div class="about-section-contents">
<p>
Want to log in and start posting?
Unlike other ActivityPub softwares, GoToSocial does not provide its own
webclient. Instead it implements the Mastodon client API, so you can use
a variety of third-party clients to log in to your account here:
</p>
<ul class="applist nodot" role="group">
<li class="applist-entry">
<div class="applist-text">
<p><strong>Pinafore</strong> is a web client designed for speed and simplicity.</p>
<a
href="https://pinafore.social/"
rel="nofollow noreferrer noopener"
target="_blank"
>
Use Pinafore
</a>
</div>
<svg
role="img"
aria-labelledby="pinafore-title pinafore-desc"
class="applist-logo redraw"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 10000 10000"
width="100"
height="100"
>
<title id="pinafore-title">The Pinafore logo</title>
<desc id="pinafore-desc">A sailboat</desc>
<path d="M9212 5993H5987V823c1053 667 2747 2177 3225 5170zM3100 2690A12240 12240 0 01939 6035h2161zm676 7210h2448a3067 3067 0 003067-3067H5052V627a527 527 0 00-1052 0v6206H709a3067 3067 0 003067 3067z"></path>
</svg>
</li>
<li class="applist-entry">
<div class="applist-text">
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
<a
href="https://tusky.app"
rel="nofollow noreferrer noopener"
target="_blank"
>
Get Tusky
</a>
</div>
<img
class="applist-logo"
src="/assets/tusky.svg"
alt="The Tusky mascot, a cartoon elephant tooting happily"
title="The Tusky mascot, a cartoon elephant tooting happily"
width="100"
height="100"
/>
</li>
<li class="applist-entry">
<div class="applist-text">
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
<a
href="https://github.com/feditext/feditext"
rel="nofollow noreferrer noopener"
target="_blank"
>
Get Feditext
</a>
</div>
<img
class="applist-logo"
src="/assets/feditext.svg"
alt="The Feditext logo, the characters 'ft' at a slight angle"
title="The Feditext logo, the characters 'ft' at a slight angle"
width="100"
height="100"
/>
</li>
<li class="applist-entry">
<div class="applist-text">
<p>
<strong>Masto-FE (🦥 flavour)</strong> is an (experimental!) client based on
the Mastodon Glitch web frontend, with some small changes specific to GoToSocial.
</p>
<a
href="https://masto-fe.superseriousbusiness.org"
rel="nofollow noreferrer noopener"
target="_blank"
>
Try Masto-FE (🦥 flavour)
</a>
</div>
<img
class="applist-logo"
src="/assets/mastodon.svg"
alt="The Mastodon logo, the character 'M' in a speech bubble"
title="The Mastodon logo, the character 'M' in a speech bubble"
width="100"
height="100"
/>
</li>
<li class="applist-entry">
<div class="applist-text">
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
<a
href="https://joinmastodon.org/apps"
rel="nofollow noreferrer noopener"
target="_blank"
>
Browse Mastodon apps
</a>
</div>
<img
class="applist-logo"
src="/assets/ellipsis.svg"
alt="Three ellipses in a row, MIT license svgrepo.com"
title="Three ellipses in a row, MIT license svgrepo.com"
width="100"
height="100"
/>
</li>
</ul>
</div>
</section>
</main>
{{- end }}

5
web/template/page.tmpl
View File

@ -71,7 +71,9 @@ image/webp
{{- end }}
<title>{{- template "instanceTitle" . -}}</title>
</head>
<body class="page">
<body>
{{- include "login_button.tmpl" . | indent 3 }}
<div class="page">
<header class="page-header">
{{- include "page_header.tmpl" . | indent 3 }}
</header>
@ -81,5 +83,6 @@ image/webp
<footer class="page-footer">
{{- include "page_footer.tmpl" . | indent 3 }}
</footer>
</div>
</body>
</html>