Add or enhance meta title and meta description of the article pages o…

…f the latest docs version: Styling -section
vaadin · Dec 17, 2024 · 262d9de · 262d9de
1 parent 684a041
commit 262d9de
Show file tree

Hide file tree

Showing 33 changed files with 66 additions and 0 deletions.
diff --git a/articles/styling/advanced/custom-style-properties.adoc b/articles/styling/advanced/custom-style-properties.adoc
@@ -1,6 +1,8 @@
 ---
 title: Creating Style Properties
+page-title: How to customize style properties in Vaadin
 description: How to create your own style properties.
+meta-description: Define and use custom style properties in Vaadin to enhance application design flexibility.
 order: 20
 ---
 

diff --git a/articles/styling/advanced/disabling-default-theme.adoc b/articles/styling/advanced/disabling-default-theme.adoc
@@ -1,6 +1,8 @@
 ---
 title: Disabling the Default Theme in Flow
+page-title: How to disable default themes in Vaadin
 description: Explains how to disable the Lumo theme for an application.
+meta-description: Discover how to disable Vaadin’s default themes and apply your custom styling to components.
 order: 110
 ---
 

diff --git a/articles/styling/advanced/index.adoc b/articles/styling/advanced/index.adoc
@@ -1,5 +1,7 @@
 ---
 title: Advanced Styling Topics
+page-title: Advanced topics on styling Vaadin applications
 description: Advanced topics on styling applications.
+meta-description: Read advanced topics on styling Vaadin applications, such creating your own style properties, using npm packages, and implementing run-time theme switching.
 order: 50
 ---
diff --git a/articles/styling/advanced/lazy-loading-stylesheets.adoc b/articles/styling/advanced/lazy-loading-stylesheets.adoc
@@ -1,6 +1,8 @@
 ---
 title: Lazy-Loading Stylesheets in Flow
+page-title: How to lazy load stylesheets in Flow | Vaadin
 description: The basics of how to load large stylesheets only as needed.
+meta-description: Learn how to improve application performance by lazy loading stylesheets in Vaadin Flow.
 order: 60
 ---
 

diff --git a/articles/styling/advanced/loading-styles-dynamically.adoc b/articles/styling/advanced/loading-styles-dynamically.adoc
@@ -1,6 +1,8 @@
 ---
 title: Loading Stylesheets Dynamically in Flow
+page-title: How to load styles dynamically in Flow | Vaadin
 description: Explains how dynamically to load stylesheets.
+meta-description: Implement dynamic style loading in Vaadin Flow to optimize application performance.
 order: 70
 ---
 

diff --git a/articles/styling/advanced/multi-app-themes.adoc b/articles/styling/advanced/multi-app-themes.adoc
@@ -1,6 +1,8 @@
 ---
 title: Using a Theme in Multiple Applications
+page-title: How to create multi-app themes in Vaadin
 description: Steps and examples for using a theme in multiple applications.
+meta-description: Learn how to design and implement themes to be used by multiple applications in Vaadin.
 order: 30
 ---
 

diff --git a/articles/styling/advanced/npm-packages.adoc b/articles/styling/advanced/npm-packages.adoc
@@ -1,6 +1,8 @@
 ---
 title: Loading Theme Resources from npm Packages
+page-title: Using advanced npm packages in Vaadin styling
 description: Describes how to load theme resources from npm packages.
+meta-description: Learn how to integrate and use advanced npm packages for custom styling in Vaadin applications.
 order: 50
 ---
 

diff --git a/articles/styling/advanced/parent-and-sub-themes.adoc b/articles/styling/advanced/parent-and-sub-themes.adoc
@@ -1,6 +1,8 @@
 ---
 title: Parent pass:[&] Sub-Themes
+page-title: How to use parent and sub-themes in Vaadin
 description: Configuring parent themes, as well as sub-themes.
+meta-description: Implement parent and sub-themes in Vaadin to maintain a consistent design.
 order: 40
 ---
 

diff --git a/articles/styling/advanced/runtime-theme-switching.adoc b/articles/styling/advanced/runtime-theme-switching.adoc
@@ -1,6 +1,8 @@
 ---
 title: Run-time Theme Switching
+page-title: How to implement run-time theme switching in Vaadin
 description: Implementing multiple sets of styles within a single theme to be loaded dynamically.
+meta-description: Learn how to implement run-time theme switching in Vaadin. Explore multiple style sets, dark/light modes, and dynamic CSS class switching for custom themes.
 order: 80
 ---
 

diff --git a/articles/styling/advanced/shadow-dom-styling.adoc b/articles/styling/advanced/shadow-dom-styling.adoc
@@ -1,6 +1,8 @@
 ---
 title: Shadow DOM Styling of Components
+page-title: How to style Shadow DOM elements in Vaadin applications
 description: Details and instructions on isolating JavaScript and CSS from the surrounding page.
+meta-description: Learn how to style Shadow DOM elements in Vaadin applications. Explore advanced techniques and best practices for customizing component appearances.
 order: 100
 ---
 

diff --git a/articles/styling/advanced/themes-for-embedded.adoc b/articles/styling/advanced/themes-for-embedded.adoc
@@ -1,6 +1,8 @@
 ---
 title: Application Themes for Embedded Components
+page-title: How to create themes for embedded Vaadin applications
 description: Things to consider when using a custom theme for embedded applications.
+meta-description: Create custom themes for embedded Vaadin applications to align with your branding.
 order: 90
 ---
 

diff --git a/articles/styling/application-theme.adoc b/articles/styling/application-theme.adoc
@@ -1,6 +1,8 @@
 ---
 title: Application Theme
+page-title: How to use an application theme in Vaadin
 description: Recommendations on using a theme for styling an application.
+meta-description: Learn to create, configure, and manage application-wide themes in Vaadin projects.
 order: 20
 ---
 

diff --git a/articles/styling/index.adoc b/articles/styling/index.adoc
@@ -1,6 +1,8 @@
 ---
 title: Styling
+page-title: Styling guide for Vaadin applications
 description: A brief overview of styling Vaadin applications.
+meta-description: Explore Vaadin styling options to create visually appealing applications.
 order: 55
 section-nav: flat expanded
 ---

diff --git a/articles/styling/legacy/css-import.adoc b/articles/styling/legacy/css-import.adoc
@@ -1,6 +1,8 @@
 ---
 title: Flow CssImport Annotation
+page-title: How to use legacy CSS imports in Vaadin
 description: Information on the legacy CssImport annotation for importing stylesheets.
+meta-description: Learn how to manage CSS imports in legacy Vaadin applications.
 ---
 
 

diff --git a/articles/styling/legacy/material-theme/color.adoc b/articles/styling/legacy/material-theme/color.adoc
@@ -1,6 +1,8 @@
 ---
 title: Color
+page-title: How to customize colors in the Vaadin Material Theme
 description: Tables of colors used in the Material theme.
+meta-description: Discover how to customize colors in the Vaadin Material Theme. Learn to adjust primary, secondary, and surface colors for a personalized look and feel.
 order: 20
 ---
 

diff --git a/articles/styling/legacy/material-theme/index.adoc b/articles/styling/legacy/material-theme/index.adoc
@@ -1,6 +1,8 @@
 ---
 title: Material Theme
+page-title: How to use the Material Theme in Vaadin applications
 description: Information on the Material theme, which is not being developed further.
+meta-description: Learn how to apply and customize the legacy Material Theme in Vaadin apps. Explore styling options and tips for creating modern, material-inspired UIs
 
 order: 10
 ---

diff --git a/articles/styling/legacy/material-theme/typography.adoc b/articles/styling/legacy/material-theme/typography.adoc
@@ -1,6 +1,8 @@
 ---
 title: Typography
+page-title: How to customize typography in Vaadin Material theme
 description: Material theme style properties related to displaying and formatting text.
+meta-description: Customize typography in the Vaadin Material theme for consistent styling.
 
 order: 10
 ---

diff --git a/articles/styling/lumo/index.adoc b/articles/styling/lumo/index.adoc
@@ -1,6 +1,8 @@
 ---
 title: Lumo
+page-title: Introduction to Lumo theme in Vaadin
 description: Introduction to the built-in Lumo theme.
+meta-description: Get started with the Lumo design system to create visually appealing and accessible Vaadin applications.
 order: 10
 ---
 

diff --git a/articles/styling/lumo/lumo-style-properties/color.adoc b/articles/styling/lumo/lumo-style-properties/color.adoc
@@ -1,6 +1,8 @@
 ---
 title: Color
+page-title: How to use color properties in Lumo | Vaadin
 description: Colors and their corresponding style properties defined in the Lumo theme.
+meta-description: Learn to apply Lumo color properties to customize your Vaadin application's visual design.
 order: 10
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/color.js[Source]

diff --git a/articles/styling/lumo/lumo-style-properties/elevation.adoc b/articles/styling/lumo/lumo-style-properties/elevation.adoc
@@ -1,6 +1,8 @@
 ---
 title: Elevation
+page-title: How to use Lumo elevation properties | Vaadin
 description: Listing of Lumo elevation style properties, the visual stacking of elements in a UI.
+meta-description: Explore Lumo’s elevation properties to create depth and visual hierarchy in your Vaadin applications.
 order: 50
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/style.js[Source]

diff --git a/articles/styling/lumo/lumo-style-properties/index.adoc b/articles/styling/lumo/lumo-style-properties/index.adoc
@@ -1,6 +1,8 @@
 ---
 title: Lumo Style Properties
+page-title: How to customize with Lumo style properties | Vaadin
 description: The style properties of the built-in Lumo theme.
+meta-description: Customize your Vaadin application using Lumo style properties for consistent theming.
 order: 10
 ---
 

diff --git a/articles/styling/lumo/lumo-style-properties/interaction.adoc b/articles/styling/lumo/lumo-style-properties/interaction.adoc
@@ -1,6 +1,8 @@
 ---
 title: Interaction
+page-title: How to use interaction properties in Lumo | Vaadin
 description: Lumo style properties related to how interactions are indicated in an application, mainly by different mouse cursors.
+meta-description: Learn about Lumo interaction properties to enhance the user experience with visual feedback in your Vaadin applications.
 order: 60
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/style.js[Source]

diff --git a/articles/styling/lumo/lumo-style-properties/shape.adoc b/articles/styling/lumo/lumo-style-properties/shape.adoc
@@ -1,6 +1,8 @@
 ---
 title: Shape
+page-title: How to use shape properties in Lumo  | Vaadin
 description: Describing the Lumo style properties related to component shapes.
+meta-description: Explore Lumo shape properties to style and define unique corner shapes in your Vaadin applications.
 order: 40
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/style.js[Source]

diff --git a/articles/styling/lumo/lumo-style-properties/size-space.adoc b/articles/styling/lumo/lumo-style-properties/size-space.adoc
@@ -1,6 +1,8 @@
 ---
 title: Size pass:[&] Space
+page-title: How to use size and spacing properties in Lumo | Vaadin
 description: Listing of Lumo style properties related to setting the size and spacing of text and components.
+meta-description: Discover Lumo size and spacing properties to create well-structured layouts in Vaadin applications.
 order: 30
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/sizing.js[Source (size)]

diff --git a/articles/styling/lumo/lumo-style-properties/typography.adoc b/articles/styling/lumo/lumo-style-properties/typography.adoc
@@ -1,6 +1,8 @@
 ---
 title: Typography
+page-title: How to style typography with Lumo in Vaadin
 description: Tables of Lumo style properties related to displaying and formatting text.
+meta-description: Explore typography styling options using the Lumo theme in Vaadin.
 order: 20
 page-links:
   - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/typography.js[Source]

diff --git a/articles/styling/lumo/lumo-variants.adoc b/articles/styling/lumo/lumo-variants.adoc
@@ -1,6 +1,8 @@
 ---
 title: Lumo Variants
+page-title: How to use Lumo variants to style Vaadin applications
 description: Using the built-in light, dark, and compact variants in Lumo.
+meta-description: Use Lumo style variants to customize the look and feel of Vaadin applications effortlessly.
 order: 20
 ---
 

diff --git a/articles/styling/lumo/utility-classes.adoc b/articles/styling/lumo/utility-classes.adoc
@@ -1,6 +1,8 @@
 ---
 title: Utility Classes
+page-title: Utility classes in Vaadin Lumo for responsive design
 description: List of Lumo utility classes and descriptions of them.
+meta-description: Discover how to use Lumo utility classes for consistent and responsive styling in your Vaadin applications.
 order: 30
 ---
 

diff --git a/articles/styling/styling-components/generating-styles-dynamically.adoc b/articles/styling/styling-components/generating-styles-dynamically.adoc
@@ -1,6 +1,8 @@
 ---
 title: Generating Styles Dynamically (Flow)
+page-title: How to generate styles dynamically in Vaadin components
 description: Examples of how to use the Style API to generate CSS.
+meta-description: Learn how to generate and apply dynamic styles for Vaadin components.
 order: 40
 ---
 

diff --git a/articles/styling/styling-components/index.adoc b/articles/styling/styling-components/index.adoc
@@ -1,6 +1,8 @@
 ---
 title: Styling Components
+page-title: How to style components in Vaadin
 description: Explanation and examples on how to customize the styling of Vaadin components.
+meta-description: Understand various techniques to customize and style Vaadin components for a unique look and feel.
 order: 30
 ---
 

diff --git a/articles/styling/styling-components/parts-and-states.adoc b/articles/styling/styling-components/parts-and-states.adoc
@@ -1,6 +1,8 @@
 ---
 title: Stylable Parts pass:[&] States
+page-title: How to style parts and states of Vaadin components
 description: Learn what stylable component parts and states are and how to use them when customizing the styles of Vaadin components.
+meta-description: Customize Vaadin components using styling options for specific parts and states.
 order: 10
 ---
 

diff --git a/articles/styling/styling-components/sharing-styles.adoc b/articles/styling/styling-components/sharing-styles.adoc
@@ -1,6 +1,8 @@
 ---
 title: Sharing Styles with Component Types
+page-title: How to share styles across Vaadin components
 description: Information on configuring styles for use among multiple components types.
+meta-description: Discover how to share styles efficiently across Vaadin components for consistent designs.
 order: 30
 ---
 

diff --git a/articles/styling/styling-components/styling-component-instances.adoc b/articles/styling/styling-components/styling-component-instances.adoc
@@ -1,6 +1,8 @@
 ---
 title: Styling Component Instances
+page-title: How to style Component instances | Vaadin
 description: Configuring and applying styles to specific instances of a component.
+meta-description: Style individual component instances in Vaadin for tailored user interfaces.
 order: 20
 ---
 

diff --git a/articles/styling/styling-other-elements.adoc b/articles/styling/styling-other-elements.adoc
@@ -1,6 +1,8 @@
 ---
 title: Styling Other UI Elements
+page-title: How to style other UI elements in Vaadin applications
 description: Describes how to apply styles to common and uncommon HTML elements.
+meta-description: Learn how to style non-Vaadin elements in your Vaadin application.
 order: 40
 ---