Remark Stuff fold#

Steps Counter#

Install the required packages

Run the following command in your terminal:
Terminal window
```
1
pnpm install @astrojs/sitemap @astrojs/rss
```
Plan your feature
- Define requirements
- Sketch the UI
- Identify dependencies
Create the component

Start with a basic structure and iterate.
Add styling

Make it look good with CSS or Tailwind.

And remember no spaces here between `:::` and steps keyword

Install dependencies
Configure your environment
Run the app

Github Cards#

kawabata

ox-pandoc

Waiting for api.github.com...

00K

Waiting...

Carousel folded#

TIP
This size of carousel will adapt to max height and max width of the images.

1 / 2

Gen AI Data Engineering

AutoPlay#

This carousel will automatically advance every 4 seconds (default interval):

1 / 2

SP GenAI Data Engineering

This carousel autoplays with a 6-second interval:

1 / 2

Gen AI Data Engineering

Use dimensions of a specific Image#

1 / 2

Small Certificate

Carousel with Scale Factor#

Use the `scale` attribute (0 to 1) to scale down the carousel:

This carousel is scaled .

1 / 2

Gen AI Data Engineering

Navigation: Hover over left/right edges to reveal navigation arrows
Keyboard: Use arrow keys to navigate when carousel is focused
Touch: Swipe left/right on mobile devices
Caption: Image alt text displays below the carousel
Counter: Shows current slide number (e.g., “2 / 4”)
Autoplay: Optional auto-advancement with customizable interval
Reference sizing: Use `ref=“n”` to base dimensions on the nth image
Scale: Use `scale=“0.5”` to scale the carousel (0 to 1)

Marquee#

Continuous scroll: Seamless infinite loop animation
Hover pause: Animation pauses when hovering over the strip
Item hover: Individual items scale up on hover
Clickable: Items with `href` are clickable links
Edge fade: Gradient transparency on edges
Customizable: `speed`, `height`, `gap`, `direction` attributes

Admonitions#

Following types of admonitions are supported: note tip important warning caution

NOTE
Highlights information that users should take into account, even when skimming.

TIP
Optional information to help a user be more successful.

IMPORTANT
Crucial information necessary for users to succeed.

WARNING
Critical content demanding immediate user attention due to potential risks.

CAUTION
Negative potential consequences of an action.

Custom Titles#

The title of the admonition can be customized.

MY CUSTOM TITLE
This is a note with a custom title.

Github Syntax#

NOTE
The GitHub syntax is also supported.

TIP
The GitHub syntax is also supported.

Spicy Figures#

set width to 80%

My workstation setup - where the magic happens

With Shadow#

image with full width#

Out for a ride

Normal image#

Out for a ride

Soft edges#

Float Right#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum