Skeleton Next - Update 3 - Documentation

[endigo9740]

Hey everyone, Chris here from the Skeleton crew! This post is part of an ongoing series of updates as we progress towards Skeleton v3 (aka Skeleton "Next"). We're excited to share some exciting updates today, including several additions to the new documentation website. We also hope to begin porting over our first Skeleton components very soon, which will open the floodgates to contributors who wish to jump in and help with this process.

As with the previous updates, we've provide a quick summary post below, as well as videos providing a more in-depth walkthrough.

Useful Links

• YouTube video walkthrough
• New documentation website

Additional Documentation Updates

Over the last couple weeks I've worked to implement a number of additional updates to the documentation website. The goal being to reach a certain threshold were we feel comfortable documenting all Skeleton features as they are ported forward.

Today's update includes a few notable improvements to the authoring experience:

• All pages now utilize MDX (markdown) instead of pure HTML
• We're utilizing Astro's content collections feature
• This is paired with Astro's dynamic routes

The result is a substantial improvement to maintaining the documentation pages, which now uses a mix of MDX, HTML, and components. We've also extended and overwritten many of the stock MDX components to ensure Skeleton typography is provided by default (ex: ## heading 2 uses a .h2 class; markdown tables are parsed using .table class, etc)

In addition to these changes we've provided several other useful updates:

• We're now utilizing Prettier for code formatting and linting
• The app layout has been completely rebuilt to improve the fixed sidebar positioning
• Minor updates to the homepage (which will continue to act as a placeholder)
• We now have a functional table of contents on the right side of each page (made possible via Astro/MDX!)
• We're now utilizing code block provided by Expressive Code
• Icons are now provided by Iconify + Astro-Icon
• Several doc-specific components have been added, such as a quick preview/code (aka "Previewer") component
• We're using Vite's ?raw feature to ensure rendered component examples match the code snippets 1:1 (a highly requested change!)
• Most feature pages now link to the appropriate source code on GitHub
• A new Resources > Contributing section has been added, providing some early details on how to contribute to the doc
• And of course, several minor cosmetic improvements throughout the app

Needless to say, the current doc is MUCH easier to work with than the previous iteration, and allow us to move faster when providing documentation around Skeleton. There's still plenty of work to be done, but we expect updates to happen periodically from this point forward. With a lot of the content-specific sections (onboarding, etc) coming in the near future.

What's Next

With this critical milestone reached, we will now have two areas of focus.

First, I will begin porting our first component from Skeleton v2 (Svelte 4) to Skeleton Next (Svelte 5 + React). This will likely be an improved version of the Accordion component, found in the Skeleton Next Prototype. This will of course be directly implemented into the new /packages/skeleton-svelte and /packages/skeleton-react packages found within our monorepo. This feature will also be fully documented using the update doc website. Once completed, this will represent our reference for any contributor to start porting over other additional features. If you're interested in helping, we'll put out a call to arms with more details once we reach this point. Likely later this week.

Additionally, once I've handle the first component, I will then turn my focus to the new Theme Generator. It'll be during this process that I implement our first few production-grade themes (plural!). This will come with additional updates to the doc website to support theme switching as well, which will help the testing process.

Needless to say, this is a huge milestone, and we're excited about what comes next. Please stay tuned for more updates in the near future. And know that we appreciate you following along this far!