Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update angular and blazor cta banners #464

Merged
merged 2 commits into from
May 15, 2024
Merged

Update angular and blazor cta banners #464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9267b4e
Update angular and blazor cta banners
dobromirts May 14, 2024
d5a672e
Updating Japanese strings.
randriova May 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 64 additions & 46 deletions src/app/services/localization.ts
View file
Open in desktop
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 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた {{actionText}}。",
"ctaGenericActionText": "Angular アプリケーションを構築するための豊富な機能セット",
"ctaGridText": "{{actionText}} は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。",
"ctaGridActionText": "最速で機能豊富な Angular Data Grid",
"ctaChartText": "{{actionText}} を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。",
"ctaChartActionText": "60 以上のリアルタイム Angular チャート",
},
"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": "最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む {{actionText}} を使用して、最新の Web エクスペリエンスを構築します。",
"ctaGenericActionText": "60 以上の再利用可能なコンポーネント",
"ctaGridText": "{{actionText}} は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。",
"ctaGridActionText": "すぐに使用できる機能のフルセット",
"ctaChartText": "Blazor WebAssembly および Blazor Server 向けに最適化された {{actionText}} とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。",
"ctaChartActionText": "60 以上の高性能チャートを使用",
},
"hljs": {
"copyCode": "コピー",
"codeCopied": "コピー済み"
},
"sideaffix": {
"title": "トピック コンテンツ:"
"title": "トピック コンテンツ:",
"tryNow": "無料で試してみる"
},
"noteBlocks": {
"note": "注",
Expand Down
31 changes: 15 additions & 16 deletions src/app/services/rendering/article.ts
View file
Open in desktop
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
Loading