mention pyrom move

Dockerfile

@@ -4,28 +4,17 @@
 #
 # it exposes the data/ and secrets/ volumes in app root
 #
-FROM openresty/openresty:alpine-fat
+FROM openresty/openresty:1.25.3.2-5-alpine-fat
 
 RUN apk add --no-cache git make gcc g++ musl-dev libffi-dev openssl-dev sqlite-dev libsodium libsodium-dev imagemagick-dev openssl
 WORKDIR /app
 COPY . .
 RUN eval "$(luarocks --lua-version=5.1 path)"
-# listing all deps one by one until a more stable solution to the luarocks problem
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/javierguerragiraldez/lsqlite3-0.9.6-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/kikito/ansicolors-1.0.2-3.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/argparse/argparse-0.7.1-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/tieske/date-2.2.1-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/leafo/etlua-1.3.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/leafo/loadkit-1.1.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/gvvaughan/lpeg-1.1.0-2.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/openresty/lua-cjson-2.1.0.10-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/daurnimator/luaossl-20220711-0.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/lunarmodules/luasocket-3.1.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/leafo/pgmoon-1.16.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/leafo/magick-1.6.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/jprjr/luasodium-2.4.0-1.rockspec
-RUN luarocks --lua-version=5.1 install https://luarocks.org/manifests/leafo/lapis-1.16.0-1.rockspec
-# RUN luarocks --lua-version=5.1 build --only-deps
+# if using openresty images, make sure the image version is >= 1.25.3.2-5 or >= 1.27.1.2-2
+# see https://github.com/openresty/docker-openresty/issues/276#issuecomment-2950726213
+# otherwise, make sure your image uses luarocks >= 3.12.0
+# see https://github.com/luarocks/luarocks/issues/1797
+RUN luarocks --lua-version=5.1 build --only-deps
 EXPOSE 8080
 RUN chmod +x /app/start.sh
 ENTRYPOINT ["/app/start.sh", "production"]

README.md

@@ -1,5 +1,7 @@
 # Porom
 porous forum
+# Note
+Development has moved over to [pyrom](https://git.poto.cafe/yagich/pyrom).
 
 # License
 Released under [CNPLv7+](https://thufie.lain.haus/NPL.html).

THIRDPARTY.md

@@ -25,7 +25,7 @@ Designers: Paul James Miller
 
 ## ICONCINO
 
-Affected files: [`svg-icons/error.etlua`](./svg-icons/error.etlua) [`svg-icons/info.etlua`](./svg-icons/info.etlua) [`svg-icons/lock.etlua`](./svg-icons/lock.etlua) [`svg-icons/sticky.etlua`](./svg-icons/sticky.etlua) [`svg-icons/warn.etlua`](./svg-icons/warn.etlua)  
+Affected files: [`svg-icons/error.etlua`](./svg-icons/error.etlua) [`svg-icons/image.etlua`](./svg-icons/image.etlua) [`svg-icons/info.etlua`](./svg-icons/info.etlua) [`svg-icons/lock.etlua`](./svg-icons/lock.etlua) [`svg-icons/sticky.etlua`](./svg-icons/sticky.etlua) [`svg-icons/warn.etlua`](./svg-icons/warn.etlua)  
 URL: https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license  
 Copyright: Gabriele Malaspina  
 Designers: Gabriele Malaspina  

apps/users.lua

@@ -81,6 +81,23 @@ app:get("user", "/:username", function(self)
     end
   end
 
+  self.stats = db.query([[
+    SELECT
+      COUNT(posts.id) AS post_count,
+      COUNT(DISTINCT threads.id) AS thread_count,
+      MAX(threads.title) FILTER (WHERE threads.created_at = latest.created_at) AS latest_thread_title,
+      MAX(threads.slug) FILTER (WHERE threads.created_at = latest.created_at) AS latest_thread_slug
+    FROM users
+    LEFT JOIN posts ON posts.user_id = users.id
+    LEFT JOIN threads ON threads.user_id = users.id
+    LEFT JOIN (
+      SELECT user_id, MAX(created_at) AS created_at
+      FROM threads
+      GROUP BY user_id
+    ) latest ON latest.user_id = users.id
+    WHERE users.id = ?
+  ]], user.id)[1]
+  
   self.latest_posts = db.query([[
     SELECT
       posts.id, posts.created_at, post_history.content, post_history.edited_at, threads.title AS thread_title, topics.name as topic_name, threads.slug as thread_slug
@@ -298,6 +315,15 @@ app:get("user_inbox", "/:username/inbox", function(self)
   self.new_posts = {}
   local subscription = Subscriptions:find({user_id = me.id})
   if subscription then
+    self.all_subscriptions = db.query([[
+      SELECT threads.title AS thread_title, threads.slug AS thread_slug
+      FROM
+        threads
+      JOIN
+        subscriptions ON subscriptions.thread_id = threads.id
+      WHERE
+        subscriptions.user_id = ?
+    ]], me.id)
     local q = [[
     WITH thread_metadata AS (
       SELECT

data/static/style.css

@@ -145,6 +145,10 @@ body {
   overflow: hidden;
 }
 
+.post-content.wider {
+  margin-right: 12.5%;
+}
+
 .post-inner {
   height: 100%;
 }
@@ -172,7 +176,7 @@ pre code {
   font-size: 1rem;
 }
 
-#delete-dialog {
+#delete-dialog, .lightbox-dialog {
   padding: 0;
   border-radius: 4px;
   border: 2px solid black;
@@ -186,6 +190,27 @@ pre code {
   padding: 20px;
 }
 
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 400px;
+  background-color: #c1ceb1;
+  gap: 10px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .copy-code-container {
   position: sticky;
   width: calc(100% - 4px);
@@ -218,35 +243,43 @@ blockquote {
   background-color: rgb(135.1928346457, 145.0974015748, 123.0025984252);
 }
 
-.user-posts {
+.user-info {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 300px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
-  grid-auto-flow: row;
-  grid-template-areas: "user-page-usercard user-posts-container";
-  border: 2px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+  grid-template-areas: "user-page-usercard user-page-stats";
 }
 
 .user-page-usercard {
   grid-area: user-page-usercard;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: 20px 10px;
   border: 4px outset rgb(217.26, 220.38, 213.42);
   background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
   border-right: solid 2px;
 }
 
-.user-posts-container {
-  grid-area: user-posts-container;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 0.2fr 2.5fr;
-  gap: 0px 0px;
-  grid-auto-flow: row;
-  grid-template-areas: "post-info" "post-content";
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 20px 30px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 10px 0;
+}
+
+.user-page-posts {
+  border-left: solid 1px black;
+  border-right: solid 1px black;
+  border-bottom: solid 1px black;
+  background-color: #c1ceb1;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg, #000 60%, transparent);
 }
 
 .avatar {
@@ -430,8 +463,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
-
-.contain-svg > svg {
+.contain-svg:not(.full) > svg {
   height: 50%;
   width: 50%;
 }
@@ -688,3 +720,16 @@ ul, ol {
 .inbox-container {
   padding: 10px;
 }
+
+.babycode-button-container {
+  display: flex;
+  gap: 10px;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+}
+.babycode-button > * {
+  font-size: 1rem;
+}

js/babycode-editor.js

@@ -8,14 +8,40 @@
     }
   })
   
+  const inThread = () => {
+    const scheme = window.location.pathname.split("/");
+    return scheme[1] === "threads" && scheme[2] !== "create";
+  }
+  
+  ta.addEventListener("input", () => {
+    if (!inThread()) return;
+    
+    localStorage.setItem(window.location.pathname, ta.value);
+  })
+  
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!inThread()) return;
+    const prevContent = localStorage.getItem(window.location.pathname);
+    if (!prevContent) return;
+    ta.value = prevContent;
+  })
+  
   const buttonBold = document.getElementById("post-editor-bold");
   const buttonItalics = document.getElementById("post-editor-italics");
   const buttonStrike = document.getElementById("post-editor-strike");
+  const buttonUrl = document.getElementById("post-editor-url");
   const buttonCode = document.getElementById("post-editor-code");
+  const buttonImg = document.getElementById("post-editor-img");
+  const buttonOl = document.getElementById("post-editor-ol");
+  const buttonUl = document.getElementById("post-editor-ul");
 
-  function insertTag(tagStart, newline = false) {
-    const tagEnd = tagStart;
-    const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+  function insertTag(tagStart, newline = false, prefill = "") {
+    const hasAttr = tagStart[tagStart.length - 1] === "=";
+    let tagEnd = tagStart;
+    let tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+    if (hasAttr) {
+      tagEnd = tagEnd.slice(0, -1);
+    }
     const tagInsertEnd = `${newline ? "\n" : ""}[/${tagEnd}]`;
     const hasSelection = ta.selectionStart !== ta.selectionEnd;
     const text = ta.value;
@@ -29,13 +55,24 @@
       const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
       const reconst = `${strStart}${frag}${strEnd}`;
       ta.value = reconst;
-      ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
+      if (!hasAttr){
+        ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
+      } else {
+        ta.setSelectionRange(realStart + tagInsertEnd.length - 1, realStart + tagInsertEnd.length - 1); // cursor on attr
+      }
       ta.focus()
     } else {
+      if (hasAttr) {
+        tagInsertStart += prefill;
+      }
       const cursor = ta.selectionStart;
       const strStart = text.slice(0, cursor);
       const strEnd = text.substr(cursor);
-      const newCursor = strStart.length + tagInsertStart.length;
+      
+      let newCursor = strStart.length + tagInsertStart.length;
+      if (hasAttr) {
+        newCursor = cursor + tagInsertStart.length - prefill.length - 1;
+      }
       const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
       ta.value = reconst;
       ta.setSelectionRange(newCursor, newCursor);
@@ -55,10 +92,26 @@
     e.preventDefault();
     insertTag("s")
   })
+  buttonUrl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("url=", false, "link label");
+  })
   buttonCode.addEventListener("click", (e) => {
     e.preventDefault();
     insertTag("code", true)
   })
+  buttonImg.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("img=", false, "alt text");
+  })
+  buttonOl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ol", true);
+  })
+  buttonUl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ul", true);
+  })
   
   const previewEndpoint = "/api/babycode-preview";
   let previousMarkup = "";

js/ui.js

@@ -21,6 +21,86 @@ function activateSelfDeactivateSibs(button) {
   });
 }
 
+function openLightbox(post, idx) {
+  lightboxCurrentPost = post;
+  lightboxCurrentIdx = idx;
+  lightboxObj.img.src = lightboxImages.get(post)[idx].src;
+  lightboxObj.openOriginalAnchor.href = lightboxImages.get(post)[idx].src
+  lightboxObj.prevButton.disabled = lightboxImages.get(post).length === 1
+  lightboxObj.nextButton.disabled = lightboxImages.get(post).length === 1
+  lightboxObj.imageCount.textContent = `Image ${idx + 1} of ${lightboxImages.get(post).length}`
+  
+  if (!lightboxObj.dialog.open) {
+    lightboxObj.dialog.showModal();
+  }
+}
+
+const modulo = (n, m) => ((n % m) + m) % m
+
+function lightboxNext() {
+  const l = lightboxImages.get(lightboxCurrentPost).length;
+  const target = modulo(lightboxCurrentIdx + 1, l);
+  openLightbox(lightboxCurrentPost, target);
+}
+
+function lightboxPrev() {
+  const l = lightboxImages.get(lightboxCurrentPost).length;
+  const target = modulo(lightboxCurrentIdx - 1, l);
+  openLightbox(lightboxCurrentPost, target);
+}
+
+function constructLightbox() {
+  const dialog = document.createElement("dialog");
+  dialog.classList.add("lightbox-dialog");
+  dialog.addEventListener("click", (e) => {
+    if (e.target === dialog) {
+      dialog.close();
+    }
+  })
+  const dialogInner = document.createElement("div");
+  dialogInner.classList.add("lightbox-inner");
+  dialog.appendChild(dialogInner);
+  const img = document.createElement("img");
+  img.classList.add("lightbox-image")
+  dialogInner.appendChild(img);
+  const openOriginalAnchor = document.createElement("a")
+  openOriginalAnchor.text = "Open original in new window"
+  openOriginalAnchor.target = "_blank"
+  openOriginalAnchor.rel = "noopener noreferrer nofollow"
+  dialogInner.appendChild(openOriginalAnchor);
+  
+  const navSpan = document.createElement("span");
+  navSpan.classList.add("lightbox-nav");
+  const prevButton = document.createElement("button");
+  prevButton.type = "button";
+  prevButton.textContent = "Previous";
+  prevButton.addEventListener("click", lightboxPrev);
+  const nextButton = document.createElement("button");
+  nextButton.type = "button";
+  nextButton.textContent = "Next";
+  nextButton.addEventListener("click", lightboxNext);
+  const imageCount = document.createElement("span");
+  imageCount.textContent = "Image of ";
+  navSpan.appendChild(prevButton);
+  navSpan.appendChild(imageCount);
+  navSpan.appendChild(nextButton);
+  
+  dialogInner.appendChild(navSpan);
+  return {
+    img: img,
+    dialog: dialog,
+    openOriginalAnchor: openOriginalAnchor,
+    prevButton: prevButton,
+    nextButton: nextButton,
+    imageCount: imageCount,
+  }
+}
+
+let lightboxImages = new Map(); //.post-inner : Array<Object>
+let lightboxObj = null;
+let lightboxCurrentPost = null;
+let lightboxCurrentIdx = -1;
+
 document.addEventListener("DOMContentLoaded", () => {
   // tabs
   document.querySelectorAll(".tab-button").forEach(button => {
@@ -45,4 +125,23 @@ document.addEventListener("DOMContentLoaded", () => {
     
     toggleButton.addEventListener("click", toggle);
   });
+  
+  //lightboxes
+  lightboxObj = constructLightbox();
+  document.body.appendChild(lightboxObj.dialog);
+  const postImages = document.querySelectorAll(".post-inner img.block-img");
+  postImages.forEach(postImage => {
+    const belongingTo = postImage.closest(".post-inner");
+    const images = lightboxImages.get(belongingTo) ?? [];
+    images.push({
+      src: postImage.src,
+      alt: postImage.alt,
+    });
+    const idx = images.length - 1;
+    lightboxImages.set(belongingTo, images);
+    postImage.style.cursor = "pointer";
+    postImage.addEventListener("click", () => {
+      openLightbox(belongingTo, idx);
+    });
+  });
 });

lib/babycode.lua

@@ -71,7 +71,7 @@ local tags = {
   b = "<strong>$S</strong>",
   i = "<em>$S</em>",
   s = "<del>$S</del>",
-  img = "<div class=\"post-img-container\"><img class=\"block-img\" src=$A alt=%S></div>",
+  img = "<div class=\"post-img-container\"><img class=\"block-img\" src=$A alt=$S></div>",
   url = "<a href=\"$A\">$S</a>",
   quote = "<blockquote>$S</blockquote>",
   code = function(children)

sass/style.scss

@@ -189,6 +189,10 @@ body {
   overflow: hidden;
 }
 
+.post-content.wider {
+  margin-right: 12.5%;
+}
+
 .post-inner {
   height: 100%;
 }
@@ -216,7 +220,7 @@ pre code {
   font-size: 1rem;
 }
 
-#delete-dialog {
+#delete-dialog, .lightbox-dialog {
   padding: 0;
   border-radius: 4px;
   border: 2px solid black;
@@ -230,6 +234,27 @@ pre code {
   padding: 20px;
 }
 
+.lightbox-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: 400px;
+  background-color: $accent_color;
+  gap: 10px;
+}
+
+.lightbox-image {
+  max-width: 70vw;
+  max-height: 70vh;
+  object-fit: scale-down;
+}
+
+.lightbox-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .copy-code-container {
   position: sticky;
   // width: 100%;
@@ -264,38 +289,44 @@ blockquote {
   background-color: $dark2;
 }
 
-.user-posts {
+.user-info {
   display: grid;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 300px 1fr;
   grid-template-rows: 1fr;
   gap: 0;
-  grid-auto-flow: row;
   grid-template-areas:
-    "user-page-usercard user-posts-container";
-  border: 2px outset $dark2;
+    "user-page-usercard user-page-stats";
 }
 
 .user-page-usercard {
   grid-area: user-page-usercard;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: 20px 10px;
   border: 4px outset $light;
   background-color: $dark_bg;
   border-right: solid 2px;
 }
 
-.user-posts-container {
-  grid-area: user-posts-container;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 0.2fr 2.5fr;
-  gap: 0px 0px;
-  grid-auto-flow: row;
-  grid-template-areas:
-    "post-info"
-    "post-content";
+.user-page-stats {
+  grid-area: user-page-stats;
+  padding: 20px 30px;
+  border: 1px solid black;
+}
+
+.user-stats-list {
+  list-style: none;
+  margin: 0 0 10px 0;
+}
+
+.user-page-posts {
+  border-left: solid 1px black;
+  border-right: solid 1px black;
+  border-bottom: solid 1px black;
+  background-color: $accent_color;
+}
+
+.user-page-post-preview {
+  max-height: 200px;
+  mask-image: linear-gradient(180deg,#000 60%,transparent);
 }
 
 .avatar {
@@ -441,11 +472,10 @@ input[type="text"], input[type="password"], textarea, select {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
-
-.contain-svg > svg {
-  height: 50%;
-  width: 50%;
+  &:not(.full) > svg {
+    height: 50%;
+    width: 50%;
+  }
 }
 
 .block-img {
@@ -698,3 +728,17 @@ ul, ol {
 .inbox-container {
   padding: 10px;
 }
+
+.babycode-button-container {
+  display: flex;
+  gap: 10px;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+  
+  &> * {
+    font-size: 1rem;
+  }
+}

svg-icons/image.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

views/base.etlua

@@ -18,6 +18,6 @@
   </footer>
   <script src="/static/js/copy-code.js"></script>
   <script src="/static/js/date-fmt.js"></script>
-  <script src="/static/js/ui.js"></script>
+  <script src="/static/js/ui.js?v=2"></script>
 </body>
 </html>

views/common/babycode-editor-component.etlua

@@ -4,11 +4,15 @@
     <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
   </div>
   <div class="tab-content active" id="tab-edit">
-    <span>
-      <button type=button id="post-editor-bold" title="Insert Bold">B</button>
-      <button type=button id="post-editor-italics" title="Insert Italics">I</button>
-      <button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
-      <button type=button id="post-editor-code" title="Insert Code block">Code</button>
+    <span class="babycode-button-container">
+      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
+      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
+      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
+      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
+      <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><% render("svg-icons.image") %></button>
+      <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
+      <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
     </span>
     <textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
     <a href="<%= url_for("babycode_guide") %>" target="_blank">babycode guide</a>

views/user/inbox.etlua

@@ -2,6 +2,21 @@
   <h1 class="thread-title">Inbox</h1>
 </div>
 <div class="inbox-container">
+  <% if not all_subscriptions then %>
+  You have no subscriptions.<br>
+  <% else %>
+  Your subscriptions:
+  <ul>
+    <% for _, sub in ipairs(all_subscriptions) do %>
+      <li><a href="<%= url_for("thread", {slug = sub.thread_slug}) %>"><%= sub.thread_title %></a>
+      <form class="modform" method="post" action="<%= url_for("thread_subscribe", {slug = sub.thread_slug}) %>">
+        <input type="hidden" name="subscribe" value="unsubscribe">
+        <input class="warn" type="submit" value="Unsubscribe">
+      </form>
+      </li>
+    <% end %>
+  </ul>
+  <% end %>
   <% if #new_posts == 0 then %>
   You have no unread posts.
   <% else %>

views/user/user.etlua

@@ -2,10 +2,7 @@
   <% render("views.common.infobox", infobox) %>
 <% end %>
 <div class="darkbg">
-  <h1 class="thread-title">Latest posts by <i><%= user.username %></i></h1>
-  <div>
-  User permission: <i><%= PermissionLevelString[user.permission] %></i>
-  </div>
+  <h1 class="thread-title"><i><%= user.username %></i>'s profile</h1>
   <% if user_is_me then -%>
   <div class="user-actions">
     <a class="linkbutton" href="<%= url_for("user_settings", {username = user.username}) %>">Settings</a>
@@ -13,61 +10,81 @@
       <input class="warn" type="submit" value="Log out">
     </form>
   </div>
+    <% if user:is_guest() then %>
+      <h2>You are a guest. A Moderator needs to approve your account before you will be able to post.</h2>
+    <% end %>
+  <% end %>
+  <% if me:is_mod() and not user:is_system() then %>
+      <h1 class="thread-title">Moderator controls</h1>
+      <% if user:is_guest() then %>
+        <p>This user is a guest. They signed up on <% render("views.common.timestamp", {timestamp = user.created_at}) -%>.</p>
+        <form class="modform" method="post" action="<%= url_for("confirm_user", {user_id = user.id}) %>">
+          <input type="submit" value="Confirm user">
+        </form>
+      <% else %> <% --[[ user is not guest ]] %>
+        <p>This user signed up on <% render("views.common.timestamp", {timestamp = user.created_at}) -%> and was confirmed on <% render("views.common.timestamp", {timestamp = user.confirmed_on}) %>.</p>
+        <% if user.permission < me.permission then %>
+        <form class="modform" method="post" action="<%= url_for("guest_user", {user_id = user.id}) %>">
+          <input class="warn" type="submit" value="Demote user to guest (soft ban)">
+        </form>
+        <% end %>
+        <% if me:is_admin() and not user:is_mod() then %>
+          <form class="modform" method="post" action="<%= url_for("mod_user", {user_id = user.id}) %>">
+            <input class="warn" type="submit" value="Promote user to moderator">
+          </form>
+        <% elseif user:is_mod() and user.permission < me.permission then %>
+          <form class="modform" method="post" action="<%= url_for("demod_user", {user_id = user.id}) %>">
+            <input class="critical" type="submit" value="Demote user to regular user">
+          </form>
+        <% end %>
+      <% end %>
   <% end %>
 </div>
-<% --[[ duplicating code, maybe i'll refactor the post subview later to work anywhere <clown emoji>]] %>
-<% for i, post in ipairs(latest_posts) do %>
-  <div class="user-posts">
-    <div class="user-page-usercard">
+
+<div class="user-info">
+  <div class="user-page-usercard">
+    <div class="usercard-inner">
       <img class="avatar" src="<%= avatar_url(user) %>">
-      <b class="big"><%= user.username %></b>
-      <em class="user-status"><%= user.status %></em>
-    </div>
-    <div class="user-posts-container">
-      <div class="post-info">
-        <div><a href="<%= url_for("thread", {slug = post.thread_slug}, {after = post.id}) .. "#post-" .. post.id %>" title="Permalink"><i>
-        <% if tonumber(post.edited_at) > tonumber(post.created_at) then -%>
-            Edited in <%= post.thread_title %> at <% render("views.common.timestamp", {timestamp = post.edited_at}) -%>
-          <% else -%>
-            Posted in <%= post.thread_title %> on <% render("views.common.timestamp", {timestamp = post.created_at}) -%>
-          <% end -%>
-      </i></a></div>
-      </div>
-      <div class="post-content">
-        <%- post.content %>
-      </div>
+      <strong class="big"><%= user.username %></strong>
+      <% if user.status ~= "" then %>
+        <em class="user-status"><%= user.status %></em>
+      <% end %>
+      <% if user.signature_rendered ~= "" then %>
+        Signature:
+        <div>
+          <%- user.signature_rendered %>
+        </div>
+      <% end %>
     </div>
   </div>
-<% end %>
-
-<% if user:is_guest() and user_is_me then %>
-  <h2>You are a guest. A Moderator needs to approve your account before you will be able to post.</h2>
-<% end %>
-
-<% if me:is_mod() and not user:is_system() then %>
-  <div class="darkbg">
-    <h1>Moderator controls</h2>
-    <% if user:is_guest() then %>
-      <p>This user is a guest. They signed up on <% render("views.common.timestamp", {timestamp = user.created_at}) -%>.</p>
-      <form class="modform" method="post" action="<%= url_for("confirm_user", {user_id = user.id}) %>">
-        <input type="submit" value="Confirm user">
-      </form>
-    <% else %> <% --[[ user is not guest ]] %>
-      <p>This user signed up on <% render("views.common.timestamp", {timestamp = user.created_at}) -%> and was confirmed on <% render("views.common.timestamp", {timestamp = user.confirmed_on}) %>.</p>
-      <% if user.permission < me.permission then %>
-      <form class="modform" method="post" action="<%= url_for("guest_user", {user_id = user.id}) %>">
-        <input class="warn" type="submit" value="Demote user to guest (soft ban)">
-      </form>
+  <div class="user-page-stats">
+    <ul class="user-stats-list">
+      <li>Permission: <%= PermissionLevelString[user.permission] %></li>
+      <li>Posts created: <%= stats.post_count %></li>
+      <li>Threads started: <%= stats.thread_count %></li>
+      <% if stats.latest_thread_title then %>
+        <li>Latest started thread: <a href="<%= url_for("thread", {slug = stats.latest_thread_slug}) %>"><%= stats.latest_thread_title %></a></li>
       <% end %>
-      <% if me:is_admin() and not user:is_mod() then %>
-        <form class="modform" method="post" action="<%= url_for("mod_user", {user_id = user.id}) %>">
-          <input class="warn" type="submit" value="Promote user to moderator">
-        </form>
-      <% elseif user:is_mod() and user.permission < me.permission then %>
-        <form class="modform" method="post" action="<%= url_for("demod_user", {user_id = user.id}) %>">
-          <input class="critical" type="submit" value="Demote user to regular user">
-        </form>
+    </ul>
+    Latest posts:
+    <div class="user-page-posts">
+      <% for _, post in ipairs(latest_posts) do %>
+        <div class="post-content-container">
+          <div class="post-info">
+            <% local post_url = get_post_url(post.id) %>
+            <a href="<%= post_url %>" title="Permalink"><i>
+              <% if tonumber(post.edited_at) > tonumber(post.created_at) then -%>
+                Edited at <% render("views.common.timestamp", {timestamp = post.edited_at}) -%> in <%= post.thread_title %>
+              <% else -%>
+                Posted on <% render("views.common.timestamp", {timestamp = post.created_at}) -%> in <%= post.thread_title %>
+              <% end -%>
+            </i></a>
+          </div>
+          <div class="post-content wider user-page-post-preview">
+            <div class="post-inner"><%- post.content %></div>
+          </div>
+        </div>
       <% end %>
-    <% end %>
+    </div>
   </div>
-<% end %>
+</div>