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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 91ad296b81893bb20c5ead9eabd7ad5d4487cdf6edc90e28680bcd65e7720389
4
- data.tar.gz: 4bd4e6c52f31d1e04caee30e9c55a2f30389f7b078b408236ea2f536eb61464d
3
+ metadata.gz: 6e259299ec096be814332a52cfd8c9f1f308ed4a6872cd4815136c0989d0958f
4
+ data.tar.gz: f9fbdac3048a15f63806d2d0124efef965b1cf8779d8a144212cb971a1939f57
5
5
  SHA512:
6
- metadata.gz: ab3a822f36e015b8b7163e8ddb763a8e706c33923f162c7c9d53dce7705fd15118d7955a4c2de45f3d1dd875ebfb06919fc2518c0cc13fad8c3e71d3ee716e69
7
- data.tar.gz: e6412774f96fb0486e4a61e3023ef330c542267f8d5f4f234c41caeead926611fe51b9af8771e9f650e59420a3807e4cd44627dea2b109aad48def7850729487
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` | `:::wa-badge variant` | `<wa-badge variant="brand">content</wa-badge>` |
16
- | **Button** | `%%%variant` | `:::wa-button variant` | `<wa-button variant="brand" href="url">text</wa-button>` or `<wa-button variant="brand">text</wa-button>` |
17
- | **Callouts** | `:::info` | `:::wa-callout info` | `<wa-callout variant="brand"><wa-icon name="circle-info"></wa-icon>content</wa-callout>` |
18
- | **Card** | `===` | `:::wa-card` | `<wa-card>content</wa-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** | `<<<` | `:::wa-copy-button` | `<wa-copy-button value="content">content</wa-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
- These transform into Web Awesome callout components with appropriate icons and styling
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
  ![Callout component example](readme_screenshots/callouts.png)
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
+ ![Feature Image](feature.jpg)
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
+ ![Product Photo](product.jpg)
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
  ![Cards component example](readme_screenshots/cards.png)
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
  ![Tags component example](readme_screenshots/tags.png)
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
  ![Tabs component example](readme_screenshots/tabs1.png)
711
1212
 
712
- You can specify tab placement:
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
  ![Tabs component example](readme_screenshots/tabs2.png)
735
1238
 
736
- Supported placements: `top` (default), `bottom`, `start`, `end`.
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
- | `info` | circle-info | brand |
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 |
@@ -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.1'
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'
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Jekyll
4
4
  module WebAwesome
5
- VERSION = '0.7.1'
5
+ VERSION = '0.8.0'
6
6
  end
7
7
  end
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.7.1
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.1'
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.1'
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: 3.6.9
141
+ rubygems_version: 4.0.3
142
142
  specification_version: 4
143
143
  summary: Jekyll plugin for Web Awesome components
144
144
  test_files: []