From 9267b4e4d375193228091c161042113715839a76 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Tue, 14 May 2024 17:32:52 +0300 Subject: [PATCH] Update angular and blazor cta banners --- src/app/services/localization.ts | 110 +++++++++++++++----------- src/app/services/rendering/article.ts | 31 ++++---- src/app/services/rendering/navbar.ts | 32 ++++---- src/styles/shared/_global.scss | 9 ++- 4 files changed, 103 insertions(+), 79 deletions(-) diff --git a/src/app/services/localization.ts b/src/app/services/localization.ts index 6b0e01b0..20ed4635 100644 --- a/src/app/services/localization.ts +++ b/src/app/services/localization.ts @@ -9,17 +9,21 @@ interface ILocalizationKeys { class LocalizationService { public data: ILocalizationKeys = { "English": { - "angularGrids": { - "barText": "Want the Fastest Angular Data Grid on the Market? We’ve Got It! Quickly Bind Data with Minimal Code Involved.", - "barButtonText": "Get Started", - "buttonXdGaLabelValue": 'Help_AngularGrids_Trial', - "buttonGaLabelValue": 'Hello bar – Help_AngularGrids_Trial', - }, - "angularCharts": { - "barText": 'Ignite UI Angular Charts: Build Expressive Dashboards and Render Data Points with 65+ Real-Time Angular Charts.', - "barButtonText": 'Start Free Trial', - "buttonXdGaLabelValue": 'Help_AngularCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_AngularCharts_Trial', + "angular": { + "gridsBarText": "Want the Fastest Angular Data Grid on the Market? We’ve Got It! Quickly Bind Data with Minimal Code Involved.", + "gridsBarButtonText": "Get Started", + "gridsButtonXdGaLabelValue": 'Help_AngularGrids_Trial', + "gridsButtonGaLabelValue": 'Hello bar – Help_AngularGrids_Trial', + "chartsBarText": 'Ignite UI Angular Charts: Build Expressive Dashboards and Render Data Points with 65+ Real-Time Angular Charts.', + "chartsBarButtonText": 'Start Free Trial', + "chartsButtonXdGaLabelValue": 'Help_AngularCharts_Trial', + "chartsButtonGaLabelValue": 'Hello bar – Help_AngularCharts_Trial', + "ctaGenericText": "60+ components, flexible API, powerful theming and branding capabilities, and a {{actionText}} with the speed and functionalities you require.", + "ctaGenericActionText": "rich feature set for building Angular apps", + "ctaGridText": "The {{actionText}}, offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. Everything you need for the ultimate app building experience and data manipulation.", + "ctaGridActionText": "fastest, feature-rich Angular Data Grid", + "ctaChartText": "Render millions of data points and build your visualizations with {{actionText}}. This is the most extensive chart library for any application scenario.", + "ctaChartActionText": "60+ real-time Angular charts", }, "appbuilder": { "barText": 'App Builder™ Includes a Full Design System with 60+ UI Controls and Code Generation for Angular & Blazor!', @@ -27,24 +31,29 @@ class LocalizationService { "buttonXdGaLabelValue": 'Help_ABTrial', "buttonGaLabelValue": 'Hello bar – Help_ABTrial', }, - "blazorCharts": { - "barText": 'Create Charts & Dashboards for Your Modern C# Blazor Web and Mobile Apps with Over 65 High-Performing Charts & Graphs in Ignite UI!', - "barButtonText": 'Try It Free', - "buttonXdGaLabelValue": 'Help_BlazorCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', - }, - "blazorGrids": { - "barText": 'Ignite UI for Blazor: Feature-Rich, Lightweight Tables & Data Grids to Modernize Your Apps!', - "barButtonText": 'Try It Free', - "buttonXdGaLabelValue": 'Help_BlazorCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial' + "blazor": { + "gridsBarText": 'Ignite UI for Blazor: Feature-Rich, Lightweight Tables & Data Grids to Modernize Your Apps!', + "gridsBarButtonText": 'Try It Free', + "gridsButtonXdGaLabelValue": 'Help_BlazorCharts_Trial', + "gridsButtonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', + "chartsBarText": 'Create Charts & Dashboards for Your Modern C# Blazor Web and Mobile Apps with Over 65 High-Performing Charts & Graphs in Ignite UI!', + "chartsBarButtonText": 'Try It Free', + "chartsButtonXdGaLabelValue": 'Help_BlazorCharts_Trial', + "chartsButtonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', + "ctaGenericText": "Build modern web experiences with {{actionText}}, including the fastest Data Grid, high-performance Charts, a full set of ready-to-use features, and more.", + "ctaGenericActionText": "60+ reusable components", + "ctaGridText": "A {{actionText}}, covering everything from paging, sorting, filtering, editing, grouping to virtualization on rows and columns, and beyond. No limits for .NET developers.", + "ctaGridActionText": "full set of ready-to-use features", + "ctaChartText": "Transform raw data into stunning visualizations and ensure the best UX, using {{actionText}} and graphs optimized for Blazor WebAssembly and Blazor Server.", + "ctaChartActionText": "using 60+ high-performance charts", }, "hljs": { "copyCode": "COPY CODE", "codeCopied": "COPIED" }, "sideaffix": { - "title": "IN THIS ARTICLE" + "title": "IN THIS ARTICLE", + "tryNow": "Try Now For Free" }, "noteBlocks": { "note": "NOTE", @@ -55,17 +64,21 @@ class LocalizationService { } }, "Japanese": { - "angularGrids": { - "barText": "市場で最速の Angular Data Grid が必要なら、私たちにお任せください! 最小限のコードでデータをすばやくバインドします。", - "barButtonText": "使用開始", - "buttonXdGaLabelValue": 'Help_AngularGrids_Trial', - "buttonGaLabelValue": 'Hello bar – Help_AngularGrids_Trial', - }, - "angularCharts": { - "barText": 'Ignite UI Angular チャート: 表現力豊かなダッシュボードを構築し、65 以上のリアルタイム Angular チャートを使用してデータ ポイントをレンダリングします。', - "barButtonText": '無償トライアル版の開始', - "buttonXdGaLabelValue": 'Help_AngularCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_AngularCharts_Trial', + "angular": { + "gridsBarText": "市場で最速の Angular Data Grid が必要なら、私たちにお任せください! 最小限のコードでデータをすばやくバインドします。", + "gridsBarButtonText": "使用開始", + "gridsButtonXdGaLabelValue": 'Help_AngularGrids_Trial', + "gridsButtonGaLabelValue": 'Hello bar – Help_AngularGrids_Trial', + "chartsBarText": 'Ignite UI Angular チャート: 表現力豊かなダッシュボードを構築し、65 以上のリアルタイム Angular チャートを使用してデータ ポイントをレンダリングします。', + "chartsBarButtonText": '無償トライアル版の開始', + "chartsButtonXdGaLabelValue": 'Help_AngularCharts_Trial', + "chartsButtonGaLabelValue": 'Hello bar – Help_AngularCharts_Trial', + "ctaGenericText": "60+ components, flexible API, powerful theming and branding capabilities, and a {{actionText}} with the speed and functionalities you require.", + "ctaGenericActionText": "rich feature set for building Angular apps", + "ctaGridText": "The {{actionText}}, offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. Everything you need for the ultimate app building experience and data manipulation.", + "ctaGridActionText": "fastest, feature-rich Angular Data Grid", + "ctaChartText": "Render millions of data points and build your visualizations with {{actionText}}. This is the most extensive chart library for any application scenario.", + "ctaChartActionText": "60+ real-time Angular charts", }, "appbuilder": { "barText": 'App Builder™ には、Angular と Blazor 用の 60 以上の UI コントロールとコード生成を備えた完全なデザイン システムが含まれています!', @@ -73,24 +86,29 @@ class LocalizationService { "buttonXdGaLabelValue": 'Help_ABTrial', "buttonGaLabelValue": 'Hello bar – Help_ABTrial', }, - "blazorCharts": { - "barText": 'Ignite UI の 65 を超える高性能チャートとグラフを使用して、最新の C# Blazor Web およびモバイル アプリ用のチャートとダッシュボードを作成します!', - "barButtonText": '無料で試してみる', - "buttonXdGaLabelValue": 'Help_BlazorCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', - }, - "blazorGrids": { - "barText": 'Ignite UI for Blazor: アプリをモダナイズする機能豊富で軽量なテーブルとデータ グリッド!', - "barButtonText": '無料で試してみる', - "buttonXdGaLabelValue": 'Help_BlazorCharts_Trial', - "buttonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial' + "blazor": { + "gridsBarText": 'Ignite UI for Blazor: アプリをモダナイズする機能豊富で軽量なテーブルとデータ グリッド!', + "gridsBarButtonText": '無料で試してみる', + "gridsButtonXdGaLabelValue": 'Help_BlazorCharts_Trial', + "gridsButtonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', + "chartsBarText": 'Ignite UI の 65 を超える高性能チャートとグラフを使用して、最新の C# Blazor Web およびモバイル アプリ用のチャートとダッシュボードを作成します!', + "chartsBarButtonText": '無料で試してみる', + "chartsButtonXdGaLabelValue": 'Help_BlazorCharts_Trial', + "chartsButtonGaLabelValue": 'Hello bar – Help_BlazorCharts_Trial', + "ctaGenericText": "Build modern web experiences with {{actionText}}, including the fastest Data Grid, high-performance Charts, a full set of ready-to-use features, and more.", + "ctaGenericActionText": "60+ reusable components", + "ctaGridText": "A {{actionText}}, covering everything from paging, sorting, filtering, editing, grouping to virtualization on rows and columns, and beyond. No limits for .NET developers.", + "ctaGridActionText": "full set of ready-to-use features", + "ctaChartText": "Transform raw data into stunning visualizations and ensure the best UX, using {{actionText}} and graphs optimized for Blazor WebAssembly and Blazor Server.", + "ctaChartActionText": "using 60+ high-performance charts", }, "hljs": { "copyCode": "コピー", "codeCopied": "コピー済み" }, "sideaffix": { - "title": "トピック コンテンツ:" + "title": "トピック コンテンツ:", + "tryNow": "Try Now For Free" }, "noteBlocks": { "note": "注", diff --git a/src/app/services/rendering/article.ts b/src/app/services/rendering/article.ts index 0e752838..c80eeae0 100644 --- a/src/app/services/rendering/article.ts +++ b/src/app/services/rendering/article.ts @@ -5,18 +5,9 @@ import hljs from "../highlight-custom"; import type { IgniteUIPlatform } from '../../types'; import { onSampleIframeContentLoaded, onXPlatSampleIframeContentLoaded } from "../../handlers"; import { Router } from "../router"; +import localization from '../localization'; const LOGO_PATH = 'https://static.infragistics.com/marketing/Website/products/ignite-ui/shared/ignite-ui-logo-light-background-horizontal.svg'; -const SIGN_UP = 'Sign Up For A Trial'; -const TRY_NOW = 'Try Now For Free'; - -const ANGULAR_GENERIC_COPY = 'Ignite UI for Angular contains over 60+ components, flexible API, powerful theming and branding capabilities, and a rich feature set that will let you build Angular apps with the speed and functionalities you require.' -const ANGULAR_GRID_COPY = 'Ignite UI for Angular Data Grid is the fastest and feature-rich component, offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. It`s everything you need for the ultimate app building experience and data manipulation.' -const ANGULAR_CHARTS_COPY = 'Render millions of data points and build your visualizations with 60+ real-time Angular charts by Ignite UI for Angular. This is the most extensive chart library, fitting any application scenario.' - -const BLAZOR_GENERIC_COPY = 'Build modern web experiences with Ignite UI for Blazor - the most comprehensive UI library on the market today. Packing a full set of ready-to-use features, 60+ reusable components, including the fastest Data Grid, high-performance Charts, and others.' -const BLAZOR_GRID_COPY = 'Ignite UI for Blazor Data Grid delivers a full set of ready-to-use features, covering everything from paging, sorting, filtering, editing, grouping to virtualization on rows and columns, and beyond, without limiting .NET developers.' -const BLAZOR_CHARTS_COPY = 'Transform raw data into stunning visualizations with Ignite UI for Blazor Charts and ensure the best user experience. The Component includes 60+ high-performance charts and graphs optimized for Blazor WebAssembly and Blazor Server.' const IGNITE_UI_TEMPLATE_BANNER = 'https://static.infragistics.com/marketing/Blog-in-content-ads/Ignite-UI-PlatformPath/ignite-ui-Platform-you-get-ad.gif'; const REACT_CTA_BANNER = 'https://static.infragistics.com/marketing/Blog-in-content-ads/Ignite-UI-React/ignite-ui-react-you-get.gif'; @@ -368,7 +359,7 @@ export class ArticleRenderingService extends RenderingService { } if (productLink.includes("angular") && $(".article-container h2")[2]){ - this.createCtaBanner(0, TRY_NOW, productLink, true); + this.createCtaBanner(0, localization.localize('sideaffix', 'tryNow'), productLink, true); if ($(".article-container h2")[4]){ const builderImagePath = languageVersion === 'en' ? APP_BUILDER_CTA_BANNER : JP_APP_BUILDER_CTA_BANNER; const appbuilderLink = 'https://www.appbuilder.dev'; @@ -376,7 +367,7 @@ export class ArticleRenderingService extends RenderingService { this.createCtaImageBanner(4, appbuilderLink, builderImagePath, action, 'App Builder | CTA Banner'); } } else if(productLink.includes("blazor")){ - this.createCtaBanner(0, TRY_NOW, productLink); + this.createCtaBanner(0, localization.localize('sideaffix', 'tryNow'), productLink); } else if($(".article-container h2")[2]){ this.createCtaImageBanner(2, productLink, imagePath, action, productTitle); } @@ -398,15 +389,23 @@ export class ArticleRenderingService extends RenderingService { private createCtaBanner(headerIndex: number, actionText: string, productLink: string, isAngular: boolean = false) { const currentHref = window.location.href; let content = ''; + let contentActionText = ''; if (currentHref.includes("grid")) { - isAngular ? content = ANGULAR_GRID_COPY : content = BLAZOR_GRID_COPY; + isAngular ? contentActionText = localization.localize('angular', 'ctaGridActionText') : contentActionText = localization.localize('blazor', 'ctaGridActionText'); + isAngular ? content = localization.localize('angular', 'ctaGridText') : content = localization.localize('blazor', 'ctaGridText'); } else if (currentHref.includes("chart")) { - isAngular ? content = ANGULAR_CHARTS_COPY : content = BLAZOR_CHARTS_COPY; + isAngular ? contentActionText = localization.localize('angular', 'ctaChartActionText') : contentActionText = localization.localize('blazor', 'ctaChartActionText'); + isAngular ? content = localization.localize('angular', 'ctaChartText') : content = localization.localize('blazor', 'ctaChartText'); } else { - isAngular ? content = ANGULAR_GENERIC_COPY : content = BLAZOR_GENERIC_COPY; + isAngular ? contentActionText = localization.localize('angular', 'ctaGenericActionText') : contentActionText = localization.localize('blazor', 'ctaGenericActionText'); + isAngular ? content = localization.localize('angular', 'ctaGenericText') : content = localization.localize('blazor', 'ctaGenericText'); headerIndex = 1; } + + const ctaActionText = $('').addClass('cta-action-text').attr('href', productLink).text(contentActionText); + const actionTextHTML = ctaActionText.prop('outerHTML'); + content = content.replace('{{actionText}}', actionTextHTML); const header = $(".article-container h2")[headerIndex], divTag = $('
'); divTag.addClass('row banner-wrapper'); @@ -423,7 +422,7 @@ export class ArticleRenderingService extends RenderingService { $('
').addClass('col-md-7').append( $('
').addClass('cta-title-desc text-center text-md-left').append( $('
').addClass('cta-desc').append( - $('

').addClass('text-margin').text(content) + $('

').addClass('cta-banner-text').html(content) ) ) ), diff --git a/src/app/services/rendering/navbar.ts b/src/app/services/rendering/navbar.ts index 1f844cd3..7b489351 100644 --- a/src/app/services/rendering/navbar.ts +++ b/src/app/services/rendering/navbar.ts @@ -97,11 +97,11 @@ export class NavbarRenderingService extends RenderingService { let $platformMeta = $("meta[property='docfx:platform']"); let platform = $platformMeta.attr("content")!; - let barText = localization.localize('angularGrids', 'barText'); - let barButtonText = localization.localize('angularGrids', 'barButtonText'); + let barText = localization.localize('angular', 'gridsBarText'); + let barButtonText = localization.localize('angular', 'gridsBarButtonText'); let buttonHrefValue = 'https://www.infragistics.com/products/ignite-ui-angular/download'; - let buttonXdGaLabelValue = localization.localize('angularGrids', 'buttonXdGaLabelValue'); - let buttonGaLabelValue = localization.localize('angularGrids', 'buttonGaLabelValue'); + let buttonXdGaLabelValue = localization.localize('angular', 'gridsButtonXdGaLabelValue'); + let buttonGaLabelValue = localization.localize('angular', 'gridsButtonGaLabelValue'); if (platform === 'appbuilder') { barText = localization.localize('appbuilder', 'barText'); @@ -111,24 +111,24 @@ export class NavbarRenderingService extends RenderingService { buttonGaLabelValue = localization.localize('appbuilder', 'buttonGaLabelValue'); } else if (platform === 'blazor') { if (currentRoute.includes('charts')) { - barText = localization.localize('blazorCharts', 'barText'); - barButtonText = localization.localize('blazorCharts', 'barButtonText'); + barText = localization.localize('blazor', 'chartsBarText'); + barButtonText = localization.localize('blazor', 'chartsBarButtonText'); buttonHrefValue = 'https://www.infragistics.com/products/ignite-ui-blazor/download'; - buttonXdGaLabelValue = localization.localize('blazorCharts', 'buttonXdGaLabelValue'); - buttonGaLabelValue = localization.localize('blazorCharts', 'buttonGaLabelValue'); + buttonXdGaLabelValue = localization.localize('blazor', 'chartsButtonXdGaLabelValue'); + buttonGaLabelValue = localization.localize('blazor', 'chartsButtonGaLabelValue'); } else { - barText = localization.localize('blazorGrids', 'barText'); - barButtonText = localization.localize('blazorGrids', 'barButtonText'); + barText = localization.localize('blazor', 'gridsBarText'); + barButtonText = localization.localize('blazor', 'gridsBarButtonText'); buttonHrefValue = 'https://www.infragistics.com/products/ignite-ui-blazor/download'; - buttonXdGaLabelValue = localization.localize('blazorGrids', 'buttonXdGaLabelValue'); - buttonGaLabelValue = localization.localize('blazorGrids', 'buttonGaLabelValue'); + buttonXdGaLabelValue = localization.localize('blazor', 'gridsButtonXdGaLabelValue'); + buttonGaLabelValue = localization.localize('blazor', 'gridsButtonGaLabelValue'); } } else if (platform === 'angular') { if (currentRoute.includes('charts')) { - barText = localization.localize('angularCharts', 'barText'); - barButtonText = localization.localize('angularCharts', 'barButtonText'); - buttonXdGaLabelValue = localization.localize('angularCharts', 'buttonXdGaLabelValue'); - buttonGaLabelValue = localization.localize('angularCharts', 'buttonGaLabelValue'); + barText = localization.localize('angular', 'chartsBarText'); + barButtonText = localization.localize('angular', 'chartsBarButtonText'); + buttonXdGaLabelValue = localization.localize('angular', 'chartsButtonXdGaLabelValue'); + buttonGaLabelValue = localization.localize('angular', 'chartsButtonGaLabelValue'); } } diff --git a/src/styles/shared/_global.scss b/src/styles/shared/_global.scss index 080d3fe9..c16fe9b8 100644 --- a/src/styles/shared/_global.scss +++ b/src/styles/shared/_global.scss @@ -199,7 +199,14 @@ $sg-items-gap: rem(8px); white-space: nowrap; } -.text-margin { +.cta-action-text { + color: #0099FF; + font-weight: bold; + cursor: pointer; +} + +.cta-banner-text { + font-size: rem(18px); margin-left: 2rem; margin-top: rem(24px); }