feat(html): truncate source code from large styles

Thanks Psykek.
userstyles-world · May 20, 2021 · 15e7620 · 15e7620
1 parent d54dcc9
commit 15e7620
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/models/style.go b/models/style.go
@@ -99,6 +99,15 @@ func (s StyleCard) Author() string {
 	return s.Username
 }
 
+// Truncate large styles to prevent long loading times.
+func (s APIStyle) TruncateCode() bool {
+	if len(s.Code) > 150_000 {
+		return true
+	}
+
+	return false
+}
+
 func getDBSession(db *gorm.DB) (tx *gorm.DB) {
 	var log logger.LogLevel
 	switch config.DB_DEBUG {

diff --git a/scss/ui/_reset.scss b/scss/ui/_reset.scss
@@ -39,6 +39,12 @@ html {
     }
     h1 { font-size: 2.5em }
     img { width: 100% }
+
+    mark {
+        display: inline-flex;
+        color: var(--inverse);
+        background-color: var(--ac-4);
+    }
 }
 
 h2, h3 { margin: 1em 0 0.5em }

diff --git a/static/css/main.css b/static/css/main.css
diff --git a/views/style.html b/views/style.html
@@ -116,7 +116,14 @@ <h2 class="td:d">Notes</h2>
 
                     <div class="code mt:l">
                         <h2 class="mt:0 mb:m td:d">Source code</h2>
-                        <textarea class="monospace" readonly>{{ printf "%s" .Style.Code }}</textarea>
+                        {{ $code := "" }}
+                        {{ if .Style.TruncateCode }}
+                            <mark class="mb:s">Source code has over 150k characters, so we truncated it. You can inspect the full source code on install link.</mark>
+                            {{ $code = printf "%.150000s..." .Style.Code }}
+                        {{ else }}
+                            {{ $code = printf "%s" .Style.Code }}
+                        {{ end }}
+                        <textarea class="monospace" readonly>{{ $code }}</textarea>
                     </div>
                 </section>
             </div>