feat(*): simplify items from recent activity

Author: ProbablePrime

public/stylesheets/sessionList.css

@@ -0,0 +1,23 @@
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+}
+
+.grid-item {
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.grid-item p {
+    margin: 5px 0;
+    font-size: 16px;
+    white-space: normal;
+    word-break: break-word;
+    text-align: center;
+}

public/stylesheets/style.css

@@ -34,37 +34,14 @@ body {
   font-family: "Poppins", sans-serif;
 }
 
-.go-page-content {
+main {
   flex: 1;
 }
 
-.go-page-footer {
+footer {
   width: 100%;
 }
 
-.infobox {
-  list-style-type: disc;
-  padding-inline-start: 40px;
-}
-
-.infobox__row {
-  display: list-item;
-}
-
-.infobox__heading,
-.infobox__details {
-  display: inline;
-}
-
-.infobox__heading {
-  color: var(--text-bright);
-  font-weight: 600;
-}
-
-.infobox__details {
-  margin-left: 0;
-}
-
 .btn {
   appearance: button;
   border-radius: 6px;
@@ -82,26 +59,19 @@ body {
   text-decoration: none;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 10px;
+.infobox dl {
+  list-style-type: disc;
 }
 
-.grid-item {
-  border: 1px solid rgba(0, 0, 0, 0.8);
-  padding: 20px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+.infobox dt, dd{
+  display: inline;
 }
 
-.grid-item p {
-  margin: 5px 0;
-  font-size: 16px;
-  white-space: normal;
-  word-break: break-word;
-  text-align: center;
+.infobox dt {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+.infobox dd {
+  margin-left: 0;
 }

routes/index.js

@@ -97,8 +97,9 @@ async function handle(type, req, res, next) {
   res.status(200).render(type, json);
 }
 
-function addMetadata(type, json) {
-  json.bodyClass = type;
+function addMetadata(pageType, json) {
+  json.bodyClass = pageType;
+  json.pageType = pageType;
 
   return json;
 }

views/layout.pug

@@ -5,6 +5,8 @@ html(lang="en")
         meta(charset='utf-8')
         meta(name='viewport', content='width=device-width, initial-scale=1')
         meta(property="og:site_name" content="Resonite")
+        meta(property="og:title" content=title)
+        meta(property="og:type" content=`resonite.${pageType}`)
         link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css')
         link(rel='stylesheet' href='/stylesheets/style.css')
         link(rel="preconnect" href="https://api.resonite.com")
@@ -14,12 +16,12 @@ html(lang="en")
         style.
             @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
     body(class=bodyClass)
-        header.go-page-header.center
+        header.center
             img(src='/images/resonite.png' alt='Resonite')
-        main.go-page-content
+        main
             block content
                 h1 Placeholder
-        footer.go-page-footer
+        footer
             p.center
                 span Copyright © 
                 a(href="https://yellowdogman.com/imprint.html") Yellow Dog Man Studios s.r.o.

views/session.pug

@@ -1,8 +1,6 @@
 extends layout
 
 block head
-    meta(property="og:title" content=title)
-    meta(property="og:type" content="resonite.session")
     meta(property="og:image" content=thumbnailUrl)
     meta(property="og:description" content!=description)
     meta(name="twitter:card" content="summary_large_image")
@@ -15,15 +13,15 @@ block content
         img(src=thumbnailUrl alt=`A preview image of the '${title}' session.`)
 
     dl.infobox
-        .infobox__row
-            dt.infobox__heading Host: 
-            dd.infobox__details #{hostUsername}
-        .infobox__row
-            dt.infobox__heading Version: 
-            dd.infobox__details #{appVersion}
-        .infobox__row
-            dt.infobox__heading Users (#{totalJoinedUsers}/#{maxUsers}): 
-            dd.infobox__details #{sessionUsers.map(user => user.username).join(", ")}
+        .row
+            dt Host: 
+            dd #{hostUsername}
+        .row
+            dt Version: 
+            dd #{appVersion}
+        .row
+            dt Users (#{totalJoinedUsers}/#{maxUsers}): 
+            dd #{sessionUsers.map(user => user.username).join(", ")}
     div.center
         a.btn(href=`ressession:///${sessionId}`) Join Session!
     p.center 

views/sessionList.pug

@@ -1,10 +1,9 @@
 extends layout
 
 block head
-  meta(property="og:title" content=title)
-  meta(property="og:type" content="resonite.sessionList")
   meta(property="og:description" content="Active sessions on Resonite")
   link(type="application/json+oembed" href=`${urlPath}json`)
+  link(rel='stylesheet' href='/stylesheets/sessionList.css')
 
 block content
   h1 Active Sessions

views/world.pug

@@ -1,7 +1,6 @@
 extends layout
 
 block head
-    meta(property="og:title" content=title)
     meta(property="og:type" content="resonite.world")
     meta(property="og:image" content=thumbnailUri)
     meta(property="og:description" content=description)
@@ -15,15 +14,15 @@ block content
         img(src=thumbnailUri alt=`A preview image of the '${title}' world.`)
 
     dl.infobox
-        .infobox__row
-            dt.infobox__heading By: 
-            dd.infobox__details #{ownerName}
-        .infobox__row 
-            dt.infobox__heading Description: 
-            dd.infobox__details #{description}
-        .infobox__row 
-            dt.infobox__heading Tags: 
-            dd.infobox__details #{tags.join(", ")}
+        .row
+            dt By: 
+            dd #{ownerName}
+        .row
+            dt Description: 
+            dd #{description}
+        .row
+            dt Tags: 
+            dd #{tags.join(", ")}
     div.center
         a.btn(href=`resrec:///${ownerId}/${id}`) Open World!
     p.center