Skip to content

Proper cdn #240

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

Merged
merged 5 commits into from
Feb 19, 2021
Merged

Proper cdn #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
760d702
docs(common): proper cdn
marin-bratanov Feb 19, 2021
b317af8
chore(common): proper CDN in upgrade instructions
marin-bratanov Feb 19, 2021
59198ad
chore(common): proper cdn in csp
marin-bratanov Feb 19, 2021
a4e3fd1
chore(common): proper cdn in cdn fallback
marin-bratanov Feb 19, 2021
913eada
chore(common): proper cdn in switch themes
marin-bratanov Feb 19, 2021
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
38 changes: 6 additions & 32 deletions _contentTemplates/common/general-info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ the `Format` is culture-specific and the same format may produce different resul
#cdn
You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.

>caption Reference the Telerik assets from the cloud in a `WebAssembly` app
>caption Reference the Telerik assets from the cloud CDN

````CSHTML
<!DOCTYPE html>
Expand All @@ -22,52 +22,26 @@ You can reference the built-in Telerik assets from a cloud CDN instead of a loca
. . .
<!-- Choose only one of the themes -->

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/all.css" />

<!--
<link href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" rel="stylesheet" />
<link href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" rel="stylesheet" />
<link href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/all.css" rel="stylesheet" />
<link href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/all.css" rel="stylesheet" />
-->

<script src="https://kendo.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
<script src="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
</head>

. . .

</html>
````

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

````CSHTML
<!DOCTYPE html>
<html>
<head>
. . .
<!-- Choose only one of the themes -->

<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />

<!--
<link href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" rel="stylesheet" />
<link href="https://unpkg.com/@@progress/kendo-theme-material@@latest/dist/all.css" rel="stylesheet" />
-->

<script src="https://kendo.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/telerik-blazor.min.js" defer></script>
</head>

. . .

</html>
````

>important Make sure that the version in the JS file URL matches the version of the Telerik UI for Blazor package.

>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.
>important Make sure that the version in the URLs matches the version of the Telerik UI for Blazor package.

>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.

>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.

#end

Expand Down
6 changes: 3 additions & 3 deletions knowledge-base/cdn-fallback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ This article contains three examples:
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.

````CSHTML
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-aaaaadefault@@latest/dist/all.css" />
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default-aaaaa/all.css" />
<script>
function cdnTest() {
var testElem = document.createElement("div");
Expand All @@ -60,7 +60,7 @@ The Telerik themes provide a test class you can easily test against to determine
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.

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

````CSHTML
<link rel="stylesheet"
href="https://unpkg.com/@@progress/kendo-theme-aaaaadefault@@latest/dist/all.css"
href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default-aaaaa/all.css"
asp-fallback-href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity"
Expand Down
4 changes: 2 additions & 2 deletions knowledge-base/change-theme-runtime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Here is a basic implementation:
<link href="css/site.css" rel="stylesheet" />

<!-- Theme switching start -->
<link id="TelerikThemeLink" rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />
<link id="TelerikThemeLink" rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/all.css" />
<script src="~/ThemeChanger.js"></script>
<!-- Theme switching end -->

Expand Down Expand Up @@ -84,7 +84,7 @@ var themeChanger = {
async Task ChangeTheme()
{
// use the new URL you will use - it can be relative and/or point to a custom theme
string newThemeUrl = "https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css";
string newThemeUrl = "https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/all.css";
// call the JS interop that will switch out the <link> element
await JsInterop.InvokeVoidAsync("themeChanger.changeCss", new[] { newThemeUrl });
}
Expand Down
4 changes: 2 additions & 2 deletions troubleshooting/csp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ These limitations can adversely affect the Telerik UI for Blazor components, bec

````HTML
<meta http-equiv="Content-Security-Policy" content="
script-src 'self' 'unsafe-eval' https://kendo.cdn.telerik.com;
style-src 'self' 'unsafe-inline' https://unpkg.com;
script-src 'self' 'unsafe-eval' https://blazor.cdn.telerik.com;
style-src 'self' 'unsafe-inline' https://blazor.cdn.telerik.com;
font-src 'self' data:;
img-src 'self' data:" />
````
Expand Down
14 changes: 10 additions & 4 deletions upgrade/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,21 @@ To upgrade the Telerik UI for Blazor components used in your project, perform th

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`.

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:
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:

**HTML**

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

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

Generally, the URLs have the following format:

**HTML**

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

<script src="https://blazor.cdn.telerik.com/blazor/<VERSION NUMBER>/telerik-blazor.min.js" defer></script>

## Upgrade from Trial to Commercial

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

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.

* If you are referencing other Telerik trial packages that you now have a license for, remove the `.Trial` from their names too.

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):

**HTML**
Expand Down