Desarrollo y Mantenimiento de Sistemas Informáticos

4º. 1er cuatrimestre. Itinerario de Sistemas de la Información. Grado en Ingeniería Informática. ULL

Organization org   Github Classroom classroom   Campus Virtual campus   Students Activity   Chat Chat

Building a Jekyll 404 dynamic page

Jekyll docs on 404

Puede servir fácilmente páginas de error 404 personalizadas con Jekyll reemplazando la página predeterminada Error 404 – File Not Found que se muestra cuando uno intenta acceder a un enlace roto en su sitio.

Cualquier fichero 404.html en la raíz de su directorio _site será atendido automáticamente por GitHub Pages y el servidor de desarrollo WEBrick local.

Véase la documentación de Jekyllrb en Custom 404 Page

The Cat API

Extensions for APIs

Vscode Thunder Client

You can install the VSCode extension Thunder Client for testing the cat API.

Chrome

For Chrome you can install:

Exercise: REST API request to GH

Make request to GitHub REST to Get all contributor commit activity using

Lea la sección REST Clients

An Example of a 404 page

~/.../pl1920/apuntes(master)]$ cat 404.md 

---
layout: error
title: Error
---
# Error: ¡Ay Diós mío!

## Aún no he escrito esta página. 


<div>
<style>
img, #quote, #comment-cat {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#author {
  float: right;
}
</style>


<div id="comment-cat"></div>
<div id="cat"></div>
<br/>
<div id="quote"></div>
<div id="author"></div>


<script type="text/javascript">

/*
  https://docs.thecatapi.com/ 
*/
const URL = 'https://api.thecatapi.com/v1/images/search?size=full';

(async function() {
  try {
    
    // CAT 
    let divTitle = document.getElementById("comment-cat");
    
    let divcat = document.getElementById("cat");
    let response = await fetch(URL, {
       headers: {
       'x-api-key': "56a4f1cc-7f60-468d-9dba-e4b6f04b7c7d"
       }
    });
    let cat = await response.json();
    // console.log(cat);   
    let img = document.createElement("img");
    let title = document.createElement("h2");
    title.innerText = "Consuélate con un gatito";   
    divTitle.append(title);
    img.src = cat[0].url;
    divcat.appendChild(img);   

    // QUOTE
    const quoteDiv = document.getElementById("quote");
    const authorDiv = document.getElementById("author");
    
    const quoteRes = await fetch('https://api.quotable.io/random');
    const data = await quoteRes.json();
    quoteDiv.innerHTML = `<h2>${data.content}</h2>`;
    authorDiv.innerHTML = `<h3>—${data.author}</h3>`;
  }
  catch(e) { 
    console.log(e);
  }
})();
</script>

</div>

puede ver la página en funcionamiento en esta web