diff --git a/.github/Get-Started.md b/.github/Get-Started.md new file mode 100644 index 0000000..cb214c0 --- /dev/null +++ b/.github/Get-Started.md @@ -0,0 +1,6 @@ +#How to get started + +- [Installation & Setup](Installation-&-setup.md) +- [How to use in backoffice](How-to-use-in-backoffice.md) +- [How to use in Razor](How-to-use-in-Razor.md) + diff --git a/.github/How-to-use-in-Razor.md b/.github/How-to-use-in-Razor.md new file mode 100644 index 0000000..b26bac9 --- /dev/null +++ b/.github/How-to-use-in-Razor.md @@ -0,0 +1,54 @@ +## Examples + +As you'll see below, this OEmbed package doesn't do all that much for you outisde the backoffice. In true Umbraco style it tries very hard to not be opinionated when it comes to presentation. + +Here are a few examples of how you *could* embed the responses. Some properties are available on most OEmbed responses [as per the specs](https://oembed.com/#section2) and can be accessed directly (like ``Type`` or ``Html``), while others are specific for each type. Others again might be entirely custom for the provider. Those "custom" properties are accessed via ``TryGetValue(...)``. + +###Video +In this example we make sure to honor the aspect ratio of the video when presenting it, by sizing the container before outputting the HTML from the OEmbed response. + +Also notice the two ways of getting properties from the OEmbedResponse object + +```csharp +@if (Model.PageVideo?.OEmbed is OEmbedResponse video) +{ + var ratio = video.Width.HasValue && video.Height.HasValue ? + (double)video.Height.Value / (double)video.Width.Value : + 0d; + +
+
+ @Html.Raw(video.Html) +
+ + @if (video.TryGetValue("upload_date", out var uploadDateValue) && + DateTime.TryParse(uploadDateValue, out var uploadDate)) + { +

Upload from @video.ProviderName: @uploadDate

+ } +
+} +``` + +###'Any' +Knowing the type of OEmbed data in the response is quite advantageous, as _not_ knowing it severely limits what you can do with the response data. As long as you remember to use ``TryGetValue(...)`` it should be safe enough, though. + +```csharp +@if (Model.PageAny?.OEmbed is OEmbedResponse any) +{ + if (!string.IsNullOrWhiteSpace(Model.PageAny?.Url)) + { +
+
+ @Html.Raw(any.Html) +
+ + @if (any.TryGetValue("upload_date", out string uploadDateValue) && + DateTime.TryParse(uploadDateValue, out var uploadDate)) + { +

Upload from @any.ProviderName: @uploadDate

+ } +
+ } +} +``` diff --git a/.github/How-to-use-in-backoffice.md b/.github/How-to-use-in-backoffice.md new file mode 100644 index 0000000..007725c --- /dev/null +++ b/.github/How-to-use-in-backoffice.md @@ -0,0 +1,16 @@ +## Data Type Definition Example +![Data Type Definition](images/datatypeconfiguration.jpg) + +### Type +Defines validation for the selected media type. Note that the selected Type is used for **backoffice validation only** - there is still only one model/response to deal with everywhere else. + +OEmbed requests typically respond with whatever type of content it provides. While Video, Photo and Link may be (relatively) self explanatory, there are few more options in there. + +#### Rich +The Rich type is for rich (HTML) content not fitting into any of the other Types/categories. The tweet in the screenshot below could be one example (even though in the screenshot it's actually used in an editor allowing Any type). + +#### Where's the Any type? +Forgive the pun. There _is_ an "Any" type, but what does it mean? Well, the Any type simply means that there is no type validation in the editor. Anything goes. + +## Content Example +![Content Example](images/UmbracoOEmbedContent.jpg) \ No newline at end of file diff --git a/.github/Installation-&-setup.md b/.github/Installation-&-setup.md new file mode 100644 index 0000000..ddb4137 --- /dev/null +++ b/.github/Installation-&-setup.md @@ -0,0 +1,23 @@ +### Install with dotnet +Gone are the days of installation via backoffice. Your only option is now to install via [Nuget](https://www.nuget.org/packages/Novicell.Umbraco.OEmbed/) - or dotnet as below: + +``` +> dotnet add package Novicell.Umbraco.OEmbed +``` + +### Setup +For everything to kick in and be registered properly, you need to enable AutoDiscover when registering in your Startup class, like so: + +```csharp +public void ConfigureServices(IServiceCollection services) +{ + services.AddUmbraco(_env, _config) + .AddNovicellOEmbed(o => { + o.Autodiscover = true; + }) + .AddBackOffice() + .AddWebsite() + .AddComposers() + .Build(); +} +``` \ No newline at end of file diff --git a/.github/images/UmbracoOEmbedContent.jpg b/.github/images/UmbracoOEmbedContent.jpg new file mode 100644 index 0000000..e93897b Binary files /dev/null and b/.github/images/UmbracoOEmbedContent.jpg differ diff --git a/.github/images/datatypeconfiguration.jpg b/.github/images/datatypeconfiguration.jpg new file mode 100644 index 0000000..d8eb325 Binary files /dev/null and b/.github/images/datatypeconfiguration.jpg differ diff --git a/assets/images/icon.png b/.github/images/icon.png similarity index 100% rename from assets/images/icon.png rename to .github/images/icon.png diff --git a/README.md b/README.md index 5e36f49..4a16345 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,6 @@ [![Pack and Release](https://github.com/Novicell/Novicell.Umbraco.OEmbed/actions/workflows/cd-pack-and-release.yml/badge.svg)](https://github.com/Novicell/Novicell.Umbraco.OEmbed/actions/workflows/cd-pack-and-release.yml) -A property editor for Umbraco 9 that allows you to use OEmbed data for embedding video or images from external sources. +A property editor for Umbraco 9 that allows you to use OEmbed data for embedding video, images and anything else that supports OEmbed - from external sources. -Find the package on nuget - https://www.nuget.org/packages/Novicell.Umbraco.OEmbed/ - -> dotnet add package Novicell.Umbraco.OEmbed --version 1.0.0-rc002 +[Take a look at the documentation here](/.github/Get-Started.md) for info and tips on installation as well as implementation. diff --git a/src/Novicell.Umbraco.OEmbed.Website/Views/Home.cshtml b/src/Novicell.Umbraco.OEmbed.Website/Views/Home.cshtml index a4b08e0..0341dab 100644 --- a/src/Novicell.Umbraco.OEmbed.Website/Views/Home.cshtml +++ b/src/Novicell.Umbraco.OEmbed.Website/Views/Home.cshtml @@ -5,22 +5,22 @@ @using ContentModels = Umbraco.Cms.Web.Common.PublishedModels @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage @{ - Layout = null; + Layout = null; }
-@if (Model.PageVideo?.OEmbed is OEmbedResponse video) -{ - var ratio = video.Width.HasValue && video.Height.HasValue ? - (double)video.Height.Value / (double)video.Width.Value : - 0d; + @if (Model.PageVideo?.OEmbed is OEmbedResponse video) + { + var ratio = video.Width.HasValue && video.Height.HasValue ? + (double)video.Height.Value / (double)video.Width.Value : + 0d; -
-
- @Html.Raw(video.Html) -
- - @if (video.TryGetValue("upload_date", out var uploadDateValue) && +
+
+ @Html.Raw(video.Html) +
+ + @if (video.TryGetValue("upload_date", out string uploadDateValue) && DateTime.TryParse(uploadDateValue, out var uploadDate)) + { +

Upload from @video.ProviderName: @uploadDate

+ } +
+ } + + + @if (Model.PageAny?.OEmbed is OEmbedResponse any) + { + if (!string.IsNullOrWhiteSpace(Model.PageAny?.Url)) { -

Upload from @video.ProviderName: @uploadDate

- } -
-} +
+
+ @Html.Raw(any.Html) +
+ @if (any.TryGetValue("upload_date", out string uploadDateValue) && + DateTime.TryParse(uploadDateValue, out var uploadDate)) + { +

Upload from @any.ProviderName: @uploadDate

+ } +
+ } + }
diff --git a/src/Novicell.Umbraco.OEmbed.Website/appsettings.json b/src/Novicell.Umbraco.OEmbed.Website/appsettings.json index 81f03dd..b88c94a 100644 --- a/src/Novicell.Umbraco.OEmbed.Website/appsettings.json +++ b/src/Novicell.Umbraco.OEmbed.Website/appsettings.json @@ -18,7 +18,7 @@ "Umbraco": { "CMS": { "ModelsBuilder": { - "ModelsMode": "SourceCodeAuto" + "ModelsMode": "SourceCodeManual" }, "Hosting": { "Debug": false diff --git a/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/Content/home1.config b/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/Content/home1.config index 6a995f1..b2cd95d 100644 --- a/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/Content/home1.config +++ b/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/Content/home1.config @@ -13,6 +13,28 @@ + +

I’m moving $1B of my Square equity (~28% of my wealth) to #startsmall LLC to fund global COVID-19 relief. After we disarm this pandemic, the focus will shift to girl’s health and education, and UBI. It will operate transparently, all flows tracked here: https://t.co/hVkUczDQmz

— jack (@jack) April 7, 2020\n\n", + "url": "https://twitter.com/jack/status/1247616214769086465", + "height": null, + "width": 550, + "cache_age": null + } +}]]> + - - + + + cc37654d-d4c3-4315-823f-df79a5b763c6 + Any + pageAny + 72de9d10-46b5-4eba-b112-e023bd17c4b2 + Novicell.OEmbed + false + + + 1 + Content + Nothing + + + false + + + + + Content + 0 + + \ No newline at end of file diff --git a/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/DataTypes/HomeAnyNovicellOEmbed.config b/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/DataTypes/HomeAnyNovicellOEmbed.config new file mode 100644 index 0000000..ffbdbba --- /dev/null +++ b/src/Novicell.Umbraco.OEmbed.Website/uSync/v9/DataTypes/HomeAnyNovicellOEmbed.config @@ -0,0 +1,11 @@ + + + + Home - Any - Novicell OEmbed + Novicell.OEmbed + Ntext + + + \ No newline at end of file