A simple website written in plain JavaScript with data from Kentico Kontent.

License: MIT License

HTML 24.51% JavaScript 62.14% CSS 13.35%

kentico-kontent javascript javascript-tutorial tutorial

kontent-tutorial-plain-javascript's Introduction

Kentico Kontent plain JavaScript tutorial

This is simple website written in plain JavaScript that retrieves and displays content from Kontent by Kentico. It serves as a source code reference for the Building your first plain JavaScript app with Kontent tutorial.

The project uses the Kontent JavaScript Delivery SDK.

To run the website, download the files and open index.html.

To pull content from your own project, change the projectId in both article.js and articleList.js to the ID of your project.

kontent-tutorial-plain-javascript's People

Stargazers

Watchers

Forkers

galipalli carlo-kontent

kontent-tutorial-plain-javascript's Issues

Handling errors

 .catch(err => {
    app.innerHTML = notFound
    console.log('error: ' + err)
  });

you don't actually know whether the issue is a 404 or something completely different. For example, if you access your article.html like this:

file:///C:/dev/plain-javascript-tutorial/article.html#smudla

The console shows this message:

error: TypeError: Cannot read property 'teaser_image' of undefined

This doesn't seem right as it happens because in

  .then(response => {
    var article = response.items[0];

    let headerImage = document.createElement("img");
    headerImage.setAttribute("class", "article-header");
    headerImage.src = article.teaser_image.value[0].url + "?w=500&h=500";

    let title = document.createElement("h2");
    title.setAttribute("class", "article-title");
    title.innerText = article.title.value;

    let body = document.createElement("div");
    body.setAttribute("class", "article-description");
    body.innerHTML = article.body_copy.resolveHtml();

    articleContainer.appendChild(headerImage);
    articleContainer.appendChild(title);
    articleContainer.appendChild(body);
  })

You don't verify if article was found or not. You could use something like this:

.then(response => {
    const article = response.items.length ? response.items[0] : undefined;

    if (!article) {
      app.innerHTML = notFound
      return;
    }

    let headerImage = document.createElement("img");
    headerImage.setAttribute("class", "article-header");
    headerImage.src = article.teaser_image.value[0].url + "?w=500&h=500";

    let title = document.createElement("h2");
    title.setAttribute("class", "article-title");
    title.innerText = article.title.value;

    let body = document.createElement("div");
    body.setAttribute("class", "article-description");
    body.innerHTML = article.body_copy.resolveHtml();

    articleContainer.appendChild(headerImage);
    articleContainer.appendChild(title);
    articleContainer.appendChild(body);
  })

The catch could look as simple as:

  .catch(err => {
    console.error(err);
    app.innerHTML = `I'm unknown error :(`;
  });

There is a way to handle cloud specific errors, but that doesn't currently work in plain js without explicitely referencing kentico-cloud-core package. I'll have to move objects around to make it work as explained here (https://github.com/Kentico/kentico-cloud-js/blob/master/packages/delivery/DOCS.md#handling-errors)

Tip: Instead of

console.log('error...');

use

console.error('error...');

Check for defined values when getting indexed items from array

When you get data from array:

item.video_host.value[0]

you should first check whether the value exists and whether it has defined length, otherwise js will throw an exception.

var youtube = item.video_host && item.video_host.length ? item.video_host[0] : undefined;
if (youtube) {
   /// 
}

Create shared js file

How about if you created a shared 'core.js' file where you defined your delivery client, app and other shared code?

Use triple equals (or other operators)

See https://codeburst.io/javascript-double-equals-vs-triple-equals-61d4ce5a121a

Original:

     if (link.type == "article") {
        return { 
          url: `article.html#${link.urlSlug}` 
        };
      }

New

     if (link.type === "article") {
        return { 
          url: `article.html#${link.urlSlug}` 
        };
      }

Unify let/var/const

Depending on your browser support (IE doesn't support const for instance), you could unify the way you use const/var/let. For example in following code everything can be const, there is no need for 'Kc' to be var or for 'card' to be 'let' as you are not modifying it later on.

const app = document.getElementById("app");

const articleList = document.createElement("div");
articleList.setAttribute("id", "article-list");
app.appendChild(articleList);

var Kc = window["kenticoCloudDelivery"];

var deliveryClient = new Kc.DeliveryClient({
  projectId: "975bf280-fd91-488c-994c-2f04416e5ee3"
}); 

deliveryClient
  .items()
  .type("article")
  .toPromise()
  .then(response => {
    response.items.forEach(item => {
      let card = document.createElement("div"); 
      card.setAttribute("class", "card");

      let link = document.createElement("a");
      link.href = "./article.html#" + item.url_pattern.value;

      let teaser = document.createElement("img");
      teaser.setAttribute("class", "article-teaser");
      teaser.src = item.teaser_image.value[0].url + "?w=500&h=500";

      let title = document.createElement("h2");
      title.setAttribute("class", "article-title");
      title.innerText = item.title.value;

      let description = document.createElement("div");
      description.setAttribute("class", "article-description");
      description.innerHTML = item.summary.value;

      articleList.appendChild(card);

      card.appendChild(link);

      link.appendChild(teaser);
      link.appendChild(title);
      link.appendChild(description);
    });
  });

IE Compatibility (question?)

It's currently not compatible with IE11 - it's probably not required, but just to let you know. There would have to be few changes in code such as avoiding backticks, arrow functions and using dedicated legacy UMD bundle of the delivery-cloud-js sdk.

Works fine in Opera & Chrome.

Repo rename

Motivation/Proposed solution

Repo should be renamed to kontent-tutorial-plain-javascript to be in line with other repo naming conventions of product-project-type-language

kontent-ai-learn / kontent-tutorial-plain-javascript Goto Github PK

kontent-tutorial-plain-javascript's Introduction

Kentico Kontent plain JavaScript tutorial

kontent-tutorial-plain-javascript's People

Stargazers

Watchers

Forkers

kontent-tutorial-plain-javascript's Issues

Handling errors

Check for defined values when getting indexed items from array

Create shared js file

Use triple equals (or other operators)

Unify let/var/const

IE Compatibility (question?)

Repo rename

Motivation/Proposed solution

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent