diff --git a/assets/img/creator-1x1.jpg b/assets/img/creator-1x1.jpg new file mode 100644 index 00000000..90846f67 Binary files /dev/null and b/assets/img/creator-1x1.jpg differ diff --git a/data/structures/accordion-item.yml b/data/structures/accordion-item.yml index 958bb3c8..54aa5cea 100644 --- a/data/structures/accordion-item.yml +++ b/data/structures/accordion-item.yml @@ -4,20 +4,16 @@ arguments: header: type: string optional: false - comment: >- - Header of the accordion item. + comment: Header of the accordion item. show: type: bool optional: true - comment: >- - flag to indicate an item should be shown as collapsed. + comment: Flag to indicate an item should be shown as collapsed. class: type: string optional: true - comment: >- - Class attribute of the accordion item. + comment: Class attribute of the accordion item. body: optional: false - comment: >- - Content of the accordion item. + comment: Content of the accordion item. group: shortcode diff --git a/data/structures/accordion.yml b/data/structures/accordion.yml index e712634a..40dd2b24 100644 --- a/data/structures/accordion.yml +++ b/data/structures/accordion.yml @@ -15,5 +15,4 @@ arguments: class: type: string optional: true - comment: >- - Class attribute of the accordion, e.g. “w-50”. + comment: Class attribute of the accordion, e.g. “w-50”. diff --git a/data/structures/alert.yml b/data/structures/alert.yml index b2adc354..ed074b4a 100644 --- a/data/structures/alert.yml +++ b/data/structures/alert.yml @@ -2,51 +2,45 @@ comment: >- Use the alert shortcode to display a contextual feedback message. The inner content is used as alert text. arguments: - class: - type: string - optional: true - comment: >- - Class attribute of the alert element. - color: - type: select - optional: true - default: danger - comment: >- - Theme color of the alert. - options: - values: - - primary - - secondary - - success - - danger - - warning - - info - - light - - dark - - white - - black - dismissible: - type: bool - optional: true - default: false - comment: >- - Flag to indicate the alert is dismissible. - icon: - type: string - optional: true - comment: >- - Font Awesome icon to include. - type: - type: select - optional: true - comment: >- - Type of the alert, generates an alert with related color and icon. - options: - values: - - danger - - info + class: + type: string + optional: true + comment: Class attribute of the alert element. + color: + type: select + optional: true + default: danger + comment: Theme color of the alert. + options: + values: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + - white + - black + dismissible: + type: bool + optional: true + default: false + comment: Flag to indicate the alert is dismissible. + icon: + type: string + optional: true + comment: Font Awesome icon to include. + type: + type: select + optional: true + comment: Type of the alert, generates an alert with related color and icon. + options: + values: + - danger + - info body: optional: false - comment: >- - Alert text. + comment: Alert text. group: shortcode diff --git a/data/structures/link.yml b/data/structures/link.yml new file mode 100644 index 00000000..b8a4e19f --- /dev/null +++ b/data/structures/link.yml @@ -0,0 +1,74 @@ +comment: >- + Generates a link for a given named link or url. The shortcode supports a + single unnamed parameter, or various named parameters. The unnamed parameter + is recognized as a url if it starts with "http", else it is treated as either + a named link or internal reference (in that order). Any inner text is rendered + as the link title, otherwise it uses the host name (for external links), link + title (for internal links), or anchor name (for any local references + containing a "#"). +arguments: + page: + type: + - '*hugolib.pageState' + - '*hugolib.pageForShortcode' + optional: false + group: partial + comment: Context of the current page. + destination: + type: string + optional: false + group: partial + comment: >- + Target destination. + href: + type: string + position: 0 + optional: true + comment: >- + Reference to either an external link (if it starts with http), a named + link (if it can be found in params.links), or internal reference. + Both external and internal references may include an anchor "#". + name: + type: string + optional: true + comment: Alias of href. + url: + type: string + optional: true + comment: Alias of href. + cue: + type: bool + optional: true + comment: >- + Flag to indicate if an external link should show a visual cue, defaults to + setting "main.externalLinks.cue" in the site's parameters. + tab: + type: bool + optional: true + comment: >- + Flag to indicate if an external link should open in a new tab, defaults to + setting "main.externalLinks.tab" in the site's parameters. + case: + type: bool + optional: true + default: true + comment: >- + Flag to indicate if the retrieved title (e.g. no inner text is provided) + of an internal link should use its original case. If false, the title is + set to lower case. + class: + type: string + optional: true + comment: Class attribute of the anchor element. + text: + type: + - string + - template.HTML + optional: true + group: partial + comment: Link title. +body: + type: string + optional: true + group: shortcode + comment: Link title. diff --git a/data/structures/mark.yml b/data/structures/mark.yml new file mode 100644 index 00000000..4106bd37 --- /dev/null +++ b/data/structures/mark.yml @@ -0,0 +1,27 @@ +comment: Highlights text by applying a background color. +arguments: + class: + type: string + optional: true + comment: Class attribute of the highlight element. + color: + type: select + optional: true + comment: >- + Theme color of the highlight. By default, the highlight uses the color of + the HTML mark function. + options: + values: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + - white + - black +body: + optional: false + comment: Text to be marked. diff --git a/data/structures/nav-item.yml b/data/structures/nav-item.yml new file mode 100644 index 00000000..810f8604 --- /dev/null +++ b/data/structures/nav-item.yml @@ -0,0 +1,56 @@ +comment: >- + Defines an individual nav item. +arguments: + id: + type: string + optional: true + comment: ID of the nav-item. + parent: cascade + parentID: + type: string + optional: false + comment: ID of the parent (e.g. nav control). + group: partial + header: + type: string + optional: false + comment: Header of the nav item. + show: + type: bool + optional: true + comment: >- + Flag to indicate the nav item should be shown. Only one can be shown at a + time. + disabled: + type: bool + optional: true + comment: Flag to indicate the item should be in a disabled state. + fade: + type: bool + optional: true + comment: Flag to make the tab pane fade in. + parent: cascade + class: + type: string + optional: true + comment: Class attribute of the nav item. + body: + type: + - string + - template.HTML + optional: true + comment: The body content of the nav-item, supports Markdown and HTML (if enabled). + group: partial + item_type: + type: select + optional: true + comment: Type of the item to render. + options: + values: + - accordion + - tab-pane + group: partial +body: + optional: false + comment: Content of the nav item. + group: shortcode diff --git a/data/structures/nav.yml b/data/structures/nav.yml new file mode 100644 index 00000000..c0960cd2 --- /dev/null +++ b/data/structures/nav.yml @@ -0,0 +1,82 @@ +comment: >- + Displays a tab group of multiple items. Add nav-item inner elements for each + tab pane. +arguments: + id: + type: string + optional: true + comment: >- + Identifier of the tab group, uses a generated sequence if not specified. + page: + type: + - '*hugolib.pageState' + - '*hugolib.pageForShortcode' + optional: false + comment: Context of the current page. + group: partial + list: + type: + - page.Pages + - resource.Resources + optional: true + comment: Array of pages to be rendered as nav items. + group: partial + type: + type: select + optional: true + comment: Type of the tab group. + options: + values: + - tabs + - pills + - underline + - callout + vertical: + type: bool + default: false + optional: true + comment: Flag to show vertical tabs instead of horizontal tabs. + wrap: + type: bool + default: false + optional: true + comment: Flag to enable word wrapping of tab titles. + class: + type: string + optional: true + comment: Class attribute of the tab group, e.g. “nav-fill”. + pane: + type: select + optional: true + default: none + comment: Style of the panes. + options: + values: + - none + - persona + group: partial + width: + type: select + optional: true + default: 100 + comment: Responsive width of the tab group. + options: + values: + - 50 + - 100 + group: partial + loading: + type: select + optional: true + default: eager + parent: cascade + comment: >- + Loading behavior of the image. The loading of lazily loaded images is + deferred until the image is within scrolling range of the viewport. This + should reduce the initial loading time of the website. It is recommended + to lazily load only those images that are below the page fold. + options: + values: + - lazy + - eager + group: partial diff --git a/data/structures/navbar.yml b/data/structures/navbar.yml new file mode 100644 index 00000000..397c64d0 --- /dev/null +++ b/data/structures/navbar.yml @@ -0,0 +1,102 @@ +comment: >- + Displays a navigation header with a toggler. The menu items are derived from + the site's configuration. Nested items are supported at one-level depth. The + navigation bar includes a search area and a language switcher if applicable. +arguments: + page: + type: + - '*hugolib.pageState' + - '*hugolib.pageForShortcode' + optional: false + comment: Context of the current page. + group: partial + path: + type: path + optional: false + comment: Path of the active page. + group: shortcode + title: + type: string + optional: true + comment: >- + Brand title, displayed when the logo is not set. Defaults to the site's + title. + class: + type: string + optional: true + comment: Class attribute of the navbar container. + color: + type: select + optional: true + comment: Background theme color of the navbar. + options: + values: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + - white + - black + - body + - body-tertiary + id: + type: string + optional: true + comment: >- + ID of the navbar, defaults to "navbar-0". The id is used by several child + elements, including a color mode switcher, version switcher, and collapse + panel. + menus: + type: string + optional: true + default: main + comment: Name of the menu configuration. + size: + type: select + optional: true + comment: Breakpoint of the navbar toggler. + default: md + options: + values: + - xs + - sm + - md + - lg + - xl + style: + type: select + optional: true + default: light + comment: Style of the navbar. + options: + values: + - light + - dark + mode: + type: bool + optional: true + default: true + comment: >- + Flag to include a color mode switcher, defaults to "true" when dark mode + is enabled. + search: + type: bool + optional: true + default: true + comment: Flag to include a search input. + fixed: + type: bool + optional: true + default: false + comment: Flag to indicate the navbar should stick to the top. + group: partial + logo: + type: path + optional: true + comment: >- + Address of the logo image, defaults to the parameter "logo" set in the + "main" section of the site's parameter configuration. diff --git a/data/structures/persona.yml b/data/structures/persona.yml new file mode 100644 index 00000000..98b2a906 --- /dev/null +++ b/data/structures/persona.yml @@ -0,0 +1,60 @@ +comment: >- + Display a custom persona card. +arguments: + path: + type: path + optional: true + comment: >- + Path of the page that defines the card content. You can set "title", + "href", "thumbnail" and the inner content individually too. + title: + type: + - string + - template.HTML + optional: true + comment: Title of the card. + class: + type: string + optional: true + comment: Class attribute of the card element, e.g. “w-50”. + color: + type: select + optional: true + default: primary + comment: Theme color of the element. + options: + values: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + - white + - black + - body + - body-tertiary + href: + type: + - string + - template.URL + optional: true + comment: Address for the button or hyperlink. + content: + type: + - string + - template.HTML + optional: true + comment: Content of the card. + group: partial + thumbnail: + type: url + optional: true + comment: Thumbnail image url, displayed on top or the left of the card. +body: + optional: true + comment: >- + Description of the card. + group: shortcode diff --git a/data/structures/release.yml b/data/structures/release.yml new file mode 100644 index 00000000..ab30b1d1 --- /dev/null +++ b/data/structures/release.yml @@ -0,0 +1,39 @@ +comment: >- + Displays a release button that links to a specific release. Use the state to + indicate if it is a new or deprecated feature. +arguments: + version: + type: string + optional: false + comment: Version string, expects semver notation with a "v" prefix. + state: + type: select + optional: true + default: new + comment: State of the feature. + options: + values: + - new + - deprecated + short: + type: bool + optional: true + comment: Flag to indicate the release button should use short notation. + size: + type: select + optional: true + default: md + comment: Size of the button + options: + values: + - sm + - md + - lg + class: + type: string + optional: true + comment: Class attribute of the button element. + inline: + type: bool + optional: true + comment: Flag to render the release button inline (defaults to false). diff --git a/data/structures/spinner.yml b/data/structures/spinner.yml new file mode 100644 index 00000000..c0eb8380 --- /dev/null +++ b/data/structures/spinner.yml @@ -0,0 +1,36 @@ +comment: >- + Use the spinner shortcode to indicate the loading state of a component or + page. The inner content is used as alternative description. +arguments: + class: + type: string + optional: true + comment: >- + Class attribute of the wrapping element, e.g. “text-center”. + color: + type: select + optional: true + default: primary + comment: >- + Theme color of the element. + options: + values: + - primary + - secondary + - success + - danger + - warning + - info + - light + - dark + - white + - black + grow: + type: bool + optional: true + default: false + comment: Flag to indicate the spinner is growing instead of rotating. +body: + optional: false + comment: >- + Alternative description. diff --git a/data/structures/sub.yml b/data/structures/sub.yml new file mode 100644 index 00000000..6a0c4102 --- /dev/null +++ b/data/structures/sub.yml @@ -0,0 +1,8 @@ +comment: >- + Displays text in subscript. +arguments: + text: + type: string + optional: false + position: 0 + comment: Text to display in subscript. diff --git a/data/structures/sup.yml b/data/structures/sup.yml new file mode 100644 index 00000000..093b95fb --- /dev/null +++ b/data/structures/sup.yml @@ -0,0 +1,8 @@ +comment: >- + Displays text in superscript. +arguments: + text: + type: string + optional: false + position: 0 + comment: Text to display in superscript. diff --git a/exampleSite/content/en/blog/bootstrap-elements.md b/exampleSite/content/en/blog/bootstrap-elements.md index 757da0e7..5e9bf254 100644 --- a/exampleSite/content/en/blog/bootstrap-elements.md +++ b/exampleSite/content/en/blog/bootstrap-elements.md @@ -344,6 +344,24 @@ As an example, the following shortcode displays a light navigation header. {{< /example >}} +## Persona + +As an example, the following shortcode displays a persona card with a primary color. + + +{{< example lang="hugo" >}} +{{}} + As a content creator you value your independence. You like to take control of your + online and offline presence. You want to focus on growing your audience, without + limitations. + + Hinode gives you the tools to publish your blog in the way that you want. You have + full ownership and control of your content. That is why content creators choose + Hinode. +{{}} +{{< /example >}} + + ## Release As an example, the following shortcode displays a default release button. diff --git a/layouts/partials/utilities/link.html b/layouts/partials/assets/link.html similarity index 73% rename from layouts/partials/utilities/link.html rename to layouts/partials/assets/link.html index 7dee3a05..921e4875 100644 --- a/layouts/partials/utilities/link.html +++ b/layouts/partials/assets/link.html @@ -1,9 +1,20 @@ -{{ $destination := .destination }} -{{- if not $destination -}} - {{- errorf "partial [utilities/link.html] - Missing param 'destination'" -}} -{{- end -}} + + +{{ $error := false -}} + + +{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "link" "args" . "group" "partial") }} + {{ errorf "partial [assets/link.html] - Invalid arguments" -}} + {{ $error = true }} +{{ end }} + + +{{ $destination := .destination }} -{{- $error := false -}} {{- $target := "" -}} {{- $rel := "" -}} {{- $case := .case | default true }} @@ -15,6 +26,7 @@ {{- $text := .text -}} {{- $class := .class -}} + {{- if $isExternal -}} {{- if not $text -}} {{- $text = (urls.Parse (absURL $destination)).Host -}} @@ -33,7 +45,7 @@ {{- if strings.Contains $destination "#" }} {{ $segments := split $destination "#" }} {{- if ne (len $segments) 2 }} - {{- errorf "partial [utilities/link.html] - Malformed path, expected one anchor '#' only: %s" $destination -}} + {{- errorf "partial [assets/link.html] - Malformed path, expected one anchor '#' only: %s" $destination -}} {{ else }} {{- $destination = index $segments 0 -}} {{- $anchor = index $segments 1 -}} @@ -42,7 +54,7 @@ {{ $ref := partial "utilities/GetPage.html" (dict "url" $destination "page" $page) }} {{- if not $ref -}} - {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}} + {{- errorf "partial [assets/link.html] - Cannot find page: %s" $destination -}} {{- $error = true -}} {{- else -}} {{- $destination = $ref.RelPermalink -}} diff --git a/layouts/partials/assets/nav-item.html b/layouts/partials/assets/nav-item.html index 0e40020a..cf0d95f3 100644 --- a/layouts/partials/assets/nav-item.html +++ b/layouts/partials/assets/nav-item.html @@ -1,19 +1,19 @@ + +{{ $error := false -}} + + +{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "nav-item" "args" . "group" "partial") }} + {{ errorf "partial [assets/nav-item.html] - Invalid arguments" -}} + {{ $error = true }} +{{ end }} + + {{- $id := .id -}} {{- $parentID := .parentID -}} {{- $class := .class -}} @@ -23,9 +23,10 @@ {{- $body := .body -}} {{- $show := .show -}} {{- $disabled := .disabled -}} -{{- $type := .type -}} +{{- $type := .item_type -}} {{- $illustration := .illustration -}} + {{ if eq $type "accordion" }}
{{- with $header -}} diff --git a/layouts/partials/assets/nav.html b/layouts/partials/assets/nav.html index 0e7c88e2..d4151203 100644 --- a/layouts/partials/assets/nav.html +++ b/layouts/partials/assets/nav.html @@ -1,98 +1,47 @@ + + + +{{ $error := false }} + + +{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "nav" "args" . "group" "partial") }} + {{ errorf "Invalid arguments: %s" .Position -}} + {{ $error = true }} +{{ end }} + + {{- $page := .page -}} -{{- if ne (printf "%T" $page) "*hugolib.pageState" -}} - {{- errorf "partial [assets/nav.html] - Invalid value for param 'page'" -}} -{{- end -}} - -{{- $id := "0" -}} -{{- with .id -}} - {{ $id = . }} -{{ end }} - -{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}} +{{- $id := .id | default "0" -}} {{ $list := .list }} -{{- if not (in $supportedTypes (printf "%T" $list)) -}} - {{- errorf "partial [assets/nav.html] - Invalid value for param 'list'" -}} -{{- end -}} - -{{ $pane := "none" }} -{{ with .pane }} - {{- $supportedPanes := slice "none" "persona" -}} - {{- $pane = . }} - {{- if not (in $supportedPanes $pane) -}} - {{- errorf "partial [assets/nav.html] - Invalid value for param 'pane'" -}} - {{- end -}} -{{ end }} - -{{ $supportedWidths := slice 50 100 -}} -{{ $widthParam := 100 -}} -{{ $width := 100 }} -{{ with .width }}{{ $widthParam = . }}{{ end -}} -{{ if in $supportedWidths $widthParam -}} - {{ $width = int $widthParam }} -{{ else -}} - {{ errorf "partial [assets/nav.html] - Invalid value for param 'width': %s" $widthParam -}} -{{ end -}} - +{{ $pane := .pane | default "none" }} +{{ $width := .width | default 100 }} {{- $title := .title -}} {{- $class := .class -}} {{- $color := .color -}} {{- $wrap := .wrap | default false -}} +{{ $vertical := .vertical | default false }} +{{ $type := .type | default "pills" }} +{{- $loading := .loading | default "eager" -}} -{{ $supportedFlags := slice "true" "false" -}} -{{ $verticalParam := "false" -}} -{{ $vertical := false }} -{{ with .vertical }}{{ $verticalParam = . }}{{ end -}} -{{ if in $supportedFlags $verticalParam -}} - {{ if eq $verticalParam "true" }}{{ $vertical = true }}{{ else }}{{ $vertical = false }}{{ end -}} -{{ else -}} - {{ errorf "partial [assets/nav.html] - Invalid value for param 'vertical': %s" $verticalParam -}} -{{ end -}} - -{{ $type := "pills" }} -{{ with .type }} - {{ $type = . -}} - {{ $supportedNavTypes := slice "tabs" "pills" "underline" "callout" -}} - {{ if $type }} - {{ if not (in $supportedNavTypes $type) -}} - {{ errorf "partial [assets/nav.html] - Invalid value for param 'type': %s" $type -}} - {{ end -}} - {{ end -}} -{{ end -}} - -{{- $loading := .loading -}} -{{- $validSettings := slice "lazy" "eager" -}} -{{- if $loading -}} - {{ if not (in $validSettings $loading) -}} - {{- errorf "partial [assets/nav.html] - Invalid value for param 'loading': %s" $loading -}} - {{ end -}} -{{- end -}} - +
{{ if $vertical }}
{{ end }} {{ if eq $type "callout" }}