# 404

# 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 (opens new window)

# The Cat API

TheCatApi // Developer Experience (opens new window) docs

# An Example of a 404 page

You can install the VSCode extension Thunder Client (opens new window) for testing the cat API.

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

- --
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>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

puede ver la página en funcionamiento en esta web (opens new window)

# Extensions for APIs

# Vscode Thunder Client

You can install the VSCode extension Thunder Client (opens new window) for testing the cat API.

# Chrome

For Chrome you can install: