markdown-ui 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog +14 -0
  3. data/TODO.md +44 -0
  4. data/components/elements/markdown-ui-button/lib/button/basic.rb +1 -1
  5. data/components/elements/markdown-ui-button/lib/button/custom.rb +1 -1
  6. data/components/elements/markdown-ui-button/lib/button/focusable.rb +4 -13
  7. data/components/elements/markdown-ui-button/lib/button/icon.rb +1 -1
  8. data/components/elements/markdown-ui-button/lib/button/labeled_icon.rb +1 -1
  9. data/components/elements/markdown-ui-button/lib/button/standard.rb +1 -1
  10. data/components/elements/markdown-ui-header/lib/header/header.rb +7 -4
  11. data/lib/markdown-ui/tag/button_tag.rb +27 -0
  12. data/lib/markdown-ui/tag/focusable_button_tag.rb +27 -0
  13. data/lib/markdown-ui/version.rb +1 -1
  14. data/website/about.html +41 -0
  15. data/website/about.md +27 -0
  16. data/website/compile.sh +12 -3
  17. data/website/{button.html → docs/button.html} +196 -125
  18. data/website/{button.md → docs/button.md} +163 -77
  19. data/website/docs/toc.html +75 -0
  20. data/website/docs/toc.md +46 -0
  21. data/website/index.html +18 -497
  22. data/website/index.md +19 -542
  23. metadata +11 -4
data/website/index.html CHANGED
@@ -18,34 +18,34 @@
18
18
  </style>
19
19
  </head>
20
20
  <body>
21
- <div class="ui inverted segment container">
22
- <div class="ui inverted menu">
23
- <a class="ui basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
24
- <div class="ui inverted right menu">
25
- <a class="ui disabled item" href="#docs">Docs</a>
26
- <a class="ui disabled item" href="#about">About</a>
27
- <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
28
- <a class="ui disabled item" href="#install">Install</a>
21
+ <div class="ui container">
22
+ <div class="ui inverted segment">
23
+ <div class="ui inverted menu">
24
+ <a class="ui active basic item" href="http://jjuliano.github.io/markdown-ui">Markdown UI</a>
25
+ <div class="ui inverted right menu">
26
+ <a class="ui item" href="docs/toc.html">Docs</a>
27
+ <a class="ui item" href="about.html">About</a>
28
+ <a class="ui item" href="https://github.com/jjuliano/markdown-ui">Github</a>
29
+ <a class="ui item" href="#install">Install</a>
30
+ </div>
29
31
  </div>
30
32
  </div>
31
- </div>
32
-
33
- <!-- -->
34
- <div class="ui left aligned container">
35
33
  <!-- -->
36
34
  <div class="ui inverted attached teal very padded segment">
37
35
  <h1 class="ui header">Markdown UI</h1>
38
36
  <h3 class="ui header">Responsive UI in Markdown</h3>
37
+ <h3 class="ui header">Read the <a class="ui item" href="docs/toc.html"><button class="ui button">Documentation</button></a></h3>
39
38
  </div>
40
39
  <!-- -->
41
- <div class="ui attached segment">
42
- <!-- -->
40
+ <div class="ui basic attached segment">
43
41
  <div class="ui equal width grid">
44
- <div class="ui column"><h2 class="ui header">Installation</h2><code>gem install markdown-ui</code><h2 class="ui header">Usage</h2><code>markdown-ui index.mdui &gt; index.html</code><h2 class="ui header">Credits</h2>
42
+ <div class="ui column"><h2 id="install" class="ui header">Installation</h2><code>gem install markdown-ui</code><h2 id="usage" class="ui header">Usage</h2><code>markdown-ui index.mdui &gt; index.html</code><h2 id="credits" class="ui header">Credits</h2>
45
43
  Markdown-UI uses <a class="ui item" href="http://www.semantic-ui.com">Semantic-UI http://www.semantic-ui.com</a>
46
44
  syntax and framework, and ruby <code>redcarpet</code> library.
47
- Credit goes to the people behind these wonderful framework and libraries.<h2 class="ui header">Issues/Bugs</h2>
48
- <ul class="ui unordered list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>Code is not DRY, needs refactoring.</li><li>Implimentation is subject to change</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li></ul></div>
45
+ Credit goes to the people behind these wonderful framework and libraries.<h2 class="ui header">Source</h2>
46
+ This document is written entirely in Markdown-UI. see: <a class="ui item" href="https://github.com/jjuliano/markdown-ui/tree/master/website">the source files</a>
47
+ <h2 id="issues-bugs" class="ui header">Issues/Bugs</h2>
48
+ <ul class="ui unordered list"><li>Ongoing support for Semantic-UI elements/modules/components</li><li>The Colon (:) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URLs)</li><li>A separator in between two spaces is required on block elements to separate elements (see Column example)</li></ul></div>
49
49
  <!-- -->
50
50
  <div class="ui column">
51
51
  <div class="ui inverted very padded segment">
@@ -61,7 +61,7 @@ Credit goes to the people behind these wonderful framework and libraries.<h2 cla
61
61
  </div>
62
62
  </div>
63
63
  <!-- -->
64
- <h2 class="ui center aligned header">Cheat Sheet</h2>
64
+ <h2 id="cheatsheets" class="ui center aligned header">Cheat Sheet</h2>
65
65
  <div class="ui equal width grid">
66
66
  <div class="ui column">
67
67
  <div class="ui basic segment">
@@ -163,485 +163,6 @@ Credit goes to the people behind these wonderful framework and libraries.<h2 cla
163
163
  </div>
164
164
  </div>
165
165
  </div>
166
- <!-- -->
167
- <div class="ui segment">
168
- <h1 class="ui center aligned header">Buttons</h1>
169
- </div>
170
- <!-- -->
171
- <div class="ui segment">
172
- <h3 class="ui header">Button</h3>
173
- <p>Standard Button</p>
174
- </div>
175
- <!-- -->
176
- <div class="ui divided segment grid">
177
- <div class="ui html top attached segment">
178
- <div class="ui top attached label">Standard Button</div>
179
- </div>
180
- <!-- -->
181
- <div class="ui center aligned six wide column">
182
- <h5 class="ui header">Preview</h5>
183
- <div class="ui button">Follow</div>
184
- </div>
185
- <!-- -->
186
- <div class="ui left aligned ten wide column">
187
- <h5 class="ui header">Markdown Syntax</h5>
188
- <div class="ui inverted very padded segment">
189
- <code>
190
- __Button|Follow__
191
- </code>
192
- </div>
193
- </div>
194
- <!-- -->
195
- </div>
196
- <!-- -->
197
- <div class="ui divided segment grid">
198
- <div class="ui html top attached segment">
199
- <div class="ui top attached label">Standard Button with Custom Class And ID</div>
200
- </div>
201
- <!-- -->
202
- <div class="ui center aligned six wide column">
203
- <h5 class="ui header">Preview</h5>
204
- <div id="optional-id" class="ui optional-class button">Follow</div>
205
- </div>
206
- <!-- -->
207
- <div class="ui left aligned ten wide column">
208
- <h5 class="ui header">Markdown Syntax</h5>
209
- <div class="ui inverted very padded segment">
210
- <code>__&lt;Optional-Class&gt; Button|Follow|&lt;Optional-ID&gt;__</code>
211
- </div>
212
- </div>
213
- <!-- -->
214
- </div>
215
- <!-- -->
216
- <div class="ui divided segment grid">
217
- <div class="ui html top attached segment">
218
- <div class="ui top attached label">Focusable Button</div>
219
- </div>
220
- <!-- -->
221
- <div class="ui center aligned six wide column">
222
- <h5 class="ui header">Preview</h5>
223
- <button id="optional-id" class="ui focusable button">Follow</button>
224
- </div>
225
- <!-- -->
226
- <div class="ui left aligned ten wide column">
227
- <h5 class="ui header">Markdown Syntax</h5>
228
- <div class="ui inverted very padded segment">
229
- <code>
230
- __Focusable Button|Follow|&lt;Optional-ID&gt;__
231
- </code>
232
- </div>
233
- </div>
234
- <!-- -->
235
- </div>
236
- <!-- -->
237
- <div class="ui attached segment">
238
- <h3 class="ui header">Emphasis</h3>
239
- <p>A button can be formatted to show different levels of emphasis</p>
240
- </div>
241
- <!-- -->
242
- <div class="ui divided segment grid">
243
- <div class="ui html top attached segment">
244
- <div class="ui top attached label">Emphasis</div>
245
- </div>
246
- <!-- -->
247
- <div class="ui center aligned six wide column">
248
- <h5 class="ui header">Preview</h5>
249
- <div class="ui primary button">Save</div>
250
- <div class="ui button">Discard</div>
251
- <p></p>
252
- <div class="ui secondary button">Save</div>
253
- <div class="ui button">Discard</div>
254
- </div>
255
- <!-- -->
256
- <div class="ui left aligned ten wide column">
257
- <h5 class="ui header">Markdown Syntax</h5>
258
- <div class="ui inverted very padded segment">
259
- <code>__Primary Button|Save__ __Button|Discard__</code>
260
- <br /><code>__Secondary Button|Save__ __Button|Discard__</code>
261
- </div>
262
- </div>
263
- <!-- -->
264
- </div>
265
- <!-- -->
266
- <div class="ui attached segment">
267
- <h3 class="ui header">Animated</h3>
268
- <p>A button can animate to show hidden content</p>
269
- </div>
270
- <!-- -->
271
- <div class="ui divided segment grid">
272
- <div class="ui html top attached segment">
273
- <div class="ui top attached label">Animated</div>
274
- </div>
275
- <!-- -->
276
- <div class="ui center aligned six wide column">
277
- <h5 class="ui header">Preview</h5>
278
- <div class="ui animated button">
279
- <div class="visible content">Next</div>
280
- <div class="hidden content">
281
- <i class="right arrow icon"></i>
282
- </div>
283
- </div>
284
- </div>
285
- <!-- -->
286
- <div class="ui left aligned ten wide column">
287
- <h5 class="ui header">Markdown Syntax</h5>
288
- <div class="ui inverted very padded segment">
289
- <code>
290
- __Animated Button|Next;Icon:Right Arrow__
291
- </code>
292
- </div>
293
- </div>
294
- <!-- -->
295
- </div>
296
- <!-- -->
297
- <div class="ui divided segment grid">
298
- <div class="ui html top attached segment">
299
- <div class="ui top attached label">Vertical Animated</div>
300
- </div>
301
- <!-- -->
302
- <div class="ui center aligned six wide column">
303
- <h5 class="ui header">Preview</h5>
304
- <div class="ui vertical animated button">
305
- <div class="visible content">
306
- <i class="shop icon"></i>
307
- </div>
308
- <div class="hidden content">Shop</div>
309
- </div>
310
- </div>
311
- <!-- -->
312
- <div class="ui left aligned ten wide column">
313
- <h5 class="ui header">Markdown Syntax</h5>
314
- <div class="ui inverted very padded segment">
315
- <code>
316
- __Vertical Animated Button|Icon:Shop;Shop__
317
- </code>
318
- </div>
319
- </div>
320
- <!-- -->
321
- </div>
322
- <!-- -->
323
- <div class="ui divided segment grid">
324
- <div class="ui html top attached segment">
325
- <div class="ui top attached label">Fade Animated</div>
326
- </div>
327
- <!-- -->
328
- <div class="ui center aligned six wide column">
329
- <h5 class="ui header">Preview</h5>
330
- <div class="ui fade animated button">
331
- <div class="visible content">Sign-up for a Pro account</div>
332
- <div class="hidden content">$12.99 a month</div>
333
- </div>
334
- </div>
335
- <!-- -->
336
- <div class="ui left aligned ten wide column">
337
- <h5 class="ui header">Markdown Syntax</h5>
338
- <div class="ui inverted very padded segment">
339
- <code>__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__</code>
340
- </div>
341
- </div>
342
- <!-- -->
343
- </div>
344
- <!-- -->
345
- <div class="ui attached segment">
346
- <h3 class="ui header">Icon</h3>
347
- <p>A button can have only an icon</p>
348
- </div>
349
- <!-- -->
350
- <div class="ui divided segment grid">
351
- <div class="ui html top attached segment">
352
- <div class="ui top attached label">Icon Button</div>
353
- </div>
354
- <!-- -->
355
- <div class="ui center aligned six wide column">
356
- <h5 class="ui header">Preview</h5>
357
- <div class="ui icon button">
358
- <i class="cloud icon"></i>
359
- </div>
360
- </div>
361
- <!-- -->
362
- <div class="ui left aligned ten wide column">
363
- <h5 class="ui header">Markdown Syntax</h5>
364
- <div class="ui inverted very padded segment">
365
- <code>
366
- __Icon Button|Icon:Cloud__
367
- </code>
368
- </div>
369
- </div>
370
- <!-- -->
371
- </div>
372
- <!-- -->
373
- <div class="ui attached segment">
374
- <h3 class="ui header">Labeled Icon</h3>
375
- <p>A button can have an icon and a label</p>
376
- </div>
377
- <!-- -->
378
- <div class="ui divided segment grid">
379
- <div class="ui html top attached segment">
380
- <div class="ui top attached label">Labeled Icon</div>
381
- </div>
382
- <!-- -->
383
- <div class="ui center aligned six wide column">
384
- <h5 class="ui header">Preview</h5>
385
- <div class="ui labeled icon button"><i class="pause icon"></i>Pause</div>
386
- </div>
387
- <!-- -->
388
- <div class="ui left aligned ten wide column">
389
- <h5 class="ui header">Markdown Syntax</h5>
390
- <div class="ui inverted very padded segment">
391
- <code>
392
- __Labeled Icon Button|Icon:Pause,Pause__
393
- </code>
394
- </div>
395
- </div>
396
- <!-- -->
397
- </div>
398
- <!-- -->
399
- <div class="ui attached segment">
400
- <h3 class="ui header">Basic Button</h3>
401
- <p>A basic button is less pronounced</p>
402
- </div>
403
- <!-- -->
404
- <div class="ui divided segment grid">
405
- <div class="ui html top attached segment">
406
- <div class="ui top attached label">Basic Button</div>
407
- </div>
408
- <!-- -->
409
- <div class="ui center aligned six wide column">
410
- <h5 class="ui header">Preview</h5>
411
- <div class="ui basic button"><i class="user icon"></i>Add Friend</div>
412
- </div>
413
- <!-- -->
414
- <div class="ui left aligned ten wide column">
415
- <h5 class="ui header">Markdown Syntax</h5>
416
- <div class="ui inverted very padded segment">
417
- <code>
418
- __Basic Button|Icon:User,Add Friend__
419
- </code>
420
- </div>
421
- </div>
422
- <!-- -->
423
- </div>
424
- <!-- -->
425
- <div class="ui divided segment grid">
426
- <div class="ui html top attached segment">
427
- <div class="ui top attached label">Basic Button</div>
428
- </div>
429
- <!-- -->
430
- <div class="ui center aligned six wide column">
431
- <h5 class="ui header">Preview</h5>
432
- <div class="ui basic standard button">Standard</div>
433
- <div class="ui basic black button">Black</div>
434
- <div class="ui basic yellow button">Yellow</div>
435
- <div class="ui basic green button">Green</div>
436
- <div class="ui basic blue button">Blue</div>
437
- <div class="ui basic orange button">Orange</div>
438
- <div class="ui basic purple button">Purple</div>
439
- <div class="ui basic pink button">Pink</div>
440
- <div class="ui basic red button">Red</div>
441
- <div class="ui basic teal button">Teal</div>
442
- </div>
443
- <!-- -->
444
- <div class="ui left aligned ten wide column">
445
- <h5 class="ui header">Markdown Syntax</h5>
446
- <div class="ui inverted very padded segment">
447
- <code>__Basic Standard Button|Standard__</code>
448
- <br /><code>__Basic Black Button|Black__</code>
449
- <br /><code>__Basic Yellow Button|Yellow__</code>
450
- <br /><code>__Basic Green Button|Green__</code>
451
- <br /><code>__Basic Blue Button|Blue__</code>
452
- <br /><code>__Basic Orange Button|Orange__</code>
453
- <br /><code>__Basic Purple Button|Purple__</code>
454
- <br /><code>__Basic Pink Button|Pink__</code>
455
- <br /><code>__Basic Red Button|Red__</code>
456
- <br /><code>__Basic Teal Button|Teal__</code>
457
- </div>
458
- </div>
459
- <!-- -->
460
- </div>
461
- <!-- -->
462
- <div class="ui attached segment">
463
- <h3 class="ui header">Inverted</h3>
464
- <p>A button can be formatted to appear on dark backgrounds</p>
465
- </div>
466
- <!-- -->
467
- <div class="ui divided segment grid">
468
- <div class="ui html top attached segment">
469
- <div class="ui top attached label">Inverted</div>
470
- </div>
471
- <!-- -->
472
- <div class="ui center aligned six wide column">
473
- <h5 class="ui header">Preview</h5>
474
- <div class="ui inverted very padded segment">
475
- <div class="ui inverted standard button">Standard</div>
476
- <div class="ui inverted black button">Black</div>
477
- <div class="ui inverted yellow button">Yellow</div>
478
- <div class="ui inverted green button">Green</div>
479
- <div class="ui inverted blue button">Blue</div>
480
- <div class="ui inverted orange button">Orange</div>
481
- <div class="ui inverted purple button">Purple</div>
482
- <div class="ui inverted pink button">Pink</div>
483
- <div class="ui inverted red button">Red</div>
484
- <div class="ui inverted teal button">Teal</div>
485
- </div>
486
- </div>
487
- <!-- -->
488
- <div class="ui left aligned ten wide column">
489
- <h5 class="ui header">Markdown Syntax</h5>
490
- <div class="ui inverted very padded segment">
491
- <code>&gt; Inverted Segment:</code>
492
- <br /><code>&gt; __Inverted Standard Button|Standard__</code>
493
- <br /><code>&gt; __Inverted Black Button|Black__</code>
494
- <br /><code>&gt; __Inverted Yellow Button|Yellow__</code>
495
- <br /><code>&gt; __Inverted Green Button|Green__</code>
496
- <br /><code>&gt; __Inverted Blue Button|Blue__</code>
497
- <br /><code>&gt; __Inverted Orange Button|Orange__</code>
498
- <br /><code>&gt; __Inverted Purple Button|Purple__</code>
499
- <br /><code>&gt; __Inverted Pink Button|Pink__</code>
500
- <br /><code>&gt; __Inverted Red Button|Red__</code>
501
- <br /><code>&gt; __Inverted Teal Button|Teal__</code>
502
- </div>
503
- </div>
504
- <!-- -->
505
- </div>
506
- <!-- -->
507
- <div class="ui attached segment">
508
- <h3 class="ui header">Groups</h3>
509
- <p>Buttons can exist together as a group</p>
510
- </div>
511
- <!-- -->
512
- <div class="ui divided segment grid">
513
- <div class="ui html top attached segment">
514
- <div class="ui top attached label">Buttons</div>
515
- </div>
516
- <!-- -->
517
- <div class="ui center aligned six wide column">
518
- <h5 class="ui header">Preview</h5>
519
- <div class="ui buttons">
520
- <div id="standard" class="ui button">One</div>
521
- <div id="standard" class="ui button">Two</div>
522
- <div id="standard" class="ui button">Three</div>
523
- </div>
524
- </div>
525
- <!-- -->
526
- <div class="ui left aligned ten wide column">
527
- <h5 class="ui header">Markdown Syntax</h5>
528
- <div class="ui inverted very padded segment">
529
- <code>&gt; Buttons:</code>
530
- <br /><code>&gt; __Standard Button|One__</code>
531
- <br /><code>&gt; __Standard Button|Two__</code>
532
- <br /><code>&gt; __Standard Button|Three__</code>
533
- </div>
534
- </div>
535
- <!-- -->
536
- </div>
537
- <!-- -->
538
- <div class="ui attached segment">
539
- <h3 class="ui header">Icon Buttons</h3>
540
- <p>Buttons can exist together as a group</p>
541
- </div>
542
- <!-- -->
543
- <div class="ui divided segment grid">
544
- <div class="ui html top attached segment">
545
- <div class="ui top attached label">Buttons</div>
546
- </div>
547
- <!-- -->
548
- <div class="ui center aligned six wide column">
549
- <h5 class="ui header">Preview</h5>
550
- <div class="ui icon buttons">
551
- <div class="ui button">
552
- <i class="align left icon"></i>
553
- </div>
554
- <div class="ui button">
555
- <i class="align center icon"></i>
556
- </div>
557
- <div class="ui button">
558
- <i class="align right icon"></i>
559
- </div>
560
- <div class="ui button">
561
- <i class="align justify icon"></i>
562
- </div>
563
- </div>
564
- <!-- -->
565
- <div class="ui icon buttons">
566
- <div class="ui button">
567
- <i class="bold icon"></i>
568
- </div>
569
- <div class="ui button">
570
- <i class="underline icon"></i>
571
- </div>
572
- <div class="ui button">
573
- <i class="text width icon"></i>
574
- </div>
575
- </div>
576
- </div>
577
- <!-- -->
578
- <div class="ui left aligned ten wide column">
579
- <h5 class="ui header">Markdown Syntax</h5>
580
- <div class="ui inverted very padded segment">
581
- <code>&gt; Icon Buttons:</code>
582
- <br /><code>&gt; __Button|Icon:Align Left__</code>
583
- <br /><code>&gt; __Button|Icon:Align Center__</code>
584
- <br /><code>&gt; __Button|Icon:Align Right__</code>
585
- <br /><code>&gt; __Button|Icon:Align Justify__</code>
586
- <br /><br /><code>&lt;!-- A separator is required in between two spaces --&gt;</code>
587
- <br /><br /><code>&gt; Icon Buttons:</code>
588
- <br /><code>&gt; __Button|Icon:Bold__</code>
589
- <br /><code>&gt; __Button|Icon:Underline__</code>
590
- <br /><code>&gt; __Button|Icon:Text Width__</code>
591
- </div>
592
- </div>
593
- <!-- -->
594
- </div>
595
- <!-- -->
596
- <div class="ui attached segment">
597
- <h3 class="ui header">Conditionals</h3>
598
- <p>Button groups can contain conditionals</p>
599
- </div>
600
- <!-- -->
601
- <div class="ui divided segment grid">
602
- <div class="ui html top attached segment">
603
- <div class="ui top attached label">Conditionals</div>
604
- </div>
605
- <!-- -->
606
- <div class="ui center aligned six wide column">
607
- <h5 class="ui header">Preview</h5>
608
- <div class="ui buttons">
609
- <div class="ui button">Cancel</div>
610
- <div class="or"></div>
611
- <div class="ui positive button">Save</div>
612
- </div>
613
- </div>
614
- <!-- -->
615
- <div class="ui left aligned ten wide column">
616
- <h5 class="ui header">Markdown Syntax</h5>
617
- <div class="ui inverted very padded segment">
618
- <code>&gt; Buttons:</code>
619
- <br /><code>&gt; __Button|Cancel__</code>
620
- <br /><code>&gt; __Div Tag||Or__</code>
621
- <br /><code>&gt; __Positive Button|Save__</code>
622
- </div>
623
- </div>
624
- <!-- -->
625
- <div class="ui center aligned six wide column">
626
- <h5 class="ui header">Preview</h5>
627
- <div class="ui buttons">
628
- <div class="ui button">un</div>
629
- <div class="or" data-text="ou"></div>
630
- <div id="optional-id" class="ui positive button">deux</div>
631
- </div>
632
- </div>
633
- <!-- -->
634
- <div class="ui left aligned ten wide column">
635
- <h5 class="ui header">Markdown Syntax</h5>
636
- <div class="ui inverted very padded segment">
637
- <code>&gt; Buttons:</code>
638
- <br /><code>&gt; __Button|un__</code>
639
- <br /><code>&gt; __Div Tag||Or|Data:Text:ou__</code>
640
- <br /><code>&gt; __Positive Button|deux|&lt;Optional-ID&gt;__</code>
641
- </div>
642
- </div>
643
- <!-- -->
644
- </div>
645
166
  </div>
646
167
 
647
168
  </body>