adding angle brackets

This commit is contained in:
madrilene 2024-06-04 07:34:50 +02:00
parent 5c84594c2a
commit 7016d57e1c
4 changed files with 7 additions and 7 deletions

View file

@ -3,10 +3,10 @@ title: Details
usage: "{% set itemList = collections.docs %}{% include 'partials/details.njk' %}"
---
The `custom-details` WebC component has a corresponding Nunjucks include.
It uses the `details` and `summary` elements to create a collapsible section and enhances them aesthetically and functionally.
The `<custom-details>` WebC component has a corresponding Nunjucks include.
It uses the `<details>` and `<summary>` elements to create a collapsible section and enhances them aesthetically and functionally.
The JavaScript for the `custom-details` component adds functionality to buttons to expand and collapse the sections with one action. When JavaScript is disabled, the sections are still accessible and collapsible, but the extra buttons are hidden.
The JavaScript for the `<custom-details>` component adds functionality to buttons to expand and collapse the sections with one action. When JavaScript is disabled, the sections are still accessible and collapsible, but the extra buttons are hidden.
On page load, it checks if a hash corresponding to a details ID exists in the URL. If such an ID is found, the corresponding details section is programmatically opened, allowing direct navigation to an open section from a shared URL.

View file

@ -2,7 +2,7 @@
title: Easteregg
---
The `custom-easteregg` component is by default in the base layout in `src/_layouts/base.njk`. Just delete the two lines if you don't want to use it. The component is
The `<custom-easteregg>` component is by default in the base layout in `src/_layouts/base.njk`. Just delete the two lines if you don't want to use it. The component is
designed to trigger a confetti effect when a user types a specific keyword sequence. It uses the dynamic import of the `canvas-confetti` library to render custom-shaped particles based on user input.
**Defaults**:

View file

@ -7,7 +7,7 @@ Masonry layout is not yet a native part of CSS grid. There is a debate if using
It should be used carefully so we don't create confusion with the tabbing order. In version 3 of the starter I made the masonry layout a web component, and no longer a opt-in feature (was: `masonry: true` in the front matter).
`custom-masonry` is designed to function as a masonry grid by dynamically adjusting item positions based on the available column space and the size of its content. The necessary JavaScript (`custom-masonry.js`) is loaded only once per component usage due to the `data-island="once"` attribute.
`<custom-masonry>` is designed to function as a masonry grid by dynamically adjusting item positions based on the available column space and the size of its content. The necessary JavaScript (`custom-masonry.js`) is loaded only once per component usage due to the `data-island="once"` attribute.
Optional: pass in `layout="50-50"` to set a 50% width for each column.
If no JavaScript is available, the grid will fall back to the regular grid layout defined in `src/assets/css/global/compositions/grid.css`.

View file

@ -2,8 +2,8 @@
title: Youtube
---
The `@slug` attribute is used to pass the video ID to the `lite-youtube` element.
`@label` ist used for the nested `custom-youtube-link` which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
The `@slug` attribute is used to pass the video ID to the `<lite-youtube>` element.
`@label` ist used for the nested `<custom-youtube-link>` which adds a link to watch on YouTube. This also serves as a fallback in case JS is deactivated.
Uses the [Lite YouTube Embed repository](https://github.com/paulirish/lite-youtube-embed).
```