[frontend] Refactor CSS, split into files, update templates

.drone.yml

@@ -57,7 +57,7 @@ steps:
           - pull_request
 
   - name: web-setup
-    image: node:18-alpine
+    image: node:20-alpine
     volumes:
       - name: yarn_cache
         path: /tmp/cache
@@ -72,7 +72,7 @@ steps:
           - pull_request
 
   - name: web-lint
-    image: node:18-alpine
+    image: node:20-alpine
     commands:
       - yarn --cwd ./web/source lint
     depends_on:
@@ -83,7 +83,7 @@ steps:
           - pull_request
 
   - name: web-build
-    image: node:18-alpine
+    image: node:20-alpine
     commands:
       - yarn --cwd ./web/source build
     depends_on:
@@ -114,7 +114,7 @@ steps:
       # Create a snapshot build with GoReleaser.
       - git fetch --tags
       - goreleaser release --clean --snapshot
-      
+
       # Login to Docker, push Docker image snapshots + manifests.
       - /go/dockerlogin.sh
       - docker push superseriousbusiness/gotosocial:snapshot-armv6
@@ -129,7 +129,7 @@ steps:
       - docker push superseriousbusiness/gotosocial:snapshot-amd64-moderncsqlite
       - docker manifest create superseriousbusiness/gotosocial:snapshot-moderncsqlite superseriousbusiness/gotosocial:snapshot-armv6-moderncsqlite superseriousbusiness/gotosocial:snapshot-armv7-moderncsqlite superseriousbusiness/gotosocial:snapshot-amd64-moderncsqlite superseriousbusiness/gotosocial:snapshot-arm64v8-moderncsqlite
       - docker manifest push superseriousbusiness/gotosocial:snapshot-moderncsqlite
-      
+
       # Publish binary .tar.gz snapshots to S3.
       - /go/snapshot_publish.sh
     when:
@@ -156,12 +156,12 @@ steps:
     commands:
       - git fetch --tags
       - /go/dockerlogin.sh
-      
+
       # When releasing, compare commits to the most recent tag that is not the
       # current one AND is not a release candidate tag (ie., no "rc" in the name).
       #
       # The DRONE_TAG env var should point to the tag that triggered this build.
-      # See: https://docs.drone.io/pipeline/environment/reference/drone-tag/ 
+      # See: https://docs.drone.io/pipeline/environment/reference/drone-tag/
       #
       # Note, this may cause annoyances when doing backport releases, for example,
       # releasing v0.10.1 when we've already released v0.15.0 or whatever, but
@@ -224,5 +224,3 @@ steps:
 ---
 kind: signature
 hmac: 1b89e3a538fbca72eb9a0b398cd82f09a774ba3649013e19d36012eda327e83f
-
-...

.vscode/settings.json

@@ -3,6 +3,9 @@
 	"go.lintFlags": [
 	  "--fast"
 	],
+	"go.testEnvVars": {
+		"WAZERO_COMPILATION_CACHE": "~/.cache/wazero"
+	},
 	"gopls": {
 		"analyses": {
 			"composites": false
@@ -19,5 +22,9 @@
 	],
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit"
-	}
+	},
+	"html.format.wrapLineLength": 0,
+	"html.format.wrapAttributes": "preserve",
+	"files.insertFinalNewline": true,
+	"files.trimFinalNewlines": true,
 }

Dockerfile

@@ -19,7 +19,7 @@ WORKDIR /go/src/github.com/superseriousbusiness/gotosocial
 RUN /go/bin/swagger generate spec -o /go/src/github.com/superseriousbusiness/gotosocial/swagger.yaml --scan-models
 
 # stage 2: generate the web/assets/dist bundles
-FROM --platform=${BUILDPLATFORM} node:18-alpine AS bundler
+FROM --platform=${BUILDPLATFORM} node:20-alpine AS bundler
 
 COPY web web
 RUN yarn --cwd ./web/source install && \

internal/typeutils/internaltofrontend_test.go

@@ -1780,7 +1780,7 @@ func (suite *InternalToFrontendTestSuite) TestStatusToAPIStatusPendingApproval()
   "muted": false,
   "bookmarked": false,
   "pinned": false,
-  "content": "<p>Hi <span class=\"h-card\"><a href=\"http://localhost:8080/@1happyturtle\" class=\"u-url mention\" rel=\"nofollow noreferrer noopener\" target=\"_blank\">@<span>1happyturtle</span></a></span>, can I reply?</p><hr><p><i lang=\"en\">ℹ️ Note from localhost:8080: This reply is pending your approval. You can quickly accept it by liking, boosting or replying to it. You can also accept or reject it at the following link: <a href=\"http://localhost:8080/settings/user/interaction_requests/01J5QVXCCEATJYSXM9H6MZT4JR\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://localhost:8080/settings/user/interaction_requests/01J5QVXCCEATJYSXM9H6MZT4JR</a>.</i></p>",
+  "content": "<p>Hi <span class=\"h-card\"><a href=\"http://localhost:8080/@1happyturtle\" class=\"u-url mention\" rel=\"nofollow noreferrer noopener\" target=\"_blank\">@<span>1happyturtle</span></a></span>, can I reply?</p><hr><p><i lang=\"en\">ℹ️ Note from localhost:8080: This reply is pending your approval. You can quickly accept it by liking, boosting or replying to it. You can also accept or reject it at the following link: <a href=\"http://localhost:8080/settings/user/interaction-requests/01J5QVXCCEATJYSXM9H6MZT4JR\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://localhost:8080/settings/user/interaction-requests/01J5QVXCCEATJYSXM9H6MZT4JR</a>.</i></p>",
   "reblog": null,
   "application": {
     "name": "superseriousbusiness",

internal/typeutils/util.go

@@ -214,8 +214,8 @@ func (c *Converter) pendingReplyNote(
 		// Build the settings panel URL at which the user
 		// can view + approve/reject the interaction request.
 		//
-		// Eg., https://example.org/settings/user/interaction_requests/01J5QVXCCEATJYSXM9H6MZT4JR
-		settingsURL = proto + "://" + host + "/settings/user/interaction_requests/" + intReq.ID
+		// Eg., https://example.org/settings/user/interaction-requests/01J5QVXCCEATJYSXM9H6MZT4JR
+		settingsURL = proto + "://" + host + "/settings/user/interaction-requests/" + intReq.ID
 	)
 
 	var note strings.Builder

internal/web/about.go

@@ -54,11 +54,12 @@ func (m *Module) aboutGETHandler(c *gin.Context) {
 		Template:    "about.tmpl",
 		Instance:    instance,
 		OGMeta:      apiutil.OGBase(instance),
-		Stylesheets: []string{cssAbout},
+		Stylesheets: []string{},
 		Extra: map[string]any{
 			"showStrap":        true,
 			"blocklistExposed": config.GetInstanceExposeSuspendedWeb(),
 			"languages":        config.GetInstanceLanguages().DisplayStrs(),
+			"pageType":         "with-sidebar",
 		},
 	}
 

internal/web/domain-blocklist.go

@@ -67,7 +67,7 @@ func (m *Module) domainBlockListGETHandler(c *gin.Context) {
 		Template:    "domain-blocklist.tmpl",
 		Instance:    instance,
 		OGMeta:      apiutil.OGBase(instance),
-		Stylesheets: []string{cssFA},
+		Stylesheets: []string{},
 		Javascript:  []string{jsFrontend},
 		Extra:       map[string]any{"blocklist": domainBlocks},
 	}

internal/web/index.go

@@ -59,8 +59,8 @@ func (m *Module) indexHandler(c *gin.Context) {
 		Template:    "index.tmpl",
 		Instance:    instance,
 		OGMeta:      apiutil.OGBase(instance),
-		Stylesheets: []string{cssAbout, cssIndex},
-		Extra:       map[string]any{"showStrap": true},
+		Stylesheets: []string{},
+		Extra:       map[string]any{"showStrap": true, "largeHeader": true},
 	}
 
 	apiutil.TemplateWebPage(c, page)

internal/web/profile.go

@@ -132,18 +132,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
 	}
 
 	// Prepare stylesheets for profile.
-	stylesheets := make([]string, 0, 6)
-
-	// Basic profile stylesheets.
-	stylesheets = append(
-		stylesheets,
-		[]string{
-			cssFA,
-			cssStatus,
-			cssThread,
-			cssProfile,
-		}...,
-	)
+	stylesheets := make([]string, 0, 2)
 
 	// User-selected theme if set.
 	if theme := targetAccount.Theme; theme != "" {
@@ -167,6 +156,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
 		Javascript:  []string{jsFrontend},
 		Extra: map[string]any{
 			"account":          targetAccount,
+			"pageType":         "wider",
 			"rssFeed":          rssFeed,
 			"robotsMeta":       robotsMeta,
 			"statuses":         statusResp.Items,

internal/web/settings-panel.go

@@ -49,9 +49,6 @@ func (m *Module) SettingsPanelHandler(c *gin.Context) {
 		Template: "settings.tmpl",
 		Instance: instance,
 		Stylesheets: []string{
-			cssFA,
-			cssProfile, // Used for rendering stub/fake profiles.
-			cssStatus,  // Used for rendering stub/fake statuses.
 			cssSettings,
 		},
 		Javascript: []string{jsSettings},

internal/web/tag.go

@@ -59,7 +59,7 @@ func (m *Module) tagGETHandler(c *gin.Context) {
 		Template:    "tag.tmpl",
 		Instance:    instance,
 		OGMeta:      apiutil.OGBase(instance),
-		Stylesheets: []string{cssFA, cssThread, cssTag},
+		Stylesheets: []string{},
 		Extra:       map[string]any{"tagName": tagName},
 	}
 

internal/web/thread.go

@@ -115,17 +115,7 @@ func (m *Module) threadGETHandler(c *gin.Context) {
 	}
 
 	// Prepare stylesheets for thread.
-	stylesheets := make([]string, 0, 5)
-
-	// Basic thread stylesheets.
-	stylesheets = append(
-		stylesheets,
-		[]string{
-			cssFA,
-			cssStatus,
-			cssThread,
-		}...,
-	)
+	stylesheets := make([]string, 0, 2)
 
 	// User-selected theme if set.
 	if theme := targetAccount.Theme; theme != "" {

internal/web/web.go

@@ -58,14 +58,7 @@ const (
 	eTagHeader            = "ETag"              // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag
 	lastModifiedHeader    = "Last-Modified"     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified
 
-	cssFA       = assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css"
-	cssAbout    = distPathPrefix + "/about.css"
-	cssIndex    = distPathPrefix + "/index.css"
-	cssStatus   = distPathPrefix + "/status.css"
-	cssThread   = distPathPrefix + "/thread.css"
-	cssProfile  = distPathPrefix + "/profile.css"
 	cssSettings = distPathPrefix + "/settings-style.css"
-	cssTag      = distPathPrefix + "/tag.css"
 
 	jsFrontend = distPathPrefix + "/frontend.js" // Progressive enhancement frontend JS.
 	jsSettings = distPathPrefix + "/settings.js" // Settings panel React application.