From 262d9dec4c59dd37cf20f0405dabcfc05abd1ec9 Mon Sep 17 00:00:00 2001 From: Veera Paananen Date: Tue, 17 Dec 2024 13:02:54 +0000 Subject: [PATCH] Add or enhance meta title and meta description of the article pages of the latest docs version: Styling -section --- articles/styling/advanced/custom-style-properties.adoc | 2 ++ articles/styling/advanced/disabling-default-theme.adoc | 2 ++ articles/styling/advanced/index.adoc | 2 ++ articles/styling/advanced/lazy-loading-stylesheets.adoc | 2 ++ articles/styling/advanced/loading-styles-dynamically.adoc | 2 ++ articles/styling/advanced/multi-app-themes.adoc | 2 ++ articles/styling/advanced/npm-packages.adoc | 2 ++ articles/styling/advanced/parent-and-sub-themes.adoc | 2 ++ articles/styling/advanced/runtime-theme-switching.adoc | 2 ++ articles/styling/advanced/shadow-dom-styling.adoc | 2 ++ articles/styling/advanced/themes-for-embedded.adoc | 2 ++ articles/styling/application-theme.adoc | 2 ++ articles/styling/index.adoc | 2 ++ articles/styling/legacy/css-import.adoc | 2 ++ articles/styling/legacy/material-theme/color.adoc | 2 ++ articles/styling/legacy/material-theme/index.adoc | 2 ++ articles/styling/legacy/material-theme/typography.adoc | 2 ++ articles/styling/lumo/index.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/color.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/elevation.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/index.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/interaction.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/shape.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/size-space.adoc | 2 ++ articles/styling/lumo/lumo-style-properties/typography.adoc | 2 ++ articles/styling/lumo/lumo-variants.adoc | 2 ++ articles/styling/lumo/utility-classes.adoc | 2 ++ .../styling-components/generating-styles-dynamically.adoc | 2 ++ articles/styling/styling-components/index.adoc | 2 ++ articles/styling/styling-components/parts-and-states.adoc | 2 ++ articles/styling/styling-components/sharing-styles.adoc | 2 ++ .../styling/styling-components/styling-component-instances.adoc | 2 ++ articles/styling/styling-other-elements.adoc | 2 ++ 33 files changed, 66 insertions(+) diff --git a/articles/styling/advanced/custom-style-properties.adoc b/articles/styling/advanced/custom-style-properties.adoc index 21f5cb6f00..39ec3e7438 100644 --- 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 index f886fd912d..bcf4d9d1d3 100644 --- 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 index 27c56492e8..933769d17c 100644 --- 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 index 556051033b..210f2ff927 100644 --- 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 index 71a385bebe..4cd5587555 100644 --- 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 index 65a12f7533..3df791f268 100644 --- 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 index 8b0b9088d3..547e3f97b5 100644 --- 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 index 20e061c973..b909d5b326 100644 --- 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 index ec64677d87..d67c9b9743 100644 --- 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 index d9eea4c406..1686545c48 100644 --- 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 index 52d72b8869..ac22974933 100644 --- 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 index e46986fbad..fbe77fb92b 100644 --- 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 index 60355dfaef..7b1b390c51 100644 --- 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 index aa13e39cde..e23199e57c 100644 --- 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 index 315bbed945..812c0ea7c5 100644 --- 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 index 64cfb80970..f2e17d2bd7 100644 --- 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 index 535262c62a..9037433c3d 100644 --- 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 index 914b7dd777..98ce462ffc 100644 --- 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 index 36db7326f0..3650c72472 100644 --- 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 index e0d038f713..6e7a31cfd8 100644 --- 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 index 01c6aed070..ba4fff9b4d 100644 --- 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 index 336f92def7..096d38f925 100644 --- 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 index bbc74ecb75..fa75775d52 100644 --- 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 index 591ce10e13..04cd2b637d 100644 --- 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 index 4ba7fbf2cc..e7056a831a 100644 --- 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 index ba5198b89b..d5004c1786 100644 --- 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 index b23f28ce9b..3ef360c393 100644 --- 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 index bfe210d292..afad3e5b0e 100644 --- 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 index 55bfb67da7..21a444c342 100644 --- 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 index 431ff24ad2..49b90f25c1 100644 --- 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 index 259630e14a..b8ba79c18e 100644 --- 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 index dd488f3232..9eaca1ab6a 100644 --- 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 index 4031f176fc..8a813cdf13 100644 --- 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 ---