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

add a proper babycode help page

Browse Source
This commit is contained in:
Lera Elvoé
2025-06-01 10:53:37 +03:00
parent db8d32113c
commit d227932878
9 changed files with 335 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
views/common/babycode-editor-component.etlua
View File

@ -11,6 +11,7 @@
<button type=button id="post-editor-code" title="Insert Code block">Code</button>
</span>
<textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
<a href="<%= url_for("babycode_guide") %>" target="_blank">babycode guide</a>
</div>
<div class="tab-content" id="tab-preview">
<div id="babycode-preview-errors-container">Type something!</div>

1
views/common/babycode-editor.etlua
View File

@ -12,5 +12,4 @@
<a class="linkbutton warn" href="<%= cancel_url %>">Cancel</a>
<% end %>
</span>
<% render("views.common.bbcode_help") %>
</form>

67
views/common/bbcode_help.etlua
View File

@ -1,67 +0,0 @@
<details>
<summary>babycode guide</summary>
<ul>
<li>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)</li>
<li>
<details>
<summary>Forumoji (emoticons)</summary>
<ul>
<li><img class="emoji" src="/emoji/smile.png" alt="smile" title=":smile:"> - <code class=inline-code>:): </code></li>
<li><img class="emoji" src="/emoji/frown.png" alt="frown" title=":frown:"> - <code class=inline-code>:(: </code></li>
<li><img class="emoji" src="/emoji/grin.png" alt="grin" title=":grin:"> - <code class=inline-code>:D: </code></li>
<li><img class="emoji" src="/emoji/neutral.png" alt="neutral" title=":neutral:"> - <code class=inline-code>:|: </code></li>
<li><img class="emoji" src="/emoji/angry.png" alt="angry" title=":angry:"> - <code class=inline-code>:angry: </code></li>
<li><img class="emoji" src="/emoji/sob.png" alt="sob" title=":sob:"> - <code class=inline-code>:,: :cry: :sob: :T: </code></li>
<li><img class="emoji" src="/emoji/surprised.png" alt="surprised" title=":surprised:"> - <code class=inline-code>:o: :O: </code></li>
<li><img class="emoji" src="/emoji/think.png" alt="think" title=":think:"> - <code class=inline-code>:hmm: :think: :thinking: </code></li>
<li><img class="emoji" src="/emoji/tongue.png" alt="tongue" title=":tongue:"> - <code class=inline-code>:p: :P: </code></li>
<li><img class="emoji" src="/emoji/wink.png" alt="wink" title=":wink:"> - <code class=inline-code>:;: :wink: </code></li>
<li><img class="emoji" src="/emoji/imp.png" alt="imp" title=":imp:"> - <code class=inline-code>:imp: </code></li>
<li><img class="emoji" src="/emoji/impangry.png" alt="impangry" title=":impangry:"> - <code class=inline-code>:angryimp: :impangry: </code></li>
<li><img class="emoji" src="/emoji/lobster.png" alt="lobster" title=":lobster:"> - <code class=inline-code>:lobster:</code></li>
<li><img class="emoji" src="/emoji/pensive.png" alt="pensive" title=":pensive:"> - <code class=inline-code>:pensive:</code></li>
<li><img class="emoji" src="/emoji/weary.png" alt="weary" title=":weary:"> - <code class=inline-code>:weary:</code></li>
<li><img class="emoji" src="/emoji/smiletear.png" alt="smiletear" title=":smiletear:"> - <code class=inline-code>:smiletear: :crytear:</code></li>
</ul>
</details>
</li>
<li>Loose links will be converted to clickable links automatically</li>
<li>[b]<b>bold</b>[/b]</li>
<li>[i]<i>italic</i>[/i]</li>
<li>[s]<del>strikethrough</del>[/s]</li>
<li>[img=https://example.com/some-image]alt text[/img] creates an image</li>
<li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
<li>
[ul] and [ol] are unordered and ordered lists:
<details>
<summary>Show list example</summary>
<pre><span class="copy-code-container"><button type=button class="copy-code" value="[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]">Copy</button></span><code>[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></pre>
</details>
</li>
<li>
[code]with<br>line breaks[/code] will produce a code block:
<details>
<summary>Show code block example</summary>
<pre><span class="copy-code-container"><button type=button class="copy-code" value="with
line breaks">Copy</button></span><code>with
line breaks</code></pre>
</details>
</li>
<li>[code]<code class="inline-code">with no line breaks</code>[/code]</li>
<li><code class="inline-code">---</code> will create a horizontal rule for separating content</li>
</ul>
</details>