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 = "
"
+local emoji_template = "
"
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 @@
+
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.
+[b][/b]:[i][/i]:[s][/s]: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: | +![]() |
+
| :(: | +![]() |
+
| :D: | +![]() |
+
| :imp: | +![]() |
+
| :impangry: :angryimp: | +![]() |
+
| :lobster: | +![]() |
+
| :|: | +![]() |
+
| :pensive: | +![]() |
+
| :): | +![]() |
+
| :smiletear: :crytear: | +![]() |
+
| :,: :T: :cry: :sob: | +![]() |
+
| :o: :O: | +![]() |
+
| :hmm: :think: :thinking: | +![]() |
+
| :P: :p: | +![]() |
+
| :weary: | +![]() |
+
| :;: :wink: | +![]() |
+
Special thanks to the Forumoji project and its contributors for these graphics.
+Line breaks in babycode work more like Markdown: to start a new paragraph, use two line breaks:
+paragraph 1
+
+paragraph 2
+ Will produce:To break a line without starting a new paragraph, end a line with two spaces:
+paragraph 1
+still paragraph 1
+ That will produce: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
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]
+
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.
+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 %>
+ Babycodes are not parsed inside code blocks.
+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.+
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]
- :):
- :(:
- :D:
- :|:
- :angry:
- :,: :cry: :sob: :T:
- :o: :O:
- :hmm: :think: :thinking:
- :p: :P:
- :;: :wink:
- :imp:
- :angryimp: :impangry:
- :lobster:
- :pensive:
- :weary:
- :smiletear: :crytear:[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]
- with
-line breaks
- with no line breaks[/code]--- will create a horizontal rule for separating content