[/users/*] show frequently used tags

.gitignore

@@ -1,3 +1,4 @@
 /tmp
 dev.sh
 /pixivfe
+.sass-cache/

README.md

@@ -33,6 +33,17 @@ I recommend self-hosting your own instance for personal use, instead of relying
 Check out [this page](https://codeberg.org/VnPower/pixivfe/wiki/Hosting). We
 currently have guides for Docker and Caddy.
 
+## Development
+
+```
+# watch and compile styles with node-sass
+pnpm i -g sass
+sass --watch views/css
+
+# run in development mode (auto reload templates)
+PIXIVFE_DEV=1 ... go run .
+```
+
 ## Instances
 
 | Name               | Cloudflare? | URL                             |

views/css/style.css

@@ -22,7 +22,6 @@ a {
 /* Scrollbars */
 * {
   scrollbar-width: thin;
-  /* scrollbar-color: #118bee auto; */
 }
 
 *::-webkit-scrollbar {
@@ -608,6 +607,15 @@ nav .navigation-wrapper .sidebar .sidebar-list .sidebar-item img {
   margin: 0;
 }
 
+.user-tags {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 8px;
+}
+.user-tags > * {
+  line-height: 1;
+}
+
 #calendar {
   width: 100%;
   height: auto;

views/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAxBG;EAyBH,OAvBG;EAyBH;EACA,aAhBY;EAkBZ;EACA;EACA;;;AAGF;EACE,OAhCK;EAiCL;;;AAGF;AACA;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBApDG;EAqDH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAjGc;EAkGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBA9Ga;EA+Gb,OA7Ga;;;AAgHf;AAAA;EAEE,kBApHa;;;AAuHf;EACE;EACA;;;AAGF;EACE;EACA,eAzHc;EA0Hd;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eA9Ic;EA+Id;EACA;EACA;EACA,aAjJY;EAkJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aArJY;;;AAwJd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBArLK;EAsLL;EACA,OAzLG;;;AA4LL;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBAnNW;EAoNX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAzOH;;AA8OC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBA1QD;EA2QC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAhSL;EAiSK;EACA;EACA;;AAEA;EACE,kBAvSG;;AA0SL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAhXC;;AAoXD;AAAA;EACE,OAzWgB;EA0WhB,QA1WgB;;AA6WlB;AAAA;EACE,WA9WgB;;AAiXlB;AAAA;EACE,WAlXgB;;AAmXhB;AAAA;EACE,WArXc;;AA2XlB;AAAA;EACE,OA5XgB;EA6XhB,QA7XgB;;AAgYlB;AAAA;EACE,WAjYgB;;AAoYlB;AAAA;EACE,WArYgB;;AAuYhB;AAAA;EACE,WAxYc;;AA6YpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAxbI;EAybJ,OA5bH;;AA+bC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAvcH;EAwcG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eApdU;;AAudZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBA1gBa;EA2gBb,eAtgBc;EAugBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OA/iBK;;AAqjBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA3kBI;;AA8kBN;EACE,OAhlBD;EAilBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA5nBD;;AA8nBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBA5tBa;EA6tBb;;AAEA;EACE;EACA,OAhuBC;EAiuBD,kBAluBW;EAmuBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA7wBa;EA8wBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAgBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAxBG;EAyBH,OAvBG;EAyBH;EACA,aAhBY;EAkBZ;EACA;EACA;;;AAGF;EACE,OAhCK;EAiCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBArDG;EAsDH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAlGc;EAmGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBA/Ga;EAgHb,OA9Ga;;;AAiHf;AAAA;EAEE,kBArHa;;;AAwHf;EACE;EACA;;;AAGF;EACE;EACA,eA1Hc;EA2Hd;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eA/Ic;EAgJd;EACA;EACA;EACA,aAlJY;EAmJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aAtJY;;;AAyJd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBAtLK;EAuLL;EACA,OA1LG;;;AA6LL;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBApNW;EAqNX;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OA1OH;;AA+OC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE,kBA3QD;EA4QC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAjSL;EAkSK;EACA;EACA;;AAEA;EACE,kBAxSG;;AA2SL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAjXC;;AAqXD;AAAA;EACE,OA1WgB;EA2WhB,QA3WgB;;AA8WlB;AAAA;EACE,WA/WgB;;AAkXlB;AAAA;EACE,WAnXgB;;AAoXhB;AAAA;EACE,WAtXc;;AA4XlB;AAAA;EACE,OA7XgB;EA8XhB,QA9XgB;;AAiYlB;AAAA;EACE,WAlYgB;;AAqYlB;AAAA;EACE,WAtYgB;;AAwYhB;AAAA;EACE,WAzYc;;AA8YpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAzbI;EA0bJ,OA7bH;;AAgcC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAxcH;EAycG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eArdU;;AAwdZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBA3gBa;EA4gBb,eAvgBc;EAwgBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAhjBK;;AAsjBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA5kBI;;AA+kBN;EACE,OAjlBD;EAklBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA7nBD;;AA+nBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBAtuBa;EAuuBb;;AAEA;EACE;EACA,OA1uBC;EA2uBD,kBA5uBW;EA6uBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBAvxBa;EAwxBb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}

views/css/style.scss

@@ -707,6 +707,15 @@ nav {
   }
 }
 
+.user-tags {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 8px;
+  &>* {
+    line-height: 1;
+  }
+}
+
 #calendar {
   width: 100%;
   height: auto;

views/pages/user.jet.html

@@ -27,6 +27,22 @@
     </div>
     <p>{{ raw: parsePixivRedirect(User.Comment) }}</p>
   </div>
+  <div>Frequently Used Tags</div>
+  <div class="user-tags">
+    {{ range User.FrequentTags }}
+    <a href="/tags/{{ .Name }}">
+      #{{ .Name }}
+      <!-- <div>
+        {{ if ! .TranslatedName }}
+        <div class="main">{{ .Name }}</div>
+        {{ else }}
+        <div class="main">{{ .TranslatedName }}</div>
+        <div class="sub">#{{ .Name }}</div>
+        {{ end }}
+      </div> -->
+    </a>
+    {{ end }}
+  </div>
   <div class="switcher">
     <div class="switch-title">Category <button id="btn-open-all">Open all artworks</button></div>
     <script>
@@ -51,24 +67,7 @@
     >
   </div>
   <div>
-    <h1 id="checkpoint">Illustrations and Mangas</h1>
-
-    <!-- <div>
-                    {{ range User.FrequentTags }}
-                    <a href="/tags/{{ .Name }}">
-                        <div class="tag-container" style="background-color: {{ randomColor() }}">
-                            {{ if ! .TranslatedName }}
-                            <div class="main">{{ .Name }}</div>
-                            <div class="sub">#</div>
-                            {{ else }}
-                            <div class="main">{{ .TranslatedName }}</div>
-                            <div class="sub">#{{ .Name }}</div>
-                            {{ end }}
-                        </div>
-                    </a>
-                    {{ end }}
-                </div> -->
-
+    <h2 id="checkpoint">Illustrations and Mangas</h2>
     <div class="artwork-container">
       {{ include "components/small-tn" User.Artworks }}
     </div>