📖 Documentation Updates

[endigo9740]

Hey everyone, today I'm excited to share some exciting updates to the Skeleton documentation site. As we came to tail end of the recent Skeleton v4.0 release, we realized many aspects of the site were not meeting our expectations. As such, we've been quietly working to bring everything up to par, and are happy to share these changes with you today!

View The Documentation

https://www.skeleton.dev/

Content Updates

View the complete list of content updates. We've summarized the most notable below.

Content Organization and Updates

Every single page in the documentation site has received a pass to improve the accuracy and quality of information provided. Including new and update examples. The content navigation has also been reorganized to be much more intuitive.

Overhauled Component Docs

Special attention has been provided to the Tailwind Components and Framework Components sections. We now focus on providing much higher quality and practical examples, which adhere to these new conventions:

• Feature Example - a detailed practical example, including extra styling and all the bells and whistles
• Controlled Example - showcases how to implement reactive state for the feature (as relevant)
• Unique Features - showcase the unique or critical features of each component
• Styling Example - showcase how to change colors, modify styles, etc
• Provider Pattern - showcases a practical use of the new Provider Pattern for components
• Direction Example - showcases RTL support, if supported

Improved Authoring Experience

Under the hood we've implemented a massive technical change, which removes the need for us to maintain redundant documentation pages for each framework. These are now combined into a single page and dynamically swap select portions of the page based on the framework (such as examples). The end result is now faster and easier to maintain. This will become even more important as we continue to expand to support more frameworks over time.

Improved LLM Support

Another benefit of the structural updates is improved LLM resources. This comes in the form of a quick select menu on every page, allowing access to key LLM features. As well as more options on our dedicated LLM section. And finally, all documentation has been reviewed to ensure the content fed to your LLM is as complete as possible.

Framework Picker and Routing

Selecting your favorite framework of choice is now easier than ever. See the small drop-down menu in the page header. Set this once and you're done. Not only will this now carry through to every page in the documentation now, but all external links will now resolve to your framework of choice - unless a hardcoded framework option is included in the route path.

Broken Links

As part of combing through the content, we've implemented automated tooling to help catch broken links throughout the documentation. This should help ensure you reach dead ends much less often.

Updated Contributor Documentation

Additionally, we've revamped the Contributor > Documentation section to detail all changes detailed today. If you're new or existing contributor, please make sure to review this before submitting your next pull request.

Technical Updates

View the complete list of technical updates here. We've summarized the most notable below.

Cosmetic Improvements

In addition to the content updates, we've also taken care to give the docs a bit of a "glow up". This is due in part to utilizing more Skeleton components. Many of which were not originally available when we introduced the site for the v3.0 launch. This of course comes with all the features and a11y improvements you might expect. You'll also find many small touches throughout that improve the aesthetic and UX flow.

Page Header and Navigation Updates

One of the most notable updates is the new header bar at the top of the site. We've streamlined the navigation options. As well as introduce a new "More" drop-down menu, containing various external links. Expect more updates to this menu in the next major release. Additionally the framework, theme, and version selection, as well as the social and contribution menus remain easily accessible.

Next and Previous Navigation

As you navigate to the bottom of each page you'll now see Next and Previous buttons to allow you to easily navigate forward or back, much like a physical book. These are especially useful quickly browsing through related sections such as "Get Started".

New Preview Component

This is the wrapping element surrounding each feature example on the site. In addition to cosmetic updates, you'll now find a quick customize options for previewing on different backgrounds. Components also now feature a "Launch on Stackblitz" button, which launches with a single click.

NOTE: We're aware of some a11y issues raised by the new background color feature, and will be aiming to improve the Skeleton features to account for this in our upcoming major releases. Today's update represents the first step of this process.

Code Block Improvements

Additionally Code Blocks have received some quality of life improvements. Again in addition to cosmetic updates, you'll now note they adjust for light and dark mode, and bring in a touch of the theme styling, while still remaining fully accessible.

API Reference Table

This is the critical technical information available near the bottom of each component pages. Each table should now be much more legible and easier to read. You'll also note the default CSS classes applied to components out of the box are now prominently listed for each component part.

Framework-Aware Fragments

<Framework id="react">
	<Preview framework="react" files={{ 'app.tsx': DrawerReactRaw }} client:visible>
		<DrawerReact client:visible />
	</Preview>
</Framework>
<Framework id="svelte">
	<Preview framework="svelte" files={{ 'app.svelte': DrawerSvelteRaw }} client:visible>
		<DrawerSvelte client:visible />
	</Preview>
</Framework>

As part of the new authoring experience for each documentation page, we've now introduced new components that can swap out portions of the page, tailored specifically for each supported framework. This is now the primary mechanic we use to swap between framework specific examples. With today's update this is no longer limited to certain sections, and available to the entire doc site.

System Mode for Dark Mode

You can now find the lightswitch component tucked into the Theme menu within the page header. In addition to a fixed Light and Dark mode, we've now introduced a new "System" option as well. Which updates based on your operating system settings.

Sitemap / SEO / OG Image

Under the hood we've introduced a new sitemap, various SEO improvements, and added a new dynamic Open Graph image - the latter of which includes a dynamic thumbnail when sharing pages on various social sites.

Questions and Feedback

As always, we welcome your comments and feedback about the changes. If something is unclear or you're having trouble finding an old section, let us know. In most cases you can likely track this down using the updated Search feature. However, we're always available to help! Please enjoy!