Skip to content

Commit

Permalink
Update angular and blazor cta banners
Browse files Browse the repository at this point in the history
  • Loading branch information
@dobromirts
dobromirts committed May 14, 2024
1 parent 46ae8ae commit 9267b4e
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 79 deletions.
110 changes: 64 additions & 46 deletions src/app/services/localization.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,51 @@ 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!',
"barButtonText": 'Start Free Trial',
"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",
Expand All @@ -55,42 +64,51 @@ 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 コントロールとコード生成を備えた完全なデザイン システムが含まれています!',
"barButtonText": '無償トライアル版の開始',
"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": "注",
Expand Down
31 changes: 15 additions & 16 deletions src/app/services/rendering/article.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -368,15 +359,15 @@ 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';
action = 'Learn More';
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);
}
Expand All @@ -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 = $('<a>').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 = $('<div>');
divTag.addClass('row banner-wrapper');

Expand All @@ -423,7 +422,7 @@ export class ArticleRenderingService extends RenderingService {
$('<div>').addClass('col-md-7').append(
$('<div>').addClass('cta-title-desc text-center text-md-left').append(
$('<div>').addClass('cta-desc').append(
$('<p>').addClass('text-margin').text(content)
$('<p>').addClass('cta-banner-text').html(content)
)
)
),
Expand Down
Loading

0 comments on commit 9267b4e

Please sign in to comment.