diff --git a/assets/img/nat-9l98kFByiao-unsplash.jpg b/assets/img/nat-9l98kFByiao-unsplash.jpg new file mode 100644 index 00000000..94c9843d Binary files /dev/null and b/assets/img/nat-9l98kFByiao-unsplash.jpg differ diff --git a/config/_default/hugo.toml b/config/_default/hugo.toml index 513daf52..c286047f 100644 --- a/config/_default/hugo.toml +++ b/config/_default/hugo.toml @@ -34,7 +34,7 @@ defaultContentLanguageInSubdir = false disabled = false simple = true - [privacy.twitter] + [privacy.x] disabled = false enableDNT = true simple = true @@ -50,7 +50,7 @@ defaultContentLanguageInSubdir = false [services] [services.instagram] disableInlineCSS = true - [services.twitter] + [services.x] disableInlineCSS = true [services.googleAnalytics] ID = "G-T85PPZ36GN" diff --git a/config/_default/menus/menus.en.toml b/config/_default/menus/menus.en.toml index 0c2ee5f8..f141464d 100644 --- a/config/_default/menus/menus.en.toml +++ b/config/_default/menus/menus.en.toml @@ -10,21 +10,21 @@ pageRef = "/docs/" weight = 20 +[[main]] + name = "Content Blocks" + pageRef = "/docs/content-blocks" + weight = 30 + [[main]] name = "Components" pageRef = "/docs/components/" - weight = 30 + weight = 40 [main.params] alias = true [[main]] name = "Guides" pageRef = "/guides/" - weight = 40 - -[[main]] - name = "Releases" - pageRef = "/releases/" weight = 50 [[main]] @@ -138,17 +138,17 @@ [[footer]] parent = "Links" - name = "Components" - pageRef = "/docs/components/" + name = "Content blocks" + pageRef = "/docs/content-blocks/" weight = 30 - [footer.params] - alias = true [[footer]] parent = "Links" - name = "Releases" - pageRef = "/releases/" + name = "Components" + pageRef = "/docs/components/" weight = 40 + [footer.params] + alias = true [[footer]] name = "Guides" diff --git a/config/_default/params.toml b/config/_default/params.toml index 3bf01937..ad1203ac 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -40,7 +40,7 @@ [navigation] anchor = true - logo = "/img/logo_icon.svg" + logo = "/img/logo_var.svg#logo" color = "" fixed = true offset = "5.5em" diff --git a/config/postcss.config.js b/config/postcss.config.js index 2ad2536f..4e40fad6 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -29,7 +29,7 @@ const purgecss = purgeCSSPlugin({ './_vendor/github.com/gethinode/hinode/assets/scss/theme/fonts.scss', './_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss', './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss', - './_vendor/github.com/gethinode/mod-simple-datatables/dist/simple-datatables.scss', + './_vendor/github.com/gethinode/mod-simple-datatables/v2/dist/simple-datatables.scss', './_vendor/github.com/gethinode/mod-katex/dist/katex.scss', './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss', './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss', diff --git a/content/en/_index.md b/content/en/_index.md index f9925a2f..11babf79 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -1,19 +1,103 @@ --- author: Mark Dumay -title: Creating your website has never been easier -description: Focus on your content and let Hinode generate your static website. Use powerful shortcodes to add interactive elements with ease. And best of all - it is open source. -thumbnail: /img/logo_var.svg#logo -actions: - getstarted: - url: "docs/getting-started/introduction/" - title: "Get Started" - icon: "fas book-open" - weight: 1 - demo: - url: "https://demo.gethinode.com" - title: "Live Demo" - icon: "fas display" +title: A Hugo Theme +description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5. +content_blocks: + - _bookshop_name: hero + heading: + title: Build a static website. Fast and flexible. + align: start + content: >- + Powered by [Hugo](https://gohugo.io), the world’s fastest framework for building websites, Hinode is fast and flexible. Hinode lets you create a blog, documentation site, or landing page that scales with your needs. + width: 6 + align: end + order: last + illustration: + image: /img/logo_icon.svg + # image: /img/logo_var.svg#logo + width: 6 + links: + - title: Getting Started + url: docs/getting-started/introduction/ + icon: fas book-open outline: true - weight: 2 + - title: Live Demo + url: https://demo.gethinode.com + icon: fas display + outline: true + orientation: horizontal + cover: true + + - _bookshop_name: articles + heading: + title: Flexible & ready-to-use + content: >- + Hinode provides many ready-to-use [content blocks](/docs/content-blocks) and [components](/docs/components) to quickly develop your site. With native support for [Hugo modules](https://gohugo.io/hugo-modules/), you can easily extend your site to your liking. + align: center + width: 8 + input: + section: guides + reverse: true + sort: title + hide-empty: false + header-style: none + more: + title: More Guides + padding: 0 + max: 3 + class: border-0 card-zoom card-body-margin + justify: center + + - _bookshop_name: video-message + heading: + title: Developer-friendly and secure + content: >- + By separating content from presentation, your Hinode site is easily managed and versioned. Hinode provides a modern build system that is flexible and robust. + align: center + width: 8 + background: + color: body-tertiary + orientation: horizontal + video: + provider: youtube + media-id: "w7Ft2ymGmfc" + autoplay: false + messages: + - title: Structured + icon: fas sitemap + content: >- + Hinode uses a structured approach to [organize and present content](https://gohugo.io/content-management/organization/). This increases usability and [Lighthouse scores](https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F). + - title: Automated + icon: fas robot + content: >- + Hinodes fully supports [npm](https://www.npmjs.com/) and [GitHub actions](https://github.com/features/actions) to ensure your deployed site is always up-to-date. + - title: Secure + icon: fas check + content: >- + As a static site, Hinode is secure by design. In addition, Hinode uses strict security policies by default. This results in an [A+ security score](https://observatory.mozilla.org/analyze/demo.gethinode.com). + justify: center + + - _bookshop_name: cards + heading: + title: Powered by open source + content: >- + Hinode builds upon several open-source packages, such as Hugo, Bootstrap, and Font Awesome. Want to make Hinode even better? Hinode is [open to contributions](/docs/getting-started/contribute/). + align: center + width: 8 + orientation: stacked + elements: + - title: Hugo + icon: fab markdown + content: >- + [Hugo](https://gohugo.io) is a static website generator written in the Go language. It is optimized for speed, ease of use, and configurability. + - title: Bootstrap + icon: fab bootstrap + content: >- + [Bootstrap](https://getbootstrap.com) is a popular, open-source web development framework. Is uses a mobile-first approach to create responsive websites. + - title: Font Awesome + icon: fa font-awesome + content: >- + [Font Awesome](https://fontawesome.com) is a popular icon library and toolkit, used on over 200 million sites. The free version provides more than 2,000 icons. + justify: center --- diff --git a/content/en/cookies.md b/content/en/cookies.md index b2b25b43..ab35d75e 100644 --- a/content/en/cookies.md +++ b/content/en/cookies.md @@ -4,7 +4,7 @@ description: Cookie policy of gethinode.com date: 2024-09-19 layout: docs --- -{{% comment %}}{{% /comment %}} + *Effective Date 19-Sep-2024* ## What are cookies? @@ -42,3 +42,4 @@ Internet Explorer: https://support.microsoft.com/en-us/topic/how-to-delete-cooki If you are using any other web browser, please visit your browser’s official support documents. *Cookie Policy generated by {{< link "https://www.cookieyes.com" >}}CookieYes - Cookie Policy Generator{{< /link >}}.* + diff --git a/content/en/docs/latest/about/credits.md b/content/en/docs/latest/about/credits.md index 971f12bb..c14b1dab 100644 --- a/content/en/docs/latest/about/credits.md +++ b/content/en/docs/latest/about/credits.md @@ -20,6 +20,7 @@ Hinode is based on the following core components: - {{< link hugo >}}Hugo{{< /link >}} is a static HTML and CSS website generator written in the {{< link golang >}}Go language{{< /link >}}. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with {{< link markdown_guide >}}Markdown content{{< /link >}} and templates and renders them into a full HTML website. - {{< link bootstrap >}}Bootstrap{{< /link >}} is a popular, open-source web development framework. Using a mobile-first approach, it provides several functions and components to simplify the creation of responsive websites. - {{< link npm >}}npm{{< /link >}} is a software registry that enables the sharing and reuse of both open-source and private software packages. By taking advantage of its version management, software dependencies are easily tracked and updated. +- [Bookshop](https://github.com/CloudCannon/bookshop) is a component development workflow for static websites. - {{< link flexsearch >}}FlexSearch{{< /link >}} is a flexible search library to enable full text search across your site. - {{< link fontawesome >}}Font Awesome{{< /link >}} is a popular icon library and toolkit, used on over 200 million sites. The free version provides access to more than 2,000 icons. The toolkit also provides various styling and animation options out of the box. diff --git a/content/en/releases/index.md b/content/en/docs/latest/about/releases.md similarity index 82% rename from content/en/releases/index.md rename to content/en/docs/latest/about/releases.md index 327abcf7..6c1f481b 100644 --- a/content/en/releases/index.md +++ b/content/en/docs/latest/about/releases.md @@ -1,7 +1,11 @@ --- author: Mark Dumay title: Releases -date: 2023-08-14 +date: 2025-06-11 +aliases: + - "/docs/about/releases/" + - "/docs/releases/" + - "/releases/" description: A chronological overview of key releases since the initial launch of Hinode. --- diff --git a/content/en/docs/latest/advanced-settings/module-development.md b/content/en/docs/latest/advanced-settings/module-development.md index 20a8406d..0b2261bd 100644 --- a/content/en/docs/latest/advanced-settings/module-development.md +++ b/content/en/docs/latest/advanced-settings/module-development.md @@ -178,7 +178,7 @@ The workflow requires two secrets within your repository. Add them as `action se Hugo modules have several constraints to work properly. The below overview provides some common challenges and how to overcome them. -{{% comment %}}{{% /comment %}} + {{< accordion class="accordion-theme accordion-flush" >}} {{< accordion-item header="The required distribution files are unavailable" >}} Hugo modules use the latest available release on GitHub, or the most recent HEAD of the default branch otherwise. However, not all repositories maintain their distribution files as part of version control or their GitHub release assets. One such example is the {{}}Leaflet library{{< /link */>}}. The repository does not include the compiled JavaScript, but only its source files. As a workaround, the {{}}Leaflet module{{< /link */>}} downloads the npm package instead and copies the required files in a `postinstall` script. @@ -202,4 +202,4 @@ Hugo modules have several constraints to work properly. The below overview provi You might have an issue with your Hugo module cache. Certain operating systems such as macOS have a volatile cache system, that is modified when your machine has restarted or was recently suspended. Try running `hugo mod clean` to clear the Hugo module cache and then rerun `hugo mod get -u`. {{< /accordion-item >}} {{< /accordion >}} -{{% comment %}}{{% /comment %}} + diff --git a/content/en/docs/latest/advanced-settings/partial-development.md b/content/en/docs/latest/advanced-settings/partial-development.md index 586eac03..32abc8d0 100644 --- a/content/en/docs/latest/advanced-settings/partial-development.md +++ b/content/en/docs/latest/advanced-settings/partial-development.md @@ -5,6 +5,9 @@ date: 2024-01-03 layout: docs --- +> [!IMPORTANT] +> The partial development is being revised. The documentation on this page is still to be updated. Visit this [GitHub issue](https://github.com/gethinode/hinode/issues/1430#issuecomment-2988697852) for more information. + Hinode supports more than 30 shortcodes. Many of these shortcodes wrap an predefined Bootstrap component, such as the {{< link "docs/components/button" />}} or {{< link "docs/components/tooltip" />}}. Custom shortcodes include a {{< link "docs/components/command-prompt" />}}, {{< link "docs/components/image" />}}, and {{< link "docs/components/timeline" />}}. Some of these components are maintained in a separate module, such as the {{< link "docs/components/animation" />}} or {{< link "docs/components/map" />}}. Hinode follows several conventions to standardize and streamline the development of shortcodes and partials. You are encouraged to use the same conventions, especially when contributing your own code for sharing. ## Shared partials @@ -58,13 +61,13 @@ Most shortcodes support multiple arguments to configure their behavior and to re Let's consider the following example. The {{< link "docs/components/toast" />}} shortcode displays a dismissable message in the bottom-right corner of the screen. We can trigger it by assigning its unique identifier to a button. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}}Show toast{{}} {{}}This is a toast message{{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + The toast shortcode displays the message `This is a toast message` provided as inner input. Additionally, it supports the following arguments: diff --git a/content/en/docs/latest/advanced-settings/scripts.md b/content/en/docs/latest/advanced-settings/scripts.md index bc2c33fe..e964a759 100644 --- a/content/en/docs/latest/advanced-settings/scripts.md +++ b/content/en/docs/latest/advanced-settings/scripts.md @@ -6,15 +6,15 @@ layout: docs --- > [!IMPORTANT] -> Hinode release {{< release version="v0.27.0" short="true" type="link" >}} has overhauled the build pipeline of scripts and modules. The bundled files now support categorization by intent. +> Hinode release {{< release version="v0.27.0" short="true" link-type="link" >}} has overhauled the build pipeline of scripts and modules. The bundled files now support categorization by intent. -Hinodes bundles JavaScript files to optimize the page loading speed. By utilizing [Hugo modules]({{% ref "overview" %}}), referenced JavaScript files are automatically ingested and version controlled. Since release {{< release version="v0.27.0" short="true" type="link" >}}, Hinode also supports the grouping of scripts by their intent. Review the next sections to familiarize yourself with the build system. +Hinodes bundles JavaScript files to optimize the page loading speed. By utilizing [Hugo modules]({{% ref "overview" %}}), referenced JavaScript files are automatically ingested and version controlled. Since release {{< release version="v0.27.0" short="true" link-type="link" >}}, Hinode also supports the grouping of scripts by their intent. Review the next sections to familiarize yourself with the build system. ## Types of integrations Hinodes recognizes three types of integrations for JavaScript files. You can mount these files directly into Hugo's virtual file system, or use modules instead. -{{% comment %}}{{% /comment %}} + {{< accordion class="accordion-theme accordion-flush" >}} {{< accordion-item header="Critical" >}} Critical scripts are loaded immediately as part of the page header. The included scripts are considered vital for the initial page to render correctly and are blocking. For example, Hinode includes a script to toggle the site's [color mode]({{% relref "color-modes" %}}). It should be loaded before the page is being displayed to reduce screen flickering. @@ -26,7 +26,7 @@ Hinodes recognizes three types of integrations for JavaScript files. You can mou Optional scripts are only included on the pages that require them. An example is the {{}}Leaflet{{< /link */>}} module, that renders an interactive map. Optional scripts are lazily loaded similarly to core scripts, unless specified otherwise. {{< /accordion-item >}} {{< /accordion >}} -{{% comment %}}{{% /comment %}} + ## Available script categories diff --git a/content/en/docs/latest/advanced-settings/server-headers.md b/content/en/docs/latest/advanced-settings/server-headers.md index abe7e385..25c48442 100644 --- a/content/en/docs/latest/advanced-settings/server-headers.md +++ b/content/en/docs/latest/advanced-settings/server-headers.md @@ -16,7 +16,7 @@ Hinode uses strict security policies to ensure the site is {{< link observatory > [!TIP] > The {{< link hugo_server >}}server header configuration used by Hugo{{< /link >}} is similar to the configuration supported by Netlify. We can therefore reuse the same template code to configure both environments. This simplifies development and testing, and ensures the local development environment and production environment are comparable. -Since {{< release version="v0.27.0" short="true" type="link" >}}, Hinode includes {{< link "hinode_csp" >}} a module to generate the server headers automatically{{< /link >}}. It uses a feature from Hugo that enables the definition of a {{< link "hugo_custom_output" >}}custom output format{{< /link >}}. The main Hinode repository defines two custom output formats. The first one generates the server headers for a local web server provided by Hugo. The second output format defines a similar configuration for the deployment to Netlify. +Since {{< release version="v0.27.0" short="true" link-type="link" >}}, Hinode includes {{< link "hinode_csp" >}} a module to generate the server headers automatically{{< /link >}}. It uses a feature from Hugo that enables the definition of a {{< link "hugo_custom_output" >}}custom output format{{< /link >}}. The main Hinode repository defines two custom output formats. The first one generates the server headers for a local web server provided by Hugo. The second output format defines a similar configuration for the deployment to Netlify. Add the following configuration to your main configuration (usually `hugo.toml`). The setting `root = true` ensures the output files are placed in the root of the build folder. Otherwise, Hugo would create a separate output for each one of the defined site languages. diff --git a/content/en/docs/latest/advanced-settings/styles.md b/content/en/docs/latest/advanced-settings/styles.md index f04c6461..6aba9510 100644 --- a/content/en/docs/latest/advanced-settings/styles.md +++ b/content/en/docs/latest/advanced-settings/styles.md @@ -10,12 +10,12 @@ Hinode uses Sass files to take advantage of variables, maps, and functions to ge ## Build pipeline > [!NOTE] -> Hinode has added support for the Dart Sass transpiler in release {{< release version="v0.20.0" short="true" type="link" >}}. The default libsass transpiler has been {{< link hugo_sass >}}deprecated in favor of Dart Sass{{< /link >}}, but is still widely used. Hinode uses the libsass transpiler by default. Review the {{< link "docs/configuration/layout#extended-configuration" >}}build configuration{{< /link >}} on how to change the transpiler being used. +> Hinode has added support for the Dart Sass transpiler in release {{< release version="v0.20.0" short="true" link-type="link" >}}. The default libsass transpiler has been {{< link hugo_sass >}}deprecated in favor of Dart Sass{{< /link >}}, but is still widely used. Hinode uses the libsass transpiler by default. Review the {{< link "docs/configuration/layout#extended-configuration" >}}build configuration{{< /link >}} on how to change the transpiler being used. Hinodes uses Hugo modules and mounted folders to create a flexible virtual file system that is automatically kept up to date. Review the [overview]({{% ref "overview" %}}) for a detailed explanation. The build pipeline of the stylesheet consists of six steps. -{{% comment %}}{{% /comment %}} -{{< nav type="tabs" id="tabs-1" >}} + +{{< nav tab-type="tabs" id="tabs-1" >}} {{< nav-item header="libsass" show="true" >}} 1. **Initialize the Sass variables** @@ -77,13 +77,13 @@ Hinodes uses Hugo modules and mounted folders to create a flexible virtual file {{< /nav-item >}} {{< /nav >}} -{{% comment %}}{{% /comment %}} + ## Example The below Sass file defines a skeleton configuration for the main entrypoint. The full configuration is defined in `assets/scss/app.scss` (`libsass`) and `assets/scss/app-dart.scss` (`dartsass`) respectively. -{{< nav type="tabs" id="tabs-2" >}} +{{< nav tab-type="tabs" id="tabs-2" >}} {{< nav-item header="libsass" show="true" >}} ```scss diff --git a/content/en/docs/latest/components/_index.md b/content/en/docs/latest/components/_index.md index ee6fb571..92cd4661 100644 --- a/content/en/docs/latest/components/_index.md +++ b/content/en/docs/latest/components/_index.md @@ -2,7 +2,35 @@ author: Mark Dumay title: Components description: Use powerful shortcodes to add interactive elements with ease. -nested: false aliases: - "/components/" +content_blocks: + - _bookshop_name: hero + heading: + title: Components + align: start + breadcrumb: true + + - _bookshop_name: articles + heading: + content: >- + Hinode uses [Hugo shortcodes](https://gohugo.io/shortcodes/) to quickly + add interactive elements to your site. Hinodes supports more than 30 + components, powered by [Bootstrap](https://getbootstrap.com), + [Lottie](http://airbnb.io/lottie/), [Leaflet](https://leafletjs.com/), + and other popular libraries. Click on a card for more details about + a component, including available arguments. + width: 8 + hide-empty: false + input: + section: components + reverse: false + sort: title + cols: 3 + padding: 3 + max: 9 + paginate: true + cover: false + header-style: none + class: border-0 shadow card-feature card-shrink card-body-margin --- diff --git a/content/en/docs/latest/components/abbr.md b/content/en/docs/latest/components/abbr.md index c827daf0..e839548e 100644 --- a/content/en/docs/latest/components/abbr.md +++ b/content/en/docs/latest/components/abbr.md @@ -12,14 +12,14 @@ tags: component {{< release version="v0.19.0" >}} -Use the abbr shortcode to show the long form of an abbreviation on hover. The abbreviation data is retrieved from a central data file. By default, the shortcode uses "data/abbr.yaml" with translation support. +Use the abbr shortcode to show the long form of an abbreviation on hover. The abbreviation data is retrieved from a central data file. By default, the shortcode uses `data/abbr.yaml` with translation support. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments diff --git a/content/en/docs/latest/components/accordion.md b/content/en/docs/latest/components/accordion.md index 18518364..53298748 100644 --- a/content/en/docs/latest/components/accordion.md +++ b/content/en/docs/latest/components/accordion.md @@ -12,7 +12,7 @@ tags: component Use the `accordion` shortcode to show a group of vertically collapsing and expanding items. Add `accordion-item` inner elements for each accordion item. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{}} @@ -27,7 +27,7 @@ Use the `accordion` shortcode to show a group of vertically collapsing and expan {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments @@ -47,7 +47,7 @@ Change the style of your accordion with class attributes and arguments. Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{}} @@ -62,13 +62,13 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Always open Set `always-open` to `true` to make accordion items stay open when another item is opened. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{}} @@ -83,4 +83,4 @@ Set `always-open` to `true` to make accordion items stay open when another item {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + diff --git a/content/en/docs/latest/components/alert.md b/content/en/docs/latest/components/alert.md index 5ae5af05..771a027c 100644 --- a/content/en/docs/latest/components/alert.md +++ b/content/en/docs/latest/components/alert.md @@ -12,13 +12,13 @@ tags: component Use the `alert` shortcode to display a contextual feedback message. The inner content is used as alert text. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} A simple danger alert—check it out! {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments @@ -34,7 +34,7 @@ Change the style of your accordion with arguments. As an example, the following shortcodes displays a simple alert for each theme color. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} A simple primary alert—check it out! @@ -68,39 +68,39 @@ As an example, the following shortcodes displays a simple alert for each theme c A simple dark alert—check it out! {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Dismissible alert As an example, the following shortcode displays a dismissible alert. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} A dismissible alert—check it out! {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Alert with icon As an example, the following shortcode displays an alert with an icon. The icon is resized to size `2x` and pulled to the left by default. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} An illustrated alert—check it out! {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Alert of specific type As an example, the following shortcode displays an informative alert with an icon. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} -{{}} +{{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in @@ -109,13 +109,13 @@ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum. {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + As an example, the following shortcode displays a warning with an icon. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} -{{}} +{{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in @@ -124,4 +124,4 @@ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum. {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + diff --git a/content/en/docs/latest/components/animation.md b/content/en/docs/latest/components/animation.md index 74b5c081..9c115c6f 100644 --- a/content/en/docs/latest/components/animation.md +++ b/content/en/docs/latest/components/animation.md @@ -15,11 +15,11 @@ modules: ["lottie"] Use the animation shortcode to show an After Effects animation, powered by {{< link lottie >}}Lottie{{< /link >}}. The Lottie library supports animations that have been exported as JSON with Bodymovin. The animation uses vector graphics and is responsive. The shortcode is a simplified wrapper of the Lottie library that provides basic functionality. As an example, the following shortcode shows an animation that plays when hovering the mouse over it. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments @@ -39,28 +39,28 @@ Change the behavior of your animation with shortcode arguments. Assign a valid path to `data` to provide a JSON file that contains the animation as input. The file should be stored in the `static` folder, or in one of its subfolders. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Animation on hover Set `auto` to false and `hover` to true to trigger the animation when hovering the mouse over it. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Identification Assign a specific identified to the animation by setting the `id` argument. The following example assigns the id `gatin-animation` to the animation. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + diff --git a/content/en/docs/latest/components/args.md b/content/en/docs/latest/components/args.md index 2869271d..3a688fb1 100644 --- a/content/en/docs/latest/components/args.md +++ b/content/en/docs/latest/components/args.md @@ -14,11 +14,11 @@ tags: component Use the args shortcode to generates a table of structured arguments. The argument definitions are expected to be defined in a data file identified by a provided structure name. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments @@ -28,14 +28,14 @@ The shortcode supports both unnamed and named arguments. ## Data format -{{% comment %}}{{% /comment %}} + Define a file in the `data/structures` folder that contains the argument specifications. ### Supported attributes The format supports the following attributes: -{{% comment %}}{{% /comment %}} + | Name | Required | Description | |-----------|----------|-------------| | name | yes | Argument name. | @@ -47,7 +47,7 @@ The format supports the following attributes: | deprecated | | Points to the version in which the argument was deprecated. See the {{< link "release" />}} shortcode for more details. | | comment | | Documentation about the argument. | | options | | Conditional value requirements, pending data type. | -{{% comment %}}{{% /comment %}} + ### Supported primitive types @@ -68,7 +68,7 @@ Several primitives are supported. The validation function uses these to test if Any provided type not matching a primitive is considered a complex type. Type confirmation is tested with `printf "%T"`. For example, to validate if the page context is of the correct type, use `*hugolib.pageState`. -{{% comment %}}{{% /comment %}} + ### Example file diff --git a/content/en/docs/latest/components/badge.md b/content/en/docs/latest/components/badge.md index b8e76b8f..ce7d67b6 100644 --- a/content/en/docs/latest/components/badge.md +++ b/content/en/docs/latest/components/badge.md @@ -14,12 +14,12 @@ tags: component Badges can be added to headings and buttons. The badge for a button is part of a [custom shortcode]({{% ref "button" %}} "custom shortcode"). The example below illustrates the shortcode for a heading. -{{% comment %}}{{% /comment %}} + {{< example >}} Example heading of size four {{}} {.h4} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments @@ -35,7 +35,7 @@ Use the badge shortcode to display a badge for a heading. See the Bootstrap {{< Badges scale to match the size of the immediate parent element by using relative font sizing and em units. Use Hugo's {{< link hugo_goldmark >}}curly brackets syntax{{< /link >}} to apply a heading class. -{{% comment %}}{{% /comment %}} + {{< example >}} Heading 1 {{}} {.h1} @@ -55,13 +55,13 @@ Heading 5 {{}} Heading 6 {{}} {.h6} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Colored badges Set a background color with contrasting foreground color with the `color` argument. -{{% comment %}}{{% /comment %}} + {{< example >}} {{}} {{}} @@ -72,13 +72,13 @@ Set a background color with contrasting foreground color with the `color` argume {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ### Pill badges Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. -{{% comment %}}{{% /comment %}} + {{< example >}} {{}} {{}} @@ -89,4 +89,4 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + diff --git a/content/en/docs/latest/components/breadcrumb.md b/content/en/docs/latest/components/breadcrumb.md index a7003230..fc940484 100644 --- a/content/en/docs/latest/components/breadcrumb.md +++ b/content/en/docs/latest/components/breadcrumb.md @@ -12,11 +12,11 @@ tags: component Use the `breadcrumb` shortcode to display the current page’s location within the site's navigational hierarchy. As an example, the following shortcode displays a breadcrumb for the current page. -{{% comment %}}{{% /comment %}} + {{< example lang="hugo" >}} {{}} {{< /example >}} -{{% comment %}}{{% /comment %}} + ## Arguments diff --git a/content/en/docs/latest/components/button-group.md b/content/en/docs/latest/components/button-group.md index c00e4cf2..5b362e56 100644 --- a/content/en/docs/latest/components/button-group.md +++ b/content/en/docs/latest/components/button-group.md @@ -12,7 +12,7 @@ tags: component Use the `button-group` shortcode to display a group of buttons. Add inner `