add tag page

public/s/css/w0bm.css

@@ -103,4 +103,25 @@ html[theme="f0ck"]  .image-brand {
 
   .v0ck_overlay {
     background-color: none !important;
+  }
+
+  .tags {
+    display: grid;
+}
+
+@media (min-width: 600px) {
+  .tags { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 900px) {
+  .tags { grid-template-columns: repeat(3, 1fr); }
+}
+
+.tag {
+    box-shadow: 1px 1px 1px black;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr auto;
+    margin: 10px;
+      margin-right: 10px;
   }

src/inc/routes/toptags.mjs

@@ -0,0 +1,29 @@
+import db from "../../inc/sql.mjs";
+import cfg from "../../inc/config.mjs";
+import f0cklib from "../routeinc/f0cklib.mjs";
+
+export default (router, tpl) => {
+  router.get(/^\/tags$/, async (req, res) => {
+
+    const phrase = cfg.websrv.phrases[~~(Math.random() * cfg.websrv.phrases.length)];
+
+    const toptags = await db`
+      SELECT t.id, t.tag, COUNT(DISTINCT ta.item_id) AS total_items
+      FROM tags t
+      LEFT JOIN tags_assign ta ON t.id = ta.tag_id
+      GROUP BY t.id, t.tag
+      ORDER BY total_items DESC
+      LIMIT 500
+      ;
+    `;
+
+    res.reply({
+      body: tpl.render('tags', {
+        toptags,
+        phrase,
+        tmp: null
+      }, req)
+    });
+  });
+  return router;
+};

views/tags.html

@@ -0,0 +1,15 @@
+@include(snippets/header)
+<div id="main">
+  <div class="container">
+    <h3 style="text-align: center;">{{ phrase }}</h3>
+    <div class="tags">
+      @each(toptags as toptag)
+      <div class="tag badge badge-light mr-2">
+        <span class="toptag_id">{!! toptag.tag !!}</span>
+        <span class="toptag_tag"><a href="/tag/{!! toptag.tag !!}">{{ toptag.total_items }}</a></span>
+      </div>
+      @endeach
+    </div>
+  </div>
+</div>
+@include(snippets/footer)