HackMD/public/views/shared/help-modal.ejs
Sheogorath 454b39ac10
Add community forum to help section
We have a community forum and want to use it for users support and to
bring developers and end-users together. In order to achieve this, it
would be helpful to inform users about its existence.

This patch adds the community forum as resource to the help section and
aligns it along the Matrix channel and GitHub issue tracker.

Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
2019-04-12 12:29:56 +02:00

151 lines
9.5 KiB
Text

<!-- help modal -->
<div class="modal fade help-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="mySmallModalLabel"><i class="fa fa-question-circle"></i> <%= __('Help') %></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><%= __('Contacts') %></h3>
</div>
<div class="panel-body">
<a href="https://community.codimd.org" target="_blank"><i class="fa fa-users fa-fw"></i> <%= __('Join the community') %></a>
<br>
<a href="https://riot.im/app/#/room/#codimd:matrix.org" target="_blank"><i class="fa fa-hashtag fa-fw"></i> <%= __('Meet us on %s', 'Matrix') %></a>
<br>
<a href="https://github.com/codimd/server/issues" target="_blank"><i class="fa fa-tag fa-fw"></i> <%= __('Report an issue') %></a>
<br>
<a href="https://translate.codimd.org" target="_blank"><i class="fa fa-language fa-fw"></i> <%= __('Help us translating') %></a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><%= __('Documents') %></h3>
</div>
<div class="panel-body">
<a href="./features" title="Features" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> <%= __('Features') %></a>
<br>
<a href="./yaml-metadata" title="YAML Metadata" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> <%= __('YAML Metadata') %></a>
<br>
<a href="./slide-example" title="Slide Example" target="_blank"><i class="fa fa-dot-circle-o fa-fw"></i> <%= __('Slide Example') %></a>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><%= __('Cheatsheet') %></h3>
</div>
<div class="panel-body" style="height: calc(100vh - 215px); overflow: auto;">
<table class="table table-condensed table-cheatsheet">
<thead>
<tr>
<th><%= __('Example') %></th>
<th><%= __('Syntax') %></th>
</tr>
</thead>
<tbody class="markdown-body" style="font-family: inherit; font-size: 14px; padding: 0; max-width: inherit;">
<tr>
<td><%= __('Header') %></td>
<td># <%= __('Header') %></td>
</tr>
<tr>
<td><ul><li><%= __('Unordered List') %></li></ul></td>
<td>- <%= __('Unordered List') %></td>
</tr>
<tr>
<td><ol><li><%= __('Ordered List') %></li></ol></td>
<td>1. <%= __('Ordered List') %></td>
</tr>
<tr>
<td><ul><li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled><label></label><%= __('Todo List') %></li></ul></td>
<td>- [ ] <%= __('Todo List') %></td>
</tr>
<tr>
<td><blockquote> <%= __('Blockquote') %></blockquote></td>
<td>> <%= __('Blockquote') %></td>
</tr>
<tr>
<td><strong><%= __('Bold font') %></strong></td>
<td>**<%= __('Bold font') %>**</td>
</tr>
<tr>
<td><i><%= __('Italics font') %></i></td>
<td>*<%= __('Italics font') %>*</td>
</tr>
<tr>
<td><s><%= __('Strikethrough') %></s></td>
<td>~~<%= __('Strikethrough') %>~~</td>
</tr>
<tr>
<td>19<sup>th</sup></td>
<td>19^th^</td>
</tr>
<tr>
<td>H<sub>2</sub>O</td>
<td>H~2~O</td>
</tr>
<tr>
<td><ins><%= __('Inserted text') %></ins></td>
<td>++<%= __('Inserted text') %>++</td>
</tr>
<tr>
<td><mark><%= __('Marked text') %></mark></td>
<td>==<%= __('Marked text') %>==</td>
</tr>
<tr>
<td><a><%= __('Link') %></a></td>
<td>[link text](https:// "title")</td>
</tr>
<tr>
<td><%= __('Image') %></td>
<td>![image alt](https:// "title")</td>
</tr>
<tr>
<td><code><%= __('Code') %></code></td>
<td>`<%= __('Code') %>`</td>
</tr>
<tr>
<td><pre style="border:none !important;"><code class="javascript hljs"><div class="wrapper"><div class="gutter linenumber"><span data-linenumber="1"></span></div><div class="code"><span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;
</div></div></code></pre></td>
<td>```javascript<br>var i = 0;<br>```</td>
</tr>
<tr>
<td><img align="absmiddle" alt=":smile:" class="emoji" src="./build/emojify.js/dist/images/basic/smile.png" title=":smile:"></img></td>
<td>:smile:</td>
</tr>
<tr>
<td><%= __('Externals') %></td>
<td>{%youtube youtube_id %}</td>
</tr>
<tr>
<td>L<sup>a</sup>T<sub>e</sub>X</td>
<td>$L^aT_eX$</td>
</tr>
<tr>
<td><div class="alert alert-info"><p><%= __('This is a alert area.') %></p></div></td>
<td>:::info<br><%= __('This is a alert area.') %><br>:::</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
table.table-cheatsheet tr > td:nth-child(2) {
font-family: "Source Code Pro", Consolas, monaco, monospace;
letter-spacing: 0.025em;
line-height: 1.25;
}
</style>