add font and acknowledgements

now fully works via docker \o/

.dockerignore

@@ -0,0 +1,8 @@
+logs/
+nginx.conf.compiled
+.vscode/
+.local/
+data/db/*
+secrets
+secrets/.touched*
+sass

.gitignore

@@ -1,10 +1,9 @@
 logs/
 nginx.conf.compiled
-db.*.sqlite
 .vscode/
 .local/
-static/avatars/*
-!static/avatars/default.webp
-secrets.lua
-
-.first_launch.*
+data/db/*
+secrets/secrets.lua
+secrets/.touched*
+data/static/avatars/*
+!data/static/avatars/default.webp

Dockerfile

@@ -0,0 +1,16 @@
+# HOW TO:
+#
+# docker compose up
+#
+# it exposes the data/ and secrets/ volumes in app root
+#
+FROM openresty/openresty: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)"
+RUN luarocks --lua-version=5.1 build --only-deps
+EXPOSE 8080
+RUN chmod +x /app/start.sh
+ENTRYPOINT ["/app/start.sh", "production"]

README.md

@@ -6,34 +6,45 @@ Released under [CNPLv7+](https://thufie.lain.haus/NPL.html).
 Please read the [full terms](./LICENSE.md) for proper wording.
 
 # installing & first time setup
-1. first, install OpenResty. instructions for linux can be found [here](https://openresty.org/en/linux-packages.html).
-2. then, install LuaJIT and Lua 5.1 (usually called `lua5.1` in package managers)
-3. then, install [LuaRocks](https://luarocks.org) (prefer your package manager instead of a local install recommended by the guide)
-4. add luarocks search dirs to path:
+## docker
+```bash
+$ docker compose up
+```
+
+- opens port 8080
+- exposes `data/db` and `data/avatars` as volumes for data backup and persistence
+- exposes `secrets/` as a volume so that the script won't try to perform first time setup again
+
+make sure to run it in an interactive session the first time, because it will spit out the password to the auto-created admin account.
+
+## manual
+1. install:
+   - OpenResty. instructions for linux can be found [here](https://openresty.org/en/linux-packages.html)
+   - LuaJIT and Lua 5.1 (usually called `lua5.1` in package managers)
+   - openssl (-dev)
+   - sqlite (-dev)
+   - libsodium (-dev)
+   - imagemagick (-dev)
+   - [LuaRocks](https://luarocks.org) (either through the guide's instructions or your package manager, whichever is newer)
+2. add luarocks search dirs to path:
 
 ```bash
   # in .bashrc (or other shell equivalent)
   eval "$(luarocks --lua-version 5.1 path)"
 ```
-5. clone repo
-6. install the dependencies:
+3. clone repo
+4. install the lua dependencies:
 
 ```bash
 $ luarocks --local --lua-version 5.1 build --only-deps
 ```
-7. create a file named `secrets.lua` in the project directory.  
-use the `secrets.lua.example` file as reference, and generate a cryptographically secure random key, for example, with:
+5. run:
 
 ```bash
-$ openssl rand -hex 32
-```
-8. run:
-
-```bash
-$ start.sh production
+$ start.sh production # or 'development' or empty string
 ```
 the script will perform some necessary first time setup (and create a hidden file in the folder to ensure it won't do so again). it will create an administrator account and print the credentials to the console; **this will only happen once**. make sure you save them somewhere. the administrator account is the only one that can promote other users to moderator.  
-(note the `production` argument. if called with no arguments, `start.sh` will run in a development environment, which uses a separate database.)
+(note the `production` argument. if called with no arguments, `start.sh` will run in a development environment, which uses a separate database and shows more debug information.)
 
 this app is made with the assumption that it is being reverse-proxied. as such, you may want to change the port to something other than the default `8080`. you can do that in [`config.lua`]([./config.lua]).
 
@@ -43,3 +54,6 @@ once you are able to navigate to the forum, you can log in as the administrator
 
 # icons
 the icons in the `icons/` folder are by [Gabriele Malaspina](https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license)
+
+# credits & acknowledgements
+see [THIRDPARTY.md](./THIRDPARTY.md)

THIRDPARTY.md

@@ -0,0 +1,33 @@
+# Acknowledgements
+
+## Lapis
+
+URL: https://leafo.net/lapis/  
+Copyright: `(c) 2023 Leaf Corcoran`  
+License: MIT  
+Repo: https://github.com/leafo/lapis
+
+## ChicagoFLF
+
+Affected files: [`fonts/ChicagoFLF.woff2`](./fonts/ChicagoFLF.woff2)  
+No canonical URL that I could find.  
+Obtained from: https://usemodify.com/fonts/chicago/  
+License: Public Domain  
+Designers:  Susan Kare, Robin Casady  
+
+## Cadman
+
+Affected files: [`fonts/Cadman_Bold.woff2`](./fonts/Cadman_Bold.woff2) [`fonts/Cadman_BoldItalic.woff2`](./fonts/Cadman_BoldItalic.woff2) [`fonts/Cadman_Italic.woff2`](./fonts/Cadman_Italic.woff2) [`fonts/Cadman_Roman.woff2`](./fonts/Cadman_Roman.woff2)  
+URL: https://localfonts.eu/shop/cyrillic-script/serbian/serbian-cyrillic-sans-serif/cadman/  
+Copyright: `© 2017-2020 by Paul James Miller. All rights reserved.`  
+License: SIL Open Font License 1.1  
+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)  
+URL: https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license  
+Copyright: Gabriele Malaspina  
+Designers: Gabriele Malaspina  
+License: CC0 1.0/CC BY 4.0  
+CC BY 4.0 compliance: Modified to indicate the URL. Modified size.

app.lua

@@ -1,6 +1,8 @@
 local lapis = require("lapis")
 local app = lapis.Application()
 local constants = require("constants")
+local babycode = require("lib.babycode")
+local html_escape = require("lapis.html").escape
 
 local db = require("lapis.db")
 -- sqlite starts without foreign key enforcement
@@ -13,6 +15,8 @@ app.layout = require "views.base"
 
 local function inject_constants(req)
   req.constants = constants
+  math.randomseed(os.time())
+  req.__cachebust = math.random(99999)
 end
 
 local function inject_methods(req)
@@ -21,6 +25,13 @@ local function inject_methods(req)
     return util.ntob(v)
   end
   req.PermissionLevelString = constants.PermissionLevelString
+  req.infobox_message = function (_, s)
+    return util.infobox_message(s)
+  end
+  
+  req.babycode_to_html = function (_, bb)
+    return babycode.to_html(bb, html_escape)
+  end
 
   util.pop_infobox(req)
 end
@@ -32,6 +43,7 @@ app:include("apps.users", {path = "/user"})
 app:include("apps.topics", {path = "/topics"})
 app:include("apps.threads", {path = "/threads"})
 app:include("apps.mod", {path = "/mod"})
+app:include("apps.post", {path = "/post"})
 
 app:get("/", function(self)
   return {redirect_to = self:url_for("all_topics")}

apps/mod.lua

@@ -1,23 +1,46 @@
 local app = require("lapis").Application()
 
+local db = require("lapis.db")
+
 local util = require("util")
 
 local models = require("models")
 local Users = models.Users
 
-app:get("user_list", "/list", function(self)
+-- everything here requires a logged in moderator
+app:before_filter(function(self)
   self.me = util.get_logged_in_user(self)
   if not self.me then
-    return {redirect_to = self:url_for("all_topics")}
+    self:write{redirect_to = self:url_for("all_topics")}
+    return
   end
-  
+
   if not self.me:is_mod() then
-    return {redirect_to = self:url_for("all_topics")}
+    self:write{redirect_to = self:url_for("all_topics")}
+    return
   end
-  
+end)
+
+app:get("user_list", "/list", function(self)
   self.users = Users:select("")
-  
+
   return {render = "mod.user-list"}
 end)
 
+app:get("sort_topics", "/sort-topics", function(self)
+  self.topics = db.query("SELECT * FROM topics ORDER BY sort_order ASC")
+  self.page_title = "sorting topics"
+  return {render = "mod.sort-topics"}
+end)
+
+app:post("sort_topics", "/sort-topics", function(self)
+  local updates = self.params
+  db.query("BEGIN")
+  for topic_id, new_order in pairs(updates) do
+    db.update("topics", {sort_order = new_order}, {id = topic_id})
+  end
+  db.query("COMMIT")
+  return {redirect_to = self:url_for("sort_topics")}
+end)
+
 return app

apps/post.lua

@@ -0,0 +1,104 @@
+local app = require("lapis").Application()
+
+local db = require("lapis.db")
+local constants = require("constants")
+
+local util = require("util")
+
+local models = require("models")
+local Posts = models.Posts
+local Threads = models.Threads
+local PostHistory = models.PostHistory
+
+app:get("single_post", "/:post_id", function(self)
+  local query = constants.FULL_POSTS_QUERY .. "WHERE posts.id = ?"
+  local p = db.query(query, self.params.post_id)
+  if p then
+    self.post = p[1]
+    self.thread = Threads:find({id = self.post.thread_id})
+    self.page_title = self.post.username .. "'s post in " .. self.thread.title
+  end
+
+  return {render = "post.single-post"}
+end)
+
+app:post("delete_post", "/:post_id/delete", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  print("id is " .. self.params.post_id)
+  local post = Posts:find({id = self.params.post_id})
+  if not post then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  
+  local thread = Threads:find({id = post.thread_id})
+  if user:is_mod() then
+    post:delete()
+    util.inject_infobox(self, "Post deleted.")
+    return {redirect_to = self:url_for("thread", {slug = thread.slug})}
+  end
+  
+  if post.user_id ~= user.id then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  
+  post:delete()
+  util.inject_infobox(self, "Post deleted.")
+  return {redirect_to = self:url_for("thread", {slug = thread.slug})}
+end)
+
+app:get("edit_post", "/:post_id/edit", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  
+  local editing_query = constants.FULL_POSTS_QUERY .. "WHERE posts.id = ?"
+  local p = db.query(editing_query, self.params.post_id)
+  if not p then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  if p[1].user_id ~= user.id then
+    return {redirect_to = self:url_for"all_topics"}
+  end
+  self.me = user
+  self.editing_post = p[1]
+  self.thread = Threads:find({id = self.editing_post.thread_id})
+  
+  local thread_predicate = constants.FULL_POSTS_QUERY .. "WHERE posts.thread_id = ?\n"
+  
+  local context_prev_query = thread_predicate .. "AND posts.created_at < ? ORDER BY posts.created_at DESC LIMIT 2"
+  local context_next_query = thread_predicate .. "AND posts.created_at > ? ORDER BY posts.created_at ASC LIMIT 2"
+  
+  self.prev_context = db.query(context_prev_query, self.thread.id, self.editing_post.created_at)
+  self.next_context = db.query(context_next_query, self.thread.id, self.editing_post.created_at)
+  
+  self.page_title = "editing a post"
+  
+  return {render = "post.edit-post"}
+end)
+
+app:post("edit_post", "/:post_id/edit", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  
+  local post = Posts:find({id = self.params.post_id})
+  if not post then
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  
+  if post.user_id ~= user.id then
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  
+  util.update_post(post, self.params.new_content)
+  local thread = Threads:find({id = post.thread_id})
+  local link = self:url_for("thread", {slug = thread.slug}, {after = post.id}) .. "#post-" .. post.id
+  return {redirect_to = link}
+end)
+
+return app

apps/threads.lua

@@ -1,5 +1,6 @@
 local app = require("lapis").Application()
 local lapis_util = require("lapis.util")
+local constants  = require("constants")
 
 local db = require("lapis.db")
 local util = require("util")
@@ -22,7 +23,7 @@ app:get("thread_create", "/create", function(self)
     return "how did you get here?"
   end
   self.all_topics = all_topics
-  self.page_title = "creating thread"
+  self.page_title = "drafting a thread"
   self.me = user
   return {render = "threads.create"}
 end)
@@ -35,7 +36,10 @@ app:post("thread_create", "/create", function(self)
   end
   local topic = Topics:find(self.params.topic_id)
   if not topic then
-    return {redirect_to = self:url_for("topics")}
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  if util.is_topic_locked(topic) and not user:is_mod() then
+    return {redirect_to = self:url_for("all_topics")}
   end
 
   local title = lapis_util.trim(self.params.title)
@@ -54,7 +58,7 @@ app:post("thread_create", "/create", function(self)
 
   local post = util.create_post(thread.id, user.id, post_content)
   if not post then
-    return {redirect_to = self:url_for("topics")}
+    return {redirect_to = self:url_for("all_topics")}
   end
   
   return {redirect_to = self:url_for("thread", {slug = slug})}
@@ -86,23 +90,9 @@ app:get("thread", "/:slug", function(self)
   end
 
   -- self.page = math.max(1, math.min(self.page, self.pages))
-  local posts = db.query([[
-    SELECT
-      posts.id, posts.created_at, post_history.content, post_history.edited_at, users.username, users.status, avatars.file_path AS avatar_path
-    FROM
-      posts
-    JOIN
-      post_history ON posts.current_revision_id = post_history.id
-    JOIN
-      users ON posts.user_id = users.id
-    LEFT JOIN
-      avatars ON users.avatar_id = avatars.id
-    WHERE
-      posts.thread_id = ?
-    ORDER BY
-      posts.created_at ASC
-    LIMIT ? OFFSET ?
-  ]], thread.id, POSTS_PER_PAGE, (self.page - 1) * POSTS_PER_PAGE)
+  local query = (constants.FULL_POSTS_QUERY ..
+    "WHERE posts.thread_id = ? ORDER BY posts.created_at ASC LIMIT ? OFFSET ?")
+  local posts = db.query(query, thread.id, POSTS_PER_PAGE, (self.page - 1) * POSTS_PER_PAGE)
   self.topic = Topics:find(thread.topic_id)
   self.me = util.get_logged_in_user_or_transient(self)
   self.posts = posts
@@ -145,4 +135,38 @@ app:post("thread", "/:slug", function(self)
   return {redirect_to = self:url_for("thread", {slug = thread.slug}, {page = last_page}) .. "#latest-post"}
 end)
 
+app:post("thread_lock", "/:slug/lock", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+  end
+  local thread = Threads:find({slug = self.params.slug})
+  if not ((thread.user_id == user.id) or user:is_mod()) then
+    return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+  end
+  local target_op = util.form_bool_to_sqlite(self.params.target_op)
+  thread:update({
+    is_locked = target_op,
+  })
+  return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+end)
+
+app:post("thread_sticky", "/:slug/sticky", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+  end
+  
+  if not user:is_mod() then
+    return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+  end
+  
+  local thread = Threads:find({slug = self.params.slug})
+  local target_op = util.form_bool_to_sqlite(self.params.target_op)
+  thread:update({
+    is_stickied = target_op,
+  })
+  return {redirect_to = self:url_for("thread", {slug = self.params.slug})}
+end)
+
 return app

apps/topics.lua

@@ -53,7 +53,7 @@ app:get("topic_create", "/create", function(self)
     return {status = 403}
   end
 
-  self.page_title = "creating topic"
+  self.page_title = "creating a topic"
   self.me = user
 
   return {render = "topics.create"}
@@ -194,4 +194,20 @@ app:post("topic_edit", "/:slug/edit", function(self)
   return {redirect_to = self:url_for("topic", {slug = self.params.slug})}
 end)
 
+app:post("topic_delete", "/:slug/delete", function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {redirect_to = self:url_for("topic", {slug = self.params.slug})}
+  end
+  
+  if not user:is_mod() then
+    return {redirect_to = self:url_for("topic", {slug = self.params.slug})}
+  end
+  
+  local topic = Topics:find({slug = self.params.slug})
+  topic:delete()
+  util.inject_infobox(self, "Topic deleted.")
+  return {redirect_to = self:url_for("all_topics")}
+end)
+
 return app

apps/users.lua

@@ -1,11 +1,13 @@
 local app = require("lapis").Application()
+local babycode = require("lib.babycode")
+local html_escape = require("lapis.html").escape
 
 local db = require("lapis.db")
 local constants = require("constants")
 
 local util = require("util")
 
-local bcrypt = require("bcrypt")
+local auth = require("lib.auth")
 local rand = require("openssl.rand")
 
 local models = require("models")
@@ -14,7 +16,7 @@ local Sessions = models.Sessions
 local Avatars = models.Avatars
 
 local function authenticate_user(user, password)
-  return bcrypt.verify(password, user.password_hash)
+  return auth.verify(password, user.password_hash)
 end
 
 local function create_session_key()
@@ -177,7 +179,7 @@ app:post("user_set_avatar", "/:username/set_avatar", function(self)
   local time = os.time()
   local filename = "u" .. target_user.id .. "d" .. time .. ".webp"
   local proxied_filename = "/avatars/" .. filename
-  local save_path = "static" .. proxied_filename
+  local save_path = "data/static" .. proxied_filename
   local res = util.validate_and_create_image(file.content, save_path)
   if not res then
     util.inject_warn_infobox(self, "Something went wrong. Try again later.")
@@ -225,11 +227,15 @@ app:post("user_settings", "/:username/settings", function(self)
   end
 
   local status = self.params.status:sub(1, 100)
+  local original_sig = self.params.signature or ""
+  local rendered_sig = babycode.to_html(original_sig, html_escape)
 
   target_user:update({
     status = status,
+    signature_original_markup = original_sig,
+    signature_rendered = rendered_sig,
   })
-  util.inject_infobox(self, "Status updated.")
+  util.inject_infobox(self, "Settings updated.")
   return {redirect_to = self:url_for("user_settings", {username = self.params.username})}
 end)
 
@@ -321,7 +327,7 @@ app:post("user_signup", "/signup", function(self)
 
   local new_user = Users:create({
     username = username,
-    password_hash = bcrypt.digest(password, constants.BCRYPT_ROUNDS),
+    password_hash = auth.digest(password),
     permission = constants.PermissionLevel.GUEST,
   })
 

config.lua

@@ -1,5 +1,5 @@
 local config = require("lapis.config")
-local secrets = require("secrets")
+local secrets = require("secrets.secrets")
 
 config({"development", "production"}, {
   port = 8080,
@@ -7,7 +7,7 @@ config({"development", "production"}, {
   code_cache = "off",
   num_workers = "1",
   sqlite = {
-    database = "db.dev.sqlite"
+    database = "data/db/db.dev.sqlite"
   },
   secret = "SUPER SECRET",
   session_name = "porom_session",
@@ -20,7 +20,7 @@ config("production", {
   },
   secret = secrets.key,
   sqlite = {
-    database = "db.prod.sqlite"
+    database = "data/db/db.prod.sqlite"
   },
   session_name = "porom_session_s"
 })

constants.lua

@@ -8,6 +8,19 @@ Constants.PermissionLevel = {
   ADMIN = 4,
 }
 
+Constants.FULL_POSTS_QUERY = [[
+  SELECT
+    posts.id, posts.created_at, post_history.content, post_history.edited_at, users.username, users.status, avatars.file_path AS avatar_path, posts.thread_id, users.id AS user_id, post_history.original_markup, users.signature_rendered
+  FROM
+    posts
+  JOIN
+    post_history ON posts.current_revision_id = post_history.id
+  JOIN
+    users ON posts.user_id = users.id
+  LEFT JOIN
+    avatars ON users.avatar_id = avatars.id
+]]
+
 Constants.PermissionLevelString = {
   [Constants.PermissionLevel.GUEST] = "Guest",
   [Constants.PermissionLevel.USER] = "User",

create_default_accounts.lua

@@ -1,4 +1,4 @@
-local bcrypt = require("bcrypt")
+local auth = require("lib.auth")
 local models = require("models")
 local constants = require("constants")
 
@@ -23,13 +23,14 @@ local function create_admin()
     return
   end
 
+  math.randomseed(os.time())
   local password = ""
   for _ = 1, 16 do
     local randi = math.random(#alphabet)
     password = password .. alphabet:sub(randi, randi)
   end
 
-  local hash = bcrypt.digest(password, constants.BCRYPT_ROUNDS)
+  local hash = auth.digest(password)
 
   models.Users:create({
     username = username,

data/static/style.css

@@ -1,8 +1,41 @@
 /* src: */
+@font-face {
+  font-family: "body-text";
+  src: url("/static/fonts/DINish[slnt,wdth,wght].woff2") format("woff2");
+}
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Roman.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Bold.woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_Italic.woff2");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_BoldItalic.woff2");
+  font-weight: bold;
+  font-style: italic;
+}
 .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
   color: black;
-  font-size: 0.9rem;
+  font-size: 0.9em;
+  font-family: "Cadman";
   text-decoration: none;
   border: 1px solid black;
   border-radius: 3px;
@@ -11,7 +44,7 @@
 }
 
 body {
-  font-family: sans-serif;
+  font-family: "Cadman";
   margin: 20px 100px;
   background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
 }
@@ -26,7 +59,7 @@ body {
   justify-content: end;
   background-color: #c1ceb1;
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 }
 
 #bottomnav {
@@ -49,9 +82,9 @@ body {
 }
 
 .site-title {
-  padding-right: 30px;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 20px;
   text-decoration: none;
   color: black;
 }
@@ -86,7 +119,7 @@ body {
 .post-content-container {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 0.2fr 2.5fr;
+  grid-template-rows: 70px 2.5fr;
   gap: 0px 0px;
   grid-auto-flow: row;
   grid-template-areas: "post-info" "post-content";
@@ -105,7 +138,81 @@ body {
 
 .post-content {
   grid-area: post-content;
-  padding: 5px 20px;
+  padding: 20px;
+  margin-right: 25%;
+  display: flex;
+  flex-direction: column;
+}
+
+.post-inner {
+  height: 100%;
+}
+
+pre code {
+  display: block;
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid rgb(229.84, 231.92, 227.28);
+  padding: 20px;
+}
+
+.inline-code {
+  background-color: rgb(38.5714173228, 40.9237007874, 35.6762992126);
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+#delete-dialog {
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.copy-code-container {
+  position: sticky;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: #c1ceb1;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+}
+.copy-code-container::before {
+  content: "code block";
+  font-style: italic;
+  margin-left: 10px;
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  border-left: 10px solid rgb(229.84, 231.92, 227.28);
+  background-color: rgb(135.1928346457, 145.0974015748, 123.0025984252);
 }
 
 .user-posts {
@@ -274,7 +381,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .infobox {
   border: 2px solid black;
-  background-color: #c1ceb1;
+  background-color: #81a3e6;
   padding: 20px 15px;
 }
 .infobox.critical {
@@ -340,6 +447,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline;
+  margin-right: 25%;
 }
 
 .topic {
@@ -364,3 +472,42 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   grid-area: topic-locked-container;
   border: 2px outset rgb(217.26, 220.38, 213.42);
 }
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: #c1ceb1;
+  padding: 20px;
+  margin: 12px 0;
+  border-top: 6px outset rgb(217.26, 220.38, 213.42);
+  border-bottom: 6px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+}
+.draggable-topic.dragged {
+  background-color: rgb(177, 206, 204.5);
+}
+
+.editing {
+  background-color: rgb(217.26, 220.38, 213.42);
+}
+
+.context-explain {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+}
+
+ul {
+  margin: 10px 0 10px 30px;
+  padding: 0;
+}

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  porom:
+    build:
+      context: .
+    ports:
+      - "8080:8080"
+    volumes:
+      - ./data/static:/app/data/static
+      - ./data/db:/app/data/db
+      - ./secrets:/app/secrets

js/copy-code.js

@@ -0,0 +1,7 @@
+for (let button of document.querySelectorAll(".copy-code")) {
+  button.addEventListener("click", async () => {
+    await navigator.clipboard.writeText(button.value)
+    button.textContent = "Copied!"
+    setTimeout(() => {button.textContent = "Copy"}, 1000.0)
+  })
+}

js/post-editor.js

@@ -0,0 +1,54 @@
+{
+  let ta = document.getElementById("post_content");
+  const buttonBold = document.getElementById("post-editor-bold");
+  const buttonItalics = document.getElementById("post-editor-italics");
+  const buttonStrike = document.getElementById("post-editor-strike");
+  const buttonCode = document.getElementById("post-editor-code");
+
+  function insertTag(tagStart, newline = false) {
+    const tagEnd = tagStart;
+    const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+    const tagInsertEnd = `${newline ? "\n" : ""}[/${tagEnd}]`;
+    const hasSelection = ta.selectionStart !== ta.selectionEnd;
+    const text = ta.value;
+    if (hasSelection) {
+      const realStart = Math.min(ta.selectionStart, ta.selectionEnd);
+      const realEnd = Math.max(ta.selectionStart, ta.selectionEnd);
+      const selectionLength = realEnd - realStart;
+      
+      const strStart = text.slice(0, realStart);
+      const strEnd = text.substring(realEnd);
+      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);
+      ta.focus()
+    } else {
+      const cursor = ta.selectionStart;
+      const strStart = text.slice(0, cursor);
+      const strEnd = text.substr(cursor);
+      const newCursor = strStart.length + tagInsertStart.length;
+      const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
+      ta.value = reconst;
+      ta.setSelectionRange(newCursor, newCursor);
+      ta.focus()
+    }
+  }
+
+  buttonBold.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("b")
+  })
+  buttonItalics.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("i")
+  })
+  buttonStrike.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("s")
+  })
+  buttonCode.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("code", true)
+  })
+}

js/sort-topics.js

@@ -0,0 +1,45 @@
+// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
+let selected = null;
+let container = document.getElementById("topics-container")
+
+function isBefore(el1, el2) {
+  let cur
+  if (el2.parentNode === el1.parentNode) {
+    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
+      if (cur === el2) return true
+    }
+  }
+  return false;
+}
+
+function dragOver(e) {
+  let target = e.target.closest(".draggable-topic")
+  
+  if (!target || target === selected) {
+    return;
+  }
+  
+  if (isBefore(selected, target)) {
+    container.insertBefore(selected, target)
+  } else {
+    container.insertBefore(selected, target.nextSibling)
+  }
+}
+
+function dragEnd() {
+  if (!selected) return;
+  
+  selected.classList.remove("dragged")
+  selected = null;
+  for (let i = 0; i < container.childElementCount - 1; i++) {
+    let input = container.children[i].querySelector(".topic-input");
+    input.value = i + 1;
+  }
+}
+
+function dragStart(e) {
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', null)
+  selected = e.target
+  selected.classList.add("dragged")
+}

js/thread.js

@@ -0,0 +1,38 @@
+{
+  const ta = document.getElementById("post_content");
+  
+  for (let button of document.querySelectorAll(".reply-button")) {
+    button.addEventListener("click", (e) => {
+      ta.value += button.value;
+      ta.scrollIntoView()
+    })
+  }
+  
+  const deleteDialog = document.getElementById("delete-dialog");
+  const deleteDialogCloseButton = document.getElementById("post-delete-dialog-close");
+  let deletionTargetPostContainer;
+  
+  function closeDeleteDialog() {
+    deletionTargetPostContainer.style.removeProperty("background-color");
+    deleteDialog.close();
+  }
+  
+  deleteDialogCloseButton.addEventListener("click", (e) => {
+    closeDeleteDialog();
+  })
+  deleteDialog.addEventListener("click", (e) => {
+    if (e.target === deleteDialog) {
+      closeDeleteDialog();
+    }
+  })
+  for (let button of document.querySelectorAll(".post-delete-button")) {
+    button.addEventListener("click", (e) => {
+      deleteDialog.showModal();
+      const postId = button.value;
+      deletionTargetPostContainer = document.getElementById("post-" + postId).querySelector(".post-content-container");
+      deletionTargetPostContainer.style.setProperty("background-color", "#fff");
+      const form = document.getElementById("post-delete-form");
+      form.action = `/post/${postId}/delete`
+    })
+  }
+}

js/topic.js

@@ -0,0 +1,16 @@
+{
+  const deleteDialog = document.getElementById("delete-dialog");
+  const deleteDialogOpenButton = document.getElementById("topic-delete-dialog-open");
+  deleteDialogOpenButton.addEventListener("click", (e) => {
+    deleteDialog.showModal();
+  });
+  const deleteDialogCloseButton = document.getElementById("topic-delete-dialog-close");
+  deleteDialogCloseButton.addEventListener("click", (e) => {
+    deleteDialog.close();
+  })
+  deleteDialog.addEventListener("click", (e) => {
+    if (e.target === deleteDialog) {
+      deleteDialog.close();
+    }
+  })
+}

lib/auth.lua

@@ -0,0 +1,16 @@
+local auth = {}
+
+local ls = require "luasodium"
+
+function auth.digest(password)
+  return ls.crypto_pwhash_str(
+    password,
+    ls.crypto_pwhash_OPSLIMIT_INTERACTIVE,
+    ls.crypto_pwhash_MEMLIMIT_INTERACTIVE)
+end
+
+function auth.verify(password, hash)
+  return ls.crypto_pwhash_str_verify(hash, password)
+end
+
+return auth

lib/babycode.lua

@@ -8,43 +8,62 @@ function babycode.to_html(s, escape_html)
   -- extract code blocks first and store them as placeholders
   -- don't want to process bbcode embedded into a code block
   local code_blocks = {}
-  local code_count = 0
+  local inline_codes = {}
+  s = escape_html(s)
   local text = s:gsub("%[code%](.-)%[/code%]", function(code)
-    code_count = code_count + 1
-    -- strip leading and trailing newlines, preserve others
-    code_blocks[code_count] = code:gsub("^%s*(.-)%s*$", "%1")
-    return "\1CODE:"..code_count.."\1"
+    local is_inline = code:match("\n") == nil
+    if is_inline then
+      table.insert(inline_codes, code)
+      return "\1ICODE:"..#inline_codes.."\1"
+    else
+      -- strip leading and trailing newlines, preserve others
+      local m, _ = code:gsub("^%s*(.-)%s*$", "%1")
+      table.insert(code_blocks, m)
+      return "\1CODE:"..#code_blocks.."\1"
+    end
   end)
 
   -- replace `[url=https://example.com]Example[/url] tags
   text = text:gsub("%[url=([^%]]+)%](.-)%[/url%]", function(url, label)
-    return '<a href="'..escape_html(url)..'">'..escape_html(label)..'</a>'
+    return '<a href="'..url..'">'..label..'</a>'
   end)
   
   -- replace `[url]https://example.com[/url] tags
   text = text:gsub("%[url%]([^%]]+)%[/url%]", function(url)
-    return '<a href="'..escape_html(url)..'">'..escape_html(url)..'</a>'
+    return '<a href="'..url..'">'..url..'</a>'
   end)
 
   -- bold, italics, strikethrough
   text = text:gsub("%[b%](.-)%[/b%]", "<strong>%1</strong>")
   text = text:gsub("%[i%](.-)%[/i%]", "<em>%1</em>")
   text = text:gsub("%[s%](.-)%[/s%]", "<del>%1</del>")
+  
+  text = text:gsub("%[quote%](.-)%[/quote%]", "<blockquote>%1</blockquote>")
 
   -- replace loose links
   text = text:gsub("(https?://[%w-_%.%?%.:/%+=&~%@#%%]+[%w-/])", function(url)
     if not text:find('<a[^>]*>'..url..'</a>') then
-      return '<a href="'..escape_html(url)..'">'..escape_html(url)..'</a>'
+      return '<a href="'..url..'">'..url..'</a>'
     end
     return url
   end)
 
+  -- rule
+  text = text:gsub("\n+%-%-%-", "<hr>")
+  
   -- normalize newlines, replace them with <br>
-  text = text:gsub("\r?\n\r?\n+", "<br>"):gsub("\r?\n", "<br>")
+  text = text:gsub("\r?\n\r?\n+", "<br>")--:gsub("\r?\n", "<br>")
 
   -- replace code block placeholders back with their original contents
   text = text:gsub("\1CODE:(%d+)\1", function(n)
-    return "<pre><code>"..code_blocks[tonumber(n)].."</code></pre>"
+    local code = code_blocks[tonumber(n)]
+    local button = ("<button type=button class=\"copy-code\" value=\"%s\">Copy</button>"):format(code)
+    return "<pre><span class=\"copy-code-container\">" .. button .. "</span><code>"..code.."</code></pre>"
+  end)
+  
+  text = text:gsub("\1ICODE:(%d+)\1", function (n)
+    local code = inline_codes[tonumber(n)]
+    return "<code class=\"inline-code\">" .. code .. "</code>"
   end)
 
   return text

migrations.lua

@@ -62,5 +62,15 @@ return {
   [8] = function ()
     schema.add_column("topics", "sort_order", types.integer{default = 0})
     db.query("UPDATE topics SET sort_order = (SELECT COUNT(*) FROM topics t2 WHERE t2.ROWID <= topics.ROWID)")
-  end
+  end,
+  
+  [9] = function ()
+    schema.add_column("post_history", "original_markup", types.text{null = false})
+    schema.add_column("post_history", "markup_language", types.text{default = "babycode"})
+  end,
+  
+  [10] = function ()
+    schema.add_column("users", "signature_original_markup", types.text{default = ""})
+    schema.add_column("users", "signature_rendered", types.text{default = ""})
+  end,
 }

nginx.conf

@@ -26,16 +26,24 @@ http {
     }
 
     location /static/ {
-      alias static/;
+      alias data/static/;
     }
 
     location /favicon.ico {
-      alias static/favicon.ico;
+      alias data/static/favicon.ico;
     }
     
     location /avatars {
-      alias static/avatars;
+      alias data/static/avatars;
       expires 1y;
     }
+    
+    location /static/js/ {
+      alias js/;
+    }
+    
+    location /static/fonts/ {
+      alias fonts/;
+    }
   }
 }

porom-dev-1.rockspec

@@ -16,7 +16,7 @@ dependencies = {
   "lapis == 1.16.0",
   "lsqlite3",
   "magick",
-  "bcrypt",
+  "luasodium",
   "luaossl",
 }
 

sass/style.scss

@@ -2,10 +2,50 @@
 
 @use "sass:color";
 
+@font-face {
+  font-family: "body-text";
+  src: url("/static/fonts/DINish[slnt,wdth,wght].woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "site-title";
+  src: url("/static/fonts/ChicagoFLF.woff2");
+}
+
+@mixin cadman($var) {
+  font-family: "Cadman";
+  src: url("/static/fonts/Cadman_#{$var}.woff2");
+}
+
+@font-face {
+  @include cadman("Roman");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  @include cadman("Bold");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  @include cadman("Italic");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  @include cadman("BoldItalic");
+  font-weight: bold;
+  font-style: italic;
+}
+
 $accent_color: #c1ceb1;
 
 $dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%);
 $dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%);
+$verydark: color.scale($accent_color, $lightness: -80%, $saturation: -70%);
 
 $light: color.scale($accent_color, $lightness: 40%, $saturation: -60%);
 $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
@@ -16,7 +56,8 @@ $button_color: color.adjust($accent_color, $hue: 90);
 %button-base {
   cursor: default;
   color: black;
-  font-size: 0.9rem;
+  font-size: 0.9em;
+  font-family: "Cadman";
   text-decoration: none;
   border: 1px solid black;
   border-radius: 3px;
@@ -49,7 +90,8 @@ $button_color: color.adjust($accent_color, $hue: 90);
 }
 
 body {
-  font-family: sans-serif;
+  font-family: "Cadman";
+  // font-size: 18px;
   margin: 20px 100px;
   background-color: $main_bg;
 }
@@ -61,7 +103,7 @@ body {
 #topnav {
   @include navbar($accent_color);
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 }
 
 #bottomnav {
@@ -81,9 +123,9 @@ body {
 }
 
 .site-title {
-  padding-right: 30px;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-family: "site-title";
+  font-size: 3rem;
+  margin: 0 20px;
   text-decoration: none;
   color: black;
 }
@@ -119,7 +161,7 @@ body {
 .post-content-container {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 0.2fr 2.5fr;
+  grid-template-rows: 70px 2.5fr;
   gap: 0px 0px;
   grid-auto-flow: row;
   grid-template-areas:
@@ -140,7 +182,83 @@ body {
 
 .post-content {
   grid-area: post-content;
-  padding: 5px 20px;
+  padding: 20px;
+  margin-right: 25%;
+  display: flex;
+  flex-direction: column;
+}
+
+.post-inner {
+  height: 100%;
+}
+
+pre code {
+  display: block;
+  background-color: $verydark;
+  font-size: 1rem;
+  color: white;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-left: 10px solid $lighter;
+  padding: 20px;
+}
+
+.inline-code {
+  background-color: $verydark;
+  color: white;
+  padding: 5px 10px;
+  display: inline-block;
+  margin: 4px;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+#delete-dialog {
+  padding: 0;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
+}
+
+.delete-dialog-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+
+.copy-code-container {
+  position: sticky;
+  // width: 100%;
+  width: calc(100% - 4px);
+  display: flex;
+  justify-content: space-between;
+  align-items: last baseline;
+  font-family: "Cadman";
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background-color: $accent_color;
+  border-left: 2px solid black;
+  border-right: 2px solid black;
+  border-top: 2px solid black;
+  
+  &::before {
+    content: "code block";
+    font-style: italic;
+    margin-left: 10px;
+  }
+}
+
+.copy-code {
+  margin-right: 10px;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 10px;
+  border-radius: 4px;
+  border-left: 10px solid $lighter;
+  background-color: $dark2;
 }
 
 .user-posts {
@@ -272,7 +390,7 @@ input[type="text"], input[type="password"], textarea, select {
 
 .infobox {
   border: 2px solid black;
-  background-color: $accent_color;
+  background-color: #81a3e6;
   padding: 20px 15px;
   
   &.critical {
@@ -341,6 +459,7 @@ input[type="text"], input[type="password"], textarea, select {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline;
+  margin-right: 25%;
 }
 
 .topic {
@@ -366,3 +485,45 @@ input[type="text"], input[type="password"], textarea, select {
   grid-area: topic-locked-container;
   border: 2px outset $light;
 }
+
+
+.draggable-topic {
+  cursor: pointer;
+  user-select: none;
+  background-color: $accent_color;
+  padding: 20px;
+  margin: 12px 0;
+  border-top: 6px outset $light;
+  border-bottom: 6px outset $dark2;
+  
+  &.dragged {
+    background-color: $button_color;
+  }
+}
+
+.editing {
+  background-color: $light;
+}
+
+.context-explain {
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.post-edit-form {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  height: 100%;
+}
+
+.babycode-editor {
+  height: 150px;
+}
+
+
+ul {
+  margin: 10px 0 10px 30px;
+  padding: 0;
+}

start.sh

@@ -1,15 +1,24 @@
 #!/bin/bash
 
+set -e
+
 start() {
+  lapis migrate
   lapis serve
 }
 
 first_launch() {
   echo "Setting up for the first time"
-  touch ".first_launch.$LAPIS_ENVIRONMENT"
-  lua5.1 schema.lua
+  mkdir -p secrets
+  local SECRET
+  SECRET="$(openssl rand -hex 32)"
+  echo "return { key = \"${SECRET}\",}" > secrets/secrets.lua
+  touch "secrets/.touched.$LAPIS_ENVIRONMENT"
+  mkdir -p data/db
+  luajit schema.lua
+  chmod -R a+rw data
   lapis migrate
-  lua5.1 create_default_accounts.lua
+  luajit create_default_accounts.lua
 }
 
 if [[ $# -ne 1 ]]; then
@@ -21,7 +30,7 @@ fi
 
 echo "Starting in $LAPIS_ENVIRONMENT"
 
-if ! [ -f ".first_launch.$LAPIS_ENVIRONMENT" ]; then
+if ! [ -f "secrets/.touched.$LAPIS_ENVIRONMENT" ]; then
   first_launch
 fi
 

util.lua

@@ -3,6 +3,7 @@ local magick = require("magick")
 local db = require("lapis.db")
 local html_escape = require("lapis.html").escape
 local constants   = require("constants")
+local string_trim = require("lapis.util").trim
 
 local Avatars = require("models").Avatars
 local Users = require("models").Users
@@ -33,10 +34,126 @@ util.TransientUser = {
   username = "Deleted User",
 }
 
+-- PURE API
+
 function util.get_user_avatar_url(req, user)
   return Avatars:find(user.avatar_id).file_path
 end
 
+---split a string
+---@param s string subject
+---@param delimiter string? string to split by, can be empty to split by character
+---@param max_matches integer? the maximum number of returned elements
+---@param trim boolean? whether to trim whitespace off matches
+---@param allow_empty boolean? should empty matches be in the resulting table
+---@return string[]
+function util.s_split(s, delimiter, max_matches, trim, allow_empty)
+  local result = {}
+  if s == "" then
+    return result
+  end
+  trim = trim == nil and true or trim
+  local tr = function(subj)
+    if trim then return string_trim(subj) else return subj end
+  end
+  max_matches = max_matches or -1
+  allow_empty = allow_empty == nil and true or allow_empty
+  
+  if delimiter == "" then
+    for i=1, #s do
+      local c = s:sub(i, 1)
+      if allow_empty or c ~= "" then
+        table.insert(result, c)
+        if max_matches > 0 and #result == max_matches then
+          break
+        end
+      end
+    end
+    return result
+  end
+  
+  local current_pos = 1
+  local delim_len = #delimiter
+  
+  while true do
+    if max_matches > 0 and #result >= max_matches then
+      break
+    end
+---@diagnostic disable-next-line: param-type-mismatch
+    local start_pos, end_pos = s:find(delimiter, current_pos, true)
+    if not start_pos then
+      break
+    end
+    local substr = s:sub(current_pos, start_pos - 1)
+    if allow_empty or substr ~= "" then
+      table.insert(result, tr(substr))
+    end
+    current_pos = end_pos + 1
+  end
+  
+  local substr = s:sub(current_pos)
+  if allow_empty or substr ~= "" then
+    table.insert(result, tr(substr))
+  end
+  
+  return result
+end
+
+function util.split_sentences(sentences, max_sentences)
+  return util.s_split(sentences, ".", max_sentences or 2, true, false)
+end
+
+function util.infobox_message(msg)
+  local sentences = util.split_sentences(msg)
+  if #sentences == 1 then
+    return "<b>" .. sentences[1] .. ". " .. "</b>"
+  end
+  return "<span><b>" .. sentences[1] .. ". " .. "</b> " .. sentences[2] .. ".</span>"
+end
+
+function util.get_logged_in_user(req)
+  if req.session.session_key == nil then
+    return nil
+  end
+
+  local session = db.select('* FROM "sessions" WHERE "key" = ? AND "expires_at" > "?" LIMIT 1', req.session.session_key, os.time())
+  if #session > 0 then
+    return Users:find({id = session[1].user_id})
+  end
+
+  return nil
+end
+
+function util.get_logged_in_user_or_transient(req)
+  return util.get_logged_in_user(req) or util.TransientUser
+end
+
+function util.ntob(v)
+  return v ~= 0
+end
+
+function util.bton(b)
+  return 1 and b or 0
+end
+
+function util.stob(s)
+  return s == "true"
+end
+
+function util.form_bool_to_sqlite(s)
+  return util.bton(util.stob(s))
+end
+
+function util.is_thread_locked(thread)
+  return util.ntob(thread.is_locked)
+end
+
+function util.is_topic_locked(topic)
+  return util.ntob(topic.is_locked)
+end
+
+-- OTHER API
+
 function util.validate_and_create_image(input_image, filename)
   local img = magick.load_image_from_blob(input_image)
 
@@ -81,7 +198,7 @@ function util.destroy_avatar(avatar_id)
     return
   end
   
-  local file_path = "static" .. avatar.file_path
+  local file_path = "data/static" .. avatar.file_path
   local f = io.open(file_path, "r")
   if not f then
     print("can't open avatar file")
@@ -92,49 +209,8 @@ function util.destroy_avatar(avatar_id)
   end
 end
 
-function util.get_logged_in_user(req)
-  if req.session.session_key == nil then
-    return nil
-  end
-
-  local session = db.select('* FROM "sessions" WHERE "key" = ? AND "expires_at" > "?" LIMIT 1', req.session.session_key, os.time())
-  if #session > 0 then
-    return Users:find({id = session[1].user_id})
-  end
-
-  return nil
-end
-
-function util.get_logged_in_user_or_transient(req)
-  return util.get_logged_in_user(req) or util.TransientUser
-end
-
-function util.ntob(v)
-  return v ~= 0
-end
-
-function util.bton(b)
-  return 1 and b or 0
-end
-
-function util.stob(s)
-  if s == "true" then
-    return true
-  end
-  if s == "false" then
-    return false
-  end
-end
-
-function util.form_bool_to_sqlite(s)
-  return util.bton(util.stob(s))
-end
-
-function util.is_thread_locked(thread)
-  return util.ntob(thread.is_locked)
-end
-
-function util.create_post(thread_id, user_id, content)
+function util.create_post(thread_id, user_id, content, markup_language)
+  markup_language = markup_language or "babycode"
   db.query("BEGIN")
   local post = Posts:create({
     thread_id = thread_id,
@@ -142,12 +218,17 @@ function util.create_post(thread_id, user_id, content)
     current_revision_id = db.NULL,
   })
   
-  local bb_content = babycode.to_html(content, html_escape)
+  local parsed_content = ""
+  if markup_language == "babycode" then
+    parsed_content = babycode.to_html(content, html_escape)
+  end
   
   local revision = PostHistory:create({
     post_id = post.id,
-    content = bb_content,
+    content = parsed_content,
     is_initial_revision = true,
+    original_markup = content,
+    markup_language = "babycode",
   })
   
   post:update({current_revision_id = revision.id})
@@ -156,6 +237,27 @@ function util.create_post(thread_id, user_id, content)
   return post
 end
 
+function util.update_post(post, new_content, markup_language)
+  markup_language = markup_language or "babycode"
+  db.query("BEGIN")
+  
+  local parsed_content = ""
+  if markup_language == "babycode" then
+    parsed_content = babycode.to_html(new_content, html_escape)
+  end
+  
+  local revision = PostHistory:create({
+    post_id = post.id,
+    content = parsed_content,
+    is_initial_revision = false,
+    original_markup = new_content,
+    markup_language = markup_language
+  })
+  
+  post:update({current_revision_id = revision.id})
+  db.query("COMMIT")
+end
+
 function util.transfer_and_delete_user(user)
   local deleted_user = Users:find({
     username = "DeletedUser",

views/base.etlua

@@ -7,11 +7,11 @@
   <% else %>
     <title>Porom</title>
   <% end %>
-  <% math.randomseed(os.time()) %>
-  <link rel="stylesheet" href="<%= "/static/style.css?" .. math.random(1, 100) %>">
+  <link rel="stylesheet" href="<%= "/static/style.css?v=" .. __cachebust %>">
 </head>
 <body>
   <% render("views.common.topnav") -%>
   <% content_for("inner") %>
+  <script src="/static/js/copy-code.js"></script>
 </body>
 </html>

views/common/babycode-editor-component.etlua

@@ -0,0 +1,8 @@
+<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>
+<textarea class="babycode-editor" name="<%= ta_name %>" id="<%= ta_id or "post_content" %>" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
+<script src="/static/js/post-editor.js"></script>

views/common/babycode-editor.etlua

@@ -0,0 +1,16 @@
+<%
+  local save_button_text = "Post reply"
+  if cancel_url then
+    save_button_text = "Save"
+  end
+%>
+<form class="post-edit-form" method="post" action="<%= url or "" %>">
+  <% render ("views.common.babycode-editor-component", {ta_name = ta_name, prefill = prefill}) %>
+  <span>
+  <input type=submit value="<%= save_button_text %>">
+    <% if cancel_url then %>
+      <a class="linkbutton warn" href="<%= cancel_url %>">Cancel</a>
+    <% end %>
+  </span>
+  <% render("views.common.bbcode_help") %>
+</form>

views/common/bbcode_help.etlua

@@ -1,11 +1,21 @@
 <details>
-  <summary>Supported babycode tags</summary>
+  <summary>babycode guide</summary>
   <ul>
     <li>[b]<b>bold</b>[/b]</li>
     <li>[i]<i>italic</i>[/i]</li>
     <li>[s]<del>strikethrough</del>[/s]</li>
     <li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
     <li>[url]<a href="https://unlabeled-url.example.com">https://unlabeled-url.example.com</a>[/url]</li>
-    <li>[code]<code>code block</code>[/code]</li>
+    <li>
+      [code]with<br>line breaks[/code] will produce a code block:
+      <details>
+        <summary>Show code block example</summary>
+        <pre><span class="copy-code-container"><button type=button class="copy-code" value="with
+line breaks">Copy</button></span><code>with
+line breaks</code></pre>
+      </details>
+    </li>
+    <li>[code]<code class="inline-code">with no line breaks</code>[/code]</li>
+    <li><code class="inline-code">---</code> will create a horizontal rule for separating content</li>
   </ul>
-</details>
+</details>

views/common/infobox.etlua

@@ -1,6 +1,7 @@
 <%
   local class = "infobox " .. constants.InfoboxHTMLClass[kind]
   local icon = constants.InfoboxIcons[kind]
+  local sentences = infobox_message(msg)
 %>
 
 <div class="<%= class %>">
@@ -8,6 +9,6 @@
   <div class="infobox-icon-container">
   <% render(icon) %>
   </div>
-    <%= msg %>
+    <%- sentences %>
   </span>
 </div>

views/mod/sort-topics.etlua

@@ -0,0 +1,19 @@
+<div class="darkbg settings-container">
+  <% if infobox then %>
+    <% render("views.common.infobox", infobox) %>
+  <% end %>
+  <h1>Change topics order</h1>
+  <p>Drag topic titles to reoder them. Press submit when done. The topics will appear to users in the order set here.</p>
+    <form method="post" id=topics-container>
+      <% for _, topic in ipairs(topics) do %>
+        <div draggable="true" class="draggable-topic" ondragover="dragOver(event)" ondragstart="dragStart(event)" ondragend="dragEnd()">
+          <div class="thread-title"><%= topic.name %></div>
+          <div><%= topic.description %></div>
+          <input type="hidden" name="<%= topic.id %>" value="<%= topic.sort_order %>" class="topic-input">
+        </div>
+      <% end %>
+      <input type=submit value="Save order">
+    </form>
+</div>
+
+<script src="/static/js/sort-topics.js"></script>

views/post/edit-post.etlua

@@ -0,0 +1,16 @@
+<% for _, post in ipairs(prev_context) do %>
+  <% render("views.threads.post", {post = post, edit = false, is_latest = false, no_reply = true}) %>
+<% end %>
+<span class="context-explain">
+  <span>&uarr;&uarr;&uarr;</span><i>Context</i><span>&uarr;&uarr;&uarr;</span>
+</span>
+<% if infobox then %>
+  <% render("views.common.infobox", infobox) %>
+<% end %>
+<% render("views.threads.post", {post = editing_post, edit = true, is_latest = false, no_reply = true}) %>
+<span class="context-explain">
+  <span>&darr;&darr;&darr;</span><i>Context</i><span>&darr;&darr;&darr;</span>
+</span>
+<% for _, post in ipairs(next_context) do %>
+  <% render("views.threads.post", {post = post, edit = false, is_latest = false, no_reply = true}) %>
+<% end %>

views/post/single-post.etlua

@@ -0,0 +1,9 @@
+<% if not post then %>
+  <% render("views.common.infobox", {kind = constants.InfoboxKind.ERROR, msg = "Post not found"}) %>
+<% else %>
+  <div class=darkbg>
+    <h1 class=thread-title><%= post.username .. "'s post in " .. thread.title %></h1>
+  </div>
+  <% render("views.threads.post", {post = post, edit = false, is_latest = false, no_reply = true}) %>
+  <a class=linkbutton href="<%= url_for("thread", {slug = thread.slug}, {after = post.id}) .. "#post-" .. post.id %>">View in context</a>
+<% end %>

views/threads/create.etlua

@@ -9,8 +9,8 @@
       </select><br>
       <label for="title">Thread title</label>
       <input type="text" id="title" name="title" placeholder="Required" required>
-      <label for="initial_post">Post body</label>
-      <textarea id="initial_post" name="initial_post" placeholder="Required" rows=5 required></textarea>
+      <label for="initial_post">Post body</label><br>
+      <% render("views.common.babycode-editor-component", {ta_name = "initial_post"}) %>
       <% render "views.common.bbcode_help" %>
       <input type="submit" value="Create thread">
     </form>

views/threads/post.etlua

@@ -1,4 +1,10 @@
-<div class="post" id="post-<%= post.id %>">
+  <%
+    local pc = "post"
+    if edit then
+      pc = pc .. " editing"
+    end
+  %>
+<div class="<%= pc %>" id="post-<%= post.id %>">
   <div class="usercard">
     <a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
     <img src="<%= post.avatar_path %>" class="avatar">
@@ -8,19 +14,72 @@
       <em class="user-status"><%= post.status %></em>
     <% end %>
   </div>
+
   <div class="post-content-container"<%= is_latest and 'id=latest-post' or "" %>>
     <div class="post-info">
-        <div><a href="<%= "#post-" .. post.id %>" title="Permalink"><i>
-          <% if tonumber(post.edited_at) > tonumber(post.created_at) then -%>
-            Edited at <%= os.date("%c", post.edited_at) %>
-          <% else -%>
-            Posted at <%= os.date("%c", post.created_at) %>
-          <% end -%>
-        </i></a></div>
-        <div><button>Reply</button></div>
+      <%
+        local post_url = url_for("thread", {slug = thread.slug}, {page = page}) .. "#post-" .. post.id
+      %>
+      <a href="<%= post_url %>" title="Permalink"><i>
+        <% if tonumber(post.edited_at) > tonumber(post.created_at) then -%>
+          Edited at <%= os.date("%c", post.edited_at) %>
+        <% else -%>
+          Posted on <%= os.date("%c", post.created_at) %>
+        <% end -%>
+      </i></a>
+      <span>
+      <%
+        local show_edit = me.id == post.user_id and not me:is_guest() and not ntob(thread.is_locked) and not no_reply
+        if show_edit then
+      %>
+          <a class="linkbutton" href="<%= url_for("edit_post", {post_id = post.id}) %>">Edit</a>
+      <% end %>
+      <%
+        local show_reply = true
+        if ntob(thread.is_locked) and not me:is_mod() then
+          show_reply = false
+        elseif me:is_guest() then
+          show_reply = false
+        elseif edit then
+          show_reply = false
+        elseif no_reply then
+          show_reply = false
+        end
+        if show_reply then
+          local d = post.created_at < post.edited_at and post.edited_at or post.created_at
+          local quote_src_text = ("On [url=%s]%s[/url], [url=%s]%s[/url] said:"):format(
+            post_url, os.date("%c", d), url_for("user", {username = post.username}), post.username
+          )
+          local reply_text = ("%s\n[quote]%s[/quote]\n---\n\n"):format(quote_src_text, post.original_markup)
+        %>
+          <button value="<%= reply_text %>" class="reply-button">Reply</button>
+      <% end %>
+      <%
+        local show_delete = (post.user_id == me.id and not ntob(thread.is_locked)) or me:is_mod()
+        if show_delete then
+      %>
+          <button class="critical post-delete-button" value="<%= post.id %>">Delete</button>
+      <% end %>
+      </span>
     </div>
     <div class="post-content">
-      <%- post.content %>
+      <% if not edit then %>
+        <div class="post-inner">
+        <%- post.content %>
+        </div>
+        <% if render_sig and #post.signature_rendered > 0 then %>
+          <div class="signature-container">
+            <hr>
+            <%- post.signature_rendered %>
+          </div>
+        <% end %>
+      <% else %>
+        <% render("views.common.babycode-editor", {
+          cancel_url = post_url,
+          prefill = post.original_markup,
+          ta_name = "new_content"
+          }) %>
+      <% end %>
     </div>
   </div>
 </div>

views/threads/thread.etlua

@@ -1,11 +1,36 @@
-<% local is_locked = ntob(thread.is_locked) %>
+<%
+  local is_locked = ntob(thread.is_locked)
+  local is_stickied = ntob(thread.is_stickied)
+  local can_post = (not is_locked and not me:is_guest()) or me:is_mod()
+  local can_lock = me.id == thread.user_id or me:is_mod()
+%>
+<% if infobox then %>
+  <% render("views.common.infobox", infobox) %>
+<% end %>
 <main>
   <nav class="darkbg">
     <h1 class="thread-title"><%= thread.title %></h1>
-    <span>Posted in <a href="<%= url_for("topic", {slug = topic.slug}) %>"><%= topic.name %></a></span>
+    <span>Posted in <a href="<%= url_for("topic", {slug = topic.slug}) %>"><%= topic.name %></a>
+    <% if is_stickied then %> &bullet; <i>stickied, so it's probably important</i>
+    <% end %>
+    </span>
+    <% if can_lock then %>
+    <div>
+      <form class="modform" action="<%= url_for("thread_lock", {slug = thread.slug}) %>" method="post">
+        <input type=hidden value="<%= not is_locked %>" name="target_op">
+        <input class="warn" type="submit" value="<%= is_locked and "Unlock thread" or "Lock thread" %>">
+      </form>
+      <% if me:is_mod() then %>
+        <form class="modform" action="<%= url_for("thread_sticky", {slug = thread.slug}) %>" method="post">
+          <input type=hidden value="<%= not is_stickied %>" name="target_op">
+          <input class="warn" type="submit" value="<%= is_stickied and "Unsticky thread" or "Sticky thread" %>">
+        </form>
+      <% end %>
+    </div>
+    <% end %>
   </nav>
   <% for i, post in ipairs(posts) do %>
-    <% render("views.threads.post", {post = post, is_latest = i == #posts}) %>
+    <% render("views.threads.post", {post = post, render_sig = true, is_latest = i == #posts}) %>
   <% end %>
 </main>
 
@@ -16,10 +41,18 @@
 <% if is_locked then -%>
   <% render("views.common.infobox", {kind = constants.InfoboxKind.LOCK, msg = "This thread is locked."}) %>
 <% end -%>
-<% if not me:is_guest() and not is_locked then %>
-<h1>Respond to "<%= thread.title %>"</h1>
-<form method="post">
-  <textarea id="post_content" name="post_content" placeholder="Response body" required></textarea><br>
-  <input type="submit" value="Post reply">
-</form>
+<% if can_post then %>
+  <h1>Respond to "<%= thread.title %>"</h1>
+  <% render("views.common.babycode-editor", {ta_name="post_content"}) %>
 <% end %>
+<dialog id="delete-dialog">
+  <div class=delete-dialog-inner>
+    Are you sure you want to delete the highlighted post?
+    <span>
+      <button id=post-delete-dialog-close>Cancel</button>
+      <button class="critical" form=post-delete-form>Delete</button>
+      <form id="post-delete-form" method="post"></form>
+    </span>
+  </div>
+</dialog>
+<script src="/static/js/thread.js"></script>

views/topics/topic.etlua

@@ -2,6 +2,8 @@
   <% render("views.common.infobox", infobox) %>
 <% end %>
 
+<% local is_locked = ntob(topic.is_locked) %>
+
 <nav class="darkbg">
   <h1 class="thread-title">All threads in "<%= topic.name %>"</h1>
   <span><%= topic.description %></span>
@@ -12,25 +14,28 @@
     <p>Your account is still pending confirmation by a moderator. You are not able to create a new thread or post at this time.</p>
   <% elseif thread_create_error == ThreadCreateError.LOGGED_OUT then %>
     <p>Only logged in users can create threads. <a href="<%= url_for("user_signup") %>">Sign up</a> or <a href="<%= url_for("user_login")%>">log in</a> to create a thread.</p>
-  <% else %>
-    <p>This topic is locked.</p>
   <% end %>
   <% if me:is_mod() then %>
     <a class="linkbutton" href="<%= url_for("topic_edit", {slug = topic.slug}) %>">Edit topic</a>
     <form class="modform" method="post" action="<%= url_for("topic_edit", {slug = topic.slug}) %>">
-      <input type="hidden" name="is_locked" value="<%= not ntob(topic.is_locked) %>">
-      <input class="warn" type="submit" id="lock" value="<%= ntob(topic.is_locked) and "Unlock topic" or "Lock topic" %>">
+      <input type="hidden" name="is_locked" value="<%= not is_locked %>">
+      <input class="warn" type="submit" id="lock" value="<%= is_locked and "Unlock topic" or "Lock topic" %>">
     </form>
+    <button type="button" class="critical" id="topic-delete-dialog-open">Delete</button>
   <% end %>
   </div>
 </nav>
 
+<% if is_locked then -%>
+  <% render("views.common.infobox", {kind = constants.InfoboxKind.LOCK, msg = "This topic is locked. Only moderators can create new threads."}) %>
+<% end -%>
+
 <% if #threads_list == 0 then %>
   <p>There are no threads in this topic.</p>
 <% else %>
   <% for _, thread in ipairs(threads_list) do %>
     <% local is_stickied = ntob(thread.is_stickied) %>
-    <% local is_locked = ntob(thread.is_locked) %>
+    <% local thread_is_locked = ntob(thread.is_locked) %>
     <div class="thread">
       <div class="thread-sticky-container contain-svg">
         <% if is_stickied then -%>
@@ -54,7 +59,7 @@
         </span>
       </div>
       <div class="thread-locked-container contain-svg">
-        <% if is_locked then -%>
+        <% if thread_is_locked then -%>
           <% render("svg-icons.lock") %>
           <i>Locked</i>
         <% end -%>
@@ -66,3 +71,15 @@
 <nav id="bottomnav">
   <% render("views.common.pagination", {page_count = pages, current_page = page}) %>
 </nav>
+<dialog id="delete-dialog">
+  <div class=delete-dialog-inner>
+    Are you sure you want to delete this topic?
+    <span>
+      <button id=topic-delete-dialog-close>Cancel</button>
+      <button class="critical" form=topic-delete-form>Delete</button>
+      <form id="topic-delete-form" method="post" action="<%= url_for("topic_delete", {slug = topic.slug}) %>"></form>
+    </span>
+  </div>
+</dialog>
+
+<script src="/static/js/topic.js"></script>

views/topics/topics.etlua

@@ -2,9 +2,14 @@
   <h1 class="thread-title">All topics</h1>
   <% if me:is_mod() then %>
     <a class="linkbutton" href="<%= url_for("topic_create") %>">Create new topic</a>
+    <a class="linkbutton" href="<%= url_for("sort_topics") %>">Sort topics</a>
   <% end %>
 </nav>
 
+<% if infobox then %>
+  <% render("views.common.infobox", infobox) %>
+<% end %>
+
 <% if #topic_list == 0 then %>
   <p>There are no topics.</p>
 <% else %>
@@ -12,7 +17,7 @@
     <% local is_locked = ntob(topic.is_locked) %>
     <div class="topic">
       <div class="topic-info-container">
-        <a href=<%= url_for("topic", {slug = topic.slug}) %>><%= topic.name %></a>
+        <a class="thread-title" href=<%= url_for("topic", {slug = topic.slug}) %>><%= topic.name %></a>
         <%= topic.description %>
         <% if topic.latest_thread_username then %>
         <span>

views/user/settings.etlua

@@ -8,7 +8,7 @@
     <img src="<%= avatar_url(me) %>">
     <input id="file" type="file" name="avatar" accept="image/*" required>
     <div>
-    <input type="submit" value="Update avatar" <%= disable_avatar and "disabled=disabled" %>>
+    <input type="submit" value="Upload avatar" <%= disable_avatar and "disabled=disabled" %>>
   <% if not me:is_default_avatar() then %>
     <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = me.username}) %>" formnovalidate>
   <% end %>
@@ -16,8 +16,10 @@
   </form>
   <form method="post" action="">
     <label for="status">Status</label>
-    <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="30">
-    <input type="submit" value="Save status">
+    <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="70" placeholder="Will be shown under your username. Max 70 characters">
+    <label for="signature">Signature</label><br>
+    <% render("views.common.babycode-editor-component", {ta_name = "signature", ta_id = "signature", prefill = me.signature_original_markup, ta_placeholder = "Will be shown under each of your posts", optional = true}) %>
+    <input type="submit" value="Save settings">
   </form>
   <div>
   <a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = me.username}) %>">Delete account</a>

views/user/user.etlua

@@ -1,5 +1,5 @@
 <% if infobox then %>
-  <% render("views.common.infobox", pop_infobox) %>
+  <% render("views.common.infobox", infobox) %>
 <% end %>
 <div class="darkbg">
   <h1 class="thread-title">Latest posts by <i><%= user.username %></i></h1>
@@ -29,7 +29,7 @@
         <% if tonumber(post.edited_at) > tonumber(post.created_at) then -%>
             Edited in <%= post.thread_title %> at <%= os.date("%c", post.edited_at) %>
           <% else -%>
-            Posted in <%= post.thread_title %> at <%= os.date("%c", post.created_at) %>
+            Posted in <%= post.thread_title %> on <%= os.date("%c", post.created_at) %>
           <% end -%>
       </i></a></div>
       </div>