Docs/ Nav List example for highlighting to match main Nav List example

[ddxv]

Description

I struggled a bit understanding the Skeleton.dev > Explore > Tailwind > Lists > Nav List for highlighting. As a newbie I was unfamiliar with the shorthand format it was written in, and after searching Discord for that the {href} was shorthand for how it would be written inside a loop. This makes sense, but was a bit unclear as someone newer.

So I suggest changing the highlighting example to match the main Nav List example just above the highlighting example.

Dominik and Niktek helped with some pointers in the Discord channel, as well as suggesting changing the icons.

{description}

Changsets

Instructions: Changesets automate our changelog. If you modify files in /packages/skeleton, run pnpm changeset in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be minor while chores and bugfixes should be patch. Please prefix the changeset message with feat:, bugfix: or chore:.

Checklist

Please read and apply all contribution requirements.

• This PR targets the dev branch (NEVER master)
• Documentation reflects all relevant changes
• Branch is prefixed with: docs/, feat/, chore/, bugfix/
• Ensure Svelte and Typescript linting is current - run pnpm check
• Ensure Prettier linting is current - run pnpm format
• All test cases are passing - run pnpm test
• Includes a changeset (if relevant; see above)

[changeset-bot]

⚠️ No Changeset found

Latest commit: f50e302

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
skeleton-docs	✅ Ready (Inspect)	Visit Preview	Oct 27, 2023 3:44pm

[endigo9740]

@ddxv @Sarenor @niktek

While I agree shorthand might be confusing to new users, I don't think all the other changes are justified. Appending the attribute key should be all that's needed to clarify the point of confusion. Something like this:

<CodeBlock language="html" code={`<a href={href} class="{classesActive(href)}">Page</a>`} />

Per the emojii, we've maintained the documentation for a bit over a year and half. In that time we've changed our standards a bit. The emojii was a remnant of an old standard. We now just use (icon) as a placeholder. Skeleton is icon library agnostic, so we don't want to take a opinionated stance here. I'd welcome the skulls being replaced with (icon).

I know many libraries like to repeat the entirety of code per each snippet, but this is not how Skeleton handles this. We're a small team, so we keep things as lean as possible. I'd recommend reverting the wrapping nav/ul/li tags. This makes it harder to focus on what's being demonstrated here.

Once these changes are made, let me know and I'll be happy to merge.

[ddxv]

Something like this:

<CodeBlock language="html" code={<a href={href} class="{classesActive(href)}">Page</a>} />

@endigo9740 Thanks for the input. I updated to follow that.

[endigo9740]

That'll work, thanks for your contribution @ddxv