public/views/shared/help-modal.ejs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

<!-- 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://github.com/codimd/server/issues" target="_blank"><i class="fa fa-tag fa-fw"></i> <%= __('Report an issue') %></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://translate.codimd.org" target="_blank"><i class="fa fa-language fa-fw"></i> <%= __('Help us translating on %s', 'POEditor') %></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>