v3 Docs: Site Design Refresh

[endigo9740]

View the Legacy Ticket

As we get closer to the v3 release, I'd like to implement a final design refresh to the documentation site to establish both a more professional aesthetic and provide more a much more informative homepage. Our v2 homepage is a great reference, in that it walks you through the benefits of using Skeleton. This should do that, plus cover all additional features made possible with v3 (framework agnostic, etc).

Structure and Layout

• Abstract link block styles to the global stylesheet (see the Plugin page for examples)
• Updated <Preview> component to support dynamic tabs for preview|code|codeReact|codeSvelte
• Implement Lightswitch and Theme Picker in mobile navigation
• Preserve scroll position for Docs sidebar
• Highlight the active navigation link
• Smoother theme transitions using transition-all ONLY during transition
• Improve the site layout; ensure it's fully responsive

Homepage Redesign

• Full design process pass to prepare for the redesign
• Implement the updates into the Astro project
  • Use this Github endpoint to fetch the list of contributors.
  • Use a custom inline script to dynamically fetch the news from this Bluesky endpoint

General Design Updates

• Implement semantic typography styles
• Consider Astro view transitions
• Update app header bar
  • Convert to React component
  • Update various popover menus

[endigo9740]

Link block styles are now possible via the following HTML markup and classes:

<figure class="linker">
	<a
		class="linker-item"
		href="https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/base/core.css"
		target="_blank"
	>
		View Base Styles
	</a>
</figure>

[endigo9740]

The <Preview> component can now dynamically up to four tabs:

• preview - the visual preview of the feature
• code - the generic code block
• codeReact - same as code, but listed under a React tab
• codeSvelte - same as code, but listed under a Svelte tab.

If you mix code + one of the framework tabs, it'll rename from "Code" -> "Generic". Use this for Astro, Typescript, or vanilla JS examples.

Additionally the Preview tab is now optional as well. If you don't include it, just make sure to set selected="codeReact" or similar to denote the first active tab.

This is currently visible under the Cookbook Stepper and Chat recipe pages.

[endigo9740]

Per the PR linked above, a number of structural improvements have now been deployed to the live site.

[phamduylong]

SvelteKit: Repo - Stackblitz REPL

Next.js: Repo - Stackblitz REPL

[phamduylong]

Might be worth mentioning here, but heaps of our doc pages are lacking a title. At least those under components and integrations