Skip to content

Commit 19c0abd

Browse files
lamATnginxlamATnginx
committed
Cards: Removed card-layout shortcode + replaced showAsCards with new param name
1 parent 2907963 commit 19c0abd

File tree

7 files changed

+168
-186
lines changed

7 files changed

+168
-186
lines changed

‎assets/css/v2/style.css‎

Lines changed: 70 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1508,119 +1508,107 @@ a:hover {
15081508
}
15091509

15101510
/* Product landing page cards */
1511-
.card-layout {
1511+
.card-section {
15121512
display: flex;
15131513
flex-direction: column;
15141514
gap: 1.5rem;
1515-
margin-block-start: 0.5rem;
15161515

1517-
.card-section {
1516+
&.featured-section {
1517+
/* Hide all the cards past 3 if it is a featured card section */
1518+
.card-section-content > *:nth-child(n + 4 of a.card) {
1519+
display: none;
1520+
}
1521+
}
1522+
1523+
.card-section-title {
1524+
font-weight: 500;
1525+
font-size: var(--font-step-2);
1526+
display: block;
1527+
}
1528+
1529+
.card-section-content {
15181530
display: flex;
15191531
flex-direction: column;
1520-
gap: 1.5rem;
1532+
gap: 1rem;
15211533

1522-
&.featured-section {
1523-
/* Hide all the cards past 3 if it is a featured card section */
1524-
.card-section-content > *:nth-child(n + 4 of a.card) {
1525-
display: none;
1534+
&.card-grid {
1535+
display: grid;
1536+
grid-template-columns: repeat(var(--grid-columns), 1fr);
1537+
gap: 1.5rem;
1538+
1539+
@media (max-width: 55rem) {
1540+
grid-template-columns: 1fr;
15261541
}
1527-
}
15281542

1529-
.card-section-title {
1530-
font-weight: 500;
1531-
font-size: var(--font-step-2);
1532-
display: block;
1543+
.card {
1544+
border: 1px solid oklch(var(--color-codeblock-border));
1545+
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1546+
padding: 1rem;
1547+
order: 2;
1548+
}
15331549
}
15341550

1535-
.card-section-content {
1536-
display: flex;
1537-
flex-direction: column;
1538-
gap: 1rem;
1539-
1540-
&.card-grid {
1541-
display: grid;
1542-
grid-template-columns: repeat(var(--grid-columns), 1fr);
1543-
gap: 1.5rem;
1544-
1545-
@media (max-width: 55rem) {
1546-
grid-template-columns: 1fr;
1547-
}
1551+
.card {
1552+
color: oklch(var(--color-foreground));
1553+
text-decoration: none;
15481554

1549-
.card {
1550-
border: 1px solid oklch(var(--color-codeblock-border));
1551-
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
1552-
padding: 1rem;
1553-
order: 2;
1554-
}
1555+
.card-container {
1556+
display: flex;
1557+
flex-direction: column;
1558+
gap: 0.5rem;
15551559
}
15561560

1557-
.card {
1558-
color: oklch(var(--color-foreground));
1559-
text-decoration: none;
1561+
.card-header {
1562+
display: flex;
1563+
flex-direction: row;
1564+
gap: 1rem;
1565+
align-items: center;
1566+
color: oklch(var(--color-brand));
15601567

1561-
.card-container {
1562-
display: flex;
1563-
flex-direction: column;
1564-
gap: 0.5rem;
1568+
img.card-brand-icon {
1569+
height: 1.5rem;
1570+
width: auto;
15651571
}
15661572

1567-
.card-header {
1568-
display: flex;
1569-
flex-direction: row;
1570-
gap: 1rem;
1571-
align-items: center;
1572-
color: oklch(var(--color-brand));
1573-
1574-
img.card-brand-icon {
1575-
height: 1.5rem;
1576-
width: auto;
1577-
}
1578-
1579-
h2 {
1580-
padding: 0;
1581-
margin: 0;
1582-
font-size: var(--font-step-1);
1583-
}
1573+
h2 {
1574+
padding: 0;
1575+
margin: 0;
1576+
font-size: var(--font-step-1);
15841577
}
15851578
}
15861579
}
15871580
}
15881581
}
15891582

15901583
/* Home landing page cards */
1591-
.homepage .card-layout {
1592-
margin-block-end: 3rem;
1593-
gap: 3rem;
1584+
.homepage .card-section {
1585+
.card-section-content.card-grid {
1586+
grid-template-columns: 1fr;
15941587

1595-
.card-section {
1596-
.card-section-content.card-grid {
1597-
grid-template-columns: 1fr;
1588+
@media (min-width: 70rem) {
1589+
grid-template-columns: repeat(12, 1fr);
1590+
grid-auto-rows: 1fr;
1591+
}
15981592

1599-
@media (min-width: 70rem) {
1600-
grid-template-columns: repeat(12, 1fr);
1601-
grid-auto-rows: 1fr;
1602-
}
1593+
.card {
1594+
padding: 1rem 2rem 2rem 2rem;
16031595

1604-
.card {
1605-
padding: 1rem 2rem 2rem 2rem;
1606-
1607-
.card-container {
1608-
.card-header {
1609-
justify-content: flex-start;
1596+
.card-container {
1597+
.card-header {
1598+
justify-content: flex-start;
16101599

1611-
.lucide,
1612-
.card-brand-icon {
1613-
height: 40px;
1614-
width: auto;
1615-
}
1600+
.lucide,
1601+
.card-brand-icon {
1602+
height: 40px;
1603+
width: auto;
16161604
}
16171605
}
1606+
}
16181607

1619-
&:hover {
1620-
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1621-
text-decoration-color: oklch(var(--color-background));
1622-
border: 1px solid oklch(var(--color-brand) / 0.8);
1623-
}
1608+
&:hover {
1609+
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
1610+
text-decoration-color: oklch(var(--color-background));
1611+
border: 1px solid oklch(var(--color-brand) / 0.8);
16241612
}
16251613
}
16261614
}

‎exampleSite/content/_index.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ description:
55

66
## NGINX Hugo Theme Documentation
77
Documentation for hugo theme
8-
{{<card-layout>}}
9-
{{<card-section showAsCards="true">}}
10-
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
11-
See explanations and usages of shortcodes
12-
{{</card >}}
13-
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
14-
See a live example of theme components
15-
{{</card >}}
16-
{{</card-section>}}
17-
{{</card-layout>}}
8+
{{<card-section>}}
9+
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
10+
See explanations and usages of shortcodes
11+
{{</card >}}
12+
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
13+
See a live example of theme components
14+
{{</card >}}
15+
{{</card-section>}}
1816

‎exampleSite/content/test-product/_index.md‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,25 +35,21 @@ This is a compilation of all our shortcodes to show how they look, function, res
3535
[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid."
3636
[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature."
3737

38-
{{<card-layout >}}
39-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
40-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
41-
All shortcodes in one page.
42-
{{</card >}}
43-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
44-
Examples for call-out shortcode
45-
{{</card >}}
46-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
47-
Examples for codeblock shortcode
48-
{{</card >}}
49-
{{</card-section>}}
50-
{{</card-layout >}}
38+
{{<card-section isFeaturedSection="true">}}
39+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
40+
All shortcodes in one page.
41+
{{</card >}}
42+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
43+
Examples for call-out shortcode
44+
{{</card >}}
45+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
46+
Examples for codeblock shortcode
47+
{{</card >}}
48+
{{</card-section>}}
5149

5250
## Other Content
5351
[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text."
5452

55-
{{<card-layout >}}
56-
{{<card-section title="NGINX" showAsCards="true" >}}
53+
{{<card-section title="NGINX" >}}
5754
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" />}}
58-
{{</card-section >}}
59-
{{</card-layout >}}
55+
{{</card-section >}}

‎exampleSite/content/test-product/cards/permitted.md‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,24 @@ weight: 100
66
## General usage
77
The structure of a card looks like the following:
88
```plaintext
9-
<card-layout >
10-
<card-section>
11-
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
12-
...
13-
<card>SOME CONTENT<\card>
14-
</card-section>
15-
</card-layout >
9+
<card-section>
10+
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON">SOME_CONTENT<\card>
11+
...
12+
<card>...<\card>
13+
</card-section>
1614
```
1715

1816
and will render as the following:
1917
<div data-testid="cards-test__basic">
20-
{{<card-layout >}}
21-
{{<card-section>}}
22-
{{<card title="SOME_TITLE">}}
23-
SOME CONTENT
24-
{{</card >}}
25-
{{</card-section>}}
26-
{{</card-layout >}}
18+
{{<card-section>}}
19+
{{<card title="SOME_TITLE">}}
20+
SOME CONTENT
21+
{{</card >}}
22+
{{</card-section>}}
2723
</div>
2824

25+
Essentially, you have some `card` shortcodes that can only be put inside a `card-section` shortcode to group content together better.
26+
2927
### Params
3028
To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`.
3129

@@ -41,56 +39,61 @@ To support customization, there are also some params you can add to the shortcod
4139
* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
4240
* Usage: `<card isFullSize="true"...>`
4341

44-
For the `<card-section>`, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`.
42+
For the `<card-section>`, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsSingleRow`.
4543
* `title` - Title of the section.
4644
<br>
4745
* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false.
4846
<br>
49-
* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false.
47+
* `showAsSingleRow` (optional) - Boolean indicating whether or not the cards in the section should appear without borders + one card per row. By default, false.
5048

5149
### Additional Information
5250
While it may come immediate, you can't use a `<card>` shortcode on its own in your markdown or else the build will fail. This is because if you call a card, there is no way to structure it in a writer-friendly customizable way.
5351

54-
## Show as cards
55-
As you can see from the above example in 'General usage', it renders as a plain box that does not resemble a card. To change the appearance and render as a card, use the param `showAsCards` in the shortcode `<card-section>`. The usage as seen below:
52+
## Show as single row
53+
As you can see from the above example in 'General usage', it renders as a block with borders, aka a card. To change the appearance and render without the borders and move to one card per row, use the param `showAsSingleRow` in the shortcode `<card-section>`. The usage as seen below:
5654
```plaintext
57-
<card-layout >
58-
<card-section showAsCards="true">
59-
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
60-
...
61-
<card>SOME CONTENT<\card>
62-
</card-section>
63-
</card-layout >
55+
<card-section showAsSingleRow="true">
56+
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON">SOME CONTENT<\card>
57+
...
58+
<card>...<\card>
59+
</card-section>
6460
```
6561
and will render as the following:
66-
<div data-testid="cards-test__showAsCards">
67-
{{<card-layout >}}
68-
{{<card-section showAsCards="true">}}
69-
{{<card title="SOME_TITLE">}}
70-
SOME CONTENT
71-
{{</card >}}
72-
{{</card-section>}}
73-
{{</card-layout >}}
62+
<div data-testid="cards-test__showAsSingleRow">
63+
{{<card-section showAsSingleRow="true">}}
64+
{{<card title="SOME_TITLE_1">}}
65+
SOME CONTENT 1
66+
{{</card >}}
67+
{{<card title="SOME_TITLE_2">}}
68+
SOME CONTENT 2
69+
{{</card >}}
70+
{{</card-section>}}
7471
</div>
7572

7673
## Featured Section
77-
Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this block of cards can contain only up to three cards.
74+
Denoted by the param `isFeaturedSection` in the shortcode `<card-section>`, this block of cards can contain only up to three cards. The usage as seen below:
75+
```plaintext
76+
<card-section isFeaturedSection="true">
77+
<card ... >...</card>
78+
<card ... >...</card>
79+
<card ... >...</card>
80+
<card ... >...</card>
81+
</card-section>
82+
```
7883

7984
<div data-testid="cards-test__featuredSection">
80-
{{<card-layout >}}
81-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
82-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
83-
All shortcodes in one page.
84-
{{</card >}}
85-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
86-
Examples for call-out shortcode
87-
{{</card >}}
88-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
89-
Examples for codeblock shortcode
90-
{{</card >}}
91-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
92-
Examples for codeblock shortcode
93-
{{</card >}}
94-
{{</card-section>}}
95-
{{</card-layout >}}
85+
{{<card-section isFeaturedSection="true">}}
86+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
87+
All shortcodes in one page.
88+
{{</card >}}
89+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
90+
Examples for call-out shortcode
91+
{{</card >}}
92+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
93+
Examples for codeblock shortcode
94+
{{</card >}}
95+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
96+
Examples for codeblock shortcode
97+
{{</card >}}
98+
{{</card-section>}}
9699
</div>

‎layouts/shortcodes/card-layout.html‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

0 commit comments

Comments
 (0)