Tests/hedgedoc_org.md
... ...
@@ -0,0 +1,601 @@
1
+# Comparison of Hedgedoc Demo Page in Gollum
2
+[Hedgedoc Demo Page](https://demo.hedgedoc.org/features?view)
3
+
4
+---
5
+tags: features, cool, updated
6
+---
7
+# Features
8
+
9
+## Introduction
10
+
11
+**HedgeDoc** is a real-time, multi-platform collaborative markdown note editor.
12
+This means that you can write notes with other people on your **desktop**, **tablet** or even on the **phone**.
13
+You can sign-in via multiple auth providers like **Facebook**, **Twitter**, **GitHub** and many more on the [*homepage*](/).
14
+
15
+If you experience any *issues*, feel free to report it on [**GitHub**](https://github.com/hedgedoc/hedgedoc/issues).
16
+Or meet us on [**Matrix**](https://chat.hedgedoc.org) for dev-talk and interactive help.
17
+**Thank you very much!**
18
+
19
+## Workspace
20
+
21
+### Modes
22
+
23
+#### Desktop & Tablet
24
+
25
+<i class="fa fa-eye fa-fw"></i> View: See only the result.
26
+<i class="fa fa-columns fa-fw"></i> Both: See editor and result at the same time.
27
+<i class="fa fa-pencil fa-fw"></i> Edit: See only the editor.
28
+
29
+#### Mobile
30
+
31
+<i class="fa fa-eye fa-fw"></i> View: See only the result.
32
+<i class="fa fa-pencil fa-fw"></i> Edit: See only the editor.
33
+
34
+### Night Mode
35
+
36
+When you are tired of a white screen and like a night mode, click on the little moon <i class="fa fa-moon-o"></i> and turn on the night view of HedgeDoc.
37
+
38
+The editor view, which is in night mode by default, can also be toggled between night and day view using the the little sun<i class="fa fa-sun-o fa-fw"></i>.
39
+
40
+### Image Upload
41
+
42
+You can upload an image simply by clicking on the upload button <i class="fa fa-upload"></i>.
43
+Alternatively, you can **drag-n-drop** an image into the editor. Even **pasting** images is possible!
44
+This will automatically upload the image to **[imgur](https://imgur.com)**, **[Amazon S3](https://aws.amazon.com/s3/)**, **[Minio](https://minio.io)** or the **local filesystem** (depending on the instance's configuration), nothing to worry about. :tada:
45
+
46
+![imgur](https://i.imgur.com/9cgQVqD.png)
47
+
48
+### Share Notes
49
+
50
+If you want to share an **editable** note, just copy the URL.
51
+If you want to share a **read-only** note, simply press the publish button <i class="fa fa-share-square-o"></i> and copy the URL.
52
+
53
+### Save a Note
54
+
55
+Currently, you can save to **Dropbox** <i class="fa fa-dropbox"></i> (depending on the instance's configuration) or save a Markdown <i class="fa fa-file-text"></i>, HTML or raw HTML <i class="fa fa-file-code-o"></i> file locally.
56
+
57
+### Import Notes
58
+
59
+Similarly to the *save* feature, you can also import a Markdown file from **Dropbox** <i class="fa fa-dropbox"></i> (depending on the instance's configuration), or import content from your **clipboard** <i class="fa fa-clipboard"></i>, which can parse some HTML. :smiley:
60
+
61
+### Permissions
62
+
63
+It is possible to change the access permission of a note through the little button on the top right of the view.
64
+There are four possible options:
65
+
66
+| | Owner read/write | Signed-in read | Signed-in write | Guest read | Guest write |
67
+|:------------------------------------------------------------------------------------ |:----------------:|:--------------:|:---------------:|:----------:|:-----------:|
68
+| <span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Freely**</span> | ✔ | ✔ | ✔ | ✔ | ✔ |
69
+| <span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Editable**</span> | ✔ | ✔ | ✔ | ✔ | ✖ |
70
+| <span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Limited**</span> | ✔ | ✔ | ✔ | ✖ | ✖ |
71
+| <span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Locked**</span> | ✔ | ✔ | ✖ | ✔ | ✖ |
72
+| <span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Protected**</span> | ✔ | ✔ | ✖ | ✖ | ✖ |
73
+| <span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Private**</span> | ✔ | ✖ | ✖ | ✖ | ✖ |
74
+
75
+**Only the owner of the note can change the note's permissions.**
76
+
77
+### [Slide Mode](./slide-example)
78
+
79
+You can use a special syntax to organize your note into slides.
80
+After that, you can use the **[Slide Mode](./slide-example)** <i class="fa fa-tv"></i> to make a presentation.
81
+Visit the above link for details.
82
+
83
+To switch the editor into slide mode, set the [document type](./yaml-metadata#type) to `slide`.
84
+
85
+## View
86
+
87
+### Autogenerated Table of Contents
88
+
89
+You can look at the bottom right section of the view area, there is a *ToC* button <i class="fa fa-bars"></i>.
90
+Pressing that button will show you a current *Table of Contents*, and will highlight which section you're at.
91
+ToCs support up to **three header levels**.
92
+
93
+### Permalink
94
+
95
+Every header will automatically add a permalink on the right side.
96
+You can hover and click <i class="fa fa-chain"></i> to anchor on it.
97
+
98
+## Edit
99
+
100
+### Editor Modes
101
+
102
+You can look in the bottom right section of the editor area, there you'll find a button with `SUBLIME` on it.
103
+When you click it, you can select 3 editor modes, which will also define your shortcut keys:
104
+
105
+- [Sublime](https://codemirror.net/demo/sublime.html) (default)
106
+- [Emacs](https://codemirror.net/demo/emacs.html)
107
+- [Vim](https://codemirror.net/demo/vim.html)
108
+
109
+### Auto-Complete
110
+
111
+This editor provides full auto-complete hints in markdown.
112
+
113
+- Emojis: type `:` to show hints.
114
+- Code blocks: type ` ``` `, followed by another character to show syntax highlighting suggestions.
115
+- Headers: type `#` to show hint.
116
+- Referrals: type `[]` to show hint.
117
+- Externals: type `{}` to show hint.
118
+- Images: type `!` to show hint.
119
+
120
+### Title
121
+
122
+The first **level 1 heading** (e.g. `# Title`) will be used as the note title.
123
+
124
+### Tags
125
+
126
+Tags can be specified with [YAML metadata](./yaml-metadata#tags) at the **start** of the note. Those tags will show in your **history**.
127
+
128
+```yml
129
+---
130
+tags: features, cool, updated
131
+---
132
+```
133
+
134
+### [YAML Metadata](./yaml-metadata)
135
+
136
+You can provide advanced note information to set the browser behavior (visit above link for details):
137
+
138
+- robots: set web robots meta
139
+- lang: set browser language
140
+- dir: set text direction
141
+- breaks: set to use line breaks
142
+- GA: set to use Google Analytics
143
+- disqus: set to use Disqus
144
+- slideOptions: setup slide mode options
145
+
146
+### Table of Contents
147
+
148
+Use the syntax `[TOC]` to embed a table of contents into your note.
149
+
150
+[TOC]
151
+
152
+### Emoji
153
+
154
+You can type any emoji like this :smile: :smiley: :cry: :wink:
155
+
156
+> See full emoji list [here](https://www.webfx.com/tools/emoji-cheat-sheet/).
157
+
158
+### ToDo List
159
+
160
+- [ ] ToDos
161
+ - [x] Buy some salad
162
+ - [ ] Brush teeth
163
+ - [x] Drink some water
164
+ - [ ] **Click my box** and see the source code, if you're allowed to edit!
165
+
166
+### Code Block
167
+
168
+We support many programming languages, use the auto complete function to see the entire list.
169
+
170
+```javascript=
171
+var s = "JavaScript syntax highlighting";
172
+alert(s);
173
+function $initHighlight(block, cls) {
174
+ try {
175
+ if (cls.search(/\bno\-highlight\b/) != -1)
176
+ return process(block, true, 0x0F) +
177
+ ' class=""';
178
+ } catch (e) {
179
+ /* handle exception */
180
+ }
181
+ for (var i = 0 / 2; i < classes.length; i++) {
182
+ if (checkCondition(classes[i]) === undefined)
183
+ return /\d+[\s/]/g;
184
+ }
185
+}
186
+```
187
+
188
+If you want **line numbers**, type `=` after specifying the code block languagues.
189
+Also, you can specify the start line number.
190
+Like below, the line number starts from 101:
191
+
192
+```javascript=101
193
+var s = "JavaScript syntax highlighting";
194
+alert(s);
195
+function $initHighlight(block, cls) {
196
+ try {
197
+ if (cls.search(/\bno\-highlight\b/) != -1)
198
+ return process(block, true, 0x0F) +
199
+ ' class=""';
200
+ } catch (e) {
201
+ /* handle exception */
202
+ }
203
+ for (var i = 0 / 2; i < classes.length; i++) {
204
+ if (checkCondition(classes[i]) === undefined)
205
+ return /\d+[\s/]/g;
206
+ }
207
+}
208
+```
209
+
210
+Or you might want to continue the previous code block's line number, use `=+`:
211
+
212
+```javascript=+
213
+var s = "JavaScript syntax highlighting";
214
+alert(s);
215
+```
216
+
217
+Somtimes you have a super long text without breaks. It's time to use `!` to wrap your code:
218
+
219
+```!
220
+When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back.
221
+```
222
+
223
+### Blockquote Tags
224
+
225
+> Using the syntax below to specifiy your **name, time and color** to vary the blockquotes.
226
+> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
227
+> > Even support nested blockquotes!
228
+> > [name=Max Mustermann] [time=Sun, Jun 28, 2015 9:47 PM] [color=red]
229
+
230
+### Externals
231
+
232
+#### YouTube
233
+
234
+{%youtube aqz-KE-bpKQ %}
235
+
236
+#### Vimeo
237
+
238
+{%vimeo 124148255 %}
239
+
240
+#### Gist
241
+
242
+{%gist schacon/4277%}
243
+
244
+#### SlideShare
245
+
246
+{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
247
+
248
+#### PDF
249
+
250
+**Caution: this might be blocked by your browser if not using an `https` URL.**
251
+Note that not all servers allow embedding their content. See [our FAQ](https://docs.hedgedoc.org/faq/#why-cant-i-embed-some-pdfs) for details.
252
+{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}
253
+
254
+### MathJax
255
+
256
+You can render *LaTeX* mathematical expressions using [**MathJax**](https://www.mathjax.org/),
257
+as on [math.stackexchange.com](https://math.stackexchange.com/). Examples:
258
+
259
+* The Euler's identity: $e^{i\pi} + 1 = 0$
260
+* The solution of $f(x)=ax^2+bx+c$ where $a \neq 0$ and $a, b, c \in R$ is
261
+$$
262
+x = {-b \pm \sqrt{b^2-4ac} \over 2a}
263
+$$
264
+* The *Gamma function*: $\Gamma(n) = \begin{cases}
265
+ \displaystyle (n-1)!\quad\forall n\in\mathbb N\\
266
+ \displaystyle \int_0^\infty t^{n-1}e^{-t}dt\quad\forall n\in\mathbb R^*_+
267
+ \end{cases}$
268
+
269
+> More information about **LaTeX** mathematical expressions [here](https://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference).
270
+
271
+### Diagrams
272
+
273
+#### UML Sequence Diagrams
274
+
275
+You can render sequence diagrams like this:
276
+
277
+```sequence
278
+Alice->Bob: Hello Bob, how are you?
279
+Note right of Bob: Bob thinks
280
+Bob-->Alice: I am good thanks!
281
+Note left of Alice: Alice responds
282
+Alice->Bob: Where have you been?
283
+```
284
+
285
+More information about **sequence diagrams** syntax [here](https://bramp.github.io/js-sequence-diagrams/).
286
+
287
+#### Flow Charts
288
+
289
+Flow charts can be specified like this:
290
+
291
+```flow
292
+st=>start: Start
293
+e=>end: End
294
+op=>operation: My Operation
295
+op2=>operation: lalala
296
+cond=>condition: Yes or No?
297
+
298
+st->op->op2->cond
299
+cond(yes)->e
300
+cond(no)->op2
301
+```
302
+
303
+More information about **flow charts** syntax [here](https://flowchart.js.org/).
304
+
305
+#### Graphviz
306
+
307
+```graphviz
308
+digraph hierarchy {
309
+ nodesep=1.0 // Increases the separation between nodes
310
+
311
+ node [color=Red,fontname=Courier,shape=box] // All nodes will this shape and colour
312
+ edge [color=Blue, style=dashed] // All the lines look like this
313
+
314
+ Headteacher->{Deputy1 Deputy2 BusinessManager}
315
+ Deputy1->{Teacher1 Teacher2}
316
+ BusinessManager->ITManager
317
+ {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
318
+}
319
+```
320
+
321
+More information about **graphviz** syntax [here](https://www.tonyballantyne.com/graphs.html)
322
+
323
+#### Mermaid
324
+
325
+```mermaid
326
+gantt
327
+ title A Gantt Diagram
328
+
329
+ section Section
330
+ A task: a1, 2014-01-01, 30d
331
+ Another task: after a1, 20d
332
+
333
+ section Another
334
+ Task in sec: 2014-01-12, 12d
335
+ Another task: 24d
336
+```
337
+
338
+More information about **mermaid** syntax [here](https://mermaid-js.github.io/mermaid/)
339
+
340
+This version of HedgeDoc bundles Mermaid 9.1.7. The documentation for this version can
341
+be found [here](https://github.com/mermaid-js/mermaid/blob/v9.1.7/docs/n00b-gettingStarted.md).
342
+
343
+#### Abc Music Notation
344
+
345
+```abc
346
+X:1
347
+T:Speed the Plough
348
+M:4/4
349
+C:Trad.
350
+K:G
351
+|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
352
+GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
353
+|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
354
+g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
355
+```
356
+
357
+More information about **abc** syntax [here](https://abcnotation.com/learn)
358
+
359
+### Alert Area
360
+
361
+:::success
362
+Yes :tada:
363
+:::
364
+
365
+:::info
366
+This is a message :mega:
367
+:::
368
+
369
+:::warning
370
+Watch out :zap:
371
+:::
372
+
373
+:::danger
374
+Oh No! :fire:
375
+:::
376
+
377
+### Typography
378
+
379
+#### Headers
380
+
381
+``` markdown
382
+# h1 Heading
383
+## h2 Heading
384
+### h3 Heading
385
+#### h4 Heading
386
+##### h5 Heading
387
+###### h6 Heading
388
+```
389
+
390
+#### Horizontal Rules
391
+
392
+___
393
+
394
+---
395
+
396
+***
397
+
398
+#### Typographic Replacements
399
+
400
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
401
+
402
+test.. test... test.... test..... test?..... test!....
403
+
404
+!!!!!! ???? ,,
405
+
406
+Remarkable---no, awesome!
407
+
408
+During 1980--1988.
409
+
410
+"Smartypants, double quotes"
411
+
412
+'Smartypants, single quotes'
413
+
414
+#### Emphasis
415
+
416
+**This is bold text**
417
+
418
+__This is bold text__
419
+
420
+*This is italic text*
421
+
422
+_This is italic text_
423
+
424
+~~Deleted text~~
425
+
426
+lu~lala~
427
+
428
+Superscript: 19^th^
429
+
430
+Subscript: H~2~O
431
+
432
+++Inserted text++
433
+
434
+==Marked text==
435
+
436
+#### Blockquotes
437
+
438
+> Blockquotes can also be nested...
439
+>> ...by using additional greater-than signs right next to each other...
440
+> > > ...or with spaces between arrows.
441
+
442
+#### Lists
443
+
444
+##### Unordered
445
+
446
++ Create a list by starting a line with `+`, `-`, or `*`
447
++ Sub-lists are made by indenting 2 spaces:
448
+ - Marker character change forces new list start:
449
+ * Ac tristique libero volutpat at
450
+ + Facilisis in pretium nisl aliquet
451
+ - Nulla volutpat aliquam velit
452
++ Very easy!
453
+
454
+##### Ordered
455
+
456
+1. Lorem ipsum dolor sit amet
457
+2. Consectetur adipiscing elit
458
+3. Aenean commodo ligula eget dolor
459
+
460
+1. **You can use sequential numbers...**
461
+1. **...or keep all the numbers as `1.`**
462
+1. Aenean massa
463
+2. Cum sociis natoque penatibus
464
+3. Magnis dis parturient montes
465
+4. Nascetur ridiculus mus
466
+1. Donec quam felis
467
+
468
+Start numbering with offset:
469
+
470
+57. foo
471
+1. bar
472
+
473
+#### Code
474
+
475
+Inline `code`
476
+
477
+Indented code
478
+
479
+ // Some comments
480
+ line 1 of code
481
+ line 2 of code
482
+ line 3 of code
483
+
484
+Block code "fences"
485
+
486
+```
487
+Sample text here...
488
+```
489
+
490
+Syntax highlighting
491
+
492
+``` js
493
+var foo = function (bar) {
494
+ return bar++;
495
+};
496
+
497
+console.log(foo(5));
498
+```
499
+
500
+#### Tables
501
+
502
+| Option | Description |
503
+| ------ | ------------------------------------------------------------------------- |
504
+| data | path to data files to supply the data that will be passed into templates. |
505
+| engine | engine to be used for processing templates. Handlebars is the default. |
506
+| ext | extension to be used for dest files. |
507
+
508
+Right aligned columns
509
+
510
+| Option | Description |
511
+| ------:| -------------------------------------------------------------------------:|
512
+| data | path to data files to supply the data that will be passed into templates. |
513
+| engine | engine to be used for processing templates. Handlebars is the default. |
514
+| ext | extension to be used for dest files. |
515
+
516
+Left aligned columns
517
+
518
+| Option | Description |
519
+|:------ |:------------------------------------------------------------------------- |
520
+| data | path to data files to supply the data that will be passed into templates. |
521
+| engine | engine to be used for processing templates. Handlebars is the default. |
522
+| ext | extension to be used for dest files. |
523
+
524
+Center aligned columns
525
+
526
+| Option | Description |
527
+|:------:|:-------------------------------------------------------------------------:|
528
+| data | path to data files to supply the data that will be passed into templates. |
529
+| engine | engine to be used for processing templates. Handlebars is the default. |
530
+| ext | extension to be used for dest files. |
531
+
532
+#### Links
533
+
534
+[link text](https://demo.hedgedoc.org)
535
+[link with title](https://nodeca.github.io/pica/demo/ "title text!")
536
+Autoconverted link <https://github.com/nodeca/pica>
537
+
538
+#### Images
539
+
540
+![Minion](https://octodex.github.com/images/minion.png)
541
+
542
+With a title:
543
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
544
+
545
+Like links, images also have a footnote style syntax with a reference later in the document defining the URL location:
546
+![Dojocat][dojoref]
547
+
548
+[dojoref]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
549
+
550
+Show the image with given size:
551
+![Minion](https://octodex.github.com/images/minion.png =200x200)
552
+
553
+#### Footnotes
554
+
555
+Footnote 1 link[^first].
556
+Footnote 2 link[^second].
557
+Inline footnote^[Text of inline footnote] definition.
558
+Duplicated footnote reference[^second].
559
+
560
+[^first]: Footnote **can have markup**
561
+ and multiple paragraphs.
562
+[^second]: Footnote text.
563
+
564
+#### Definition Lists
565
+
566
+Term 1
567
+
568
+: Definition 1
569
+with lazy continuation.
570
+
571
+Term 2 with *inline markup*
572
+
573
+: Definition 2
574
+
575
+ { some code, part of Definition 2 }
576
+
577
+ Third paragraph of definition 2.
578
+
579
+*Compact style:*
580
+
581
+Term 1
582
+ ~ Definition 1
583
+
584
+Term 2
585
+ ~ Definition 2a
586
+ ~ Definition 2b
587
+
588
+#### Abbreviations
589
+
590
+This is an HTML abbreviation example.
591
+It converts "HTML", but keeps intact partial entries like "xxxHTMLyyy" and so on.
592
+
593
+*[HTML]: Hyper Text Markup Language
594
+
595
+## Revisions
596
+
597
+When changes are made to a note previous versions of the note are stored as `Revisions`, if you ever need to return to a previous save you can find all the note revisions by going to `Menu` -> `Revision`.
598
+
599
+The note history on the left displays each revision with a timestamp allowing you to quickly select a revision for the desired date and time. Selecting a revision on the left will display the revised note to the right, the revision will display the changes made with colorization to indicate additions/removals.
600
+
601
+In addition to browsing the revisions, you can download a selected note revision or revert the current note to the selected revision.
Tests/mermaid.md
... ...
@@ -0,0 +1,182 @@
1
+[[_TOC_]]
2
+
3
+[Cheat sheet](https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/)
4
+
5
+# Examples
6
+## Flowchart
7
+
8
+```mermaid
9
+flowchart LR
10
+
11
+A[Hard] -->|Text| B(Round)
12
+B --> C{Decision}
13
+C -->|One| D[Result 1]
14
+C -->|Two| E[Result 2]
15
+
16
+```
17
+
18
+## Sequence diagram
19
+```mermaid
20
+sequenceDiagram
21
+Alice->>John: Hello John, how are you?
22
+loop HealthCheck
23
+ John->>John: Fight against hypochondria
24
+end
25
+Note right of John: Rational thoughts!
26
+John-->>Alice: Great!
27
+John->>Bob: How about you?
28
+Bob-->>John: Jolly good!
29
+```
30
+
31
+## Gant Chart
32
+
33
+```mermaid
34
+gantt
35
+ section Section
36
+ Completed :done, des1, 2014-01-06,2014-01-08
37
+ Active :active, des2, 2014-01-07, 3d
38
+ Parallel 1 : des3, after des1, 1d
39
+ Parallel 2 : des4, after des1, 1d
40
+ Parallel 3 : des5, after des3, 1d
41
+ Parallel 4 : des6, after des4, 1d
42
+```
43
+
44
+## Class Diagram
45
+
46
+```mermaid
47
+classDiagram
48
+Class01 <|-- AveryLongClass : Cool
49
+<<Interface>> Class01
50
+Class09 --> C2 : Where am I?
51
+Class09 --* C3
52
+Class09 --|> Class07
53
+Class07 : equals()
54
+Class07 : Object[] elementData
55
+Class01 : size()
56
+Class01 : int chimp
57
+Class01 : int gorilla
58
+class Class10 {
59
+ <<service>>
60
+ int id
61
+ size()
62
+}
63
+
64
+```
65
+
66
+## State diagram
67
+
68
+```mermaid
69
+stateDiagram-v2
70
+[*] --> Still
71
+Still --> [*]
72
+Still --> Moving
73
+Moving --> Still
74
+Moving --> Crash
75
+Crash --> [*]
76
+```
77
+## Pie chart
78
+
79
+```mermaid
80
+pie
81
+"Dogs" : 386
82
+"Cats" : 85.9
83
+"Rats" : 15
84
+```
85
+
86
+## Bar chart
87
+
88
+```mermaid
89
+gantt
90
+ title Git Issues - days since last update
91
+ dateFormat X
92
+ axisFormat %s
93
+
94
+ section Issue19062
95
+ 71 : 0, 71
96
+ section Issue19401
97
+ 36 : 0, 36
98
+ section Issue193
99
+ 34 : 0, 34
100
+ section Issue7441
101
+ 9 : 0, 9
102
+ section Issue1300
103
+ 5 : 0, 5
104
+```
105
+
106
+## User Journey diagram
107
+
108
+```mermaid
109
+ journey
110
+ title My working day
111
+ section Go to work
112
+ Make tea: 5: Me
113
+ Go upstairs: 3: Me
114
+ Do work: 1: Me, Cat
115
+ section Go home
116
+ Go downstairs: 5: Me
117
+ Sit down: 3: Me
118
+```
119
+
120
+## C4 diagram
121
+
122
+```mermaid
123
+C4Context
124
+title System Context diagram for Internet Banking System
125
+
126
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
127
+Person(customerB, "Banking Customer B")
128
+Person_Ext(customerC, "Banking Customer C")
129
+System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
130
+
131
+Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
132
+
133
+Enterprise_Boundary(b1, "BankBoundary") {
134
+
135
+ SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
136
+
137
+ System_Boundary(b2, "BankBoundary2") {
138
+ System(SystemA, "Banking System A")
139
+ System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
140
+ }
141
+
142
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
143
+ SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
144
+
145
+ Boundary(b3, "BankBoundary3", "boundary") {
146
+ SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
147
+ SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
148
+ }
149
+}
150
+
151
+BiRel(customerA, SystemAA, "Uses")
152
+BiRel(SystemAA, SystemE, "Uses")
153
+Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
154
+Rel(SystemC, customerA, "Sends e-mails to")
155
+```
156
+
157
+## XY-Chart
158
+```mermaid
159
+
160
+xychart-beta
161
+ title "Sales Revenue"
162
+ x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
163
+ y-axis "Revenue (in $)" 4000 --> 11000
164
+ bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
165
+ line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
166
+
167
+```
168
+
169
+## XY-Chart horizontal
170
+```mermaid
171
+
172
+xychart-beta horizontal
173
+ title "Sales Revenue"
174
+ x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
175
+ y-axis "Revenue (in $)" 4000 --> 11000
176
+ bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
177
+ line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
178
+```
179
+
180
+
181
+
182
+
Tests/pinkmypad_net.md
... ...
@@ -0,0 +1,316 @@
1
+---
2
+title: Pink my pad !
3
+subtitle: Publish your pads
4
+date: 2023-04-20
5
+licence: CC-BY-SA 4.0
6
+lang: fr
7
+layout: cards
8
+theme: pink
9
+header-includes: |
10
+ <style>
11
+ body {font-family: sans;}
12
+ .pink {color: DeepPink;}
13
+ .blue {color: blue;}
14
+ section.level2 {flex: 2 1 400px;}
15
+ section.largecard {flex: 2 1 100%;}
16
+ img.center {
17
+ display: block;
18
+ margin-left: auto;
19
+ margin-right: auto;
20
+ }
21
+ div.sourceCode { background-color: lavender; }
22
+ section.tablemono table {font-family: monospace;}
23
+ .center {text-align: center;}
24
+ .info { background-color: #ddd; padding: 1em;}
25
+ div.danger, section.danger {color: #a94442; background-color: #f2dede; border: none; padding: 1em; margin-bottom: 0.5em;}
26
+ code, .sourceCode { background-color: lavender;}
27
+ </style>
28
+---
29
+
30
+## Welcome / Bienvenue
31
+
32
+[Pink my pad]{.pink} est une application toute simple qui transforme vos pads en une page web statique.
33
+
34
+Ça sert à quoi ? Cela offre un espace de publication plus stable, personnalisable à volonté, et ouvert à la discussion.
35
+
36
+![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTM0Y2Y4YTU4MWQ2MGQzM2Q2NDdmMjBjN2E4NzU3ZGE1ZTA1ZjA5MiZjdD1n/l2Sqf6CokrCwXDvcA/giphy.gif)
37
+
38
+Pink my pad est fait avec [Flask](https://flask.palletsprojects.com/) et [Pandoc](https://pandoc.org/).
39
+
40
+## Problème sur Hedgedoc
41
+
42
+#date:juillet2024
43
+
44
+:::danger
45
+**28 juin 2024**
46
+Pink my pad n'a plus accès à l'instance `demo.hedgedoc.org`. Suite à des attaques répétées de bots, l'instance a relevé son niveau de sécurité et ne permet plus à des applications d'utiliser son API.
47
+
48
+Vous pouvez continuer à utiliser Hedgedoc via l'instance [pad.libreon.fr](https://pad.libreon.fr). Cette instance est maintenue par [Libreon.fr](https://libreon.fr), qui est un [CHATONS](https://www.chatons.org/) (Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires).
49
+
50
+:::
51
+
52
+:::info
53
+**Pour récupérer votre page Pink my pad créée sur demo.hedgedoc.org :**
54
+
55
+1. Créez un nouveau pad sur libreon.fr en cliquant sur [pad.libreon.fr/new](https://pad.libreon.fr/new) → un nouveau pad est créé avec son identifiant propre
56
+2. Copiez le contenu de votre pad Hedgedoc et collez le sur le nouveau pad Libreon
57
+3. Ouvrez un nouvel onglet et chargez la page `pinkmypad.net/libreon/identifiant-pad-libreon`
58
+
59
+:::
60
+
61
+## Historique
62
+
63
+[Pink my pad]{.pink} est une refonte du projet [PSnotes](https://framagit.org/laconis/psnotes), *in*disponible à l'adresse [notes.ecrituresnumeriques.ca](https://notes.ecrituresnumeriques.ca). PSnotes a été développé à la [CRC-EN](https://ecrituresnumeriques.ca/) en 2019 en amont des journées [Publishing Sphere](https://publishingsphere.ecrituresnumeriques.ca/) avec l'idée de créer un espace d'écriture et de publication libre et ouvert^[Pour en savoir plus, [un peu de lecture historico-théorique](https://these.nicolassauret.net/1.0/revuecollectif.html#produire-une-sph%C3%A8re-de-publication-linvention-de-pink-my-pad)].
64
+
65
+L'inspiration initiale est venue de [Note(s)](https://vincent-maillard.fr/#1041), développé par Émile Greis et Vincent Maillard.
66
+
67
+
68
+## Créer une nouvelle page
69
+
70
+Pour créer une nouvelle page sur pinkmypad.net, récupérez l'identifiant de votre pad et copiez-le dans la barre d'adresse de votre navigateur :
71
+
72
+Par exemple pour le service [Libreon (Hedgedoc)]{.blue} :
73
+
74
+- https://pad.[libreon]{.blue}.fr/[identifiant-de-mon-pad]{.pink}
75
+
76
+- https://pinkmypad.net/[libreon]{.blue}/[identifiant-de-mon-pad]{.pink}
77
+
78
+[Pink my pad]{.pink} fonctionne pour le moment avec les domaines :
79
+
80
+- `pad.libreon.fr`
81
+- ~~`demo.hedgedoc.org`~~
82
+- `pad.lescommuns.org`
83
+- `pad.lamyne.org`
84
+- `pad.numerique-en-commun.fr`
85
+- `hackmd.io`
86
+- `framapad.org`
87
+- `pad.ensad.fr`
88
+- `codimd.math.cnrs.fr`
89
+
90
+→ [exemples ci-dessous](#services)
91
+
92
+#howto
93
+
94
+## Éditer une page
95
+
96
+Il suffit de cliquer sur le lien **[edit on ...]** en haut à gauche de la page
97
+
98
+![](https://s3.hedgedoc.org/demo/uploads/ebac8303-9bff-4815-95eb-fa6d595a3733.png){.center}
99
+
100
+<!--![](https://s3.hedgedoc.org/demo/uploads/30636a02-323b-4a80-ac78-598876a23476.png){.center}-->
101
+
102
+Le pad correspondant s'ouvre en mode édition. L'édition ne sera possible que si l'auteur du pad a ouvert les droits d'édition, ou si le pad vous appartient.
103
+
104
+Les pads basés sur Hedgedoc ou HackMD sont au format Markdown. Pandoc propose une syntaxe enrichie pour aller plus loin avec le format.
105
+
106
+**Ressources Markdown:**
107
+
108
+- [Tutoriel](https://www.markdowntutorial.com/fr/) pour apprendre la syntaxe Markdown en 10min
109
+- [Référence Markdown](https://docs.framasoft.org/fr/grav/markdown.html) (via Framasoft)
110
+- [Pandoc's markdown](https://pandoc.org/MANUAL.html#pandocs-markdown) pour aller plus loin.
111
+
112
+#howto
113
+
114
+## Rafraichir sa page
115
+
116
+Il suffit de cliquer sur le bouton **[Refresh]** en haut à gauche du pad → ![](https://s3.hedgedoc.org/demo/uploads/06fa4bc1-ca26-4957-9208-c0a9d0ab0a3a.png)
117
+
118
+La page se met à jour avec les dernières modifications apportés au pad source.
119
+
120
+#howto
121
+
122
+## Ajouter des tags
123
+
124
+Pinkmypad gère deux types de tags:
125
+
126
+- tags simples : #monmotclé
127
+- tags catégorisés : #date:20230420 #todo:urgent #younameit:asyoulike
128
+
129
+Un clic sur un tag permet de filtrer les sections et de n'afficher que les sections contenant le tag cliqué.
130
+
131
+## Personnaliser sa page
132
+
133
+Vous pouvez personnaliser votre page en ajoutant un en-tête YAML au début de votre pad. L'en-tête permet de jouer sur plusieurs éléments :
134
+
135
+- ajouter des métadonnées au pad (`title`, `abstract`, `author`, `date`) et à la page publiée
136
+- configurer la page publiée sur pinkmypad :
137
+ - `layout`: modifie la disposition des blocs HTML. Par défaut `notes`, `cards`, _plus à venir_
138
+ - `theme`: modifie les couleurs et polices de caractère. Par défaut `pink`, `blue`, _plus à venir_
139
+- ajouter des règles CSS
140
+
141
+
142
+Exemple d'en-tête yaml :
143
+
144
+```yaml
145
+---
146
+title: Nos notes
147
+abstract: Toutes les notes nous concernant
148
+author: collectif
149
+date: 2023-04-20
150
+layout: cards
151
+theme: pink
152
+header-includes: |
153
+ <style>
154
+ body {font-family: monospace;}
155
+ img {border: 2px solid deeppink; }
156
+ </style>
157
+---
158
+```
159
+
160
+Vous pouvez le copier-coller (sans oublier les `---`) et modifier les valeurs.
161
+
162
+L'en-tête peut aussi lister des options et des variables spécifiques à Pandoc. Pour aller plus loin, voir [Pandoc User's Guide](https://pandoc.org/MANUAL.html).
163
+
164
+#howto
165
+
166
+## Ajouter des règles CSS
167
+
168
+Pour définir de nouvelles règles CSS à votre page publiée, ajouter les lignes suivantes dans l'en-tête yaml:
169
+
170
+```yaml
171
+header-includes: |
172
+ <style>
173
+ body {font-family: monospace;}
174
+ h2#lastone {color: black;}
175
+ .blue {color: blue;}
176
+ </style>
177
+```
178
+
179
+Vous pouvez alors ajouter autant de règles que nécessaires aux objets HTML de la page publiée.
180
+
181
+Pandoc est capable d'interpréter des classes et des identifiants associés aux différents éléments du pad en respectant cette syntaxe markdown:
182
+
183
+- span → Ce [mot]{.blue} sera de classe `blue`:
184
+ ```markdown
185
+ Ce [mot]{.blue} sera de classe `blue`
186
+ ```
187
+- identifiant sur un élément `<section class="level2" id="lastone">`
188
+ ```markdown
189
+ ## un titre de niveau 2 {#lastone}
190
+ ```
191
+- Ou encore pour définir un élément `<div class="info">`
192
+ ```markdown
193
+ :::info
194
+ contenu de ma div
195
+ :::
196
+ ```
197
+ Ou:
198
+ ```markdown
199
+ :::{.info}
200
+ contenu de ma div
201
+ :::
202
+ ```
203
+
204
+Pour aller plus loin avec Pandoc → [#divs-and-spans](https://pandoc.org/MANUAL.html#divs-and-spans)
205
+
206
+#howto
207
+
208
+## Layout & Theme
209
+
210
+Pink my pad produit une structure HTML sur laquelle sont appliqués une disposition (`layout`) et un thème (`theme`).
211
+
212
+Vous voulez proposer une nouvelle disposition ou un nouveau thème ? Le code [est ouvert](https://gitlab.com/laconis/pink-my-pad/-/tree/main/static).
213
+
214
+```
215
+static
216
+├── pinkmypad.css # styles principaux
217
+├── notes.css # layout par défaut
218
+├── cards.css # layout en cartes
219
+├── pink.css # theme
220
+└── blue.css # theme
221
+
222
+```
223
+
224
+Vous pouvez intervenir sur le thème facilement en définissant de nouvelles couleurs, en ajoutant dans l'en-tête YAML:
225
+
226
+```css
227
+header-include: |
228
+ <style>
229
+ :root {
230
+ --color1: #9C2F3C;
231
+ --color2: #E85163;
232
+ --color3: #99E85D;
233
+ --back: #fdfdfd;
234
+ --front: #1a1a1a;
235
+ }
236
+ </style>
237
+
238
+```
239
+
240
+## Intégrer une collection Zotero
241
+
242
+Il est possible de publier les références bibliographiques d'un groupe ou d'une collection Zotero publics. Pour cela, ajoutez simplement l'URL du groupe ou de la collection dans l'en-tête yaml, en utilisant la clé `bibliography`.
243
+
244
+Par exemple:
245
+
246
+```yaml
247
+bibliography: https://api.zotero.org/groups/4941986/collections/GILVWGW2/items?format=bibtex
248
+```
249
+Notez la structure de l'URL (voir [la documentation de l'API Zotero](https://www.zotero.org/support/dev/web_api/v3/basics)), ainsi que le paramètre `items?format=bibtex` indispensable pour obtenir **un format bibtex** :
250
+
251
+```
252
+api.zotero.org/
253
+ groups/<identifiant du groupe>/
254
+ collections/<identifiant de la collection>/ (si nécessaire)
255
+ items?format=bibtex
256
+```
257
+
258
+## Comment citer une référence Zotero
259
+
260
+Par défaut, seules les références citées dans le texte seront publiées en fin de document dans la bibliographie. Pour citer une référence, il faut utiliser la **clé bibtex de la référence** entre crochet (par exemple `[@cardon_algorithmes_2018]`). Les clés bibtex peut être trouvées en consultant le fichier bibtex téléchargé à partir de l'url précédente.
261
+
262
+Pour aller plus loin dans la syntaxe Markdown de citation, voir [Pandoc/comment citer une référence en markdown](https://pandoc.org/MANUAL.html#citation-syntax).
263
+
264
+Pour afficher en bibliographie toutes les références de la collection, utilisez la clé `nocite` et le joker `@*`. Voir [Pandoc/comment inclure les références non-citées](https://pandoc.org/MANUAL.html#including-uncited-items-in-the-bibliography).
265
+
266
+```yaml
267
+bibliography: https://api.zotero.org/groups/4941986/collections/GILVWGW2/items?format=bibtex
268
+nocite: |
269
+ @*
270
+```
271
+## Appliquer un style CSL
272
+
273
+Appliquez [le style CSL](https://biblioguides.brebeuf.qc.ca/citation/styles_bibliographiques) de votre choix en ajoutant dans l'en-tête YAML la clé-valeur `csl: <url du style>`, en vous référant [au catalogue de styles CSL de Zotero](https://www.zotero.org/styles).
274
+
275
+Par exemple, pour un style _Chicago-fullnote-fr_:
276
+
277
+```yaml
278
+csl: https://www.zotero.org/styles/chicago-fullnote-bibliography-fr
279
+```
280
+Ou le style «Lettres et sciences humaines fr» :
281
+```yaml
282
+csl: https://www.zotero.org/styles/lettres-et-sciences-humaines-fr
283
+```
284
+
285
+## Feuille de route
286
+
287
+[Pink my pad]{.pink} reprend les fonctionnalités de PSnotes et apporte plusieurs améliorations :
288
+
289
+- ouverture à différents services de pad : Hedgedoc, Hackmd, Etherpad, [_you name it!_](https://gitlab.com/laconis/pink-my-pad/-/issues/1)
290
+- intégration de différents _layout_ : `notes` (par défaut), `cards`, d'autres à venir.. [_par ici les propositions_](https://gitlab.com/laconis/pink-my-pad/-/issues/2)
291
+- lien vers une page sommaire
292
+- mots-clés simples et catégorisés : #date:20230420, #author:Nicolas, #ecriture, etc..
293
+- annotation hypothes.is
294
+- améliorer la prise en charge des pads etherpad (html to html?)
295
+- bibliographie à partir d'une collection Zotero
296
+- ...
297
+
298
+Une idée ? complétez [la wish-list](https://gitlab.com/laconis/pink-my-pad/-/issues/3).
299
+
300
+
301
+
302
+## Services {.largecard .tablemono}
303
+
304
+Comment construire son url à partir des différents services ? quelques exemples :
305
+
306
+service | url source | url pinkmypad
307
+:---- | :----------- | :-----------
308
+libreon | pad.libreon.fr/[**qrt23NnqT3y6eSFvnPUtgA**]{.pink}?edit | pinkmypad.net/libreon/**qrt23NnqT3y6eSFvnPUtgA**
309
+~~hedgedoc~~ | ~~demo.hedgedoc.org/[**qrt23NnqT3y6eSFvnPUtgA**]{.pink}?edit~~ | ~~pinkmypad.net/hedgedoc/**qrt23NnqT3y6eSFvnPUtgA**~~
310
+hackmd | hackmd.io/**pyviWF97QAm_tHQ8wjuJcw**?both | pinkmypad.net/hackmd/**pyviWF97QAm_tHQ8wjuJcw**
311
+lescommuns | pad.lescommuns.org/**3S_2023_Communs_soutenabilite**?both# | pinkmypad.net/lescommuns/**3S_2023_Communs_soutenabilite**
312
+lamyne | pad.lamyne.org/**recit-epidemyne**# | pinkmypad.net/lamyne/**recit-epidemyne**
313
+numerique-en-commun | pad.numerique-en-commun.fr/**monPad**# | pinkmypad.net/numerique-en-commun/**monPad**
314
+framapad | https://**annuel2.framapad.org/p/communs** | pinkmypad.net/framapad/**annuel2.framapad.org/p/communs**
315
+ensad (etherpad) | https://**pad.ensad.fr/p/monPad** | pinkmypad.net/ensad/**pad.ensad.fr/p/monPad**
316
+codimd.math.cnrs | https://codimd.math.cnrs.fr/**ywcr0dnPS5Wz1lBOVzF3jg** | pinkmypad.net/codimd.math.cnrs/**ywcr0dnPS5Wz1lBOVzF3jg**
Tests/playground.md
... ...
@@ -0,0 +1,126 @@
1
+[[_TOC_]]
2
+
3
+# Meine Seite
4
+
5
+## mehr infos
6
+
7
+[Gollum wiki tags](https://github.com/gollum/gollum/wiki#tags)
8
+
9
+normaler Text
10
+
11
+:heart:
12
+or
13
+:point_up:
14
+
15
+geht noch
16
+
17
+![My Unicorn](http://github.com/unicorn.png)
18
+
19
+immer noch?
20
+
21
+test
22
+
23
+$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$
24
+
25
+# Links
26
+------------
27
+
28
+
29
+# test
30
+
31
+##tfgj
32
+
33
+## hdjd
34
+
35
+- [x] yes
36
+- [ ] no
37
+
38
+```javascript
39
+int getRandom() {
40
+ return 4;
41
+}
42
+```
43
+
44
+```smiles
45
+OC(=O)c1cc(Cl)cs1
46
+```
47
+
48
+
49
+Text mit `Code`
50
+
51
+ Codeblock
52
+ dhjsjsjs
53
+
54
+#### Fett** und ***Fett kursiv***
55
+
56
+| Spalte 1 | Spalte 2 | Spalte 3 | Wert 1 | Wert 2 | Wert 3 |
57
+| --- | --- | --- | --- | --- | --- |
58
+| Wert 1 | Wert 2 | Wert 3 | Wert 1 | Wert 2 | Wert 3 |
59
+| Wert 2 | Wert 4 | Wert 6 | Wert 1 | Wert 2 | Wert 3 |
60
+| Wert 3 | Wert 6 | Wert 9 | Wert 1 | Wert 2 | Wert 3 |
61
+
62
+
63
+![Graue Katze](https://foto.wuestenigel.com/wp-content/uploads/api/graue-katze-mit-grunen-augen.jpeg)
64
+
65
+---
66
+bibliography: zettel.bib
67
+csl: ieee.csl
68
+nocite: |
69
+
70
+---
71
+
72
+# WFDB Record
73
+
74
+> **Date:** Tue 10 Mar 2020 06:15:25 AM UTC
75
+>
76
+> **Summary:** Overview of the Waveform Database (WFDB) record format
77
+>
78
+> **Keywords:** ##summary #wfdb #dataformat #storage #healthcare #opensource #standard
79
+
80
+## **Note Linked To:**
81
+
82
+### [The Technology Index](03162020223918-technology-index)
83
+- **Summary:** This index is a compilation of utilities and resources when working with any sort of technology.
84
+
85
+---
86
+
87
+## **Overview:**
88
+
89
+The Waveform Database (WFDB) Library is a record management system to handle already existing databases - it itself is not a database but a collection of tools to handle databases that follow the WFDB format. [@moodyWFDBProgrammerGuide2019] Furthermore, WFDB can be used for viewing, analyzing, and creating recordings of physiological signals [@garciamartinezLoadingPlottingFiltering2017].
90
+
91
+## **How It Works:**
92
+
93
+The way that the WFDB record format works is that it utilizes [@moodyWFDBProgrammerGuide2019]:
94
+
95
+- **Header Files** to specify the characteristics of a signal (sampling frequency, etc.)
96
+- **Annotation Files** to record annotations corresponding to a signal (generally kept in time with the rest of the signal)
97
+
98
+## **Example Application - ECG Data:**
99
+
100
+For example, when working with ECG data, the format utilizes the header and annotation files as follows [@moodyWFDBProgrammerGuide2019]:
101
+
102
+- **Header Files** - could contain information about lead count, calibration format, etc.
103
+- **Annotation Files** - could contain other information such as beat positions.
104
+
105
+## **Miscellaneous Notes:**
106
+
107
+- WFDB is considered a standard data format within the research world, and has found application in industry as well.
108
+- The WFDB format is generally used for ECG records - however, it can extend to other data formats.
109
+- A possible alternative to the WFDB record format is the European Data Format+ (EDF+) [@garciamartinezLoadingPlottingFiltering2017].
110
+
111
+### **References:**
112
+
113
+```mermaid
114
+sequenceDiagram
115
+ Alice->>John: Hello John, how are you?
116
+ John-->>Alice: Great!
117
+ Alice-)John: See you later!
118
+```
119
+
120
+~~~~~~~~
121
+Here comes some code.
122
+~~~~~~~~
123
+
124
+[[Home.md#Links]]
125
+
126
+'[[tag]]