Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested steps breaks the counter #384

Open
fmunteanu opened this issue May 8, 2024 · 2 comments
Open

Nested steps breaks the counter #384

fmunteanu opened this issue May 8, 2024 · 2 comments

Comments

@fmunteanu
Copy link
Contributor

fmunteanu commented May 8, 2024

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
@imfing
Copy link
Owner

imfing commented May 16, 2024

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.

@fmunteanu
Copy link
Contributor Author

fmunteanu commented May 16, 2024

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants