add mentions

app/templates/babycode.html

@@ -128,7 +128,7 @@
         <code class="inline-code">[img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img]</code>
         {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }}
         </p>
-        <p>Text inside the tag becomes the alt text. The attribute is the image URL. The text inside the tag will become the image's alt text.</p>
+        <p>The attribute is the image URL. The text inside the tag will become the image's alt text.</p>
         <p>Images will always break up a paragraph and will get scaled down to a maximum of 400px. However, consecutive image tags will try to stay in one line, wrapping if necessary. Break the paragraph if you wish to keep images on their own paragraph.</p>
         <p>Multiple images attached to a post can be clicked to open a dialog to view them.</p>
       </section>
@@ -157,13 +157,22 @@
         {{ list | babycode | safe }}
       </section>
       <section class="babycode-guide-section">
-      <h2 id="spoilers">Spoilers</h2>
-      {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}
-      <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
-      {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
-      Will produce:
-      {{ spoiler | babycode | safe }}
-      All other tags are supported inside spoilers.
+        <h2 id="spoilers">Spoilers</h2>
+        {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %}
+        <p>You can make a section collapsible by using the <code class="inline-code">[spoiler]</code> tag:</p>
+        {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }}
+        Will produce:
+        {{ spoiler | babycode | safe }}
+        All other tags are supported inside spoilers.
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="mentions">Mentioning users</h2>
+        <p>You can mention users by their username (<em>not</em> their display name) by using <code class="inline-code">@username</code>. A user's username is always shown below their avatar and display name on their posts and their user page.</p>
+        <p>A mention will show up on your post as a clickable box with the user's display name if they have one set or their username with an <code class="inline-code">@</code> symbol if they don't:</p>
+        <a class="mention" href="#mentions" title="@user-without-display-name">@user-without-display-name</a>
+        <a class="mention display" href="#mentions" title="@user-with-display-name">User with display name</a>
+        <a class="mention display me" href="#mentions" title="@your-username">Your display name</a>
+        <p>Mentioning a user does not notify them. It is simply a way to link to their profile in your posts.</p>
       </section>
     {% endset %}
     {{ sections | safe }}

app/templates/common/macros.html

@@ -105,7 +105,7 @@
     <div>
       <ul class="horizontal">
         {% for tag in banned_tags | unique %}
-        <li><code class="inline-code">[{{ tag }}]</code></li>
+        <li><code class="inline-code">{{ tag }}</code></li>
         {% endfor %}
       </ul>
     </div>
@@ -156,7 +156,8 @@
       <a href="{{ url_for("users.page", username=post['username']) }}" style="display: contents;">
       <img src="{{ post['avatar_path'] }}" class="avatar">
       </a>
-      <a href="{{ url_for("users.page", username=post['username']) }}" class="username-link">{{ post['username'] }}</a>
+      <a href="{{ url_for("users.page", username=post['username']) }}" class="username-link">{{ post['display_name'] or post['username'] }}</a>
+      <em><abbr title="Mention">@{{ post.username }}</abbr></em>
       {% if post['status'] %}
         <em class="user-status">{{ post['status'] }}</em>
       {% endif %}
@@ -205,7 +206,7 @@
         {% endif %}
 
         {% if show_reply %}
-          {% set qtext = "[url=%s]%s said:[/url]" | format(post_permalink, post['username']) %}
+          {% set qtext = "@%s [url=%s]said:[/url]" | format(post['username'], post_permalink) %}
           {% set reply_text = "%s\n[quote]\n%s\n[/quote]\n" | format(qtext, post['original_markup']) %}
           <button data-send="addQuote" value="{{ reply_text }}" class="reply-button">Quote</button>
         {% endif %}

app/templates/common/topnav.html

@@ -11,7 +11,7 @@
     {% endif %}
   {% else %}
     {% with user = get_active_user() %}
-      Welcome, <a href="{{ url_for("users.page", username = user.username) }}">{{user.username}}</a>
+      Welcome, <a href="{{ url_for("users.page", username = user.username) }}">{{user.get_readable_name()}}</a>
       <ul class="horizontal">
         <li><a href="{{ url_for("users.settings", username = user.username) }}">Settings</a></li>
         <li><a href="{{ url_for("users.inbox", username = user.username) }}">Inbox</a></li>

app/templates/mod/motd.html

@@ -9,7 +9,7 @@
     <label for="title">Title</label>
     <input name="title" id="title" type="text" required autocomplete="off" placeholder="Required" value="{{ current.title }}"><br>
     <label for="body">Body</label>
-    {{ babycode_editor_component('body', ta_placeholder='MOTD body (required)', banned_tags=['img', 'spoiler'], prefill=current.body_original_markup) }}
+    {{ babycode_editor_component('body', ta_placeholder='MOTD body (required)', banned_tags=['img', 'spoiler', '@mention'], prefill=current.body_original_markup) }}
     <input type="submit" value="Save">
     <input class="critical" type="submit" formaction="{{ url_for('mod.motd_delete') }}" value="Delete MOTD" formnovalidate {{"disabled" if not current else ""}}>
   </form>

app/templates/topics/topic.html

@@ -56,12 +56,12 @@
             </span>
             &bullet;
             <span>
-            Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }}
+            Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by_display_name'] or thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }}
             </span>
           </span>
         </span>
         <span>
-          Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a>
+          Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_display_name'] or thread['latest_post_username'] }}</a>
           on <a href="{{ url_for("threads.thread", slug=thread['slug'], after=thread['latest_post_id']) }}">on {{ timestamp(thread['latest_post_created_at']) }}</a>:
         </span>
         <span class="thread-info-post-preview">

app/templates/topics/topics.html

@@ -26,12 +26,12 @@
         {{ topic['description'] }}
         {% if topic['latest_thread_username'] %}
           <span>
-            Latest thread: <a href="{{ url_for("threads.thread", slug=topic['latest_thread_slug'])}}">{{topic['latest_thread_title']}}</a> by <a href="{{url_for("users.page", username=topic['latest_thread_username'])}}">{{topic['latest_thread_username']}}</a> on {{ timestamp(topic['latest_thread_created_at']) }}
+            Latest thread: <a href="{{ url_for("threads.thread", slug=topic['latest_thread_slug'])}}">{{topic['latest_thread_title']}}</a> by <a href="{{url_for("users.page", username=topic['latest_thread_username'])}}">{{topic['latest_thread_display_name'] or topic['latest_thread_username']}}</a> on {{ timestamp(topic['latest_thread_created_at']) }}
           </span>
           {% if topic['id'] in active_threads %}
             {% with thread=active_threads[topic['id']] %}
               <span>
-                Latest post in: <a href="{{ url_for("threads.thread", slug=thread['thread_slug'])}}">{{ thread['thread_title'] }}</a> by <a href="{{ url_for("users.page", username=thread['username'])}}">{{ thread['username'] }}</a> at <a href="{{ get_post_url(thread.post_id, _anchor=true) }}">{{ timestamp(thread['post_created_at']) }}</a>
+                Latest post in: <a href="{{ url_for("threads.thread", slug=thread['thread_slug'])}}">{{ thread['thread_title'] }}</a> by <a href="{{ url_for("users.page", username=thread['username'])}}">{{ thread['display_name'] or thread['username'] }}</a> at <a href="{{ get_post_url(thread.post_id, _anchor=true) }}">{{ timestamp(thread['post_created_at']) }}</a>
               </span>
             {% endwith %}
           {% endif %}

app/templates/users/settings.html

@@ -26,6 +26,8 @@
       <option value='activity' {{ 'selected' if session['sort_by'] == 'activity' else '' }}>Latest activity</option>
       <option value='thread' {{ 'selected' if session['sort_by'] == 'thread' else '' }}>Thread creation date</option>
     </select>
+    <label for='display_name'>Display name</label>
+    <input type='text' id='display_name' name='display_name' value='{{ active_user.display_name }}' pattern="(?:[\w!#$%^*\(\)\-_=+\[\]\{\}\|;:,.?\s]{3,50})?" title='3-50 characters, no @, no <>, no &' placeholder='Optional. Will be shown in place of username.' autocomplete='off'></input>
     <label for='status'>Status</label>
     <input type='text' id='status' name='status' value='{{ active_user.status }}' maxlength=100 placeholder='Will be shown under your name. Max 100 characters.'>
     <label for='babycode-content'>Signature</label>

app/templates/users/sign_up.html

@@ -4,7 +4,7 @@
 <div class="darkbg login-container">
   <h1>Sign up</h1>
   {% if inviter %}
-  <p>You have been invited by <a href="{{ url_for('users.page', username=inviter.username) }}">{{ inviter.username }}</a> to join {{ config.SITE_NAME }}. Create an identity below.</p>
+  <p>You have been invited by <a href="{{ url_for('users.page', username=inviter.username) }}">{{ inviter.get_readable_name() }}</a> to join {{ config.SITE_NAME }}. Create an identity below.</p>
   {% endif %}
   <form method="post">
     {% if key %}

app/templates/users/user.html

@@ -1,9 +1,9 @@
 {% from 'common/macros.html' import timestamp %}
 {% extends 'base.html' %}
-{% block title %}{{ target_user.username }}'s profile{% endblock %}
+{% block title %}{{ target_user.get_readable_name() }}'s profile{% endblock %}
 {% block content %}
 <div class="darkbg">
-  <h1 class="thread-title"><i>{{ target_user.username }}</i>'s profile</h1>
+  <h1 class="thread-title"><i>{{ target_user.get_readable_name() }}</i>'s profile</h1>
   {% if active_user.id == target_user.id %}
     <div class="user-actions">
       <a class="linkbutton" href="{{ url_for("users.settings", username = active_user.username) }}">Settings</a>
@@ -45,7 +45,8 @@
   <div class="user-page-usercard">
     <div class="usercard-inner">
       <img class="avatar" src="{{ target_user.get_avatar_url() }}">
-      <strong class="big">{{ target_user.username }}</strong>
+      <strong class="big">{{ target_user.get_readable_name() }}</strong>
+      <em><abbr title="Mention">@{{ target_user.username }}</abbr></em>
       {% if target_user.status %}
         <em class="user-status">{{ target_user.status }}</em>
       {% endif %}
@@ -65,7 +66,7 @@
           <li>Latest started thread: <a href="{{ url_for("threads.thread", slug = stats.latest_thread_slug) }}">{{ stats.latest_thread_title }}</a>
         {% endif %}
         {% if stats.inviter_username %}
-          <li>Invited by <a href="{{ url_for('users.page', username=stats.inviter_username) }}">{{ stats.inviter_username }}</a></li>
+          <li>Invited by <a href="{{ url_for('users.page', username=stats.inviter_username) }}">{{ stats.inviter_display_name or stats.inviter_username }}</a></li>
         {% endif %}
       </ul>
     {% endwith %}