jekyll-webawesome 0.7.1 → 0.8.0
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +19 -0
- data/README.md +660 -13
- data/jekyll-webawesome.gemspec +1 -1
- data/lib/jekyll/webawesome/version.rb +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6e259299ec096be814332a52cfd8c9f1f308ed4a6872cd4815136c0989d0958f
|
|
4
|
+
data.tar.gz: f9fbdac3048a15f63806d2d0124efef965b1cf8779d8a144212cb971a1939f57
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bdb4e3047d4e4976373713d1da244ff9242e20855114620c73230f318f80d1cbb6d32c59e68fcfd8479f4e9d5aff0393b539afa1550428c61ccb02242f6fba53
|
|
7
|
+
data.tar.gz: 7121e19cdcc9b75302597dacdf5d7247932dcb8005978dd746cae31905c68c942900236431b0fb796197724391236f8df52025ba10ac1065f1cdde3ac9916b03
|
data/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
|
|
|
8
8
|
|
|
9
9
|
- Placeholder
|
|
10
10
|
|
|
11
|
+
## [0.8.0] - 2026-02-08
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Updated `markawesome` dependency to `~> 0.3` to bring in comprehensive attribute improvements
|
|
16
|
+
- All transformer enhancements from markawesome 0.3.0 are now available:
|
|
17
|
+
- Tag: variant, size, appearance, pill, and removable attributes
|
|
18
|
+
- Tabs: activation, active, and no-scroll-controls attributes
|
|
19
|
+
- Details: disabled, open, and name attributes
|
|
20
|
+
- Copy Button: variant, size, appearance, and disabled attributes
|
|
21
|
+
- Carousel: autoplay-interval attribute
|
|
22
|
+
- Card: orientation attribute
|
|
23
|
+
- Consistent AttributeParser usage across all major transformers
|
|
24
|
+
|
|
25
|
+
### Improved
|
|
26
|
+
|
|
27
|
+
- More flexible, order-independent parameter syntax for all components
|
|
28
|
+
- Better attribute handling consistency across transformers
|
|
29
|
+
|
|
11
30
|
## [0.7.1] - 2025-11-07
|
|
12
31
|
|
|
13
32
|
### Fixed
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This is a plugin for [Jekyll](https://jekyllrb.com/) that transforms custom Markdown syntax into [Web Awesome](https://webawesome.com/) components. Use a simple, intuitive Markdown-like syntax to create rich interactive components in your Jekyll website. The goal is to keep HTML out of Markdown files and create an easier experience for non-developers to update content.
|
|
4
4
|
|
|
5
|
+
The tranformations have been extracted into a separate project: [markawesome](https://github.com/jannewaren/markawesome), which can be used with any static site generator or Ruby application that processes Markdown.
|
|
6
|
+
|
|
5
7
|
The context here is a technical documentation website, and being limited to just basic Markdown features often results in a boring wall of text which the user won't read. The aim is to help create a more visually interesting page to read, by mixing in some components like callouts, tabs, cards and collapsible summary/details.
|
|
6
8
|
|
|
7
9
|
## Web Awesome components
|
|
@@ -12,13 +14,13 @@ This plugin focuses on the most commonly used Web Awesome components for Jekyll
|
|
|
12
14
|
|
|
13
15
|
| Component | Primary Syntax | Alternative Syntax | HTML Output |
|
|
14
16
|
|-----------|----------------|-------------------|-------------|
|
|
15
|
-
| **Badge** | `!!!variant
|
|
16
|
-
| **Button** | `%%%variant
|
|
17
|
-
| **Callouts** | `:::info
|
|
18
|
-
| **Card** |
|
|
17
|
+
| **Badge** | `!!!variant appearance? pill? attention?` | `:::wa-badge variant appearance?` | `<wa-badge variant="brand" appearance="filled">content</wa-badge>` |
|
|
18
|
+
| **Button** | `%%%variant? appearance? size? pill? caret? loading? disabled?` | `:::wa-button attributes?` | `<wa-button variant="brand" size="large" pill>text</wa-button>` or with `href` for links |
|
|
19
|
+
| **Callouts** | `:::info size? appearance?` | `:::wa-callout info size? appearance?` | `<wa-callout variant="brand"><wa-icon name="circle-info"></wa-icon>content</wa-callout>` |
|
|
20
|
+
| **Card** | `===appearance? orientation?` | `:::wa-card appearance? orientation?` | `<wa-card appearance="filled" orientation="horizontal">content</wa-card>` |
|
|
19
21
|
| **Carousel** | `~~~~~~` | `:::wa-carousel` | `<wa-carousel>` with carousel items |
|
|
20
22
|
| **Comparison** | `\|\|\|` or `\|\|\|25` | `:::wa-comparison` or `:::wa-comparison 25` | `<wa-comparison>` with before/after slots |
|
|
21
|
-
| **Copy Button** |
|
|
23
|
+
| **Copy Button** | `<<<placement? disabled? duration? labels?` | `:::wa-copy-button attributes?` | `<wa-copy-button value="content" tooltip-placement="right" disabled>` |
|
|
22
24
|
| **Details** | `^^^appearance? icon-placement?` | `:::wa-details appearance? icon-placement?` | `<wa-details appearance="..." icon-placement="...">content</wa-details>` |
|
|
23
25
|
| **Dialog** | `???params?` | `:::wa-dialog params?` | `<wa-dialog>` with trigger button and content |
|
|
24
26
|
| **Tab Group** | `++++++` | `:::wa-tabs` | `<wa-tab-group><wa-tab>content</wa-tab></wa-tab-group>` |
|
|
@@ -124,9 +126,33 @@ This is a danger callout.
|
|
|
124
126
|
:::neutral
|
|
125
127
|
This is a neutral callout.
|
|
126
128
|
:::
|
|
129
|
+
|
|
130
|
+
:::brand
|
|
131
|
+
This is a brand callout (official variant name, same as `info`).
|
|
132
|
+
:::
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
You can also add optional `size` and `appearance` parameters after the variant:
|
|
136
|
+
|
|
137
|
+
```markdown
|
|
138
|
+
:::info small
|
|
139
|
+
A compact callout.
|
|
140
|
+
:::
|
|
141
|
+
|
|
142
|
+
:::warning large filled-outlined
|
|
143
|
+
A large warning with filled-outlined appearance.
|
|
144
|
+
:::
|
|
145
|
+
|
|
146
|
+
:::success accent
|
|
147
|
+
An accent callout that draws more attention.
|
|
148
|
+
:::
|
|
127
149
|
```
|
|
128
150
|
|
|
129
|
-
|
|
151
|
+
**Size options:** `small`, `medium` (default), `large`
|
|
152
|
+
|
|
153
|
+
**Appearance options:** `accent`, `filled`, `outlined`, `plain`, `filled-outlined` (default)
|
|
154
|
+
|
|
155
|
+
These transform into Web Awesome callout components with appropriate icons and styling.
|
|
130
156
|
|
|
131
157
|

|
|
132
158
|
|
|
@@ -254,6 +280,26 @@ This card uses the accent appearance for emphasis.
|
|
|
254
280
|
===
|
|
255
281
|
```
|
|
256
282
|
|
|
283
|
+
#### Card Orientations
|
|
284
|
+
|
|
285
|
+
Cards can be displayed in horizontal layout for side-by-side presentation:
|
|
286
|
+
|
|
287
|
+
```markdown
|
|
288
|
+
===horizontal
|
|
289
|
+

|
|
290
|
+
# Horizontal Card
|
|
291
|
+
This card displays with a side-by-side layout where media appears on the left.
|
|
292
|
+
===
|
|
293
|
+
|
|
294
|
+
===filled horizontal
|
|
295
|
+

|
|
296
|
+
# Combined Attributes
|
|
297
|
+
You can combine appearance and orientation in any order.
|
|
298
|
+
===
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
**Note:** Horizontal cards display media on the left and content on the right. Make sure to set an appropriate max-width for the media slot in your CSS if needed.
|
|
302
|
+
|
|
257
303
|

|
|
258
304
|
|
|
259
305
|
### Carousel
|
|
@@ -441,6 +487,7 @@ Use `aspect-ratio:auto` or `aspect-ratio:none` to override the default fixed hei
|
|
|
441
487
|
| **Navigation** | `navigation` | Show previous/next buttons |
|
|
442
488
|
| **Pagination** | `pagination` | Show dot indicators |
|
|
443
489
|
| **Autoplay** | `autoplay` | Auto-advance slides |
|
|
490
|
+
| **Autoplay Interval** | `autoplay-interval:5000` | Autoplay delay in milliseconds (default: 3000) |
|
|
444
491
|
| **Mouse Dragging** | `mouse-dragging` | Enable click-and-drag |
|
|
445
492
|
| **Vertical** | `vertical` | Vertical orientation |
|
|
446
493
|
| **Scroll Hint** | `scroll-hint:2rem` | Padding to show adjacent slides |
|
|
@@ -491,6 +538,121 @@ These transform into Web Awesome tag components with appropriate colors and styl
|
|
|
491
538
|
|
|
492
539
|

|
|
493
540
|
|
|
541
|
+
#### Tag Attributes
|
|
542
|
+
|
|
543
|
+
Tags support flexible parameters in any order:
|
|
544
|
+
|
|
545
|
+
**Variants:**
|
|
546
|
+
```markdown
|
|
547
|
+
@@@brand
|
|
548
|
+
Brand tag
|
|
549
|
+
@@@
|
|
550
|
+
|
|
551
|
+
@@@success
|
|
552
|
+
Success tag
|
|
553
|
+
@@@
|
|
554
|
+
|
|
555
|
+
@@@warning
|
|
556
|
+
Warning tag
|
|
557
|
+
@@@
|
|
558
|
+
|
|
559
|
+
@@@danger
|
|
560
|
+
Danger tag
|
|
561
|
+
@@@
|
|
562
|
+
|
|
563
|
+
@@@neutral
|
|
564
|
+
Neutral tag (default)
|
|
565
|
+
@@@
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
**Appearance Styles:**
|
|
569
|
+
```markdown
|
|
570
|
+
@@@accent
|
|
571
|
+
Accent appearance
|
|
572
|
+
@@@
|
|
573
|
+
|
|
574
|
+
@@@filled
|
|
575
|
+
Filled appearance
|
|
576
|
+
@@@
|
|
577
|
+
|
|
578
|
+
@@@outlined
|
|
579
|
+
Outlined appearance
|
|
580
|
+
@@@
|
|
581
|
+
|
|
582
|
+
@@@filled-outlined
|
|
583
|
+
Filled-outlined appearance (default)
|
|
584
|
+
@@@
|
|
585
|
+
```
|
|
586
|
+
|
|
587
|
+
**Sizes:**
|
|
588
|
+
```markdown
|
|
589
|
+
@@@small
|
|
590
|
+
Small tag
|
|
591
|
+
@@@
|
|
592
|
+
|
|
593
|
+
@@@medium
|
|
594
|
+
Medium tag (default)
|
|
595
|
+
@@@
|
|
596
|
+
|
|
597
|
+
@@@large
|
|
598
|
+
Large tag
|
|
599
|
+
@@@
|
|
600
|
+
```
|
|
601
|
+
|
|
602
|
+
**Pill Shape:**
|
|
603
|
+
```markdown
|
|
604
|
+
@@@pill
|
|
605
|
+
Rounded tag
|
|
606
|
+
@@@
|
|
607
|
+
|
|
608
|
+
@@@brand pill
|
|
609
|
+
Brand tag with rounded edges
|
|
610
|
+
@@@
|
|
611
|
+
```
|
|
612
|
+
|
|
613
|
+
**Removable Tags:**
|
|
614
|
+
```markdown
|
|
615
|
+
@@@with-remove
|
|
616
|
+
Removable tag
|
|
617
|
+
@@@
|
|
618
|
+
|
|
619
|
+
@@@success with-remove
|
|
620
|
+
Success tag with remove button
|
|
621
|
+
@@@
|
|
622
|
+
```
|
|
623
|
+
|
|
624
|
+
**Combining Attributes:**
|
|
625
|
+
|
|
626
|
+
All attributes work together in any order:
|
|
627
|
+
|
|
628
|
+
```markdown
|
|
629
|
+
@@@brand accent small pill
|
|
630
|
+
Small brand tag with accent style and rounded edges
|
|
631
|
+
@@@
|
|
632
|
+
|
|
633
|
+
@@@success filled large with-remove
|
|
634
|
+
Large filled success tag with remove button
|
|
635
|
+
@@@
|
|
636
|
+
|
|
637
|
+
@@@pill large brand filled
|
|
638
|
+
Same tag - attributes can be in any order
|
|
639
|
+
@@@
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
**Inline Tag Syntax:**
|
|
643
|
+
|
|
644
|
+
Tags can also be used inline within paragraphs or headings:
|
|
645
|
+
|
|
646
|
+
```markdown
|
|
647
|
+
Here's an inline @@@ brand v2.0 @@@ tag in a sentence.
|
|
648
|
+
|
|
649
|
+
## Feature @@@ success New @@@ Released
|
|
650
|
+
|
|
651
|
+
Status: @@@ warning Beta @@@ - testing in progress
|
|
652
|
+
|
|
653
|
+
Combine inline @@@ pill small success Ready @@@ with attributes
|
|
654
|
+
```
|
|
655
|
+
|
|
494
656
|
### Copy Buttons
|
|
495
657
|
|
|
496
658
|
Create copy-to-clipboard buttons using the `<<<` syntax:
|
|
@@ -519,15 +681,274 @@ This transforms into a Web Awesome copy button component:
|
|
|
519
681
|
<wa-copy-button value="**Copy** this text with *markdown* formatting and `code`"></wa-copy-button>
|
|
520
682
|
```
|
|
521
683
|
|
|
684
|
+
#### Copy Button Attributes
|
|
685
|
+
|
|
686
|
+
Copy buttons support flexible parameters in any order:
|
|
687
|
+
|
|
688
|
+
**Tooltip Placement:**
|
|
689
|
+
```markdown
|
|
690
|
+
<<<top
|
|
691
|
+
Copy with tooltip on top (default)
|
|
692
|
+
<<<
|
|
693
|
+
|
|
694
|
+
<<<right
|
|
695
|
+
Copy with tooltip on right
|
|
696
|
+
<<<
|
|
697
|
+
|
|
698
|
+
<<<bottom
|
|
699
|
+
Copy with tooltip on bottom
|
|
700
|
+
<<<
|
|
701
|
+
|
|
702
|
+
<<<left
|
|
703
|
+
Copy with tooltip on left
|
|
704
|
+
<<<
|
|
705
|
+
```
|
|
706
|
+
|
|
707
|
+
**Custom Labels:**
|
|
708
|
+
```markdown
|
|
709
|
+
<<<copy-label="Click to copy" success-label="Copied!" error-label="Failed"
|
|
710
|
+
Customize feedback messages
|
|
711
|
+
<<<
|
|
712
|
+
```
|
|
713
|
+
|
|
714
|
+
**Feedback Duration:**
|
|
715
|
+
```markdown
|
|
716
|
+
<<<2000
|
|
717
|
+
Show success feedback for 2 seconds
|
|
718
|
+
<<<
|
|
719
|
+
|
|
720
|
+
<<<250 right
|
|
721
|
+
Quick feedback (250ms) with right tooltip
|
|
722
|
+
<<<
|
|
723
|
+
```
|
|
724
|
+
|
|
725
|
+
**Disabled State:**
|
|
726
|
+
```markdown
|
|
727
|
+
<<<disabled
|
|
728
|
+
You can't copy this
|
|
729
|
+
<<<
|
|
730
|
+
|
|
731
|
+
<<<disabled bottom
|
|
732
|
+
Disabled with bottom tooltip
|
|
733
|
+
<<<
|
|
734
|
+
```
|
|
735
|
+
|
|
736
|
+
**Copy from Another Element:**
|
|
737
|
+
```markdown
|
|
738
|
+
<<<from="my-element"
|
|
739
|
+
Copy from element with id="my-element"
|
|
740
|
+
<<<
|
|
741
|
+
|
|
742
|
+
<<<from="my-input.value"
|
|
743
|
+
Copy from input's value property
|
|
744
|
+
<<<
|
|
745
|
+
|
|
746
|
+
<<<from="my-link[href]"
|
|
747
|
+
Copy from link's href attribute
|
|
748
|
+
<<<
|
|
749
|
+
```
|
|
750
|
+
|
|
751
|
+
**Combined Attributes:**
|
|
752
|
+
```markdown
|
|
753
|
+
<<<right disabled 1500 copy-label="Click to copy"
|
|
754
|
+
Multiple attributes in any order
|
|
755
|
+
<<<
|
|
756
|
+
|
|
757
|
+
<<<bottom 3000 copy-label="Copy" success-label="Done!" error-label="Error"
|
|
758
|
+
Full customization example
|
|
759
|
+
<<<
|
|
760
|
+
```
|
|
761
|
+
|
|
522
762
|
Copy buttons work well for:
|
|
523
763
|
|
|
524
764
|
- Code snippets and commands
|
|
525
|
-
- URLs and configuration values
|
|
765
|
+
- URLs and configuration values
|
|
526
766
|
- Installation instructions
|
|
527
767
|
- API keys or tokens
|
|
528
768
|
- Any text users might want to copy
|
|
529
769
|
|
|
530
|
-
> **Note**: The `value` attribute contains the raw text (including any markdown) that gets copied to the clipboard. The copy button displays the standard Web Awesome copy icon and handles the clipboard operation automatically.
|
|
770
|
+
> **Note**: The `value` attribute contains the raw text (including any markdown) that gets copied to the clipboard. When using the `from` attribute, the button copies from the referenced element instead. The copy button displays the standard Web Awesome copy icon and handles the clipboard operation automatically.
|
|
771
|
+
|
|
772
|
+
### Buttons
|
|
773
|
+
|
|
774
|
+
Create interactive buttons using the `%%%` syntax. Buttons support both regular buttons and link buttons (with `href`):
|
|
775
|
+
|
|
776
|
+
#### Basic Buttons
|
|
777
|
+
|
|
778
|
+
```markdown
|
|
779
|
+
%%%
|
|
780
|
+
Click me
|
|
781
|
+
%%%
|
|
782
|
+
|
|
783
|
+
%%%brand
|
|
784
|
+
Submit Form
|
|
785
|
+
%%%
|
|
786
|
+
|
|
787
|
+
%%%success
|
|
788
|
+
Save Changes
|
|
789
|
+
%%%
|
|
790
|
+
|
|
791
|
+
%%%danger
|
|
792
|
+
Delete Account
|
|
793
|
+
%%%
|
|
794
|
+
```
|
|
795
|
+
|
|
796
|
+
These transform into Web Awesome button components with the specified variants.
|
|
797
|
+
|
|
798
|
+
#### Link Buttons
|
|
799
|
+
|
|
800
|
+
Create link buttons using markdown link syntax:
|
|
801
|
+
|
|
802
|
+
```markdown
|
|
803
|
+
%%%brand
|
|
804
|
+
[Download](https://example.com/file.zip)
|
|
805
|
+
%%%
|
|
806
|
+
|
|
807
|
+
%%%success
|
|
808
|
+
[Get Started](https://example.com/start)
|
|
809
|
+
%%%
|
|
810
|
+
|
|
811
|
+
%%%
|
|
812
|
+
[Learn More](/docs)
|
|
813
|
+
%%%
|
|
814
|
+
```
|
|
815
|
+
|
|
816
|
+
Link buttons use the `href` attribute and behave like links (support CMD/CTRL+click, right-click, etc.).
|
|
817
|
+
|
|
818
|
+
#### Button Appearance
|
|
819
|
+
|
|
820
|
+
Control the button's visual appearance with the `appearance` attribute:
|
|
821
|
+
|
|
822
|
+
```markdown
|
|
823
|
+
%%%brand accent
|
|
824
|
+
Accent Button
|
|
825
|
+
%%%
|
|
826
|
+
|
|
827
|
+
%%%success filled
|
|
828
|
+
Filled Button
|
|
829
|
+
%%%
|
|
830
|
+
|
|
831
|
+
%%%warning outlined
|
|
832
|
+
Outlined Button
|
|
833
|
+
%%%
|
|
834
|
+
|
|
835
|
+
%%%danger filled-outlined
|
|
836
|
+
Filled-Outlined Button
|
|
837
|
+
%%%
|
|
838
|
+
|
|
839
|
+
%%%neutral plain
|
|
840
|
+
Plain Button
|
|
841
|
+
%%%
|
|
842
|
+
```
|
|
843
|
+
|
|
844
|
+
**Available appearances:** `accent` (default), `filled`, `outlined`, `filled-outlined`, `plain`
|
|
845
|
+
|
|
846
|
+
#### Button Sizes
|
|
847
|
+
|
|
848
|
+
Buttons come in three sizes:
|
|
849
|
+
|
|
850
|
+
```markdown
|
|
851
|
+
%%%small
|
|
852
|
+
Small Button
|
|
853
|
+
%%%
|
|
854
|
+
|
|
855
|
+
%%%medium
|
|
856
|
+
Medium Button
|
|
857
|
+
%%%
|
|
858
|
+
|
|
859
|
+
%%%large
|
|
860
|
+
Large Button
|
|
861
|
+
%%%
|
|
862
|
+
```
|
|
863
|
+
|
|
864
|
+
**Available sizes:** `small`, `medium` (default), `large`
|
|
865
|
+
|
|
866
|
+
#### Pill Buttons
|
|
867
|
+
|
|
868
|
+
Add the `pill` attribute for rounded edges:
|
|
869
|
+
|
|
870
|
+
```markdown
|
|
871
|
+
%%%pill
|
|
872
|
+
Rounded Button
|
|
873
|
+
%%%
|
|
874
|
+
|
|
875
|
+
%%%brand pill large
|
|
876
|
+
Large Pill Button
|
|
877
|
+
%%%
|
|
878
|
+
|
|
879
|
+
%%%success pill
|
|
880
|
+
[Download Now](https://example.com/download)
|
|
881
|
+
%%%
|
|
882
|
+
```
|
|
883
|
+
|
|
884
|
+
#### Dropdown Indicator
|
|
885
|
+
|
|
886
|
+
Add the `caret` attribute to show a dropdown indicator:
|
|
887
|
+
|
|
888
|
+
```markdown
|
|
889
|
+
%%%caret
|
|
890
|
+
Options ▼
|
|
891
|
+
%%%
|
|
892
|
+
|
|
893
|
+
%%%brand caret
|
|
894
|
+
Actions ▼
|
|
895
|
+
%%%
|
|
896
|
+
```
|
|
897
|
+
|
|
898
|
+
This adds a `with-caret` attribute to display a dropdown arrow, useful for buttons that trigger dropdowns or menus.
|
|
899
|
+
|
|
900
|
+
#### Button States
|
|
901
|
+
|
|
902
|
+
Buttons can have loading or disabled states:
|
|
903
|
+
|
|
904
|
+
```markdown
|
|
905
|
+
%%%loading
|
|
906
|
+
Processing...
|
|
907
|
+
%%%
|
|
908
|
+
|
|
909
|
+
%%%disabled
|
|
910
|
+
Can't Click This
|
|
911
|
+
%%%
|
|
912
|
+
|
|
913
|
+
%%%brand loading
|
|
914
|
+
Saving Changes...
|
|
915
|
+
%%%
|
|
916
|
+
|
|
917
|
+
%%%danger disabled
|
|
918
|
+
[Delete](https://example.com/delete)
|
|
919
|
+
%%%
|
|
920
|
+
```
|
|
921
|
+
|
|
922
|
+
#### Combining Attributes
|
|
923
|
+
|
|
924
|
+
All button attributes can be combined in any order:
|
|
925
|
+
|
|
926
|
+
```markdown
|
|
927
|
+
%%%brand filled large pill
|
|
928
|
+
Big Filled Button
|
|
929
|
+
%%%
|
|
930
|
+
|
|
931
|
+
%%%success outlined small pill caret
|
|
932
|
+
Small Options
|
|
933
|
+
%%%
|
|
934
|
+
|
|
935
|
+
%%%danger filled medium disabled
|
|
936
|
+
Cannot Delete
|
|
937
|
+
%%%
|
|
938
|
+
|
|
939
|
+
%%%neutral plain large loading
|
|
940
|
+
[Processing...](https://example.com/process)
|
|
941
|
+
%%%
|
|
942
|
+
```
|
|
943
|
+
|
|
944
|
+
**Attributes work in any order:**
|
|
945
|
+
- `variant`: `brand`, `success`, `neutral`, `warning`, `danger`
|
|
946
|
+
- `appearance`: `accent`, `filled`, `outlined`, `filled-outlined`, `plain`
|
|
947
|
+
- `size`: `small`, `medium`, `large`
|
|
948
|
+
- `pill`: rounded edges
|
|
949
|
+
- `caret`: dropdown indicator
|
|
950
|
+
- `loading`: loading state
|
|
951
|
+
- `disabled`: disabled state
|
|
531
952
|
|
|
532
953
|
### Dialogs
|
|
533
954
|
|
|
@@ -687,6 +1108,86 @@ Parameters can be in any order: start filled, filled start, etc.
|
|
|
687
1108
|
^^^
|
|
688
1109
|
```
|
|
689
1110
|
|
|
1111
|
+
#### Disabled State
|
|
1112
|
+
|
|
1113
|
+
Prevent the details from expanding with the `disabled` flag:
|
|
1114
|
+
|
|
1115
|
+
```markdown
|
|
1116
|
+
^^^disabled
|
|
1117
|
+
This summary cannot be expanded
|
|
1118
|
+
>>>
|
|
1119
|
+
This content is locked and cannot be viewed
|
|
1120
|
+
^^^
|
|
1121
|
+
```
|
|
1122
|
+
|
|
1123
|
+
#### Open by Default
|
|
1124
|
+
|
|
1125
|
+
Make the details open by default with the `open` flag:
|
|
1126
|
+
|
|
1127
|
+
```markdown
|
|
1128
|
+
^^^open
|
|
1129
|
+
This summary is initially expanded
|
|
1130
|
+
>>>
|
|
1131
|
+
This content is visible when the page loads
|
|
1132
|
+
^^^
|
|
1133
|
+
```
|
|
1134
|
+
|
|
1135
|
+
#### Accordion Behavior (Grouping)
|
|
1136
|
+
|
|
1137
|
+
Group multiple details with the `name:group-id` parameter to create accordion behavior where only one can be open at a time:
|
|
1138
|
+
|
|
1139
|
+
```markdown
|
|
1140
|
+
^^^name:faq-group open
|
|
1141
|
+
First Question
|
|
1142
|
+
>>>
|
|
1143
|
+
Answer to the first question (initially open)
|
|
1144
|
+
^^^
|
|
1145
|
+
|
|
1146
|
+
^^^name:faq-group
|
|
1147
|
+
Second Question
|
|
1148
|
+
>>>
|
|
1149
|
+
Answer to the second question
|
|
1150
|
+
^^^
|
|
1151
|
+
|
|
1152
|
+
^^^name:faq-group
|
|
1153
|
+
Third Question
|
|
1154
|
+
>>>
|
|
1155
|
+
Answer to the third question
|
|
1156
|
+
^^^
|
|
1157
|
+
```
|
|
1158
|
+
|
|
1159
|
+
When one details element in the group opens, others with the same `name` automatically close.
|
|
1160
|
+
|
|
1161
|
+
#### Combining All Attributes
|
|
1162
|
+
|
|
1163
|
+
All attributes can be combined in any order:
|
|
1164
|
+
|
|
1165
|
+
```markdown
|
|
1166
|
+
^^^filled start disabled
|
|
1167
|
+
Disabled with custom styling
|
|
1168
|
+
>>>
|
|
1169
|
+
Content here
|
|
1170
|
+
^^^
|
|
1171
|
+
|
|
1172
|
+
^^^filled-outlined open name:section-1
|
|
1173
|
+
First Section (initially open)
|
|
1174
|
+
>>>
|
|
1175
|
+
Content for first section
|
|
1176
|
+
^^^
|
|
1177
|
+
|
|
1178
|
+
^^^filled-outlined name:section-1
|
|
1179
|
+
Second Section
|
|
1180
|
+
>>>
|
|
1181
|
+
Only one section can be open at a time
|
|
1182
|
+
^^^
|
|
1183
|
+
```
|
|
1184
|
+
|
|
1185
|
+
**Available attributes:**
|
|
1186
|
+
- **Appearance:** `outlined` (default), `filled`, `filled-outlined`, `plain`
|
|
1187
|
+
- **Icon placement:** `start`, `end` (default)
|
|
1188
|
+
- **Boolean flags:** `disabled`, `open`
|
|
1189
|
+
- **Grouping:** `name:group-id` (for accordion behavior)
|
|
1190
|
+
|
|
690
1191
|
### Tab Groups
|
|
691
1192
|
|
|
692
1193
|
Create tabbed content using the `++++++` syntax for tab groups and `+++` for tabs.
|
|
@@ -709,14 +1210,16 @@ Content for the third tab.
|
|
|
709
1210
|
|
|
710
1211
|

|
|
711
1212
|
|
|
712
|
-
|
|
1213
|
+
#### Tab Placement
|
|
1214
|
+
|
|
1215
|
+
You can specify where tabs appear relative to content:
|
|
713
1216
|
|
|
714
1217
|
```markdown
|
|
715
1218
|
++++++start
|
|
716
1219
|
+++ Tab 1
|
|
717
1220
|
Content here
|
|
718
1221
|
+++
|
|
719
|
-
+++ Tab 2
|
|
1222
|
+
+++ Tab 2
|
|
720
1223
|
More content
|
|
721
1224
|
+++
|
|
722
1225
|
++++++
|
|
@@ -726,14 +1229,124 @@ More content
|
|
|
726
1229
|
Content here
|
|
727
1230
|
+++
|
|
728
1231
|
+++ Tab 2
|
|
729
|
-
More content
|
|
1232
|
+
More content
|
|
730
1233
|
+++
|
|
731
1234
|
++++++
|
|
732
1235
|
```
|
|
733
1236
|
|
|
734
1237
|

|
|
735
1238
|
|
|
736
|
-
Supported placements
|
|
1239
|
+
**Supported placements:** `top` (default), `bottom`, `start`, `end`
|
|
1240
|
+
|
|
1241
|
+
#### Initial Active Tab
|
|
1242
|
+
|
|
1243
|
+
Set which tab is initially active by specifying the panel name:
|
|
1244
|
+
|
|
1245
|
+
```markdown
|
|
1246
|
+
++++++tab-3
|
|
1247
|
+
+++ Tab 1
|
|
1248
|
+
First panel
|
|
1249
|
+
+++
|
|
1250
|
+
+++ Tab 2
|
|
1251
|
+
Second panel
|
|
1252
|
+
+++
|
|
1253
|
+
+++ Tab 3
|
|
1254
|
+
This tab will be active on load
|
|
1255
|
+
+++
|
|
1256
|
+
++++++
|
|
1257
|
+
```
|
|
1258
|
+
|
|
1259
|
+
Panel names follow the pattern `tab-1`, `tab-2`, `tab-3`, etc., or you can reference specific names if you're using custom IDs.
|
|
1260
|
+
|
|
1261
|
+
#### Keyboard Navigation
|
|
1262
|
+
|
|
1263
|
+
Control how keyboard navigation works with the `activation` attribute:
|
|
1264
|
+
|
|
1265
|
+
```markdown
|
|
1266
|
+
<!-- Auto activation (default) - arrow keys immediately show panels -->
|
|
1267
|
+
++++++auto
|
|
1268
|
+
+++ Tab 1
|
|
1269
|
+
Content
|
|
1270
|
+
+++
|
|
1271
|
+
+++ Tab 2
|
|
1272
|
+
Content
|
|
1273
|
+
+++
|
|
1274
|
+
++++++
|
|
1275
|
+
|
|
1276
|
+
<!-- Manual activation - arrow keys focus, but Space/Enter needed to show panel -->
|
|
1277
|
+
++++++manual
|
|
1278
|
+
+++ Tab 1
|
|
1279
|
+
Content
|
|
1280
|
+
+++
|
|
1281
|
+
+++ Tab 2
|
|
1282
|
+
Content
|
|
1283
|
+
+++
|
|
1284
|
+
++++++
|
|
1285
|
+
```
|
|
1286
|
+
|
|
1287
|
+
**Activation modes:**
|
|
1288
|
+
- `auto` (default) - Arrow keys immediately show the corresponding tab panel
|
|
1289
|
+
- `manual` - Tab receives focus but requires Space or Enter to show panel
|
|
1290
|
+
|
|
1291
|
+
#### Scroll Controls
|
|
1292
|
+
|
|
1293
|
+
Disable scroll arrows for overflowing tabs:
|
|
1294
|
+
|
|
1295
|
+
```markdown
|
|
1296
|
+
++++++no-scroll-controls
|
|
1297
|
+
+++ Tab 1
|
|
1298
|
+
Content
|
|
1299
|
+
+++
|
|
1300
|
+
+++ Tab 2
|
|
1301
|
+
Content
|
|
1302
|
+
+++
|
|
1303
|
+
+++ Tab 3
|
|
1304
|
+
Content
|
|
1305
|
+
+++
|
|
1306
|
+
++++++
|
|
1307
|
+
```
|
|
1308
|
+
|
|
1309
|
+
#### Combining Attributes
|
|
1310
|
+
|
|
1311
|
+
All attributes can be combined in any order:
|
|
1312
|
+
|
|
1313
|
+
```markdown
|
|
1314
|
+
++++++bottom manual tab-2 no-scroll-controls
|
|
1315
|
+
+++ Tab 1
|
|
1316
|
+
First panel
|
|
1317
|
+
+++
|
|
1318
|
+
+++ Tab 2
|
|
1319
|
+
This tab will be active on load
|
|
1320
|
+
+++
|
|
1321
|
+
+++ Tab 3
|
|
1322
|
+
Third panel
|
|
1323
|
+
+++
|
|
1324
|
+
++++++
|
|
1325
|
+
```
|
|
1326
|
+
|
|
1327
|
+
#### Alternative Syntax
|
|
1328
|
+
|
|
1329
|
+
You can also use the explicit `:::wa-tab-group` syntax:
|
|
1330
|
+
|
|
1331
|
+
```markdown
|
|
1332
|
+
:::wa-tab-group end manual advanced
|
|
1333
|
+
+++ General
|
|
1334
|
+
General settings
|
|
1335
|
+
+++
|
|
1336
|
+
+++ Advanced
|
|
1337
|
+
Advanced settings - this tab is active initially
|
|
1338
|
+
+++
|
|
1339
|
+
:::
|
|
1340
|
+
```
|
|
1341
|
+
|
|
1342
|
+
#### Tab Group Options
|
|
1343
|
+
|
|
1344
|
+
| Option | Values | Default | Description |
|
|
1345
|
+
|--------|--------|---------|-------------|
|
|
1346
|
+
| `placement` | `top`, `bottom`, `start`, `end` | `top` | Where tabs appear relative to content |
|
|
1347
|
+
| `activation` | `auto`, `manual` | `auto` | Keyboard navigation behavior |
|
|
1348
|
+
| `active` | panel name (e.g., `tab-2`, `advanced`) | (none) | Initially active tab panel |
|
|
1349
|
+
| `no-scroll-controls` | boolean flag | (disabled) | Disables scroll arrows for overflowing tabs |
|
|
737
1350
|
|
|
738
1351
|
## Component Reference
|
|
739
1352
|
|
|
@@ -741,14 +1354,25 @@ Supported placements: `top` (default), `bottom`, `start`, `end`.
|
|
|
741
1354
|
|
|
742
1355
|
| Type | Icon | Variant |
|
|
743
1356
|
|------|------|---------|
|
|
744
|
-
| `
|
|
1357
|
+
| `brand` | circle-info | brand |
|
|
1358
|
+
| `info` | circle-info | brand (alias) |
|
|
745
1359
|
| `success` | circle-check | success |
|
|
746
1360
|
| `warning` | triangle-exclamation | warning |
|
|
747
1361
|
| `danger` | circle-exclamation | danger |
|
|
748
1362
|
| `neutral` | gear | neutral |
|
|
749
1363
|
|
|
1364
|
+
### Callout Options
|
|
1365
|
+
|
|
1366
|
+
| Option | Values | Default |
|
|
1367
|
+
|--------|--------|---------|
|
|
1368
|
+
| `size` | `small`, `medium`, `large` | `medium` |
|
|
1369
|
+
| `appearance` | `accent`, `filled`, `outlined`, `plain`, `filled-outlined` | `filled-outlined` |
|
|
1370
|
+
|
|
750
1371
|
### Card Options
|
|
751
1372
|
|
|
1373
|
+
Cards support flexible attribute ordering using space-separated parameters:
|
|
1374
|
+
|
|
1375
|
+
**Appearance:**
|
|
752
1376
|
| Type | Description |
|
|
753
1377
|
|------|-------------|
|
|
754
1378
|
| `outlined` (default) | Default outlined appearance |
|
|
@@ -757,6 +1381,14 @@ Supported placements: `top` (default), `bottom`, `start`, `end`.
|
|
|
757
1381
|
| `filled-outlined` | Combination of filled and outlined |
|
|
758
1382
|
| `accent` | Accent appearance for emphasis |
|
|
759
1383
|
|
|
1384
|
+
**Orientation:**
|
|
1385
|
+
| Type | Description |
|
|
1386
|
+
|------|-------------|
|
|
1387
|
+
| `vertical` (default) | Traditional stacked card layout |
|
|
1388
|
+
| `horizontal` | Side-by-side layout with media on the left |
|
|
1389
|
+
|
|
1390
|
+
**Note:** All attributes can be combined in any order (e.g., `===filled horizontal` or `===horizontal filled`).
|
|
1391
|
+
|
|
760
1392
|
### Card Structure
|
|
761
1393
|
|
|
762
1394
|
Cards automatically parse content into these slots:
|
|
@@ -776,6 +1408,7 @@ Cards automatically parse content into these slots:
|
|
|
776
1408
|
| `navigation` | Boolean | Show previous/next buttons (default: off) |
|
|
777
1409
|
| `pagination` | Boolean | Show dot indicators (default: off) |
|
|
778
1410
|
| `autoplay` | Boolean | Auto-advance slides (default: off) |
|
|
1411
|
+
| `autoplay-interval:value` | Attribute | Autoplay delay in milliseconds (default: 3000, e.g., `5000` for 5 seconds) |
|
|
779
1412
|
| `mouse-dragging` | Boolean | Enable click-and-drag (default: off) |
|
|
780
1413
|
| `vertical` | Keyword | Use vertical orientation (default: horizontal) |
|
|
781
1414
|
| `scroll-hint:value` | CSS Property | Padding to show adjacent slides (e.g., `2rem`, `50px`) |
|
|
@@ -793,6 +1426,20 @@ Cards automatically parse content into these slots:
|
|
|
793
1426
|
| `danger` | Error/critical state |
|
|
794
1427
|
| `neutral` | Neutral/informational state |
|
|
795
1428
|
|
|
1429
|
+
### Button Attributes
|
|
1430
|
+
|
|
1431
|
+
| Attribute | Values | Default | Description |
|
|
1432
|
+
|-----------|--------|---------|-------------|
|
|
1433
|
+
| `variant` | `brand`, `success`, `neutral`, `warning`, `danger` | `neutral` | Semantic button color variant |
|
|
1434
|
+
| `appearance` | `accent`, `filled`, `outlined`, `filled-outlined`, `plain` | `accent` | Visual appearance style |
|
|
1435
|
+
| `size` | `small`, `medium`, `large` | `medium` | Button size (affects padding and font size) |
|
|
1436
|
+
| `pill` | keyword | off | Rounded edges for pill-style buttons |
|
|
1437
|
+
| `caret` | keyword | off | Dropdown indicator (adds `with-caret` attribute) |
|
|
1438
|
+
| `loading` | keyword | off | Shows loading spinner |
|
|
1439
|
+
| `disabled` | keyword | off | Disables button interaction |
|
|
1440
|
+
|
|
1441
|
+
**Note:** All attributes can be combined in any order. For link buttons, use markdown link syntax: `[Text](url)`.
|
|
1442
|
+
|
|
796
1443
|
### Details Appearances
|
|
797
1444
|
|
|
798
1445
|
| Type | CSS Class |
|
data/jekyll-webawesome.gemspec
CHANGED
|
@@ -33,7 +33,7 @@ Gem::Specification.new do |spec|
|
|
|
33
33
|
spec.require_paths = ['lib']
|
|
34
34
|
|
|
35
35
|
spec.add_dependency 'jekyll', '>= 3.7', '< 5.0'
|
|
36
|
-
spec.add_dependency 'markawesome', '~> 0.
|
|
36
|
+
spec.add_dependency 'markawesome', '~> 0.3'
|
|
37
37
|
|
|
38
38
|
spec.add_development_dependency 'bundler', '~> 2.0'
|
|
39
39
|
spec.add_development_dependency 'rake', '~> 13.0'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-webawesome
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Janne Waren
|
|
@@ -35,14 +35,14 @@ dependencies:
|
|
|
35
35
|
requirements:
|
|
36
36
|
- - "~>"
|
|
37
37
|
- !ruby/object:Gem::Version
|
|
38
|
-
version: '0.
|
|
38
|
+
version: '0.3'
|
|
39
39
|
type: :runtime
|
|
40
40
|
prerelease: false
|
|
41
41
|
version_requirements: !ruby/object:Gem::Requirement
|
|
42
42
|
requirements:
|
|
43
43
|
- - "~>"
|
|
44
44
|
- !ruby/object:Gem::Version
|
|
45
|
-
version: '0.
|
|
45
|
+
version: '0.3'
|
|
46
46
|
- !ruby/object:Gem::Dependency
|
|
47
47
|
name: bundler
|
|
48
48
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -138,7 +138,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
138
138
|
- !ruby/object:Gem::Version
|
|
139
139
|
version: '0'
|
|
140
140
|
requirements: []
|
|
141
|
-
rubygems_version:
|
|
141
|
+
rubygems_version: 4.0.3
|
|
142
142
|
specification_version: 4
|
|
143
143
|
summary: Jekyll plugin for Web Awesome components
|
|
144
144
|
test_files: []
|