hextra icon indicating copy to clipboard operation
hextra copied to clipboard

Nested steps breaks the counter

Open fmunteanu opened this issue 1 year ago • 2 comments

Description

Hi @imfing,

I noticed this bug: nested steps breaks the counter, see code example below. I find it ideal that the counter don't show into nested steps.

Steps To Reproduce

## First subtitle

Subtitle description.

{{% steps %}}

### First step

Step description.

{{% steps %}}

#### Nested step

Nested step description.

{{% steps %}}

##### Another nested step

Another nested step description.

{{% /steps %}}

### Second step

Step description.

{{% /steps %}}

## Second subtitle

Subtitle description.

{{% steps %}}

### First step

Step description.

### Second step

Step description.

{{% /steps %}}

Proposed Fix

To fix the issue, I implemented this change into steps.html:

{{- $nested := eq (.Get "nested") "true" | default false -}}

<div class="steps hx-ml-4 hx-mb-12 ltr:hx-border-l rtl:hx-border-r hx-border-gray-200 ltr:hx-pl-6 rtl:hx-pr-6 dark:hx-border-neutral-800 {{ if not $nested }}[counter-reset:step]{{ end }}">
  {{- .Inner -}}
</div>

Code usage with {{% steps nested="true" %}}, required only on first nested step occurrence:

## First subtitle

Subtitle description.

{{% steps %}}

### First step

Step description.

{{% steps nested="true" %}}

#### Nested step

Nested step description.

{{% steps %}}

##### Another nested step

Another nested step description.

{{% /steps %}}

{{% /steps %}}

### Second step

Step description.

{{% /steps %}}

## Second subtitle

Subtitle description.

{{% steps %}}

### First step

Step description.

### Second step

Step description.

{{% /steps %}}

Screenshots

Broken nested steps:

image

Fixed nested steps:

image

Environment

  • Hugo Version: v0.125.4+extended
  • Browser/OS: MacOS Firefox
  • Theme Version: v0.7.4-0.20240428103006-ba7707d4d9f9

fmunteanu avatar May 08 '24 19:05 fmunteanu

Thank you. I might adopt your change if I couldn't figure out a better solution.

Note that personally I don't recommend using it in a nested way. Instead use Markdown syntax as much as possible.

imfing avatar May 16 '24 22:05 imfing

I need it for my current site design, to organize the list of variables. It follows the yaml like format.

image

fmunteanu avatar May 16 '24 22:05 fmunteanu