yagich/pyrom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make guide sections a macro

Browse Source
This commit is contained in:
Lera Elvoé
2025-12-04 08:52:22 +03:00
parent b812e01473
commit 265e249eaf
2 changed files with 200 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/templates/common/macros.html
View File

@@ -287,3 +287,21 @@
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro guide_sections() %}
<div class="guide-container">
<div class="guide-topics">
{% set sections %}{{ caller() }}{% 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>
{% endmacro %}

377
app/templates/guides/babycode.html
View File

@@ -1,203 +1,190 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% from 'common/macros.html' import guide_sections with context %}
{% block title %}babycode guide{% endblock %} {% block title %}babycode guide{% endblock %}
{% block content %} {% block content %}
<div class=darkbg> <div class=darkbg>
<h1 class="thread-title">Babycode guide</h1> <h1 class="thread-title">Babycode guide</h1>
</div> </div>
<div class="guide-container">
<div class="guide-topics">
{% set sections %}
<section class="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>
<p>A <b>tag</b> is a short name enclosed in square brackets. Tags can be opening tags, like <code class="inline-code">[b]</code> or closing tags, like <code class="inline-code">[/b]</code>. Anything inserted between matching opening and closing tags is known as the tag's content.</p>
<p>Some tags can provide more specific instructions using an <b>attribute</b>. An attribute is added to the opening tag with an equals sign (<code class="inline-code">=</code>). This allows you to specify details like a particular color or a link's address.</p>
</section>
<section class="guide-section">
<h2 id="text-formatting-tags">Text formatting tags</h2>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<li>To <u>underline</u> some text, enclose it in <code class="inline-code">[u][/u]</code>:<br>
[u]Hello World[/u]<br>
Will become<br>
<u>Hello World</u>
</li>
</ul>
<ul class='guide-list'>
<li>To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in <code class="inline-code">[big][/big]</code>:<br>
[big]Hello World[/big]<br>
Will become<br>
{{ "[big]Hello World[/big]" | babycode | safe }}
<li>Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with <code class="inline-code">[small][/small]</code>:<br>
[small]Hello World[/small]<br>
Will become<br>
{{ "[small]Hello World[/small]" | babycode | safe }}
</li>
</ul>
<ul class='guide-list'>
<li>You can change the text color by using <code class="inline-code">[color][/color]</code>:<br>
[color=red]Red text[/color]<br>
[color=white]White text[/color]<br>
[color=#3b08f0]Blueish text[/color]<br>
Will become<br>
{{ "[color=red]Red text[/color]" | babycode | safe }}<br>
{{ "[color=white]White text[/color]" | babycode | safe }}<br>
{{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}<br>
</li>
</ul>
<ul class='guide-list'>
<li>You can center text by enclosing it in <code class="inline-code">[center][/center]</code>:<br>
[center]Hello World[/center]<br>
Will become<br>
{{ "[center]Hello World[/center]" | babycode | safe }}
</li>
<li>You can right-align text by enclosing it in <code class="inline-code">[right][/right]</code>:<br>
[right]Hello World[/right]<br>
Will become<br>
{{ "[right]Hello World[/right]" | babycode | safe }}
</li>
Note: the center and right tags will break the paragraph. See <a href="#paragraph-rules">Paragraph rules</a> for more details.
</ul>
</section>
<section class="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>{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }}</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="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 }}
<p>Additionally, the following tags will break into a new paragraph:</p>
<ul>
<li><code class="inline-code">[code]</code> (code block, not inline);</li>
<li><code class="inline-code">[img]</code>;</li>
<li><code class="inline-code">[center]</code>;</li>
<li><code class="inline-code">[right]</code>;</li>
<li><code class="inline-code">[ul]</code> and <code class="inline-code">[ol]</code>;</li>
<li><code class="inline-code">[quote]</code>.</li>
</ul>
</section>
<section class="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="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>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>
<section class="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 }}
<p>Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: <code class="inline-code">[code=gdscript]</code></p>
{{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}}
<p>A full list of languages that can be highlighted is available <a href="https://pygments.org/languages/" target=_blank>here</a> (the short names column).</p>
<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="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="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>
<section class="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.
</section>
<section class="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>
<section class="guide-section">
<h2 id="void-tags">Void tags</h2>
<p>The special void tags <code class="inline-code">[lb]</code>, <code class="inline-code">[rb]</code>, and <code class="inline-code">[@]</code> will appear as the literal characters <code class="inline-code">[</code>, <code class="inline-code">]</code>, and <code class="inline-code">@</code> respectively. Unlike other tags, they are self-contained and have no closing equivalent.</p>
<ul class="guide-list">
{% set lbrb = "[color=red]This text will be red[/color]\n\n[lb]color=red[rb]This text won't be red[lb]/color[rb]" %}
<li><code class="inline-code">[lb]</code> and <code class="inline-code">[rb]</code> allow you to use square brackets without them being interpreted as Babycode:
{{ ("[code]" + lbrb + "[/code]") | babycode | safe }}
Will result in:<br>
{{ lbrb | babycode | safe }}
</li>
<li>The <code class="inline-code">[@]</code> tag allows you to use the @ symbol without it being turned into a mention.</li>
</ul>
</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>
{% call() guide_sections() %}
<section class="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>
<p>A <b>tag</b> is a short name enclosed in square brackets. Tags can be opening tags, like <code class="inline-code">[b]</code> or closing tags, like <code class="inline-code">[/b]</code>. Anything inserted between matching opening and closing tags is known as the tag's content.</p>
<p>Some tags can provide more specific instructions using an <b>attribute</b>. An attribute is added to the opening tag with an equals sign (<code class="inline-code">=</code>). This allows you to specify details like a particular color or a link's address.</p>
</section>
<section class="guide-section">
<h2 id="text-formatting-tags">Text formatting tags</h2>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<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>
</li>
</ul>
<ul class='guide-list'>
<li>To <u>underline</u> some text, enclose it in <code class="inline-code">[u][/u]</code>:<br>
[u]Hello World[/u]<br>
Will become<br>
<u>Hello World</u>
</li>
</ul>
<ul class='guide-list'>
<li>To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in <code class="inline-code">[big][/big]</code>:<br>
[big]Hello World[/big]<br>
Will become<br>
{{ "[big]Hello World[/big]" | babycode | safe }}
<li>Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with <code class="inline-code">[small][/small]</code>:<br>
[small]Hello World[/small]<br>
Will become<br>
{{ "[small]Hello World[/small]" | babycode | safe }}
</li>
</ul>
<ul class='guide-list'>
<li>You can change the text color by using <code class="inline-code">[color][/color]</code>:<br>
[color=red]Red text[/color]<br>
[color=white]White text[/color]<br>
[color=#3b08f0]Blueish text[/color]<br>
Will become<br>
{{ "[color=red]Red text[/color]" | babycode | safe }}<br>
{{ "[color=white]White text[/color]" | babycode | safe }}<br>
{{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}<br>
</li>
</ul>
<ul class='guide-list'>
<li>You can center text by enclosing it in <code class="inline-code">[center][/center]</code>:<br>
[center]Hello World[/center]<br>
Will become<br>
{{ "[center]Hello World[/center]" | babycode | safe }}
</li>
<li>You can right-align text by enclosing it in <code class="inline-code">[right][/right]</code>:<br>
[right]Hello World[/right]<br>
Will become<br>
{{ "[right]Hello World[/right]" | babycode | safe }}
</li>
Note: the center and right tags will break the paragraph. See <a href="#paragraph-rules">Paragraph rules</a> for more details.
</ul>
</section>
<section class="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>{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }}</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="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 }}
<p>Additionally, the following tags will break into a new paragraph:</p>
<ul>
<li><code class="inline-code">[code]</code> (code block, not inline);</li>
<li><code class="inline-code">[img]</code>;</li>
<li><code class="inline-code">[center]</code>;</li>
<li><code class="inline-code">[right]</code>;</li>
<li><code class="inline-code">[ul]</code> and <code class="inline-code">[ol]</code>;</li>
<li><code class="inline-code">[quote]</code>.</li>
</ul>
</section>
<section class="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="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>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>
<section class="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 }}
<p>Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: <code class="inline-code">[code=gdscript]</code></p>
{{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}}
<p>A full list of languages that can be highlighted is available <a href="https://pygments.org/languages/" target=_blank>here</a> (the short names column).</p>
<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="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="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>
<section class="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.
</section>
<section class="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>
<section class="guide-section">
<h2 id="void-tags">Void tags</h2>
<p>The special void tags <code class="inline-code">[lb]</code>, <code class="inline-code">[rb]</code>, and <code class="inline-code">[@]</code> will appear as the literal characters <code class="inline-code">[</code>, <code class="inline-code">]</code>, and <code class="inline-code">@</code> respectively. Unlike other tags, they are self-contained and have no closing equivalent.</p>
<ul class="guide-list">
{% set lbrb = "[color=red]This text will be red[/color]\n\n[lb]color=red[rb]This text won't be red[lb]/color[rb]" %}
<li><code class="inline-code">[lb]</code> and <code class="inline-code">[rb]</code> allow you to use square brackets without them being interpreted as Babycode:
{{ ("[code]" + lbrb + "[/code]") | babycode | safe }}
Will result in:<br>
{{ lbrb | babycode | safe }}
</li>
<li>The <code class="inline-code">[@]</code> tag allows you to use the @ symbol without it being turned into a mention.</li>
</ul>
</section>
{% endcall %}
{% endblock %} {% endblock %}