markdown-ui 0.1.7 → 0.1.8

Sign up to get free protection for your applications and to get access to all the features.
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>