From 265e249eaf979789c1ee2d3b4eb9914a679a3fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Thu, 4 Dec 2025 08:52:22 +0300 Subject: [PATCH] make guide sections a macro --- app/templates/common/macros.html | 18 ++ app/templates/guides/babycode.html | 377 ++++++++++++++--------------- 2 files changed, 200 insertions(+), 195 deletions(-) diff --git a/app/templates/common/macros.html b/app/templates/common/macros.html index 0ae3232..644460a 100644 --- a/app/templates/common/macros.html +++ b/app/templates/common/macros.html @@ -287,3 +287,21 @@ {% endmacro %} + +{% macro guide_sections() %} +
+
+ {% set sections %}{{ caller() }}{% endset %} + {{ sections | safe }} +
+
+

Table of contents

+ {% set toc = sections | extract_h2 %} + +
+
+{% endmacro %} diff --git a/app/templates/guides/babycode.html b/app/templates/guides/babycode.html index 8522c72..f26f61a 100644 --- a/app/templates/guides/babycode.html +++ b/app/templates/guides/babycode.html @@ -1,203 +1,190 @@ {% extends 'base.html' %} +{% from 'common/macros.html' import guide_sections with context %} {% block title %}babycode guide{% endblock %} {% block content %}

Babycode guide

-
-
- {% set sections %} -
-

What is babycode?

-

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.

-

A tag is a short name enclosed in square brackets. Tags can be opening tags, like [b] or closing tags, like [/b]. Anything inserted between matching opening and closing tags is known as the tag's content.

-

Some tags can provide more specific instructions using an attribute. An attribute is added to the opening tag with an equals sign (=). This allows you to specify details like a particular color or a link's address.

-
-
-

Text formatting tags

-
    -
  • To make some text bold, enclose it in [b][/b]:
    - [b]Hello World[/b]
    - Will become
    - Hello World -
    • -
-
    -
  • To italicize text, enclose it in [i][/i]:
    - [i]Hello World[/i]
    - Will become
    - Hello World -
    • -
-
    -
  • To make some text strikethrough, enclose it in [s][/s]:
    - [s]Hello World[/s]
    - Will become
    - Hello World -
    • -
-
    -
  • To underline some text, enclose it in [u][/u]:
    - [u]Hello World[/u]
    - Will become
    - Hello World -
    • -
-
    -
  • To make some text {{ "[big]big[/big]" | babycode | safe }}, enclose it in [big][/big]:
    - [big]Hello World[/big]
    - Will become
    - {{ "[big]Hello World[/big]" | babycode | safe }} -
  • Similarly, you can make text {{ "[small]small[/small]" | babycode | safe }} with [small][/small]:
    - [small]Hello World[/small]
    - Will become
    - {{ "[small]Hello World[/small]" | babycode | safe }} -
    • -
-
    -
  • You can change the text color by using [color][/color]:
    - [color=red]Red text[/color]
    - [color=white]White text[/color]
    - [color=#3b08f0]Blueish text[/color]
    - Will become
    - {{ "[color=red]Red text[/color]" | babycode | safe }}
    - {{ "[color=white]White text[/color]" | babycode | safe }}
    - {{ "[color=#3b08f0]Blueish text[/color]" | babycode | safe }}
    -
    • -
-
    -
  • You can center text by enclosing it in [center][/center]:
    - [center]Hello World[/center]
    - Will become
    - {{ "[center]Hello World[/center]" | babycode | safe }} -
    • -
  • You can right-align text by enclosing it in [right][/right]:
    - [right]Hello World[/right]
    - Will become
    - {{ "[right]Hello World[/right]" | babycode | safe }} -
    • - Note: the center and right tags will break the paragraph. See Paragraph rules for more details. -
-
-
-

Emoji

-

There are a few emoji in the style of old forum emotes:

- - - - - - {% for emoji in __emoji %} - - - - - {% endfor %} -
Short codeEmoji result
{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }}{{ __emoji[emoji] | safe }}
-

Special thanks to the Forumoji project and its contributors for these graphics.

-
-
-

Paragraph rules

-

Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:

- {{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }} - Will produce:
- {{ 'paragraph 1\n\nparagraph 2' | babycode | safe }} -

To break a line without starting a new paragraph, end a line with two spaces:

- {{ '[code]paragraph 1 \nstill paragraph 1[/code]' | babycode | safe }} - That will produce:
- {{ 'paragraph 1 \nstill paragraph 1' | babycode | safe }} -

Additionally, the following tags will break into a new paragraph:

-
    -
  • [code] (code block, not inline);
    • -
  • [img];
    • -
  • [center];
    • -
  • [right];
    • -
  • [ul] and [ol];
    • -
  • [quote].
    • -
-
-
- -

Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use
[url=https://example.com]Link label[/url]:
- Link label

-
-
-

Attaching an image

-

To add an image to your post, use the [img] tag:
- [img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img] - {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }} -

-

The attribute is the image URL. The text inside the tag will become the image's alt text.

-

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.

-

Multiple images attached to a post can be clicked to open a dialog to view them.

-
-
-

Adding code blocks

- {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %} -

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]your code here[/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:

- {{ ('[code]%s[/code]' % code) | babycode | safe }} -

Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: [code=gdscript]

- {{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}} -

A full list of languages that can be highlighted is available here (the short names column).

-

Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}

-

Babycodes are not parsed inside code blocks.

-
-
-

Quoting

-

Text enclosed within [quote][/quote] will look like a quote:

-
A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.
-
-
-

Lists

- {% 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]' %} -

There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with [ol][/ol] tags, and unordered with [ul][/ul]. Every new paragraph according to the usual paragraph rules will create a new list item. For example:

- {{ ('[code]%s[/code]' % list) | babycode | safe }} - Will produce the following list: - {{ list | babycode | safe }} -
-
-

Spoilers

- {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %} -

You can make a section collapsible by using the [spoiler] tag:

- {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }} - Will produce: - {{ spoiler | babycode | safe }} - All other tags are supported inside spoilers. -
-
-

Mentioning users

-

You can mention users by their username (not their display name) by using @username. A user's username is always shown below their avatar and display name on their posts and their user page.

-

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 @ symbol if they don't:

- @user-without-display-name - User with display name - Your display name -

Mentioning a user does not notify them. It is simply a way to link to their profile in your posts.

-
-
-

Void tags

-

The special void tags [lb], [rb], and [@] will appear as the literal characters [, ], and @ respectively. Unlike other tags, they are self-contained and have no closing equivalent.

-
    - {% 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]" %} -
  • [lb] and [rb] allow you to use square brackets without them being interpreted as Babycode: - {{ ("[code]" + lbrb + "[/code]") | babycode | safe }} - Will result in:
    - {{ lbrb | babycode | safe }} -
    • -
  • The [@] tag allows you to use the @ symbol without it being turned into a mention.
    • -
-
- {% endset %} - {{ sections | safe }} -
-
-

Table of contents

- {% set toc = sections | extract_h2 %} - -
-
+{% call() guide_sections() %} +
+

What is babycode?

+

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.

+

A tag is a short name enclosed in square brackets. Tags can be opening tags, like [b] or closing tags, like [/b]. Anything inserted between matching opening and closing tags is known as the tag's content.

+

Some tags can provide more specific instructions using an attribute. An attribute is added to the opening tag with an equals sign (=). This allows you to specify details like a particular color or a link's address.

+
+
+

Text formatting tags

+ + + + + + + +
+
+

Emoji

+

There are a few emoji in the style of old forum emotes:

+ + + + + + {% for emoji in __emoji %} + + + + + {% endfor %} +
Short codeEmoji result
{{ ("[code]:%s:[/code]" % emoji) | babycode | safe }}{{ __emoji[emoji] | safe }}
+

Special thanks to the Forumoji project and its contributors for these graphics.

+
+
+

Paragraph rules

+

Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:

+ {{ '[code]paragraph 1\n\nparagraph 2[/code]' | babycode | safe }} + Will produce:
+ {{ 'paragraph 1\n\nparagraph 2' | babycode | safe }} +

To break a line without starting a new paragraph, end a line with two spaces:

+ {{ '[code]paragraph 1 \nstill paragraph 1[/code]' | babycode | safe }} + That will produce:
+ {{ 'paragraph 1 \nstill paragraph 1' | babycode | safe }} +

Additionally, the following tags will break into a new paragraph:

+ +
+
+ +

Loose links (starting with http:// or https://) will automatically get converted to clickable links. To add a label to a link, use
[url=https://example.com]Link label[/url]:
+ Link label

+
+
+

Attaching an image

+

To add an image to your post, use the [img] tag:
+ [img=https://forum.poto.cafe/avatars/default.webp]the Python logo with a cowboy hat[/img] + {{ '[img=/static/avatars/default.webp]the Python logo with a cowboy hat[/img]' | babycode | safe }} +

+

The attribute is the image URL. The text inside the tag will become the image's alt text.

+

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.

+

Multiple images attached to a post can be clicked to open a dialog to view them.

+
+
+

Adding code blocks

+ {% set code = 'func _ready() -> void:\n\tprint("hello world!")' %} +

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]your code here[/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:

+ {{ ('[code]%s[/code]' % code) | babycode | safe }} +

Optionally, you can enable syntax highlighting by specifying the language in the attribute like this: [code=gdscript]

+ {{ ('[code=gdscript]%s[/code]' % code) | babycode | safe}} +

A full list of languages that can be highlighted is available here (the short names column).

+

Inline code tags look like this: {{ '[code]Inline code[/code]' | babycode | safe }}

+

Babycodes are not parsed inside code blocks.

+
+
+

Quoting

+

Text enclosed within [quote][/quote] will look like a quote:

+
A man provided with paper, pencil, and rubber, and subject to strict discipline, is in effect a universal machine.
+
+
+

Lists

+ {% 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]' %} +

There are two kinds of lists, ordered (1, 2, 3, ...) and unordered (bullet points). Ordered lists are made with [ol][/ol] tags, and unordered with [ul][/ul]. Every new paragraph according to the usual paragraph rules will create a new list item. For example:

+ {{ ('[code]%s[/code]' % list) | babycode | safe }} + Will produce the following list: + {{ list | babycode | safe }} +
+
+

Spoilers

+ {% set spoiler = "[spoiler=Major Metal Gear Spoilers]Snake dies[/spoiler]" %} +

You can make a section collapsible by using the [spoiler] tag:

+ {{ ("[code]\n%s[/code]" % spoiler) | babycode | safe }} + Will produce: + {{ spoiler | babycode | safe }} + All other tags are supported inside spoilers. +
+
+

Mentioning users

+

You can mention users by their username (not their display name) by using @username. A user's username is always shown below their avatar and display name on their posts and their user page.

+

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 @ symbol if they don't:

+ @user-without-display-name + User with display name + Your display name +

Mentioning a user does not notify them. It is simply a way to link to their profile in your posts.

+
+
+

Void tags

+

The special void tags [lb], [rb], and [@] will appear as the literal characters [, ], and @ respectively. Unlike other tags, they are self-contained and have no closing equivalent.

+ +
+{% endcall %} {% endblock %}