From d2279328782d03d6e2714f30ec78a7bad8b9b92c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lera=20Elvo=C3=A9?= Date: Sun, 1 Jun 2025 10:53:37 +0300 Subject: [PATCH] add a proper babycode help page --- app.lua | 6 + data/static/style.css | 53 +++++ lib/babycode-emoji.lua | 55 +++--- sass/style.scss | 55 ++++++ views/babycode.etlua | 192 +++++++++++++++++++ views/common/babycode-editor-component.etlua | 1 + views/common/babycode-editor.etlua | 1 - views/common/bbcode_help.etlua | 67 ------- views/threads/create.etlua | 1 - 9 files changed, 335 insertions(+), 96 deletions(-) create mode 100644 views/babycode.etlua delete mode 100644 views/common/bbcode_help.etlua diff --git a/app.lua b/app.lua index 9d6d290..76e88af 100644 --- a/app.lua +++ b/app.lua @@ -65,4 +65,10 @@ app:get("/", function(self) return {redirect_to = self:url_for("all_topics")} end) +app:get("babycode_guide", "/babycode", function(self) + self.me = util.get_logged_in_user_or_transient(self) + self.page_title = "babycode guide" + return {render = "babycode"} +end) + return app diff --git a/data/static/style.css b/data/static/style.css index e00bb75..677ced4 100644 --- a/data/static/style.css +++ b/data/static/style.css @@ -154,6 +154,7 @@ pre code { border-left: 10px solid rgb(229.84, 231.92, 227.28); padding: 20px; overflow: scroll; + tab-size: 4; } .inline-code { @@ -456,6 +457,58 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus margin-right: 25%; } +.babycode-guide-section { + background-color: #c1ceb1; + padding: 5px 20px; + border: 1px solid black; + padding-right: 25%; +} + +.babycode-guide-container { + display: grid; + grid-template-columns: 1.5fr 300px; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: "guide-topics guide-toc"; +} + +.guide-topics { + grid-area: guide-topics; + overflow: hidden; +} + +.guide-toc { + grid-area: guide-toc; + position: sticky; + top: 100px; + align-self: start; + padding: 10px; + border-bottom-right-radius: 8px; + background-color: rgb(177, 206, 204.5); + border-right: 1px solid black; + border-top: 1px solid black; + border-bottom: 1px solid black; +} + +.emoji-table tr td { + text-align: center; +} + +.emoji-table tr th { + padding-left: 50px; + padding-right: 50px; +} + +.emoji-table { + margin: auto; +} + +.emoji-table, th, td { + border: 1px solid black; + border-collapse: collapse; +} + .topic { display: grid; grid-template-columns: 1.5fr 64px; diff --git a/lib/babycode-emoji.lua b/lib/babycode-emoji.lua index b2fe232..a10a42f 100644 --- a/lib/babycode-emoji.lua +++ b/lib/babycode-emoji.lua @@ -1,46 +1,47 @@ -local emoji_template = " \"$NAME\" " +local emoji_template = " \"$NAME\" " local emoji_pat = "%$NAME" +local name_pat = "%$CODE" return { - ["angry"] = emoji_template:gsub(emoji_pat, "angry"), + ["angry"] = emoji_template:gsub(emoji_pat, "angry"):gsub(name_pat, "angry"), - ["("] = emoji_template:gsub(emoji_pat, "frown"), + ["("] = emoji_template:gsub(emoji_pat, "frown"):gsub(name_pat, "("), - ["D"] = emoji_template:gsub(emoji_pat, "grin"), + ["D"] = emoji_template:gsub(emoji_pat, "grin"):gsub(name_pat, "D"), - ["imp"] = emoji_template:gsub(emoji_pat, "imp"), + ["imp"] = emoji_template:gsub(emoji_pat, "imp"):gsub(name_pat, "imp"), - ["angryimp"] = emoji_template:gsub(emoji_pat, "impangry"), - ["impangry"] = emoji_template:gsub(emoji_pat, "impangry"), + ["angryimp"] = emoji_template:gsub(emoji_pat, "impangry"):gsub(name_pat, "angryimp"), + ["impangry"] = emoji_template:gsub(emoji_pat, "impangry"):gsub(name_pat, "impangry"), - ["lobster"] = emoji_template:gsub(emoji_pat, "lobster"), + ["lobster"] = emoji_template:gsub(emoji_pat, "lobster"):gsub(name_pat, "lobster"), - ["|"] = emoji_template:gsub(emoji_pat, "neutral"), + ["|"] = emoji_template:gsub(emoji_pat, "neutral"):gsub(name_pat, "|"), - ["pensive"] = emoji_template:gsub(emoji_pat, "pensive"), + ["pensive"] = emoji_template:gsub(emoji_pat, "pensive"):gsub(name_pat, "pensive"), - [")"] = emoji_template:gsub(emoji_pat, "smile"), + [")"] = emoji_template:gsub(emoji_pat, "smile"):gsub(name_pat, ")"), - ["smiletear"] = emoji_template:gsub(emoji_pat, "smiletear"), - ["crytear"] = emoji_template:gsub(emoji_pat, "smiletear"), + ["smiletear"] = emoji_template:gsub(emoji_pat, "smiletear"):gsub(name_pat, "smiletear"), + ["crytear"] = emoji_template:gsub(emoji_pat, "smiletear"):gsub(name_pat, "crytear"), - [","] = emoji_template:gsub(emoji_pat, "sob"), - ["T"] = emoji_template:gsub(emoji_pat, "sob"), - ["cry"] = emoji_template:gsub(emoji_pat, "sob"), - ["sob"] = emoji_template:gsub(emoji_pat, "sob"), + [","] = emoji_template:gsub(emoji_pat, "sob"):gsub(name_pat, ","), + ["T"] = emoji_template:gsub(emoji_pat, "sob"):gsub(name_pat, "T"), + ["cry"] = emoji_template:gsub(emoji_pat, "sob"):gsub(name_pat, "cry"), + ["sob"] = emoji_template:gsub(emoji_pat, "sob"):gsub(name_pat, "sob"), - ["o"] = emoji_template:gsub(emoji_pat, "surprised"), - ["O"] = emoji_template:gsub(emoji_pat, "surprised"), + ["o"] = emoji_template:gsub(emoji_pat, "surprised"):gsub(name_pat, "o"), + ["O"] = emoji_template:gsub(emoji_pat, "surprised"):gsub(name_pat, "O"), - ["hmm"] = emoji_template:gsub(emoji_pat, "think"), - ["think"] = emoji_template:gsub(emoji_pat, "think"), - ["thinking"] = emoji_template:gsub(emoji_pat, "think"), + ["hmm"] = emoji_template:gsub(emoji_pat, "think"):gsub(name_pat, "hmm"), + ["think"] = emoji_template:gsub(emoji_pat, "think"):gsub(name_pat, "think"), + ["thinking"] = emoji_template:gsub(emoji_pat, "think"):gsub(name_pat, "thinking"), - ["P"] = emoji_template:gsub(emoji_pat, "tongue"), - ["p"] = emoji_template:gsub(emoji_pat, "tongue"), + ["P"] = emoji_template:gsub(emoji_pat, "tongue"):gsub(name_pat, "P"), + ["p"] = emoji_template:gsub(emoji_pat, "tongue"):gsub(name_pat, "p"), - ["weary"] = emoji_template:gsub(emoji_pat, "weary"), + ["weary"] = emoji_template:gsub(emoji_pat, "weary"):gsub(name_pat, "weary"), - [";"] = emoji_template:gsub(emoji_pat, "wink"), - ["wink"] = emoji_template:gsub(emoji_pat, "wink"), + [";"] = emoji_template:gsub(emoji_pat, "wink"):gsub(name_pat, ";"), + ["wink"] = emoji_template:gsub(emoji_pat, "wink"):gsub(name_pat, "wink"), } diff --git a/sass/style.scss b/sass/style.scss index 07b20aa..a461982 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -197,6 +197,7 @@ pre code { border-left: 10px solid $lighter; padding: 20px; overflow: scroll; + tab-size: 4; } .inline-code { @@ -467,6 +468,60 @@ input[type="text"], input[type="password"], textarea, select { margin-right: 25%; } +.babycode-guide-section { + background-color: $accent_color; + padding: 5px 20px; + border: 1px solid black; + padding-right: 25%; +} + +.babycode-guide-container { + display: grid; + grid-template-columns: 1.5fr 300px; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-auto-flow: row; + grid-template-areas: + "guide-topics guide-toc"; +} + +.guide-topics { + grid-area: guide-topics; + overflow: hidden; +} + +.guide-toc { + grid-area: guide-toc; + position: sticky; + top: 100px; + align-self: start; + padding: 10px; + // border-top-right-radius: 16px; + border-bottom-right-radius: 8px; + background-color: $button_color; + border-right: 1px solid black; + border-top: 1px solid black; + border-bottom: 1px solid black; +} + +.emoji-table tr td { + text-align: center; +} + +.emoji-table tr th { + padding-left: 50px; + padding-right: 50px; +} + +.emoji-table { + margin: auto; +} + +.emoji-table, th, td { + border: 1px solid black; + border-collapse: collapse; +} + .topic { display: grid; grid-template-columns: 1.5fr 64px; diff --git a/views/babycode.etlua b/views/babycode.etlua new file mode 100644 index 0000000..6621380 --- /dev/null +++ b/views/babycode.etlua @@ -0,0 +1,192 @@ +
+

Babycode guide

+
+<% local tocs = {} %> +
+
+
+

What is babycode?

+ <% table.insert(tocs, {"What is babycode?", "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.

+
+
+

Text formatting tags

+ <% table.insert(tocs, {"Text formatting tags", "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 +
+
+
+

Emotes

+ <% table.insert(tocs, {"Emotes", "emoji"}) %> +

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

+ <% --[[ we'll pretend like i will totally refactor emojis and generate this table dynamically in the future. clown emoji ]]%> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Short code(s)Emoji result
:angry:angry
:(:frown
:D:grin
:imp:imp
:impangry: :angryimp:impangry
:lobster:lobster
:|:neutral
:pensive:pensive
:):smile
:smiletear: :crytear:smiletear
:,: :T: :cry: :sob:sob
:o: :O:surprised
:hmm: :think: :thinking:think
:P: :p:tongue
:weary:weary
:;: :wink:wink
+

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

+
+
+

Paragraph rules

+ <% table.insert(tocs, {"Paragraph rules", "paragraph-rules"}) %> +

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

+ 
paragraph 1
+
+paragraph 2
+ Will produce:
+ paragraph 1

paragraph 2 +

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

+ 
paragraph 1  
+still paragraph 1
+ That will produce:
+ paragraph 1
still paragraph 1 +
+
+ + <% table.insert(tocs, {"Links", "links"}) %> +

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

+ <% table.insert(tocs, {"Attaching an image", "attaching-an-image"}) %> +

To add an image to your post, use the [img] tag:
+ [img=https://forum.poto.cafe/avatars/default.webp]the Lua logo with a cowboy hat[/img] +

the Lua logo with a cowboy hat

+

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.

+
+
+

Adding code blocks

+ <% table.insert(tocs, {"Adding code blocks", "adding-code-blocks"}) %> +

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:

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

Babycodes are not parsed inside code blocks.

+
+
+

Quoting

+ <% table.insert(tocs, {"Quoting", "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

+ <% table.insert(tocs, {"Lists", "lists"}) %> +

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:

+ 
[ul]
+item 1
+
+item 2
+
+item 3  
+still item 3 (break line without inserting a new item by using two spaces at the end of a line)
+[/ul]

+ Will produce the following list: +
    +
  • item 1
    • +
  • item 2
    • +
  • item 3
    still item 3 (break line without inserting a new item by using two spaces at the end of a line)
    • +
+
+
+
+

Table of contents

+
    + <% for _, t in ipairs(tocs) do %> +
  • <%= t[1] %>
    • + <% end %> +
+
+
diff --git a/views/common/babycode-editor-component.etlua b/views/common/babycode-editor-component.etlua index 55ac41a..0413bce 100644 --- a/views/common/babycode-editor-component.etlua +++ b/views/common/babycode-editor-component.etlua @@ -11,6 +11,7 @@ + " target="_blank">babycode guide
Type something!
diff --git a/views/common/babycode-editor.etlua b/views/common/babycode-editor.etlua index 4289602..0160bc5 100644 --- a/views/common/babycode-editor.etlua +++ b/views/common/babycode-editor.etlua @@ -12,5 +12,4 @@ Cancel <% end %> - <% render("views.common.bbcode_help") %> diff --git a/views/common/bbcode_help.etlua b/views/common/bbcode_help.etlua deleted file mode 100644 index 02b649a..0000000 --- a/views/common/bbcode_help.etlua +++ /dev/null @@ -1,67 +0,0 @@ -
- babycode guide -
    -
  • To start a new paragraph, separate the paragraphs with an empty line. To break a line without starting a paragraph, end a line with two spaces. (same rules as Markdown)
    • -
  • -
    - Forumoji (emoticons) -
      -
    • smile - :):
      • -
    • frown - :(:
      • -
    • grin - :D:
      • -
    • neutral - :|:
      • -
    • angry - :angry:
      • -
    • sob - :,: :cry: :sob: :T:
      • -
    • surprised - :o: :O:
      • -
    • think - :hmm: :think: :thinking:
      • -
    • tongue - :p: :P:
      • -
    • wink - :;: :wink:
      • -
    • imp - :imp:
      • -
    • impangry - :angryimp: :impangry:
      • -
    • lobster - :lobster:
      • -
    • pensive - :pensive:
      • -
    • weary - :weary:
      • -
    • smiletear - :smiletear: :crytear:
      • -
    -
    -
    • -
  • Loose links will be converted to clickable links automatically
    • -
  • [b]bold[/b]
    • -
  • [i]italic[/i]
    • -
  • [s]strikethrough[/s]
    • -
  • [img=https://example.com/some-image]alt text[/img] creates an image
    • -
  • [url=https://example.com]labeled URL[/url]
    • -
  • - [ul] and [ol] are unordered and ordered lists: -
    - Show list example - 
    [ul]
-item 1
-
-item 2
-
-item 3  
-still item 3 (break line without inserting a new item by using two spaces at the end of a line)
-[/ul]
    -
    -
    • -
  • - [code]with
    line breaks[/code] will produce a code block: -
    - Show code block example - 
    with
-line breaks
    -
    -
    • -
  • [code]with no line breaks[/code]
    • -
  • --- will create a horizontal rule for separating content
    • -
-
diff --git a/views/threads/create.etlua b/views/threads/create.etlua index a7cffe5..dca0688 100644 --- a/views/threads/create.etlua +++ b/views/threads/create.etlua @@ -11,7 +11,6 @@
<% render("views.common.babycode-editor-component", {ta_name = "initial_post"}) %> - <% render "views.common.bbcode_help" %>