porom/views/babycode.etlua

<div class=darkbg>
  <h1 class="thread-title">Babycode guide</h1>
</div>
<% local tocs = {} %>
<div class="babycode-guide-container">
  <div class="guide-topics">
    <section class="babycode-guide-section">
      <h2 id="what-is-babycode">What is babycode?</h2>
      <% table.insert(tocs, {"What is babycode?", "what-is-babycode"}) %>
      <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>
    </section>
    <section class="babycode-guide-section">
      <h2 id="text-formatting-tags">Text formatting tags</h2>
      <% table.insert(tocs, {"Text formatting tags", "text-formatting-tags"}) %>
      <ul>
        <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>
      </ul>
      <ul>
        <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>
      </ul>
      <ul>
        <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>
      </ul>
    </section>
    <section class="babycode-guide-section">
      <h2 id="emoji">Emotes</h2>
      <% table.insert(tocs, {"Emotes", "emoji"}) %>
      <p>There are a few emoji in the style of old forum emotes:</p>
      <% --[[ we'll pretend like i will totally refactor emojis and generate this table dynamically in the future. clown emoji ]]%>
      <table class="emoji-table">
        <tr>
          <th>Short code(s)</th>
          <th>Emoji result</th>
        </tr>
        <tr>
          <td>:angry:</td>
          <td><img class=emoji src="/emoji/angry.png" alt="angry" title=":angry:"></td>
        </tr>
        <tr>
          <td>:(:</td>
          <td><img class=emoji src="/emoji/frown.png" alt="frown" title=":(:"></td>
        </tr>
        <tr>
          <td>:D:</td>
          <td><img class=emoji src="/emoji/grin.png" alt="grin" title=":D:"></td>
        </tr>
        <tr>
          <td>:imp:</td>
          <td><img class=emoji src="/emoji/imp.png" alt="imp" title=":imp:"></td>
        </tr>
        <tr>
          <td>:impangry: :angryimp:</td>
          <td><img class=emoji src="/emoji/impangry.png" alt="impangry" title=":impangry:"></td>
        </tr>
        <tr>
          <td>:lobster:</td>
          <td><img class=emoji src="/emoji/lobster.png" alt="lobster" title=":lobster:"></td>
        </tr>
        <tr>
          <td>:|:</td>
          <td><img class=emoji src="/emoji/neutral.png" alt="neutral" title=":|:"></td>
        </tr>
        <tr>
          <td>:pensive:</td>
          <td><img class=emoji src="/emoji/pensive.png" alt="pensive" title=":pensive:"></td>
        </tr>
        <tr>
          <td>:):</td>
          <td><img class=emoji src="/emoji/smile.png" alt="smile" title=":):"></td>
        </tr>
        <tr>
          <td>:smiletear: :crytear:</td>
          <td><img class=emoji src="/emoji/smiletear.png" alt="smiletear" title=":smiletear:"></td>
        </tr>
        <tr>
          <td>:,: :T: :cry: :sob:</td>
          <td><img class=emoji src="/emoji/sob.png" alt="sob" title=":sob:"></td>
        </tr>
        <tr>
          <td>:o: :O:</td>
          <td><img class=emoji src="/emoji/surprised.png" alt="surprised" title=":o:"></td>
        </tr>
        <tr>
          <td>:hmm: :think: :thinking:</td>
          <td><img class=emoji src="/emoji/think.png" alt="think" title=":think:"></td>
        </tr>
        <tr>
          <td>:P: :p:</td>
          <td><img class=emoji src="/emoji/tongue.png" alt="tongue" title=":p:"></td>
        </tr>
        <tr>
          <td>:weary:</td>
          <td><img class=emoji src="/emoji/weary.png" alt="weary" title=":weary:"></td>
        </tr>
        <tr>
          <td>:;: :wink:</td>
          <td><img class=emoji src="/emoji/wink.png" alt="wink" title=":wink:"></td>
        </tr>
      </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="babycode-guide-section">
      <h2 id="paragraph-rules">Paragraph rules</h2>
      <% table.insert(tocs, {"Paragraph rules", "paragraph-rules"}) %>
      <p>Line breaks in babycode work like Markdown: to start a new paragraph, use two line breaks:</p>
      <pre><span class="copy-code-container"><button type=button class="copy-code" value="paragraph 1

paragraph 2">Copy</button></span><code>paragraph 1

paragraph 2</code></pre>
      Will produce:<br>
      paragraph 1<br><br>paragraph 2
      <p>To break a line without starting a new paragraph, end a line with two spaces:</p>
      <pre><span class="copy-code-container"><button type=button class="copy-code" value="paragraph 1  
still paragraph 1">Copy</button></span><code>paragraph 1  
still paragraph 1</code></pre>
      That will produce:<br>
      paragraph 1<br>still paragraph 1
    </section>
    <section class="babycode-guide-section">
      <h2 id="links">Links</h2>
      <% table.insert(tocs, {"Links", "links"}) %>
      <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="babycode-guide-section">
      <h2 id="attaching-an-image">Attaching an image</h2>
      <% table.insert(tocs, {"Attaching an image", "attaching-an-image"}) %>
      <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 Lua logo with a cowboy hat[/img]</code>
      <div class="post-img-container"><img class="block-img" src="/avatars/default.webp" alt="the Lua logo with a cowboy hat"></div></p>
      <p>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.</p>
    </section>
    <section class="babycode-guide-section">
      <h2 id="adding-code-blocks">Adding code blocks</h2>
      <% table.insert(tocs, {"Adding code blocks", "adding-code-blocks"}) %>
      <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>
      <% local code = 'func _ready() -> void:\n\tprint("hello world!")' %>
      <pre><span class="copy-code-container"><button type=button class="copy-code" value="<%= code %>">Copy</button></span><code><%= code %></code></pre>
      <p>Babycodes are not parsed inside code blocks.</p>
    </section>
    <section class="babycode-guide-section">
      <h2 id="quoting">Quoting</h2>
      <% table.insert(tocs, {"Quoting", "quoting"}) %>
      <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="babycode-guide-section">
      <h2 id="lists">Lists</h2>
      <% table.insert(tocs, {"Lists", "lists"}) %>
      <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>
      <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><br>
      Will produce the following list:
      <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3<br>still item 3 (break line without inserting a new item by using two spaces at the end of a line)</li>
      </ul>
    </section>
  </div>
  <div class="guide-toc">
    <h2>Table of contents</h2>
    <ul>
      <% for _, t in ipairs(tocs) do %>
        <li><a href="#<%= t[2] %>"><%= t[1] %></a></li>
      <% end %>
    </ul>
  </div>
</div>