diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index f58b77f4..676d8317 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1508,79 +1508,72 @@ a:hover { } /* Product landing page cards */ -.card-layout { +.card-section { display: flex; flex-direction: column; gap: 1.5rem; - margin-block-start: 0.5rem; - .card-section { + &.featured-section { + /* Hide all the cards past 3 if it is a featured card section */ + .card-section-content > *:nth-child(n + 4 of a.card) { + display: none; + } + } + + .card-section-title { + font-weight: 500; + font-size: var(--font-step-2); + display: block; + } + + .card-section-content { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1rem; - &.featured-section { - /* Hide all the cards past 3 if it is a featured card section */ - .card-section-content > *:nth-child(n + 4 of a.card) { - display: none; + &.card-grid { + display: grid; + grid-template-columns: repeat(var(--grid-columns), 1fr); + gap: 1.5rem; + + @media (max-width: 55rem) { + grid-template-columns: 1fr; } - } - .card-section-title { - font-weight: 500; - font-size: var(--font-step-2); - display: block; + .card { + border: 1px solid oklch(var(--color-codeblock-border)); + box-shadow: 3px 3px 0px oklch(var(--color-shadow)); + padding: 1rem; + order: 2; + } } - .card-section-content { - display: flex; - flex-direction: column; - gap: 1rem; - - &.card-grid { - display: grid; - grid-template-columns: repeat(var(--grid-columns), 1fr); - gap: 1.5rem; - - @media (max-width: 55rem) { - grid-template-columns: 1fr; - } + .card { + color: oklch(var(--color-foreground)); + text-decoration: none; - .card { - border: 1px solid oklch(var(--color-codeblock-border)); - box-shadow: 3px 3px 0px oklch(var(--color-shadow)); - padding: 1rem; - order: 2; - } + .card-container { + display: flex; + flex-direction: column; + gap: 0.5rem; } - .card { - color: oklch(var(--color-foreground)); - text-decoration: none; + .card-header { + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; + color: oklch(var(--color-brand)); - .card-container { - display: flex; - flex-direction: column; - gap: 0.5rem; + img.card-brand-icon { + height: 1.5rem; + width: auto; } - .card-header { - display: flex; - flex-direction: row; - gap: 1rem; - align-items: center; - color: oklch(var(--color-brand)); - - img.card-brand-icon { - height: 1.5rem; - width: auto; - } - - h2 { - padding: 0; - margin: 0; - font-size: var(--font-step-1); - } + h2 { + padding: 0; + margin: 0; + font-size: var(--font-step-1); } } } @@ -1588,39 +1581,34 @@ a:hover { } /* Home landing page cards */ -.homepage .card-layout { - margin-block-end: 3rem; - gap: 3rem; +.homepage .card-section { + .card-section-content.card-grid { + grid-template-columns: 1fr; - .card-section { - .card-section-content.card-grid { - grid-template-columns: 1fr; + @media (min-width: 70rem) { + grid-template-columns: repeat(12, 1fr); + grid-auto-rows: 1fr; + } - @media (min-width: 70rem) { - grid-template-columns: repeat(12, 1fr); - grid-auto-rows: 1fr; - } + .card { + padding: 1rem 2rem 2rem 2rem; - .card { - padding: 1rem 2rem 2rem 2rem; - - .card-container { - .card-header { - justify-content: flex-start; + .card-container { + .card-header { + justify-content: flex-start; - .lucide, - .card-brand-icon { - height: 40px; - width: auto; - } + .lucide, + .card-brand-icon { + height: 40px; + width: auto; } } + } - &:hover { - box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4); - text-decoration-color: oklch(var(--color-background)); - border: 1px solid oklch(var(--color-brand) / 0.8); - } + &:hover { + box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4); + text-decoration-color: oklch(var(--color-background)); + border: 1px solid oklch(var(--color-brand) / 0.8); } } } diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index de3500cf..fa69d3f9 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -5,14 +5,12 @@ description: ## NGINX Hugo Theme Documentation Documentation for hugo theme -{{}} - {{}} - {{}} - See explanations and usages of shortcodes - {{}} - {{}} - See a live example of theme components - {{}} - {{}} -{{}} +{{}} + {{}} + See explanations and usages of shortcodes + {{}} + {{}} + See a live example of theme components + {{}} +{{}} diff --git a/exampleSite/content/test-product/_index.md b/exampleSite/content/test-product/_index.md index fffc6afe..1a823443 100644 --- a/exampleSite/content/test-product/_index.md +++ b/exampleSite/content/test-product/_index.md @@ -35,25 +35,21 @@ This is a compilation of all our shortcodes to show how they look, function, res [//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid." [//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature." -{{}} - {{}} - {{}} - All shortcodes in one page. - {{}} - {{}} - Examples for call-out shortcode - {{}} - {{}} - Examples for codeblock shortcode - {{}} - {{}} -{{}} +{{}} + {{}} + All shortcodes in one page. + {{}} + {{}} + Examples for call-out shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} +{{}} ## Other Content [//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text." -{{}} - {{}} +{{}} {{}} - {{}} -{{}} +{{}} diff --git a/exampleSite/content/test-product/cards/permitted.md b/exampleSite/content/test-product/cards/permitted.md index d7d6d490..31c6458b 100644 --- a/exampleSite/content/test-product/cards/permitted.md +++ b/exampleSite/content/test-product/cards/permitted.md @@ -6,26 +6,24 @@ weight: 100 ## General usage The structure of a card looks like the following: ```plaintext - - - SOME CONTENT icon="SOME_LUCIDE_ICON"><\card> - ... - SOME CONTENT<\card> - - + + SOME CONTENT icon="SOME_LUCIDE_ICON">SOME_CONTENT<\card> + ... + ...<\card> + ``` and will render as the following:
- {{}} - {{}} - {{}} - SOME CONTENT - {{}} - {{}} - {{}} + {{}} + {{}} + SOME CONTENT + {{}} + {{}}
+Essentially, you have some `card` shortcodes that can only be put inside a `card-section` shortcode to group content together better. + ### Params To support customization, there are also some params you can add to the shortcode `` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`. @@ -41,56 +39,38 @@ To support customization, there are also some params you can add to the shortcod * `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized. * Usage: `` -For the ``, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`. +For the ``, there are some params you can add such as `title` and `isFeaturedSection`. * `title` - Title of the section.
* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false. -
-* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false. ### Additional Information While it may come immediate, you can't use a `` 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. -## Show as cards -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 ``. The usage as seen below: -```plaintext - - - SOME CONTENT icon="SOME_LUCIDE_ICON"><\card> - ... - SOME CONTENT<\card> - - -``` -and will render as the following: -
- {{}} - {{}} - {{}} - SOME CONTENT - {{}} - {{}} - {{}} -
- ## Featured Section -Denoted by the param `isFeaturedSection` in the shortcode ``, this block of cards can contain only up to three cards. +Denoted by the param `isFeaturedSection` in the shortcode ``, this block of cards can contain only up to three cards. The usage as seen below: +```plaintext + + ... + ... + ... + ... + +```
- {{}} - {{}} - {{}} - All shortcodes in one page. - {{}} - {{}} - Examples for call-out shortcode - {{}} - {{}} - Examples for codeblock shortcode - {{}} - {{}} - Examples for codeblock shortcode - {{}} - {{}} - {{}} + {{}} + {{}} + All shortcodes in one page. + {{}} + {{}} + Examples for call-out shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}} + Examples for codeblock shortcode + {{}} + {{}}
\ No newline at end of file diff --git a/layouts/shortcodes/card-layout.html b/layouts/shortcodes/card-layout.html deleted file mode 100644 index 57d83472..00000000 --- a/layouts/shortcodes/card-layout.html +++ /dev/null @@ -1,2 +0,0 @@ - -
{{- .Inner | markdownify -}}
diff --git a/layouts/shortcodes/card-section.html b/layouts/shortcodes/card-section.html index 678f8635..80ce57bf 100644 --- a/layouts/shortcodes/card-section.html +++ b/layouts/shortcodes/card-section.html @@ -1,35 +1,20 @@ {{ $title := .Get "title" }} {{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }} -{{ $showAsCardsParam := .Get "showAsCards" | default "false"}} -{{- /* Validate the parameter strictly */ -}} -{{- if not (in (slice "true" "false") $showAsCardsParam) -}} - {{- warnf "The '' Shortcode parameter 'showAsCards' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $showAsCardsParam -}} -{{- end -}} -{{- $showAsCards := cond (eq $showAsCardsParam "true") "true" "false" -}} -{{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}} -{{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}} -{{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}} {{- /* Limit the cards if it is a featured section */ -}} {{- if not (in (slice "true" "false") $isFeaturedSectionParam) -}} {{- warnf "The '' Shortcode parameter 'isFeaturedSection' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedSectionParam -}} {{- end -}} {{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}} -{{- $class := "card-grid" -}} +{{- $class := "card-section-content card-grid" -}} {{- /* Get number of cards */ -}} {{ $cardCount := len (findRE "" .Inner) }} - -{{- /* Validate that the parent is card-layout */ -}} -{{ if eq .Parent.Name "card-layout"}} -
- {{- if $title -}} - {{- $title -}} -
{{ .Inner }}
- {{ else }} -
{{ .Inner }}
- {{ end }} -
-{{ else }} - {{ errorf "The '' must be nested directly inside the shortcode ''. Please see the exampleSite for an example of usage." }} -{{ end }} \ No newline at end of file +
+ {{- if $title -}} + {{- $title -}} +
{{ .Inner }}
+ {{ else }} +
{{ .Inner }}
+ {{ end }} +
\ No newline at end of file diff --git a/tests/src/cards.spec.js b/tests/src/cards.spec.js index b700f546..c20754a2 100644 --- a/tests/src/cards.spec.js +++ b/tests/src/cards.spec.js @@ -8,24 +8,13 @@ test.describe('Testing for cards shortcode', () => { test('should test basic section', async ({ page }) => { const section = await page.locator('data-testid=cards-test__basic'); - const basicCode = await section.locator('data-testid=card-section-content'); const showAsCardCode = await section.locator( - 'data-testid=card-section-content__card-grid' + 'data-testid=card-section-content' ); - expect(await basicCode.count()).toBeTruthy(); expect(await showAsCardCode.count()).toBe(0); }); - test('should test showAsCard section', async ({ page }) => { - const section = await page.locator('data-testid=cards-test__showAsCards'); - const showAsCardCode = await section.locator( - 'data-testid=card-section-content__card-grid' - ); - - expect(await showAsCardCode.count()).toBeTruthy(); - }); - test('should test featured section', async ({ page }) => { const section = await page.locator( 'data-testid=cards-test__featuredSection'