perro
/
perrotuerto.blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Actualización

This commit is contained in:
perro tuerto 2023-06-25 15:05:15 -07:00
parent 99719d3480
commit 00a5391546
17 changed files with 770 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.token

2
.gitlab-ci.yml
View File

@ -3,7 +3,7 @@ image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
- echo 'Deploying...'
artifacts:
paths:
- public

264
public/css/styles.css Normal file
View File

@ -0,0 +1,264 @@
/**************************************************/
/******************* RESETEADOR *******************/
/**************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Old browsers / Para viejos exploradores */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**************************************************/
body * {
font-family: AlegreyaSansRegular, sans-serif;
line-height: 1.15;
font-weight: normal;
font-style: normal;
}
body b {
font-family: "AlegreyaSansBold", sans-serif;
font-weight: bold;
font-style: normal;
}
body i {
font-family: "AlegreyaSansItalic", sans-serif;
font-weight: normal;
font-style: italic;
}
body a {
text-decoration: none;
}
body span.icon {
padding-right: .25rem;
}
header {
width: 100%;
height: 20rem;
background-image: url('../img/banner_color.jpg');
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
header > img {
display: block;
height: 200px;
width: auto;
margin: auto;
}
nav, footer {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #e5582d;
color: white;
padding: 1rem;
}
nav {
margin-bottom: 2rem;
font-size: 1.25rem;
}
nav a, footer a {
color: white;
}
nav li {
display: inline;
}
nav li:not(:first-of-type) {
margin-left: 1rem;
}
nav input#search-bar {
display: inline-block;
border-radius: 1rem;
padding: .15rem .5rem;
border: none;
width: 200px;
box-sizing: border-box;
color: #2e2e2e;
}
nav input#search-bar:focus {
outline: none;
}
section {
max-width: 40rem;
margin: auto;
padding: 0 1rem;
font-size: 1.15rem;
}
section > h1 {
font-size: 2rem;
margin-top: 2rem;
}
section > h1 + p {
margin-top: 1rem;
}
li.link {
scroll-margin-top: 5rem;
padding-top: 1rem;
}
li.link:not(:first-of-type) {
margin-top: 1rem;
}
li.link + li.link {
border-top: 1px dashed black;
}
li.link h1 {
font-size: 1.5rem;
}
li.link a.anchor {
font-size: 1rem;
padding-right: .5rem;
}
li.link summary {
color: #e5582d;
margin-left: -1rem;
}
li.link p.description,
li.link p.tags,
li.link p.dates {
color: gray;
}
li.link p.description:before,
li.link p.tags:before,
li.link p.dates:before,
li.link summary:before {
padding-right: .5rem;
}
li.link p.description:before {
content: "📝";
}
li.link p.tags:before {
content: "🏷️";
}
li.link p.dates:before {
content: "📅";
}
li.link span.created:before {
content: "Creado: ";
}
li.link span.updated:before {
content: "Actualizado: ";
padding-left: 1rem;
}
li.link div.info {
margin-top: 1rem;
}
li.link a.link {
display: table-cell;
padding-right: .5em;
}
details {
padding-left: 1rem;
}
details h1, details h2 {
margin: 1rem auto;
}
details h1:before, details h2:before {
color: #e5582d;
}
details h1:before {
content: "# ";
}
details h2:before {
content: "## ";
}
details h3:before {
content: "### ";
}
details p + p {
text-indent: 1rem;
}
footer {
margin-top: 2rem;
padding: 1em 25%;
text-align: center;
}

BIN
public/img/banner_color.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 KiB

BIN
public/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
public/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 KiB

76
public/index.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="es">
<head>
<title>Blog del perro</title>
<meta charset="utf-8" />
<meta name="application-name" content="Blog del perro">
<meta name="description" content="Del Pacífico para el mundo: edición, software y culturas libres.">
<meta name="keywords" content="blog, libros, licencias, software libre, acceso abierto, código abierto, edición, publicación, books, licenses, free software, open access, open source, edition, publishing">
<meta name="viewport" content="width=device-width, user-scalable=0">
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/alegreya-sans" type="text/css"/>
<script src="js/list.min.js"></script>
</head>
<body id="content">
<header>
<img alt="Logotipo de perro tuerto" src="img/logo.png"/>
</header>
<nav>
<ul>
<li><b>perro tuerto</b></li>
<li><span class="icon">🦝&nbsp;<a target="_blank" href="https://gitlab.com/perrotuerto">GitLab</a></span></li>
<li><span class="icon">🐈&nbsp;<a target="_blank" href="https://git.cuates.net/perro">Cuates</a></span></li>
<li><span class="icon">🐁&nbsp;<a target="_blank" href="https://es.wikipedia.org/wiki/Usuario:Perrotuerto">Wikipedia</a></span></li>
<li><span class="icon">🐙&nbsp;<a target="_blank" href="https://github.com/perrotuerto">GitHub</a></span></li>
<li><span class="icon">✉️ &nbsp;<a target="_blank" href="mailto:hi@perrotuerto.blog">Correo</a></span></li>
</ul>
</nav>
<section id="acerca">
<h1>Acerca</h1>
Hola, soy perro tuerto. Mi formación académica es en Filosofía, mi profesión es la edición de publicaciones (libros, fanzines, revistas, etc.) y mi programación se enfoca en el desarrollo de metodologías libres para la publicación. Soy fan de las humanidades, la paleoantropología y las ciencias de la computación, así como soy voluntario en organizaciones sobre edición, <i>software</i> y cultura libres, como Miau, Cuates o Wikipedia. Doy soporte técnico a la Academia Mexicana de la Lengua y puedo ayudarte en tus proyectos. <b>En este espacio comparto enlaces que me parecen chéveres.</b>
</section>
<section id="links">
<h1>Links</h1><ul class="list">
<li class="link" id="91">
<h1><a class="anchor" href="#91">⚓</a><a class="name" href="https://www.larramendi.es/i18n/consulta/libroselectronicos.do">Biblioteca Virtual de Polígrafos</a></h1>
<p class="description">Obras de Menéndez Pelayo, Hernando de Larramendi y otros en ebook.</p>
<p class="tags"><a><span class="tag">#esteticas</span></a> <a><span class="tag">#historia</span></a> <a><span class="tag">#ideas</span></a></p>
<p class="dates"><span class="created">24/06/2023</span><span class="updated">25/06/2023</span></p>
<details class="info">
<summary>Leer más</summary><h1>Presentación</h1>
<h2>Concepto de polígrafo y poligrafista</h2>
<p>Menéndez Pelayo retratado por SorollaLa Fundación se propone, a partir de una idea de Menéndez Pelayo, creador del término polígrafo en el sentido que se emplea aquí, hacer accesible el pensamiento de polígrafos españoles, portugueses, brasileños e hispanoamericanos reuniendo digitalmente su obra. El proyecto se realiza en algunas de sus partes mediante la colaboración con otras instituciones.</p>
<h2>Concepto de polígrafo</h2>
<p>La palabra <i>polígrafo</i> se refiere en este contexto al creador polifacético cuya obra marcó un punto de inflexión en su campo.</p>
<h2>El poligrafista</h2>
<p>Llamamos <i>poligrafista</i> al profesos investigador especialista en alguno o algunos de los polígrafos que componen esta biblioteca virtual y que escribe un estudio sobre su figura y su obra. La Fundación Ignacio Larramendi encarga muchos de estos estudios.</p>
<h2>El comienzo</h2>
<p>La Biblioteca Virtual de Polígrafos es un proyecto que ideó y puso en marcha Ignacio Hernando de Larramendi en los años 90 del siglo XX, con la intención de aprovechar las posibilidades que las incipientes nuevas tecnologías ofrecían para la conservación y la difusión del conocimiento.</p>
<p>Ignacio Larramendi centró esta Biblioteca Virtual en cuatro colecciones que recibieron el nombre de uno de los polígrafos más importantes de cada una de ellas: Marcelino Menéndez Pelayo, para la colección de polígrafos españoles, José de Anchieta, para la de brasileños, Francisco Manuel de Melo, para la de portugueses, y Andrés Bello, para la de hispanoamericanos. En recuerdo del aquellos comienzos figuran los cuatro polígrafos, por ese orden, en la cabecera de este micrositio.</p>
<h2>Reconocimiento de la Biblioteca Virtual de Polígrafos por Europeana y el W3C</h2>
<p>La Biblioteca Virtual de Polígrafos de la Fundación Ignacio Larramendi, denominada en inglés Polymath Virtual Library por el W3C, ha sido seleccionada por el clúster de Datos Bibliográficos de esta entidad como <a target="_blank" href="http://www.w3.org/2005/Incubator/lld/wiki/Use_Case_Polymath_Virtual_Library">Case Study</a>.</p>
<p>También esta Biblioteca Virtual ha sido elegida por Europeana un <a target="_blank" href="https://pro.europeana.eu/page/polymath-edm">EDM Case Study</a>.</p>
</details>
</li></ul>
</section>
<footer>
<p><b>perro tuerto</b></p>
<p>Del Pacífico para el mundo: edición, <i>software</i> y culturas libres.</p>
<p><span class="icon">🤖&nbsp;<a target="_blank" href="https://perrotuerto.blog/perro.json">JSON</a></p>
</footer>
<script>
var nav = document.querySelector("nav > ul"),
li = document.createElement("li"),
input = document.createElement("input"),
options = { valueNames: [ 'name', 'description', 'tag' ] };
input.id = "search-bar";
input.placeholder = "Filtrar";
input.classList.add("fuzzy-search");
li.appendChild(input);
nav.appendChild(li);
new List('content', options);
</script>
</body>
</html>

2
public/js/list.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
public/perro.json Normal file
View File

@ -0,0 +1 @@
{"count":1,"next":null,"previous":null,"results":[{"id":91,"url":"https://www.larramendi.es/i18n/consulta/libroselectronicos.do","title":"Biblioteca Virtual de Polígrafos","description":"Obras de Menéndez Pelayo, Hernando de Larramendi y otros en ebook.","notes":"# Presentación\r\n\r\n## Concepto de polígrafo y poligrafista\r\n\r\nMenéndez Pelayo retratado por SorollaLa Fundación se propone, a partir de una idea de Menéndez Pelayo, creador del término polígrafo en el sentido que se emplea aquí, hacer accesible el pensamiento de polígrafos españoles, portugueses, brasileños e hispanoamericanos reuniendo digitalmente su obra. El proyecto se realiza en algunas de sus partes mediante la colaboración con otras instituciones.\r\n\r\n## Concepto de polígrafo\r\n\r\nLa palabra *polígrafo* se refiere en este contexto al creador polifacético cuya obra marcó un punto de inflexión en su campo.\r\n\r\n## El poligrafista\r\n\r\nLlamamos *poligrafista* al profesos investigador especialista en alguno o algunos de los polígrafos que componen esta biblioteca virtual y que escribe un estudio sobre su figura y su obra. La Fundación Ignacio Larramendi encarga muchos de estos estudios.\r\n\r\n## El comienzo\r\n\r\nLa Biblioteca Virtual de Polígrafos es un proyecto que ideó y puso en marcha Ignacio Hernando de Larramendi en los años 90 del siglo XX, con la intención de aprovechar las posibilidades que las incipientes nuevas tecnologías ofrecían para la conservación y la difusión del conocimiento.\r\n\r\nIgnacio Larramendi centró esta Biblioteca Virtual en cuatro colecciones que recibieron el nombre de uno de los polígrafos más importantes de cada una de ellas: Marcelino Menéndez Pelayo, para la colección de polígrafos españoles, José de Anchieta, para la de brasileños, Francisco Manuel de Melo, para la de portugueses, y Andrés Bello, para la de hispanoamericanos. En recuerdo del aquellos comienzos figuran los cuatro polígrafos, por ese orden, en la cabecera de este micrositio.\r\n\r\n## Reconocimiento de la Biblioteca Virtual de Polígrafos por Europeana y el W3C\r\n\r\nLa Biblioteca Virtual de Polígrafos de la Fundación Ignacio Larramendi, denominada en inglés Polymath Virtual Library por el W3C, ha sido seleccionada por el clúster de Datos Bibliográficos de esta entidad como [Case Study](http://www.w3.org/2005/Incubator/lld/wiki/Use_Case_Polymath_Virtual_Library).\r\n\r\nTambién esta Biblioteca Virtual ha sido elegida por Europeana un [EDM Case Study](https://pro.europeana.eu/page/polymath-edm).","website_title":"Biblioteca Virtual de Polígrafos > \r\n Obras\r\n ›\r\n Libros electrónicos","website_description":"","is_archived":false,"unread":false,"shared":true,"tag_names":["esteticas","historia","ideas","blog"],"date_added":"2023-06-24T23:31:04.671856Z","date_modified":"2023-06-25T21:59:05.406668Z"}]}

85
scripts/make.py Normal file
View File

@ -0,0 +1,85 @@
import re
import sys
import json
from datetime import datetime
from pathlib import Path
root = Path(__file__).parent.parent
about = re.sub(r'\s+', ' ', """
Hola, soy perro tuerto. Mi formación académica es en Filosofía, mi
profesión es la edición de publicaciones (libros, fanzines, revistas, etc.)
y mi programación se enfoca en el desarrollo de metodologías libres para la
publicación. Soy fan de las humanidades, la paleoantropología y las
ciencias de la computación, así como soy voluntario en organizaciones sobre
edición, <i>software</i> y cultura libres, como Miau, Cuates o Wikipedia.
Doy soporte técnico a la Academia Mexicana de la Lengua y puedo ayudarte
en tus proyectos. <b>En este espacio comparto enlaces que me parecen
chéveres.</b>
""").strip()
contact = {
"site": "https://perrotuerto.blog",
"gitlab": "https://gitlab.com/perrotuerto",
"cuates": "https://git.cuates.net/perro",
"wikipedia": "https://es.wikipedia.org/wiki/Usuario:Perrotuerto",
"github": "https://github.com/perrotuerto",
"email": "hi@perrotuerto.blog",
}
links = json.loads(Path(sys.argv[1]).read_text())
data = {"acerca": about, "contacto": contact, "links": links["results"]}
index = root / "public" / "index.html"
template = (root / "src" / "template.html").read_text()
body = ""
for key, val in data.items():
if key == "contacto":
for name, url in val.items():
template = re.sub(f'#{name.upper()}#', url, template)
continue
body += f'\n<section id="{key}">'
body += f'\n<h1>{key.capitalize()}</h1>'
if isinstance(val, str):
body += f'\n{val}'
else:
body += '<ul class="list">'
for link in val:
date = "%d/%m/%Y"
url = link["url"]
created = link["date_added"]
updated = link["date_modified"]
created = datetime.fromisoformat(created).strftime(date)
updated = datetime.fromisoformat(updated).strftime(date)
tags = filter(lambda x: x != "blog", link["tag_names"])
tags = map(lambda x: f'<span class="tag">#{x}</span>', tags)
tags = map(lambda x: f'<a>{x}</a>', tags)
body += f'\n<li class="link" id="{link["id"]}">'
body += f'\n<h1><a class="anchor" href="#{link["id"]}">⚓</a>'
body += f'<a class="name" href="{url}">{link["title"]}</a></h1>'
body += f'\n<p class="description">{link["description"]}</p>'
body += f'\n<p class="tags">{" ".join(tags)}</p>'
body += '\n<p class="dates">'
body += f'<span class="created">{created}</span>'
body += f'<span class="updated">{updated}</span></p>'
if "notes" in link.keys():
blocks = map(lambda x: x.strip(), link["notes"].split("\n"))
blocks = list(filter(None, blocks))
for i, block in enumerate(blocks):
block = re.sub(r'\*\*\*(.+)\*\*\*', r'<b><i>\1</i></b>', block)
block = re.sub(r'\*\*(.+)\*\*', r'<b>\1</b>', block)
block = re.sub(r'\*(.+)\*', r'<i>\1</i>', block)
block = re.sub(r'\[(.+)\]\((.+)\)', r'<a target="_blank" href="\2">\1</a>', block)
header = r'(#+)\s*(.+)'
if re.match(header, block):
groups = re.match(header, block).groups()
tag = "h" + str(len(groups[0]))
blocks[i] = f"<{tag}>{groups[1]}</{tag}>"
else:
blocks[i] = f"<p>{block}</p>"
body += '\n<details class="info">'
body += '\n<summary>Leer más</summary>'
body += "\n".join(blocks)
body += '\n</details>'
body += '\n</li>'
body += "</ul>"
body += '\n</section>'
index.write_text(re.sub('#LINKS#', body, template))

26
scripts/update.sh Normal file
View File

@ -0,0 +1,26 @@
JSON=public/perro.json
# Va a la raíz del repo
cd $(dirname $0)/..
# Limpia sitio
rm -rf public
mkdir public
cp -r src/* public
rm public/*.*
# Descarga info de GitLab
curl --request GET \
-s -o $JSON \
-H "Authorization: Token $(<.token)" \
"https://linkding.cuates.net/api/bookmarks/?q=%23blog"
# Rehace sitio y JSON
python3 ./scripts/make.py $JSON
# Hace commit al repo si hubo cambios
if [ -n "$(git status --porcelain)" ]; then
git add .
git commit -m "Actualización"
git push
fi

264
src/css/styles.css Normal file
View File

@ -0,0 +1,264 @@
/**************************************************/
/******************* RESETEADOR *******************/
/**************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Old browsers / Para viejos exploradores */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**************************************************/
body * {
font-family: AlegreyaSansRegular, sans-serif;
line-height: 1.15;
font-weight: normal;
font-style: normal;
}
body b {
font-family: "AlegreyaSansBold", sans-serif;
font-weight: bold;
font-style: normal;
}
body i {
font-family: "AlegreyaSansItalic", sans-serif;
font-weight: normal;
font-style: italic;
}
body a {
text-decoration: none;
}
body span.icon {
padding-right: .25rem;
}
header {
width: 100%;
height: 20rem;
background-image: url('../img/banner_color.jpg');
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
header > img {
display: block;
height: 200px;
width: auto;
margin: auto;
}
nav, footer {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #e5582d;
color: white;
padding: 1rem;
}
nav {
margin-bottom: 2rem;
font-size: 1.25rem;
}
nav a, footer a {
color: white;
}
nav li {
display: inline;
}
nav li:not(:first-of-type) {
margin-left: 1rem;
}
nav input#search-bar {
display: inline-block;
border-radius: 1rem;
padding: .15rem .5rem;
border: none;
width: 200px;
box-sizing: border-box;
color: #2e2e2e;
}
nav input#search-bar:focus {
outline: none;
}
section {
max-width: 40rem;
margin: auto;
padding: 0 1rem;
font-size: 1.15rem;
}
section > h1 {
font-size: 2rem;
margin-top: 2rem;
}
section > h1 + p {
margin-top: 1rem;
}
li.link {
scroll-margin-top: 5rem;
padding-top: 1rem;
}
li.link:not(:first-of-type) {
margin-top: 1rem;
}
li.link + li.link {
border-top: 1px dashed black;
}
li.link h1 {
font-size: 1.5rem;
}
li.link a.anchor {
font-size: 1rem;
padding-right: .5rem;
}
li.link summary {
color: #e5582d;
margin-left: -1rem;
}
li.link p.description,
li.link p.tags,
li.link p.dates {
color: gray;
}
li.link p.description:before,
li.link p.tags:before,
li.link p.dates:before,
li.link summary:before {
padding-right: .5rem;
}
li.link p.description:before {
content: "📝";
}
li.link p.tags:before {
content: "🏷️";
}
li.link p.dates:before {
content: "📅";
}
li.link span.created:before {
content: "Creado: ";
}
li.link span.updated:before {
content: "Actualizado: ";
padding-left: 1rem;
}
li.link div.info {
margin-top: 1rem;
}
li.link a.link {
display: table-cell;
padding-right: .5em;
}
details {
padding-left: 1rem;
}
details h1, details h2 {
margin: 1rem auto;
}
details h1:before, details h2:before {
color: #e5582d;
}
details h1:before {
content: "# ";
}
details h2:before {
content: "## ";
}
details h3:before {
content: "### ";
}
details p + p {
text-indent: 1rem;
}
footer {
margin-top: 2rem;
padding: 1em 25%;
text-align: center;
}

BIN
src/img/banner_color.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 KiB

BIN
src/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 583 KiB

2
src/js/list.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

48
src/template.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="es">
<head>
<title>Blog del perro</title>
<meta charset="utf-8" />
<meta name="application-name" content="Blog del perro">
<meta name="description" content="Del Pacífico para el mundo: edición, software y culturas libres.">
<meta name="keywords" content="blog, libros, licencias, software libre, acceso abierto, código abierto, edición, publicación, books, licenses, free software, open access, open source, edition, publishing">
<meta name="viewport" content="width=device-width, user-scalable=0">
<link type="text/css" rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/alegreya-sans" type="text/css"/>
<script src="js/list.min.js"></script>
</head>
<body id="content">
<header>
<img alt="Logotipo de perro tuerto" src="img/logo.png"/>
</header>
<nav>
<ul>
<li><b>perro tuerto</b></li>
<li><span class="icon">🦝&nbsp;<a target="_blank" href="#GITLAB#">GitLab</a></span></li>
<li><span class="icon">🐈&nbsp;<a target="_blank" href="#CUATES#">Cuates</a></span></li>
<li><span class="icon">🐁&nbsp;<a target="_blank" href="#WIKIPEDIA#">Wikipedia</a></span></li>
<li><span class="icon">🐙&nbsp;<a target="_blank" href="#GITHUB#">GitHub</a></span></li>
<li><span class="icon">✉️ &nbsp;<a target="_blank" href="mailto:#EMAIL#">Correo</a></span></li>
</ul>
</nav>
#LINKS#
<footer>
<p><b>perro tuerto</b></p>
<p>Del Pacífico para el mundo: edición, <i>software</i> y culturas libres.</p>
<p><span class="icon">🤖&nbsp;<a target="_blank" href="https://perrotuerto.blog/perro.json">JSON</a></p>
</footer>
<script>
var nav = document.querySelector("nav > ul"),
li = document.createElement("li"),
input = document.createElement("input"),
options = { valueNames: [ 'name', 'description', 'tag' ] };
input.id = "search-bar";
input.placeholder = "Filtrar";
input.classList.add("fuzzy-search");
li.appendChild(input);
nav.appendChild(li);
new List('content', options);
</script>
</body>
</html>