Documentation metadata via Frontmatter

README.md

@@ -1,4 +1,7 @@
-# Solid Docs
+<p>
+  <img src="https://assets.solidjs.com/banner?project=Solid%20Documentation&type=core" alt="Solid Documentation" />
+</p>
+
 
 Welcome to Solid's documentation!
 

src/routes/advanced-concepts/fine-grained-reactivity.mdx

@@ -1,5 +1,16 @@
 ---
 title: Fine-grained reactivity
+use_cases: >-
+  understanding core reactivity, performance optimization, building reactive
+  systems from scratch, learning framework internals
+tags:
+  - reactivity
+  - signals
+  - effects
+  - performance
+  - fundamentals
+  - reactive-primitives
+version: '1.0'
 ---
 
 Reactivity ensures automatic responses to data changes, eliminating the need for manual updates to the user interface (UI).

src/routes/concepts/components/basics.mdx

@@ -1,6 +1,17 @@
 ---
 title: Basics
 order: 4
+use_cases: >-
+  always, first component creation, learning component structure, understanding
+  lifecycle, component organization
+tags:
+  - components
+  - jsx
+  - lifecycle
+  - fundamentals
+  - always
+  - component-tree
+version: '1.0'
 ---
 
 Components are the building blocks of Solid applications.

src/routes/concepts/components/class-style.mdx

@@ -1,6 +1,17 @@
 ---
 title: Class and style
 order: 2
+use_cases: >-
+  styling components, dynamic styling, theming, conditional css classes, inline
+  styles
+tags:
+  - styling
+  - css
+  - classes
+  - dynamic-styling
+  - theming
+  - conditional-rendering
+version: '1.0'
 ---
 
 Similar to HTML, Solid uses `class` and `style` attributes to style elements via [CSS (Cascading Style Sheets)](https://developer.mozilla.org/en-US/docs/Glossary/CSS).

src/routes/concepts/components/event-handlers.mdx

@@ -1,6 +1,17 @@
 ---
 title: Event handlers
 order: 3
+use_cases: >-
+  user interactions, click handlers, form events, custom events, event
+  delegation optimization
+tags:
+  - events
+  - user-interaction
+  - forms
+  - event-delegation
+  - performance
+  - handlers
+version: '1.0'
 ---
 
 Event handlers are functions that are called in response to specific events occurring in the browser, such as when a user clicks or taps on an element.

src/routes/concepts/components/props.mdx

@@ -1,5 +1,16 @@
 ---
 title: Props
+use_cases: >-
+  passing data between components, component communication, reusable components,
+  parent-child data flow
+tags:
+  - props
+  - component-communication
+  - data-flow
+  - reusability
+  - merge-props
+  - split-props
+version: '1.0'
 ---
 
 Props are a way to pass state from a parent component to a child component.

src/routes/concepts/context.mdx

@@ -1,6 +1,17 @@
 ---
-title: "Context"
+title: Context
 order: 5
+use_cases: >-
+  avoiding prop drilling, global state, theme management, authentication state,
+  deeply nested components
+tags:
+  - context
+  - global-state
+  - prop-drilling
+  - state-management
+  - provider-pattern
+  - theming
+version: '1.0'
 ---
 
 Context provides a way to pass data through the component tree without having to pass props down manually at every level.

src/routes/concepts/control-flow/conditional-rendering.mdx

@@ -1,6 +1,17 @@
 ---
-title: "Conditional rendering"
+title: Conditional rendering
 order: 1
+use_cases: >-
+  showing hiding content, loading states, error states, user permissions,
+  dynamic ui
+tags:
+  - conditional-rendering
+  - loading-states
+  - error-handling
+  - dynamic-ui
+  - show
+  - switch-match
+version: '1.0'
 ---
 
 Conditional rendering is the process of displaying different UI elements based on certain conditions.

src/routes/concepts/control-flow/dynamic.mdx

@@ -1,6 +1,16 @@
 ---
-title: "Dynamic"
+title: Dynamic
 order: 2
+use_cases: >-
+  dynamic component rendering, component switching, plugin systems, cms content,
+  configurable ui
+tags:
+  - dynamic-components
+  - component-switching
+  - configurable-ui
+  - cms
+  - plugin-systems
+version: '1.0'
 ---
 
 `<Dynamic>` is a Solid component that allows you to render components dynamically based on data.

src/routes/concepts/control-flow/error-boundary.mdx

@@ -1,6 +1,16 @@
 ---
-title: "Error boundary"
+title: Error boundary
 order: 5
+use_cases: >-
+  error handling, preventing app crashes, user experience, graceful degradation,
+  error recovery
+tags:
+  - error-handling
+  - error-boundary
+  - crash-prevention
+  - user-experience
+  - error-recovery
+version: '1.0'
 ---
 
 By default, if part of an application throws an error during rendering, the entire application can crash, resulting in Solid removing its UI from the screen.

src/routes/concepts/control-flow/list-rendering.mdx

@@ -1,6 +1,18 @@
 ---
-title: "List rendering"
+title: List rendering
 order: 3
+use_cases: >-
+  displaying arrays, dynamic lists, table data, todo lists, data visualization,
+  performance optimization
+tags:
+  - lists
+  - arrays
+  - iteration
+  - performance
+  - for-component
+  - index-component
+  - dynamic-data
+version: '1.0'
 ---
 
 List rendering allows you to generate multiple elements from a collection of data, such as an array or object, where each element corresponds to an item in the collection.
@@ -149,4 +161,4 @@ function FormList() {
 		</form>
 	)
 }
-```
+```

src/routes/concepts/control-flow/portal.mdx

@@ -1,6 +1,19 @@
 ---
-title: "Portal"
+title: Portal
 order: 3
+use_cases: >-
+  modals, tooltips, dropdowns, popups, overlays, z-index issues, clipped
+  content, accessibility improvements
+tags:
+  - modals
+  - tooltips
+  - dropdowns
+  - popups
+  - overlays
+  - accessibility
+  - dom
+  - positioning
+version: '1.0'
 ---
 
 When an element requires rendering outside of the usual document flow, challenges related to stacking contents and z-index can interfere with the desired intention or look of an application.

src/routes/concepts/derived-values/derived-signals.mdx

@@ -1,6 +1,17 @@
 ---
 title: Derived signals
 order: 1
+use_cases: >-
+  computed values, reactive calculations, dependent state, always, any solid
+  project, data transformations
+tags:
+  - reactivity
+  - computed
+  - derived
+  - calculations
+  - dependencies
+  - always
+version: '1.0'
 ---
 
 Derived signals are functions that rely on one or more [signals](/concepts/signals) to produce a value.

src/routes/concepts/derived-values/memos.mdx

@@ -1,6 +1,17 @@
 ---
 title: Memos
 order: 2
+use_cases: >-
+  expensive computations, caching, performance optimization, derived state,
+  preventing unnecessary recalculations
+tags:
+  - performance
+  - optimization
+  - caching
+  - expensive-computations
+  - derived
+  - reactivity
+version: '1.0'
 ---
 
 Memos are a type of reactive value that can be used to memoize derived state or expensive computations.

src/routes/concepts/effects.mdx

@@ -1,6 +1,17 @@
 ---
 title: Effects
 order: 4
+use_cases: >-
+  side effects, dom manipulation, data fetching, subscriptions, cleanup,
+  lifecycle management, logging
+tags:
+  - side-effects
+  - lifecycle
+  - data-fetching
+  - dom-manipulation
+  - cleanup
+  - subscriptions
+version: '1.0'
 ---
 
 Effects are functions that are triggered when the signals they depend on change.

src/routes/concepts/intro-to-reactivity.mdx

@@ -1,6 +1,17 @@
 ---
-title: "Intro to reactivity"
+title: Intro to reactivity
 order: 1
+use_cases: >-
+  always, learning solid, understanding reactivity, new developers, core
+  concepts
+tags:
+  - always
+  - learning
+  - fundamentals
+  - reactivity
+  - beginner
+  - core-concepts
+version: '1.0'
 ---
 
 **Note**: While this guide is useful for understanding reactive systems, it does use some Solid-specific terminology.

src/routes/concepts/refs.mdx

@@ -1,5 +1,15 @@
 ---
 title: Refs
+use_cases: >-
+  dom access, element manipulation, focus management, animations, third party
+  libraries, imperative operations
+tags:
+  - dom-access
+  - animations
+  - focus-management
+  - third-party-integration
+  - imperative
+version: '1.0'
 ---
 
 Refs, or references, are a special attribute that can be attached to any element, and are used to reference a DOM element or a component instance.

src/routes/concepts/signals.mdx

@@ -1,6 +1,14 @@
 ---
 title: Signals
 order: 2
+use_cases: 'always, any solid project, state management, reactive data, core functionality'
+tags:
+  - always
+  - state-management
+  - reactivity
+  - fundamentals
+  - core
+version: '1.0'
 ---
 
 Signals are the primary means of [managing state](/concepts/intro-to-reactivity#state-management) in your Solid application.

src/routes/concepts/stores.mdx

@@ -1,6 +1,17 @@
 ---
 title: Stores
 order: 6
+use_cases: >-
+  complex state, nested data, objects, arrays, shared state, performance
+  optimization, large applications
+tags:
+  - complex-state
+  - nested-data
+  - objects
+  - arrays
+  - performance
+  - large-applications
+version: '1.0'
 ---
 
 Stores are a state management primitive that provide a centralized way to handle shared data and reduce redundancy.

src/routes/concepts/understanding-jsx.mdx

@@ -1,6 +1,18 @@
 ---
 title: Understanding JSX
 order: 2
+use_cases: >-
+  always, learning solid, templating, ui rendering, new developers, component
+  creation
+tags:
+  - always
+  - jsx
+  - templating
+  - ui
+  - components
+  - fundamentals
+  - beginner
+version: '1.0'
 ---
 
 JSX is an extension for JavaScript.

src/routes/configuration/environment-variables.mdx

@@ -1,5 +1,16 @@
 ---
 title: Environment variables
+use_cases: >-
+  configuration, api keys, deployment, environment-specific settings, build
+  configuration
+tags:
+  - configuration
+  - deployment
+  - api-keys
+  - build
+  - environment
+  - settings
+version: '1.0'
 ---
 
 Solid is built on top of [Vite](https://vitejs.dev/), which offers a convenient way to handle environment variables.

src/routes/configuration/typescript.mdx

@@ -1,5 +1,19 @@
 ---
 title: TypeScript
+use_cases: >-
+  type safety, large projects, team development, code documentation, catching
+  errors at compile time
+tags:
+  - typescript
+  - types
+  - configuration
+  - jsx
+  - components
+  - events
+  - signals
+  - context
+  - refs
+version: '1.0'
 ---
 
 [TypeScript](https://www.typescriptlang.org/) is a superset of JavaScript that enhances code reliability and predictability through the introduction of [static types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html).