Skip to content

Commit 53e0b5b

Browse files
marin-bratanovmarin-bratanov
authored
Proper cdn (#240)
* docs(common): proper cdn * chore(common): proper CDN in upgrade instructions * chore(common): proper cdn in csp * chore(common): proper cdn in cdn fallback * chore(common): proper cdn in switch themes
1 parent 6b27451 commit 53e0b5b

File tree

5 files changed

+23
-43
lines changed

5 files changed

+23
-43
lines changed

‎_contentTemplates/common/general-info.md‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ the `Format` is culture-specific and the same format may produce different resul
1313
#cdn
1414
You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.
1515

16-
>caption Reference the Telerik assets from the cloud in a `WebAssembly` app
16+
>caption Reference the Telerik assets from the cloud CDN
1717
1818
````CSHTML
1919
<!DOCTYPE html>
@@ -22,52 +22,26 @@ You can reference the built-in Telerik assets from a cloud CDN instead of a loca
2222
. . .
2323
<!-- Choose only one of the themes -->
2424
25-
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
25+
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/all.css" />
2626
2727
<!--
28-
<link href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" rel="stylesheet" />
29-
<link href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" rel="stylesheet" />
28+
<link href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/all.css" rel="stylesheet" />
29+
<link href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/all.css" rel="stylesheet" />
3030
-->
3131
32-
<script src="https://kendo.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
32+
<script src="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
3333
</head>
3434
3535
. . .
3636
3737
</html>
3838
````
3939

40-
>caption Reference the Telerik assets from the cloud in a `Server-side` app
4140

42-
````CSHTML
43-
<!DOCTYPE html>
44-
<html>
45-
<head>
46-
. . .
47-
<!-- Choose only one of the themes -->
48-
49-
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />
50-
51-
<!--
52-
<link href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" rel="stylesheet" />
53-
<link href="https://unpkg.com/@@progress/kendo-theme-material@@latest/dist/all.css" rel="stylesheet" />
54-
-->
55-
56-
<script src="https://kendo.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
57-
</head>
58-
59-
. . .
60-
61-
</html>
62-
````
63-
64-
>important Make sure that the version in the JS file URL matches the version of the Telerik UI for Blazor package.
65-
66-
>note You may want to monitor the [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) to see when a release uses newer Themes. This will let you point the CDN to a particular version of the themes that is tested and supported with this release, instead of `@latest`. If you don't upgrade for longer periods of time, cumulative changes in the themes may cause the `@latest` to have issues with old rendering from old versions. You can also find the Themes releases and their dates in the [Themes Repo Releases section](https://github.com/telerik/kendo-themes/releases) to match them against the Telerik UI for Blazor releases.
41+
>important Make sure that the version in the URLs matches the version of the Telerik UI for Blazor package.
6742
6843
>tip If you decide to use a CDN over static assets, you may want to implement a [fallback]({%slug common-kb-cdn-fallback%}) in case it is unavailable to your users.
6944
70-
>note We are considering a better CDN option for the themes. Until then, you can use the unpkg workaround above, or local dependency management as described below.
7145

7246
#end
7347

‎knowledge-base/cdn-fallback.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ This article contains three examples:
3434
The Telerik themes provide a test class you can easily test against to determine if they are loaded. To implement a fallback, test an element for this class (`k-theme-test-class`) and see if its `opacity` is `0`. If not, then the Telerik Theme isn't loaded, so you must add a `<link>` element pointing to a local asset that can be downloaded instead. This approach can work in a server-side app as well, and can also be combined with a script fallback logic below.
3535

3636
````CSHTML
37-
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-aaaaadefault@@latest/dist/all.css" />
37+
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default-aaaaa/all.css" />
3838
<script>
3939
function cdnTest() {
4040
var testElem = document.createElement("div");
@@ -60,7 +60,7 @@ The Telerik themes provide a test class you can easily test against to determine
6060
To test for the script, just check if the `TelerikBlazor` object exists. If not, the Telerik JS Interop file was not loaded and you should create a `<script>` tag pointing to a local resources instead.
6161

6262
````CSHTML
63-
<script src="https://kendo.cdn.telerik.com/blazor/2.16.0aaaaa/telerik-blazor.min.js"></script>
63+
<script src="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}-aaaaa/telerik-blazor.min.js"></script>
6464
<script>
6565
if (!window.TelerikBlazor) { // the Telerik object is not present
6666
var newScript = document.createElement("script");
@@ -76,7 +76,7 @@ A server-side Blazor app is bootstrapped in a Razor page (`_Host.cshtml`) and so
7676

7777
````CSHTML
7878
<link rel="stylesheet"
79-
href="https://unpkg.com/@@progress/kendo-theme-aaaaadefault@@latest/dist/all.css"
79+
href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default-aaaaa/all.css"
8080
asp-fallback-href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css"
8181
asp-fallback-test-class="k-theme-test-class"
8282
asp-fallback-test-property="opacity"

‎knowledge-base/change-theme-runtime.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Here is a basic implementation:
3838
<link href="css/site.css" rel="stylesheet" />
3939
4040
<!-- Theme switching start -->
41-
<link id="TelerikThemeLink" rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />
41+
<link id="TelerikThemeLink" rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/all.css" />
4242
<script src="~/ThemeChanger.js"></script>
4343
<!-- Theme switching end -->
4444
@@ -84,7 +84,7 @@ var themeChanger = {
8484
async Task ChangeTheme()
8585
{
8686
// use the new URL you will use - it can be relative and/or point to a custom theme
87-
string newThemeUrl = "https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css";
87+
string newThemeUrl = "https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/all.css";
8888
// call the JS interop that will switch out the <link> element
8989
await JsInterop.InvokeVoidAsync("themeChanger.changeCss", new[] { newThemeUrl });
9090
}

‎troubleshooting/csp.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ These limitations can adversely affect the Telerik UI for Blazor components, bec
2626
2727
````HTML
2828
<meta http-equiv="Content-Security-Policy" content="
29-
script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com;
30-
style-src 'self' 'unsafe-inline' https://unpkg.com;
29+
script-src 'self' 'unsafe-eval' https://blazor.cdn.telerik.com;
30+
style-src 'self' 'unsafe-inline' https://blazor.cdn.telerik.com;
3131
font-src 'self' data:;
3232
img-src 'self' data:" />
3333
````

‎upgrade/overview.md‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,21 @@ To upgrade the Telerik UI for Blazor components used in your project, perform th
3737

3838
1. Update the version of the `Telerik.UI.for.Blazor` package your project references. If you are using a trial version, the package name is `Telerik.UI.for.Blazor.Trial`.
3939

40-
1. If you are using our CDN for the JS Interop file, update the version in its URL. It must match the version of the package itself. For example, if you are upgrading to the `{{site.uiForBlazorLatestVersion}}` version, the CDN link must be:
40+
1. If you are using our CDN, update the version in the URLs. It must match the version of the package itself. For example, if you are upgrading to the `{{site.uiForBlazorLatestVersion}}` version, the CDN links must look like:
4141

4242
**HTML**
4343

44-
<script src="https://kendo.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
44+
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/all.css" />
4545

46-
Generally, the URL has the following format:
46+
<script src="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
47+
48+
Generally, the URLs have the following format:
4749

4850
**HTML**
4951

50-
<script src="https://kendo.cdn.telerik.com/blazor/<VERSION NUMBER>/telerik-blazor.min.js" defer></script>
52+
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/<VERSION NUMBER>/kendo-theme-<BUILT-IN-THEME>/all.css" />
53+
54+
<script src="https://blazor.cdn.telerik.com/blazor/<VERSION NUMBER>/telerik-blazor.min.js" defer></script>
5155

5256
## Upgrade from Trial to Commercial
5357

@@ -57,6 +61,8 @@ If you have just purchased a license and you need to migrate from the trial pack
5761

5862
1. Replace the reference to the `Telerik.UI.for.Blazor.Trial` package in your project with a reference to the `Telerik.UI.for.Blazor` package.
5963

64+
* If you are referencing other Telerik trial packages that you now have a license for, remove the `.Trial` from their names too.
65+
6066
1. If you are using static assets for our JS Interop file and/or Theme, update their path to match the package name (remove the `.Trial` part):
6167

6268
**HTML**

0 commit comments

Comments
 (0)