re-add babycode guide

app/__init__.py

@@ -7,6 +7,7 @@ from .constants import (
     PermissionLevel, permission_level_string,
     InfoboxKind, InfoboxIcons, InfoboxHTMLClass
     )
+from .lib.babycode import babycode_to_html, EMOJI
 from datetime import datetime
 import os
 import time
@@ -103,6 +104,7 @@ def create_app():
             "InfoboxHTMLClass": InfoboxHTMLClass,
             "InfoboxKind": InfoboxKind,
             "__commit": commit,
+            "__emoji": EMOJI,
         }
 
     @app.context_processor
@@ -124,4 +126,18 @@ def create_app():
     def permission_string(term):
         return permission_level_string(term)
 
+    @app.template_filter('babycode')
+    def babycode_filter(markup):
+        return babycode_to_html(markup)
+
+    @app.template_filter('extract_h2')
+    def extract_h2(content):
+        import re
+        pattern = r'<h2\s+id="([^"]+)"[^>]*>(.*?)<\/h2>'
+        matches = re.findall(pattern, content, re.IGNORECASE | re.DOTALL)
+        return [
+            {'id': id_.strip(), 'text': text.strip()}
+            for id_, text in matches
+        ]
+
     return app

app/lib/babycode.py

@@ -5,7 +5,7 @@ import re
 def tag_code(children, attr):
     is_inline = children.find('\n') == -1
     if is_inline:
-        return f"<code class=\"inline_code\">{children}</code>"
+        return f"<code class=\"inline-code\">{children}</code>"
     else:
         t = children.strip()
         button = f"<button type=button class=\"copy-code\" value={t}>Copy</button>"

app/routes/app.py

@@ -1,4 +1,4 @@
-from flask import Blueprint, redirect, url_for
+from flask import Blueprint, redirect, url_for, render_template
 
 bp = Blueprint("app", __name__, url_prefix = "/")
 
@@ -9,4 +9,4 @@ def index():
 
 @bp.route("/babycode")
 def babycode_guide():
-    return "not yet"
+    return render_template('babycode.html')

app/templates/babycode.html

@@ -0,0 +1,114 @@
+<!-- kate: remove-trailing-space off; -->
+{% extends 'base.html' %}
+{% block title %}babycode guide{% endblock %}
+{% block content %}
+<div class=darkbg>
+  <h1 class="thread-title">Babycode guide</h1>
+</div>
+<div class="babycode-guide-container">
+  <div class="guide-topics">
+    {% set sections %}
+      <section class="babycode-guide-section">
+        <h2 id="what-is-babycode">What is babycode?</h2>
+        <p>You may be familiar with BBCode, a loosely related family of markup languages popular on forums. Babycode is another, simplified, dialect of those languages. It is a way of formatting text by enclosing parts of it in special tags.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="text-formatting-tags">Text formatting tags</h2>
+        <ul>
+          <li>To make some text <strong>bold</strong>, enclose it in <code class="inline-code">[b][/b]</code>:<br>
+          [b]Hello World[/b]<br>
+          Will become<br>
+          <strong>Hello World</strong>
+        </ul>
+        <ul>
+          <li>To <em>italicize</em> text, enclose it in <code class="inline-code">[i][/i]</code>:<br>
+          [i]Hello World[/i]<br>
+          Will become<br>
+          <em>Hello World</em>
+        </ul>
+        <ul>
+          <li>To make some text <del>strikethrough</del>, enclose it in <code class="inline-code">[s][/s]</code>:<br>
+          [s]Hello World[/s]<br>
+          Will become<br>
+          <del>Hello World</del>
+        </ul>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="emoji">Emoji</h2>
+        <p>There are a few emoji in the style of old forum emotes:</p>
+        <table class="emoji-table">
+          <tr>
+            <th>Short code</th>
+            <th>Emoji result</th>
+          </tr>
+          {% for emoji in __emoji %}
+            <tr>
+              <td>:{{ emoji }}:</td>
+              <td>{{ __emoji[emoji] | safe }}</td>
+            </tr>
+          {% endfor %}
+        </table>
+        <p>Special thanks to the <a href="https://gh.vercte.net/forumoji/">Forumoji project</a> and its contributors for these graphics.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="paragraph-rules">Paragraph rules</h2>
+        <p>Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:</p>
+        {{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }}
+        Will produce:<br>
+        {{ 'paragraph 1\n\nparagraph 2' | babycode | safe }}
+        <p>To break a line without starting a new paragraph, end a line with two spaces:</p>
+        {{ '[code]paragraph 1  \nstill paragraph 1[/code]' | babycode | safe }}
+        That will produce:<br>
+        {{ 'paragraph 1  \nstill paragraph 1' | babycode | safe }}
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="links">Links</h2>
+        <p>Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use<br><code class="inline-code">[url=https://example.com]Link label[/url]</code>:<br>
+        <a href="https://example.com">Link label</a></p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="attaching-an-image">Attaching an image</h2>
+        <p>To add an image to your post, use the <code class="inline-code">[img]</code> tag:<br>
+        <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.</p>
+        <p>Images will always break up a paragraph and will get scaled down to a maximum of 400px. The text inside the tag will become the image's alt text.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="adding-code-blocks">Adding code blocks</h2>
+        {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %}
+        <p>There are two kinds of code blocks recognized by babycode: inline and block. Inline code blocks do not break a paragraph. They can be added with <code class="inline-code">[code]your code here[/code]</code>. As long as there are no line breaks inside the code block, it is considered inline. If there are any, it will produce this:</p>
+        {{ ('[code]%s[/code]' % code) | babycode | safe }}
+        <br>
+        <p>Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}</p>
+        <p>Babycodes are not parsed inside code blocks.</p>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="quoting">Quoting</h2>
+        <p>Text enclosed within <code class="inline-code">[quote][/quote]</code> will look like a quote:</p>
+        <blockquote>A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.</blockquote>
+      </section>
+      <section class="babycode-guide-section">
+        <h2 id="lists">Lists</h2>
+        {% set list = '[ul]\nitem 1\n\nitem 2\n\nitem 3  \nstill item 3 (break line without inserting a new item by using two spaces at the end of a line)\n[/ul]' %}
+        <p>There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with <code class="inline-code">[ol][/ol]</code> tags, and unordered with <code class="inline-code">[ul][/ul]</code>. Every new paragraph according to the <a href="#paragraph-rules">usual paragraph rules</a> will create a new list item. For example:</p>
+        {{ ('[code]%s[/code]' % list) | babycode | safe }}
+        Will produce the following list:
+        {{ list | babycode | safe }}
+      </section>
+    {% endset %}
+    {{ sections | safe }}
+  </div>
+  <div class="guide-toc">
+    <h2>Table of contents</h2>
+    {% set toc = sections | extract_h2 %}
+    <ul>
+      {% for heading in toc %}
+        <li><a href='#{{ heading.id }}'>{{ heading.text }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+
+{% endblock %}