Compare commits

..

2 Commits

Author SHA1 Message Date
a0096a821d Merge 2fb6f63b41 into e3b582676e 2024-07-09 20:41:36 -05:00
2fb6f63b41 fix: add missing Markdown syntax examples 2024-06-21 19:01:08 +02:00
10 changed files with 402 additions and 1002 deletions

View File

@ -3,7 +3,7 @@
"features": { "features": {
"ghcr.io/devcontainers/features/hugo:1": { "ghcr.io/devcontainers/features/hugo:1": {
"extended": true, "extended": true,
"version": "0.131.0" "version": "0.124.1"
}, },
"ghcr.io/devcontainers/features/node:1": {} "ghcr.io/devcontainers/features/node:1": {}
}, },

View File

@ -31,7 +31,7 @@ jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.131.0 HUGO_VERSION: 0.126.1
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4

View File

@ -1,5 +1,5 @@
/* /*
! tailwindcss v3.4.9 | MIT License | https://tailwindcss.com ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*//* *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@ -596,6 +596,10 @@ video {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.hx-my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.hx-my-1\.5 { .hx-my-1\.5 {
margin-top: 0.375rem; margin-top: 0.375rem;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
@ -604,6 +608,9 @@ video {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.-hx-mb-0 {
margin-bottom: -0px;
}
.-hx-mb-0\.5 { .-hx-mb-0\.5 {
margin-bottom: -0.125rem; margin-bottom: -0.125rem;
} }
@ -712,6 +719,9 @@ video {
.hx-h-2 { .hx-h-2 {
height: 0.5rem; height: 0.5rem;
} }
.hx-h-3 {
height: 0.75rem;
}
.hx-h-3\.5 { .hx-h-3\.5 {
height: 0.875rem; height: 0.875rem;
} }
@ -748,6 +758,9 @@ video {
.hx-w-2 { .hx-w-2 {
width: 0.5rem; width: 0.5rem;
} }
.hx-w-3 {
width: 0.75rem;
}
.hx-w-3\.5 { .hx-w-3\.5 {
width: 0.875rem; width: 0.875rem;
} }
@ -875,6 +888,10 @@ video {
.hx-gap-4 { .hx-gap-4 {
gap: 1rem; gap: 1rem;
} }
.hx-gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.hx-gap-x-1\.5 { .hx-gap-x-1\.5 {
-moz-column-gap: 0.375rem; -moz-column-gap: 0.375rem;
column-gap: 0.375rem; column-gap: 0.375rem;
@ -1049,6 +1066,9 @@ video {
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
} }
.hx-p-0 {
padding: 0px;
}
.hx-p-0\.5 { .hx-p-0\.5 {
padding: 0.125rem; padding: 0.125rem;
} }
@ -1067,6 +1087,10 @@ video {
.hx-p-6 { .hx-p-6 {
padding: 1.5rem; padding: 1.5rem;
} }
.hx-px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.hx-px-1\.5 { .hx-px-1\.5 {
padding-left: 0.375rem; padding-left: 0.375rem;
padding-right: 0.375rem; padding-right: 0.375rem;
@ -1075,10 +1099,6 @@ video {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.hx-px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.hx-px-3 { .hx-px-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
@ -2105,7 +2125,7 @@ article details > summary::before {
/* GenericDeleted */ /* GenericDeleted */
.dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 } .dark .highlight .chroma .gd { color: #ffa198; background-color: #490202 }
/* GenericEmph */ /* GenericEmph */
.dark .highlight .chroma .ge { color: inherit; font-style: italic } .dark .highlight .chroma .ge { font-style: italic }
/* GenericError */ /* GenericError */
.dark .highlight .chroma .gr { color: #ffa198 } .dark .highlight .chroma .gr { color: #ffa198 }
/* GenericHeading */ /* GenericHeading */
@ -2238,9 +2258,6 @@ article details > summary::before {
.hextra-cards { .hextra-cards {
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr)); grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
} }
.hextra-card {
position: relative;
}
.hextra-card img { .hextra-card img {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -2256,7 +2273,6 @@ article details > summary::before {
} }
.hextra-card p { .hextra-card p {
margin-top: 0.5rem; margin-top: 0.5rem;
position: relative;
} }
.dark .hextra-card svg { .dark .hextra-card svg {
color: #ffffff66; color: #ffffff66;
@ -2264,13 +2280,6 @@ article details > summary::before {
.dark .hextra-card:hover svg { .dark .hextra-card:hover svg {
color: currentColor; color: currentColor;
} }
.hextra-card-tag {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
font-size: .65rem;
}
.steps h3 { .steps h3 {
counter-increment: step; counter-increment: step;
} }
@ -2491,7 +2500,7 @@ nav .search-wrapper {
background-color: rgb(255 255 255 / .85); background-color: rgb(255 255 255 / .85);
--tw-backdrop-blur: blur(12px); --tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
} }
.nav-container-blur:is(html[class~="dark"] *) { .nav-container-blur:is(html[class~="dark"] *) {
background-color: rgb(17 17 17 / 0.8) !important; background-color: rgb(17 17 17 / 0.8) !important;
@ -2566,7 +2575,7 @@ nav .search-wrapper {
--tw-bg-opacity: .85; --tw-bg-opacity: .85;
--tw-backdrop-blur: blur(12px); --tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
} }
.hextra-code-copy-btn:is(html[class~="dark"] *) { .hextra-code-copy-btn:is(html[class~="dark"] *) {
--tw-bg-opacity: 0.8; --tw-bg-opacity: 0.8;
@ -2795,27 +2804,27 @@ body:is(html[class~="dark"] *) {
.hx-group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hx-hidden { .hx-group\/copybtn.copied .group-\[\.copied\]\/copybtn\:hx-hidden {
display: none; display: none;
} }
.data-\[state\=selected\]\:hx-block[data-state="selected"] { .data-\[state\=selected\]\:hx-block[data-state=selected] {
display: block; display: block;
} }
.data-\[state\=closed\]\:hx-hidden[data-state="closed"] { .data-\[state\=closed\]\:hx-hidden[data-state=closed] {
display: none; display: none;
} }
.data-\[state\=open\]\:hx-hidden[data-state="open"] { .data-\[state\=open\]\:hx-hidden[data-state=open] {
display: none; display: none;
} }
.data-\[state\=selected\]\:hx-border-primary-500[data-state="selected"] { .data-\[state\=selected\]\:hx-border-primary-500[data-state=selected] {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity)); border-color: hsl(var(--primary-hue) var(--primary-saturation) 50% / var(--tw-border-opacity));
} }
.data-\[state\=selected\]\:hx-text-primary-600[data-state="selected"] { .data-\[state\=selected\]\:hx-text-primary-600[data-state=selected] {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
} }
.hx-group[data-theme="dark"] .group-data-\[theme\=dark\]\:hx-hidden { .hx-group[data-theme=dark] .group-data-\[theme\=dark\]\:hx-hidden {
display: none; display: none;
} }
.hx-group[data-theme="light"] .group-data-\[theme\=light\]\:hx-hidden { .hx-group[data-theme=light] .group-data-\[theme\=light\]\:hx-hidden {
display: none; display: none;
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
@ -3360,6 +3369,9 @@ body:is(html[class~="dark"] *) {
display: block; display: block;
} }
} }
.ltr\:hx-right-1:where([dir="ltr"], [dir="ltr"] *) {
right: 0.25rem;
}
.ltr\:hx-right-1\.5:where([dir="ltr"], [dir="ltr"] *) { .ltr\:hx-right-1\.5:where([dir="ltr"], [dir="ltr"] *) {
right: 0.375rem; right: 0.375rem;
} }
@ -3434,6 +3446,9 @@ body:is(html[class~="dark"] *) {
left: auto; left: auto;
} }
} }
.rtl\:hx-left-1:where([dir="rtl"], [dir="rtl"] *) {
left: 0.25rem;
}
.rtl\:hx-left-1\.5:where([dir="rtl"], [dir="rtl"] *) { .rtl\:hx-left-1\.5:where([dir="rtl"], [dir="rtl"] *) {
left: 0.375rem; left: 0.375rem;
} }

View File

@ -2,10 +2,6 @@
grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr)); grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--hextra-cards-grid-cols))), 1fr));
} }
.hextra-card {
position: relative;
}
.hextra-card img { .hextra-card img {
user-select: none; user-select: none;
} }
@ -22,7 +18,6 @@
.hextra-card p { .hextra-card p {
margin-top: 0.5rem; margin-top: 0.5rem;
position: relative;
} }
.dark .hextra-card svg { .dark .hextra-card svg {
@ -32,11 +27,3 @@
.dark .hextra-card:hover svg { .dark .hextra-card:hover svg {
color: currentColor; color: currentColor;
} }
.hextra-card-tag {
position: absolute;
top: 5px;
right: 5px;
z-index: 10;
font-size: .65rem;
}

View File

@ -6,7 +6,7 @@ prev: /docs/guide
## 目录结构 ## 目录结构
默认情况下Hugo 在 `content` 目录中搜索 Markdown 文件,目录的结构决定了网站的最终输出结构。 默认情况下Hugo 在 `context` 目录中搜索 Markdown 文件,目录的结构决定了网站的最终输出结构。
以示例网站为例: 以示例网站为例:
<!--more--> <!--more-->

View File

@ -7,12 +7,11 @@ linkTitle: Cards
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="Callout" icon="warning" >}} {{< card link="../callout" title="Callout" icon="warning" >}}
{{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
{{< card link="/" title="No Icon" >}} {{< card link="/" title="No Icon" >}}
{{< /cards >}} {{< /cards >}}
{{< cards >}} {{< cards >}}
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}} {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
{{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}} {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
{{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}} {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}} {{< /cards >}}
@ -22,7 +21,6 @@ linkTitle: Cards
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="Callout" icon="warning" */>}} {{</* card link="../callout" title="Callout" icon="warning" */>}}
{{</* card link="../callout" title="Card with tag" icon="warning" tag= "A custom tag" */>}}
{{</* card link="/" title="No Icon" */>}} {{</* card link="/" title="No Icon" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
@ -37,15 +35,13 @@ linkTitle: Cards
## Card Parameters ## Card Parameters
| Parameter | Description | | Parameter | Description |
|----------- |-----------------------------------------------------------------| |----------- |---------------------------------------|
| `link` | URL (internal or external). | | `link` | URL (internal or external). |
| `title` | Title heading for the card. | | `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). | | `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. | | `icon` | Name of the icon. |
| `tag` | Text in tag. |
| `tagColor` | Color of the tag: `gray` (default), `yellow`, `red` and `blue`. |
## Image Card ## Image Card
Additionally, the card supports adding image and processing through these parameters: Additionally, the card supports adding image and processing through these parameters:
@ -66,24 +62,3 @@ Hextra auto-detects if image processing is needed during build and applies the `
It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`. It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/). For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
## Tags
Card supports adding tags which could be useful to show extra status information.
{{< cards >}}
{{< card link="../callout" title="Card with default tag" tag="tag text" >}}
{{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
{{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
{{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
{{< /cards >}}
```
{{</* cards */>}}
{{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
{{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
{{</* /cards */>}}
```

View File

@ -211,7 +211,6 @@
"hextra-card-icon", "hextra-card-icon",
"hextra-card-image", "hextra-card-image",
"hextra-card-subtitle", "hextra-card-subtitle",
"hextra-card-tag",
"hextra-cards", "hextra-cards",
"hextra-code-block", "hextra-code-block",
"hextra-code-copy-btn", "hextra-code-copy-btn",
@ -419,7 +418,6 @@
"hx-pt-8", "hx-pt-8",
"hx-px-1.5", "hx-px-1.5",
"hx-px-2", "hx-px-2",
"hx-px-2.5",
"hx-px-3", "hx-px-3",
"hx-px-4", "hx-px-4",
"hx-px-6", "hx-px-6",
@ -482,7 +480,6 @@
"hx-text-white", "hx-text-white",
"hx-text-xl", "hx-text-xl",
"hx-text-xs", "hx-text-xs",
"hx-text-xxs",
"hx-text-yellow-900", "hx-text-yellow-900",
"hx-to-gray-600", "hx-to-gray-600",
"hx-top-0", "hx-top-0",

View File

@ -7,8 +7,6 @@
{{- $width := .width -}} {{- $width := .width -}}
{{- $height := .height -}} {{- $height := .height -}}
{{- $imageStyle := .imageStyle -}} {{- $imageStyle := .imageStyle -}}
{{- $tag := .tag -}}
{{- $tagType := .tagType -}}
{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }} {{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
{{- with $image -}} {{- with $image -}}
@ -52,17 +50,5 @@
{{- with $subtitle -}} {{- with $subtitle -}}
<div class="hextra-card-subtitle hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div> <div class="hextra-card-subtitle hx-line-clamp-3 hx-text-sm hx-font-normal hx-text-gray-500 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
{{- end -}} {{- end -}}
{{- if $tag }}
{{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
{{ $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
{{ $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
{{ $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
{{ $tagClass := cond (eq $tagType "info") $infoClass (cond (eq $tagType "warning") $warningClass (cond (eq $tagType "error") $errorClass $defaultClass)) }}
<div class="hextra-card-tag">
<span class="hx-inline-block hx-rounded-full hx-px-2.5 hx-leading-6 {{ $tagClass }}">{{ $tag }}</span>
</div>
{{- end -}}
</a> </a>
{{- /* Strip trailing newline. */ -}} {{- /* Strip trailing newline. */ -}}

View File

@ -7,8 +7,6 @@
{{- $width := 0 -}} {{- $width := 0 -}}
{{- $height := 0 -}} {{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}} {{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagType := .Get "tagType" -}}
{{/* Image processing options */}} {{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}} {{- $method := .Get "method" | default "Resize" | humanize -}}
@ -50,7 +48,5 @@
"width" $width "width" $width
"height" $height "height" $height
"imageStyle" $imageStyle "imageStyle" $imageStyle
"tag" $tag
"tagType" $tagType
) )
-}} -}}

1256
package-lock.json generated

File diff suppressed because it is too large Load Diff