Creation of 'build.rb'

2018-10-03 23:17:11 -05:00 · 2018-10-03 23:17:11 -05:00 · c274f8b4c8
parent 43eae2d70f
commit c274f8b4c8
14 changed files with 1136 additions and 45 deletions
--- a/build.rb
+++ b/build.rb
@ -6,6 +6,8 @@ require 'fileutils'
 require 'time'
 require 'json'

+# Also requires Pecas
+
 Encoding.default_internal = Encoding::UTF_8
 Dir.chdir(File.dirname(__FILE__))

@ -19,6 +21,9 @@ $site_img = 'icon.png'
 $author_name = 'Nika Zhenya'
 $author_email = 'nika.zhenya@cliteratu.re'
 $date = Time.now.to_s.split(' ')[0]
+$head = `cat template/head.html`
+$header = `cat template/header.html`
+$footer = `cat template/footer.html`
 $rss = {
  :channel => {
    :title => $site_name,
@ -61,6 +66,36 @@ def get_date d, rfc = false
  end
 end

+# Replaces strings
+def replace_content content, title = 'Main'
+  elements = [
+    ['language', $language],
+    ['site_name', $site_name],
+    ['site_description', $site_description],
+    ['site_keywords', $site_keywords],
+    ['site_link', $site_link],
+    ['site_img', $site_img],
+    ['author_name', $author_name],
+    ['author_email', $author_email],
+    ['date', get_date($date)],
+    ['title', title]
+  ]
+
+  elements.each do |e|
+    content = content.gsub("$#{e[0]}$", e[1])
+  end
+
+  if content.split("\n")[0] == '<header>'
+    content = content.gsub("Mariana Eguaras's blog", "<a target=\"_blank\" href=\"https://marianaeguaras.com/blog/\">Mariana Eguaras's blog</a>")
+  end
+
+  if title == 'Main'
+    content.gsub!('href="../', 'href="')
+  end
+
+  return content
+end
+
 # Converts MD in other formats
 def convert_md md
  content = []
@ -75,10 +110,14 @@ def convert_md md
    :pubDate => ''
  }

+  # Gets properties from MD
  def item_split s
    return s.gsub(/@\S+\['(.*?)'\]/, '\1').strip.split('\',\'')
  end

+  puts "Building '" + File.basename(md) + "'…"
+
+  # Analizes MD
  file = File.open(md, 'r:UTF-8')
  file.each_with_index do |l, i|
    if i == 0
@ -87,27 +126,59 @@ def convert_md md

    if l =~ /^@original\[.*?\]\s*?$/
      data = item_split(l)
-      content.push(
-        '<p class="original">Spanish: ' +
-        get_date(data[0]) + ' | ' +
-        '<a target="_blank" href="' + data[1] + '">' +
-        'source</a></p>'
-      )
    elsif l =~ /^@current\[.*?\]\s*?$/
      data = item_split(l)
      item[:pubDate] = get_date(data[0], true)
      item[:category] = data[1]
      item[:description] = data[2]
      content.push(
-        '<p class="current">English: ' +
+        '<p class="meta">' +
        get_date(data[0]) + ' | ' +
-        data[1] + '</p>'
+        data[1] + ' | ' +
+        '<span class="smallcap"><a target="_blank" href="' + $site_link + '/epub/' + File.basename(md, ".*") + '.epub">EPUB</a></span> / ' +
+        '<span class="smallcap"><a target="_blank" href="' + $site_link + '/mobi/' + File.basename(md, ".*") + '.mobi">MOBI</a></span> / ' +
+        '<a target="_blank" href="' + data[3] + '">original</a>' +
+        '</p>'
      )
    else
      content.push(l)
    end
  end

+  # Creates an MD with some changes
+  html_name = 'html/' + File.basename(md, '.*') + '.html'
+  new_md_name = 'html/' + File.basename(md)
+  new_md = File.new(new_md_name, 'w:UTF-8')
+  new_md.puts content
+  new_md.close
+
+  # Converts MD to HTML
+  system("pc-pandog -i #{new_md_name} -o #{html_name}")
+  FileUtils.rm(new_md_name)
+
+  # EPUB and MOBI goes here
+
+  # Changes some things for the final HTML
+  write = false
+  new_html = []
+  html = File.open(html_name, 'r:UTF-8')
+  html.each do |l|
+    if write && l !~ /^\s*<style/
+      new_html.push(l)
+    end
+
+    if l =~ /^\s*?<body/ || l =~ /^\s*?<\/body/
+      write = !write
+    end
+  end
+  html.close
+  html = File.open(html_name, 'w:UTF-8')
+  html.puts replace_content($head, item[:title]), replace_content($header)
+  html.puts new_html
+  html.puts replace_content($footer)
+  html.close
+
+  # Adds content to RSS
  $rss[:channel][:items].push(item)
 end

@ -142,14 +213,38 @@ end

 # Deployment

+# Generates core CSS
+Dir.chdir('css')
+system("pc-add --add css")
+Dir.chdir('..')
+
 # Gets MDs to convert in other formats
 Dir.glob('md/*.{md}').each_with_index do |md, i|
  convert_md(File.absolute_path(md))
 end

-# Builds the RSS
+# Last info added to RSS
 $rss[:channel][:lastBuildDate] = get_date($date, true)
 $rss[:channel][:items].sort_by!{|h| h[:link]}.reverse!
+
+# Builds the index.html
+puts "Building 'index.html'…"
+html_content = []
+$rss[:channel][:items].each do |item|
+  inner_html = '<div id="' + item[:guid].split('/').last + '"><p>' +
+    '<a href="' + item[:link] + '">' + item[:title] + '</a>' +
+    '</p><p class="meta">' + get_date(Time.parse(item[:pubDate]).to_s.split(/\s+/)[0]) +
+    ' | ' + item[:category] + '</p><p>' + item[:description] + '</p></div>'
+  html_content.push(inner_html.gsub!($site_link, '.'))
+end
+html = File.new('index.html', 'w:UTF-8')
+html.puts replace_content($head), replace_content($header)
+html.puts html_content
+html.puts replace_content($footer)
+html.close
+
+# Builds the RSS
+puts "Building 'rss.xml'…"
 xml = File.new('feed/rss.xml', 'w:UTF-8')
 xml.puts '<?xml version="1.0" ?>'
 xml.puts '<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">'
--- a/css/extra.css
+++ b/css/extra.css
@ -1,8 +1,40 @@
-.addenda {
-  border-left: 3px solid yellow;
-  padding-left: 1em;
+body {margin:0;}
+body > * {float:left;}
+body > section {width:calc(75% - 10em);margin:5em;}
+header {width:calc(25% - 5em);margin-top: 5em;padding:2.5em;background-color:black;color:white;border-radius:0 .5em .5em 0;}
+header h1 {margin:0; font-size: 1.25em;}
+header h1 + p {margin-top:1em!important;}
+header h3 {margin-top:1em;}
+header a {color: white;}
+header p, footer nav {text-align:left;}
+header p + p, footer p + p {text-indent:0;}
+header nav > p:before {content:"> ";}
+section p {text-align: left;}
+section h1 {margin-bottom:0;}
+footer {border-top: 1px dashed black; width:calc(100% - 2em); margin: 1em;}
+footer {font-size: .75em;}
+footer p {text-align: center;}
+footer > *:first-child {margin-top: 1em;}
+@media screen and (max-width: 768px) {
+  body > * {float:none;}
+  body > section {width:calc(100% - 5em);margin:2.5em;}
+  header {width:calc(100% - 5em);margin-top:0;border-radius:0;}
+  header > p:first-of-type {display:inline;}
+  header nav {display:inline;}
+  header nav.vertical-space1 {margin-top:0 !important;}
+  header nav > * {display:inline;}
+  header nav > p:before {content:"| ";}
+  header h3 + p:before {content: none;}
+  header h3:before {content:"\a\a";white-space: pre;}
+  header h3:first-of-type:before {content:"\a";}
+  header h3:after {content: " > ";}
+  footer {word-wrap: break-word;}
 }

-.original {}
-
-.current {}
+.addenda {border-left: 3px solid yellow; padding-left:1em;}
+.meta {font-size:.75em;text-indent:0;color:gray;margin-bottom:6em;}
+.meta a {color:gray;}
+.meta + p {text-indent:0;}
+div {margin-bottom:1em;padding-bottom:1em;border-bottom: 1px solid #ddd;}
+div:last-child {border:none;}
+div .meta {margin-bottom: 0;}
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,812 @@
+/**************************************************/
+/******************* 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;
+}
+
+/**************************************************/
+
+/* Fuentes */
+
+@font-face {
+    font-family: "Bitter Regular";
+    src: url(../ttf/bitter-regular.ttf);
+}
+
+@font-face {
+    font-family: "Bitter Italic";
+    src: url(../ttf/bitter-italic.ttf);
+}
+
+@font-face {
+    font-family: "Bitter Bold";
+    src: url(../ttf/bitter-bold.ttf);
+}
+
+@font-face {
+    font-family: "Bitter BoldItalic";
+    src: url(../ttf/bitter-bolditalic.ttf);
+}
+
+/* Body / Cuerpo */
+
+@media screen and (min-width: 769px) {
+    body {
+        margin: 5em;
+    }
+    
+    .no-margin, .sin-margen {
+        margin: -5em;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        margin: 4em;
+    }
+    
+    .no-margin, .sin-margen {
+        margin: -4em;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    body {
+        margin: 3em;
+    }
+    
+    .no-margin, .sin-margen {
+        margin: -3em;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    body {
+        margin: 2em;
+    }
+    
+    .no-margin, .sin-margen {
+        margin: -2em;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    body {
+        margin: 1em;
+    }
+    
+    .no-margin, .sin-margen {
+        margin: -1em;
+    }
+}
+
+@media amzn-mobi, amzn-kf8 {    /* For Kindle because it generates a lot of margin / Para Kindle porque genera mucho margen */
+    body {
+        margin: 0;
+    }
+
+    .no-margin, .sin-margen {
+        margin: 0;
+    }
+}
+
+/* Sections / Secciones */
+
+section + section {
+    margin-top: 10em;
+}
+
+/* Headers / Encabezados */
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Bitter Regular", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    margin-bottom: 1em;
+    text-align: left;
+    font-size: 1em;
+    -moz-hyphens: none !important;
+    -webkit-hyphens: none !important;
+    -o-hyphens: none !important;
+    -ms-hyphens: none !important;
+    hyphens: none !important;
+}
+
+h2, h3, h4, h5, h6 {
+    margin-top: 2em;
+}
+
+h4, h5, h6 {
+    text-align: right;
+}
+
+h1 {
+    margin-bottom: 6em;
+}
+
+h3, h5 {
+    font-family: "Bitter Italic", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-style: italic;
+}
+
+h6 {
+    font-family: "Bitter Bold", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-weight: bold;
+}
+
+h1.title, h1.titulo {
+    margin-top: 4em;
+    margin-bottom: 0;
+    font-size: 2em;
+}
+
+h2.subtitle, h2.subtitulo {
+    margin-top: .5em;
+    margin-bottom: 3em;
+    font-size: 1.25em;
+}
+
+/* Paragraphs / Párrafos */
+
+p, blockquote, li, figcaption, details, aside {
+    font-family: "Bitter Regular", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-size: 1em;
+    text-align: justify;
+    line-height: 1.5em;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    -o-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+
+p + p {
+    text-indent: 1.5em;
+}
+
+blockquote {
+    font-size: .9em;
+    margin: 1em 1.5em;
+}
+
+blockquote + blockquote {
+    text-indent: 1.5em;
+    margin-top: -1em;
+}
+
+blockquote, blockquote > * {
+    line-height: 1.65;
+}
+
+.justified, .justificado {
+    text-align: justify !important;
+}
+
+.right, .derecha {
+    text-indent: 0;
+    text-align: right !important;
+}
+
+.left, .izquierda {
+    text-align: left !important;
+}
+
+.centered, .centrado {
+    text-indent: 0;
+    text-align: center !important;
+}
+
+.hanging, .frances {
+    margin-left: 1.5em;
+    text-indent: -1.5em;
+    text-align: left !important;
+}
+
+* + .hanging, * + .frances {
+    margin-top: 1em;
+}
+
+.hanging + .hanging, .frances + .frances {
+    margin-top: 0;
+    text-indent: -1.5em;
+}
+
+.indent, .sangria {
+    text-indent: 1.5em;
+}
+
+.no-indent, .sin-sangria {
+    text-indent: 0;
+}
+
+.no-hyphens, .sin-separacion {
+    -moz-hyphens: none !important;
+    -webkit-hyphens: none !important;
+    -o-hyphens: none !important;
+    -ms-hyphens: none !important;
+    hyphens: none !important;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.hidden, .oculto {
+    display: none;
+}
+
+.block, .bloque {
+    display: block;
+}
+
+/* Font effects / Efectos en las fuentes */
+
+i, em {
+    font-family: "Bitter Italic", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-style: italic;
+}
+
+b, strong {
+    font-family: "Bitter Bold", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-weight: bold;
+}
+
+i > b, b > i,
+em > strong, strong > em,
+i > strong, strong > i,
+em > b, b > em {
+    font-family: "Bitter BoldItalic", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+}
+
+.initial, .capitular {
+    float: left;
+    font-size: 3em;
+    margin-top: .15em;
+    padding-right: .1em;
+}
+
+.uppercase, .versal {
+    text-transform: uppercase;
+}
+
+.normal, .redonda {
+    font-variant: none;
+}
+
+.smallcap-light, .versalita-ligera {
+    font-variant: small-caps;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    -o-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+
+.smallcap, .versalita {
+    text-transform: lowercase;
+    font-variant: small-caps;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    -o-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+
+.underline, .subrayado {
+    text-decoration: underline black;
+}
+
+.auto-width, .anchura-auto {
+    display: block;
+    width: auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media not amzn-mobi, not amzn-kf8 {    /* For any device except Kindle / Para cualquier dispositivo excepto Kindle */
+    .auto-width, .anchura-auto {
+        max-width: 100%;
+    }
+}
+
+/* Links / Enlaces */
+
+a, a:link, a:visited {
+    text-decoration: none;
+}
+
+/* Lists / Listas */
+
+ol, ul {
+    margin: 1em 1em 1em 2.5em;
+    padding: 0;
+}
+
+ol {
+    list-style-type: decimal;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+ol ol, ol ul,
+ul ol, ul ul {
+    margin: 0 1em;
+}
+
+ol p, ul p {
+    margin-left: .5em;
+}
+
+ul.dash, ul.en-dash, ul.em-dash {
+    list-style-type: none;
+}
+
+ul.dash > li:before, ul.en-dash > li:before, ul.em-dash > li:before {
+    display: block;
+    width: 1.5em;
+    text-align: right;
+    padding: 0 .5em 0 0;
+    margin: 0 0 -1.25em -2em;
+}
+
+ul.dash > li:before {
+    content: "-";
+}
+
+ul.en-dash > li:before {
+    content: "–";
+}
+
+ul.em-dash > li:before {
+    content: "—";
+}
+
+li.no-count {
+    list-style-type: none;
+}
+
+li.no-count:before {
+    content: none !important;
+}
+
+.li-manual {
+	list-style-type: none;
+}
+
+.li-manual > li > p:first-child > span:first-of-type:not(.versalita) {
+	display: block;
+	margin-left: -1.5em;
+	margin-bottom: -1.25em;
+}
+
+li > .li-manual {
+    margin: 0 0 0 1.5em;
+}
+
+/* Images / Imágenes */
+
+img {    /* It helps if the source doesn't exist / Ayuda a detectarlos si no existe el recurso */
+    color: #0000EE;
+    width: 100%;
+}
+
+figure {
+    margin: 2em auto;
+}
+
+figcaption {
+    font-family: "Bitter Regular", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    margin-top: .5em;
+    font-size: .9em;
+}
+
+figure + figure {
+    margin-top: 0;
+}
+
+p + img {
+    margin-left: -1.5em;
+    margin-top: 2em;
+    margin-bottom: 2em;
+}
+
+.caption, .leyenda {
+    font-size: .9em;
+    margin-top: -1.5em;
+    margin-bottom: 2em;
+}
+
+.caption + img, .leyenda + img {
+    margin-top: 0;
+}
+
+img + .caption, img + .leyenda {
+    margin-top: .5em;
+}
+
+.caption + p, .leyenda + p {
+    text-indent: 0;
+}
+
+p > img {
+    display: inline;
+    height: 1.5em;
+    width: auto;
+}
+
+/* Superscript and subscripts / Superíndices y subíndices */
+
+sup, sub {
+    font-size: .75em;
+    vertical-align: super;
+}
+
+sub {
+    vertical-align: sub;
+}
+
+/* Code / Código (inspirados en https://codepen.io/elomatreb/pen/hbgxp)*/
+
+code {
+    font-family: "Courier New", Courier, monospace;
+    background-color: #fff;
+    padding: .125em .5em;
+    border: 1px solid #ddd;
+    border-radius: .25em;
+}
+
+pre {
+    width: 90%;
+    font-family: "Courier New", Courier, monospace;
+    background-color: #fff;
+    margin: 2em auto;
+    padding: .5em;
+    line-height: 1.5;
+    border-radius: .25em;
+    box-shadow: .1em .1em .5em rgba(0,0,0,.45);
+    white-space: unset;
+}
+
+pre * {
+    color: #555;
+}
+
+pre code {
+    display: block;
+    margin: 0;
+    padding: 0;
+    background-color: inherit;
+    border: none;
+    border-radius: 0;
+}
+
+pre code:before {
+    width: 1.5em;
+    display: inline-block;
+    padding: 0 .5em;
+    margin-right: .5em;
+    color: #888;
+}
+
+@media not amzn-mobi, not amzn-kf8 {    /* For any device except Kindle / Para cualquier dispositivo excepto Kindle */
+    pre {
+        counter-reset: line;
+        overflow: scroll;
+    }
+
+    pre code:before {
+        counter-increment: line;
+        content: counter(line);
+    }
+
+    pre code {
+        white-space: pre;
+    }
+}
+
+@media amzn-mobi, amzn-kf8 {    /* Only for Kindle / Solo para Kindle */
+    pre code:before {
+        content: "•";
+    }
+}
+
+/* Glosses / Glosas */
+
+section.gloss, body.gloss, section.glosa, body.glosa {   /* El estilo ha de ponerse en el contenedor de los párrafos y en el span de la glosa */
+    margin-right: 7em;
+}
+
+span.gloss, span.glosa {
+    width: 6em;         /* No son 7 porque se resta uno del margen añadido a continuación */ 
+    margin-right: -8em; /* No son -7 porque se añade 1 de margen */
+    float: right;
+    text-indent: 0;
+    text-align: left;
+    font-size: .75em;
+}
+
+/* Poetry / Poesía: <p class="poetry">Verse 1<br />verse 2<br />verse 3.</p>*/
+
+.poetry, .poesia {
+    margin: 1em 1.5em;
+    text-indent: 0;
+    -moz-hyphens: none;
+    -webkit-hyphens: none;
+    -o-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+/* Screenwriting / Guiones */
+
+.mono, 
+section.script *, section.guion * {
+    font-family: "Courier New", Courier, monospace;
+}
+
+section.script *, section.guion * {
+    font-size: 1em;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+    text-align: left;
+    -moz-hyphens: none !important;
+    -webkit-hyphens: none !important;
+    -o-hyphens: none !important;
+    -ms-hyphens: none !important;
+    hyphens: none !important;
+}
+
+section.script ol, section.guion ol,
+section.script ul, section.guion ul {
+    margin: 1em 2em;
+}
+
+section.script h2, section.guion h2,
+section.script h3, section.guion h3,
+section.script blockquote, section.guion blockquote {
+    width: 60%;
+    margin-left: 3em;
+}
+
+section.script h1, section.guion h1 {
+    text-transform: uppercase;
+    margin-bottom: 1em;
+}
+
+section.script h2, section.guion h2 {
+    margin-top: 1em;
+    padding-left: 6em;
+    text-transform: uppercase;
+}
+
+section.script h3, section.guion h3 {
+    padding-left: 3em;
+}
+
+section.script > p, section.guion > p {
+    margin-top: 1em;
+}
+
+section.script blockquote + blockquote > p, 
+section.guion blockquote + blockquote > p {
+    text-indent: 1.5em;
+}
+
+/* Special contents / Contenidos especiales */
+
+.title, .titulo {
+    margin-top: 3em;
+    margin-left: 0;
+    font-size: 2em;
+}
+
+.subtitle, .subtitulo {
+    margin-top: -1.25em;
+    margin-bottom: 3em;
+    margin-left: 0;
+}
+
+.author, .autor {
+    width: 250px; /* Avoids 100% width in author image / Se añade a la imagen del autor para que no abarque el 100% */
+}
+
+.contributor + p, .contribuidor + p {
+    text-indent: 0;
+}
+
+h1 + .contributor, h1 + .contribuidor {
+    margin-top: -6em !important;
+    margin-bottom: 6em;
+}
+
+.copyright, .legal * {
+    text-indent: 0;
+}
+
+.epigraph, .epigrafe {
+    font-size: .9em;
+    text-align: right;
+    line-height: 1.65em;
+    margin-left: 40%;
+}
+
+body > .epigraph:first-child, body > .epigrafe:first-child {
+    margin-top: 3em;
+}
+
+.epigraph + p, .epigrafe + p {
+    margin-top: 2em;
+    text-indent: 0;
+}
+
+.epigraph + .epigraph, .epigrafe + .epigrafe {
+    margin-top: .5em;
+}
+
+.vertical-space1, .espacio-arriba1 {
+    margin-top: 1em !important;
+}
+
+.vertical-space2, .espacio-arriba2 {
+    margin-top: 2em !important;
+}
+
+.vertical-space3, .espacio-arriba3 {
+    margin-top: 3em !important;
+}
+
+.space, .espacio {
+    white-space: pre-wrap;
+}
+
+/* Footnotes / Notas al pie */
+
+.n-note-sup {
+    font-style: normal;
+    font-weight: normal;
+}
+
+.n-note-hr {
+    margin-top: 2em;
+    width: 25%;
+    margin-left: 0;
+    border: 1px solid blue;
+    background-color: blue;
+}
+
+.n-note-a {
+    display: block;
+    margin-left: -3em;
+    margin-bottom: -1.375em;
+}
+
+.n-note-sup:before, .n-note-a:before {
+    content: "[";
+    color: #0000EE;
+}
+
+.n-note-sup:after, .n-note-a:after {
+    content: "]";
+    color: #0000EE;
+}
+
+.n-note-p, .n-note-p2 {
+    margin-left: 3em;
+    font-size: .9em;
+    text-indent: 0;
+}
+
+* + .n-note-p {
+    margin-top: 1em;
+    text-indent: 0;
+}
+
+.n-note-p2 {
+    margin-top: 0;
+    text-indent: 1.5em;
+}
+
+/* Indexes / Índices analíticos */
+
+.i-item-section p {
+    margin-top: .5em !important;
+}
+
+.i-item-div > h2:first-child, .i-item-div-single > h2:first-child {
+    margin-top: 0;
+}
+
+@media screen and (min-width:768px) {
+    @media not amzn-mobi, not-amzn-kf8 {    /* For any device except Kindle / Para cualquier dispositivo excepto Kindle */
+        .i-item-div {
+            column-count: 2;
+            column-gap: 2em;
+            column-rule: solid 1px lightgray;
+        }
+    }
+}
+
+.i-item-a:before {
+    content: "[";
+    color: #0000EE;
+}
+
+.i-item-a:after {
+    content: "]";
+    color: #0000EE;
+}
+
+/* For print / Para impresión */
+
+@media print {
+    section {
+        page-break-before: always;
+    }
+
+    section:first-of-type {
+        page-break-before: avoid;
+    }
+
+    section > h1:first-child {
+        padding-top: 5em !important;
+    }
+}
+
+/* Styles for this edition / Estilos de esta edición */
+
+/* ADD HERE CUSTOM STYLES / AGREGAR ESTILOS PERSONALIZADOS */
--- a/html/entry001.html
+++ b/html/entry001.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>Publishing is Coding: Change My Mind | Digital Publishing as Publishing from Scratch</title>
+  <meta charset="utf-8" />
+  <meta name="application-name" content="Publishing is Coding: Change My Mind">
+  <meta name="description" content="A broken english version of some entries published in Mariana Eguaras's blog.">
+  <meta name="keywords" content="publishing, blog, book, ebook, methodology, foss, libre-software, format, markdown, html, epub, pdf, mobi, latex, tex">
+  <link rel="shortcut icon" href="../icon.png">
+  <link rel="alternate" type="application/rss+xml" href="https://blog.cliteratu.re/feed/" title="Publishing is Coding: Change My Mind">
+  <link type="text/css" rel="stylesheet" href="../css/styles.css">
+  <link type="text/css" rel="stylesheet" href="../css/extra.css">
+</head>
+<body>
+<header>
+  <h1><a href="https://blog.cliteratu.re">Publishing is Coding: Change My Mind</a></h1>
+  <p>A broken english version of some entries published in <a target="_blank" href="https://marianaeguaras.com/blog/">Mariana Eguaras's blog</a>.</p>
+  <nav>
+    <h3>Repos</h3>
+    <p><a target="_blank" href="https://gitlab.com/NikaZhenya/publishing-is-coding">GitLab</a></p>
+    <p><a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding">GitHub</a></p>
+    <p><a target="_blank" href="http://git.cliteratu.re/publishing-is-coding">GitList</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Contact</h3>
+    <p><a target="_blank" href="mailto:nika.zhenya@cliteratu.re">Email</a></p>
+    <p><a target="_blank" href="https://mastodon.social/@_perroTuerto">Mastodon</a></p>
+    <p><a target="_blank" href="https://twitter.com/_perroTuerto">Twitter</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Donations</h3>
+    <p><a target="_blank" href="https://etherscan.io/address/0x39b0bf0cf86776060450aba23d1a6b47f5570486"><span class="smallcap">ETH</span></a></p>
+    <p><a target="_blank" href="https://dogechain.info/address/DMbxM4nPLVbzTALv5n8G16TTzK4WDUhC7G"><span class="smallcap">DOGE</span></a></p>
+    <p><a target="_blank" href="https://www.paypal.me/perrotuerto">PayPal</a></p>
+  </nav>
+</header>
+<section>
+        <h1 id="digital-publishing-as-publishing-from-scratch">Digital Publishing as Publishing from Scratch</h1>
+        <p class="meta">October 3, 2018 | Methodology | <span class="smallcap"><a target="_blank" href="https://blog.cliteratu.re/epub/entry001.epub">EPUB</a></span> / <span class="smallcap"><a target="_blank" href="https://blog.cliteratu.re/mobi/entry001.mobi">MOBI</a></span> / <a target="_blank" href="https://marianaeguaras.com/edicion-digital-como-edicion-desde-cero">original</a></p>
+        <p>Thanks to <a href="http://marianaeguaras.com/">Mariana Eguaras</a> we are going to blogging about <b>digital publishing</b>, its <b>characteristics, benefits and challenges</b>, as well as <b>its relation with print publishing</b> and how these issues directly affect the necesary proceedings for any kind of publishing.</p>
+        <p>We already have planned what we are going write in the first entries, but any suggestion is welcome. As far as possible the writing is not going to be technical and more friendly to general public or publishers.</p>
+        <p>However, you have to consider that some technicalities are now necessary for publishing. As well as the typography, printing or design slangs are common knowledge for publishers, in the same way the jargons from web or software developers are starting to be part of our cultural background.</p>
+        <blockquote class="addenda">
+            <p>The entries were originally wrote in spanish. Some of them are now kind of old: for some things I already have a different opinion or distinct approach. And as is obvious, english is not my first language. Therefore, you are going to find a lot of grammar mistakes or typos and I will only translate (in a very free way) the entries that I still consider relevant. So when you find this kind of box with a yellow border, it means that it is an <i>addendum</i> for this broken english version.</p>
+        </blockquote>
+        <blockquote class="addenda">
+            <p>Do you want to improve this mess? You can always help through <a href="https://gitlab.com/NikaZhenya/publishing-is-coding">GitLab</a> or <a href="https://github.com/NikaZhenya/publishing-is-coding">GitHub</a>.</p>
+        </blockquote>
+    </body>
+</section>
+<footer>
+  <p>Last build: October 3, 2018</p>
+  <p class="vertical-space1">All content is under <a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding#license">Licencia Editorial Abierta y Libre (<span class="smallcap">LEAL</span>)</a>.</p>
+  <p class="vertical-space1"><a target="_blank" href="https://ted.cliteratu.re/">ted.cliteratu.re</a> | <a target="_blank" href="https://ed.cliteratu.re/">ed.cliteratu.re</a> | <a target="_blank" href="https://pecas.cliteratu.re/">pecas.cliteratu.re</a> | <a target="_blank" href="https://xxx.cliteratu.re/">xxx.cliteratu.re</a></p>
+</footer>
+</body>
--- a/html/entry002.html
+++ b/html/entry002.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>Publishing is Coding: Change My Mind | Digital Publishing as Publishing from Scratch</title>
+  <meta charset="utf-8" />
+  <meta name="application-name" content="Publishing is Coding: Change My Mind">
+  <meta name="description" content="A broken english version of some entries published in Mariana Eguaras's blog.">
+  <meta name="keywords" content="publishing, blog, book, ebook, methodology, foss, libre-software, format, markdown, html, epub, pdf, mobi, latex, tex">
+  <link rel="shortcut icon" href="../icon.png">
+  <link rel="alternate" type="application/rss+xml" href="https://blog.cliteratu.re/feed/" title="Publishing is Coding: Change My Mind">
+  <link type="text/css" rel="stylesheet" href="../css/styles.css">
+  <link type="text/css" rel="stylesheet" href="../css/extra.css">
+</head>
+<body>
+<header>
+  <h1><a href="https://blog.cliteratu.re">Publishing is Coding: Change My Mind</a></h1>
+  <p>A broken english version of some entries published in <a target="_blank" href="https://marianaeguaras.com/blog/">Mariana Eguaras's blog</a>.</p>
+  <nav>
+    <h3>Repos</h3>
+    <p><a target="_blank" href="https://gitlab.com/NikaZhenya/publishing-is-coding">GitLab</a></p>
+    <p><a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding">GitHub</a></p>
+    <p><a target="_blank" href="http://git.cliteratu.re/publishing-is-coding">GitList</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Contact</h3>
+    <p><a target="_blank" href="mailto:nika.zhenya@cliteratu.re">Email</a></p>
+    <p><a target="_blank" href="https://mastodon.social/@_perroTuerto">Mastodon</a></p>
+    <p><a target="_blank" href="https://twitter.com/_perroTuerto">Twitter</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Donations</h3>
+    <p><a target="_blank" href="https://etherscan.io/address/0x39b0bf0cf86776060450aba23d1a6b47f5570486"><span class="smallcap">ETH</span></a></p>
+    <p><a target="_blank" href="https://dogechain.info/address/DMbxM4nPLVbzTALv5n8G16TTzK4WDUhC7G"><span class="smallcap">DOGE</span></a></p>
+    <p><a target="_blank" href="https://www.paypal.me/perrotuerto">PayPal</a></p>
+  </nav>
+</header>
+<section>
+        <h1 id="digital-publishing-as-publishing-from-scratch">Digital Publishing as Publishing from Scratch</h1>
+        <p class="meta">October 3, 2018 | Methodology | <span class="smallcap"><a target="_blank" href="https://blog.cliteratu.re/epub/entry002.epub">EPUB</a></span> / <span class="smallcap"><a target="_blank" href="https://blog.cliteratu.re/mobi/entry002.mobi">MOBI</a></span> / <a target="_blank" href="https://marianaeguaras.com/edicion-digital-como-edicion-desde-cero">original</a></p>
+        <p>Thanks to <a href="http://marianaeguaras.com/">Mariana Eguaras</a> we are going to blogging about <b>digital publishing</b>, its <b>characteristics, benefits and challenges</b>, as well as <b>its relation with print publishing</b> and how these issues directly affect the necesary proceedings for any kind of publishing.</p>
+        <p>We already have planned what we are going write in the first entries, but any suggestion is welcome. As far as possible the writing is not going to be technical and more friendly to general public or publishers.</p>
+        <p>However, you have to consider that some technicalities are now necessary for publishing. As well as the typography, printing or design slangs are common knowledge for publishers, in the same way the jargons from web or software developers are starting to be part of our cultural background.</p>
+        <blockquote class="addenda">
+            <p>As you can see, the entries were originally wrote in spanish. And as you can realize, some of them are now kind of old: for some things I already have a different opinion or distinct approach. And as is obvious, english is not my first language. Therefore, you are going to find a lot of grammar mistakes or typos and I will only translate (in a very free way) the entries that I still consider relevant. So when you find this kind of box, it means that it is an <i>addendum</i> for this broken english version.</p>
+        </blockquote>
+        <blockquote class="addenda">
+            <p>Do you want to improve this mess? You can always help through <a href="https://gitlab.com/NikaZhenya/publishing-is-coding">GitLab</a> or <a href="https://github.com/NikaZhenya/publishing-is-coding">GitHub</a>.</p>
+        </blockquote>
+    </body>
+</section>
+<footer>
+  <p>Last build: October 3, 2018</p>
+  <p class="vertical-space1">All content is under <a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding#license">Licencia Editorial Abierta y Libre (<span class="smallcap">LEAL</span>)</a>.</p>
+  <p class="vertical-space1"><a target="_blank" href="https://ted.cliteratu.re/">ted.cliteratu.re</a> | <a target="_blank" href="https://ed.cliteratu.re/">ed.cliteratu.re</a> | <a target="_blank" href="https://pecas.cliteratu.re/">pecas.cliteratu.re</a> | <a target="_blank" href="https://xxx.cliteratu.re/">xxx.cliteratu.re</a></p>
+</footer>
+</body>
--- a/index.html
+++ b/index.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>Publishing is Coding: Change My Mind | Main</title>
+  <meta charset="utf-8" />
+  <meta name="application-name" content="Publishing is Coding: Change My Mind">
+  <meta name="description" content="A broken english version of some entries published in Mariana Eguaras's blog.">
+  <meta name="keywords" content="publishing, blog, book, ebook, methodology, foss, libre-software, format, markdown, html, epub, pdf, mobi, latex, tex">
+  <link rel="shortcut icon" href="icon.png">
+  <link rel="alternate" type="application/rss+xml" href="https://blog.cliteratu.re/feed/" title="Publishing is Coding: Change My Mind">
+  <link type="text/css" rel="stylesheet" href="css/styles.css">
+  <link type="text/css" rel="stylesheet" href="css/extra.css">
+</head>
+<body>
+<header>
+  <h1><a href="https://blog.cliteratu.re">Publishing is Coding: Change My Mind</a></h1>
+  <p>A broken english version of some entries published in <a target="_blank" href="https://marianaeguaras.com/blog/">Mariana Eguaras's blog</a>.</p>
+  <nav>
+    <h3>Repos</h3>
+    <p><a target="_blank" href="https://gitlab.com/NikaZhenya/publishing-is-coding">GitLab</a></p>
+    <p><a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding">GitHub</a></p>
+    <p><a target="_blank" href="http://git.cliteratu.re/publishing-is-coding">GitList</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Contact</h3>
+    <p><a target="_blank" href="mailto:nika.zhenya@cliteratu.re">Email</a></p>
+    <p><a target="_blank" href="https://mastodon.social/@_perroTuerto">Mastodon</a></p>
+    <p><a target="_blank" href="https://twitter.com/_perroTuerto">Twitter</a></p>
+  </nav>
+  <nav class="vertical-space1">
+    <h3>Donations</h3>
+    <p><a target="_blank" href="https://etherscan.io/address/0x39b0bf0cf86776060450aba23d1a6b47f5570486"><span class="smallcap">ETH</span></a></p>
+    <p><a target="_blank" href="https://dogechain.info/address/DMbxM4nPLVbzTALv5n8G16TTzK4WDUhC7G"><span class="smallcap">DOGE</span></a></p>
+    <p><a target="_blank" href="https://www.paypal.me/perrotuerto">PayPal</a></p>
+  </nav>
+</header>
+<section>
+<div id="entry001"><p><a href="./html/entry001.html">Digital Publishing as Publishing from Scratch</a></p><p class="meta">October 3, 2018 | Methodology</p><p>A general comparation between the most common methods for developing EPUBs.</p></div>
+</section>
+<footer>
+  <p>Last build: October 3, 2018</p>
+  <p class="vertical-space1">All content is under <a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding#license">Licencia Editorial Abierta y Libre (<span class="smallcap">LEAL</span>)</a>.</p>
+  <p class="vertical-space1"><a target="_blank" href="https://ted.cliteratu.re/">ted.cliteratu.re</a> | <a target="_blank" href="https://ed.cliteratu.re/">ed.cliteratu.re</a> | <a target="_blank" href="https://pecas.cliteratu.re/">pecas.cliteratu.re</a> | <a target="_blank" href="https://xxx.cliteratu.re/">xxx.cliteratu.re</a></p>
+</footer>
+</body>
--- a/md/entry001.md
+++ b/md/entry001.md
@ -1,7 +1,6 @@
 # Digital Publishing as Publishing from Scratch

-@original['2016-09-06','https://marianaeguaras.com/edicion-digital-como-edicion-desde-cero']
-@current['2018-10-03','Methodology','A general comparation between the most common methods for developing EPUBs.']
+@current['2018-10-03','Methodology','A general comparation between the most common methods for developing EPUBs.','https://marianaeguaras.com/edicion-digital-como-edicion-desde-cero']

 Thanks to [Mariana Eguaras](http://marianaeguaras.com/)
 we are going to blogging about __digital publishing__,
@ -22,17 +21,17 @@ knowledge for publishers, in the same way the jargons
 from web or software developers are starting to be part
 of our cultural background.

-> As you can see, the entries were originally wrote
-> in spanish. And as you can realize, some of them are
-> now kind of old: for some things I already have a 
-> different opinion or distinct approach. And as is
-> obvious, english is not my first language. Therefore,
-> you are going to find a lot of grammar mistakes or
-> typos and I will only translate (in a very free way) 
-> the entries that I still consider relevant. So when 
-> you find this kind of box, it means that it is an 
-> _addendum_ for this broken english version. {addenda}
+> The entries were originally wrote in spanish. Some of 
+> them are now kind of old: for some things I already 
+> have a different opinion or distinct approach. And as 
+> is obvious, english is not my first language. 
+> Therefore, you are going to find a lot of grammar 
+> mistakes or typos and I will only translate (in a very 
+> free way) the entries that I still consider relevant. 
+> So when you find this kind of box with a yellow 
+> border, it means that it is an _addendum_ for this 
+> broken english version. {.addenda}

 > Do you want to improve this mess? You can always help
-> through GitLab or GitHub. Please see the footer for
-> more info. {addenda}
+> through [GitLab](https://gitlab.com/NikaZhenya/publishing-is-coding) 
+> or [GitHub](https://github.com/NikaZhenya/publishing-is-coding). {.addenda}
--- a/template/footer.html
+++ b/template/footer.html
@ -1,16 +1,7 @@
+</section>
 <footer>
-  <p class="centered">Last build: $date$</p>
-  <p class="centered vertical-space1">All content is under <a target="_blank" href="https://github.com/NikaZhenya/licencia-editorial-abierta-y-libre">Licencia Editorial Abierta y Libre (<span class="smallcap">LEAL</span>)</a>.</p>
-  <p class="centered">“Licencia Editorial Abierta y Libre” is translated to “Open and Free Publishing License”. “<span class="smallcap">LEAL</span>” is the acronym but also means “loyal” in spanish.</p>
-  <p class="centered">With <span class="smallcap">LEAL</span> you are free to use, copy, reedit, modify, distribute or merchandise any of this content under the following conditions:</p>
-  <ol>
-    <li><p>Any product produced with this content must be under some type of <span class="smallcap">LEAL</span>.</p></li>
-    <li><p>Merchandising cannot be the only way to acquire the final product.</p></li>
-    <li><p>The use of content mustn't harm to any collaborator.</p></li>
-    <li><p>All files (editables or finals) must be public access.</p></li>
-  </ol>
-  <p class="centered vertical-space1">Taller de Edición Digital (Digital Publishing Workshop): <a target="_blank" href="https://ted.cliteratu.re/">ted.cliteratu.re</a>.</p>
-  <p class="centered">_Edición digital como metodología para una edición global_ (_Digital Publishing as Methodology for Global Publishing_): <a target="_blank" href="https://ed.cliteratu.re/">ed.cliteratu.re</a>.</p>
-  <p class="centered">Pecas, herramientas editoriales (Pecas, publishing tools): <a target="_blank" href="https://pecas.cliteratu.re/">pecas.cliteratu.re</a>.</p>
-  <p class="centered">Sitio personal (personal website): <a target="_blank" href="https://xxx.cliteratu.re/">xxx.cliteratu.re</a>.</p>
+  <p>Last build: $date$</p>
+  <p class="vertical-space1">All content is under <a target="_blank" href="https://github.com/NikaZhenya/publishing-is-coding#license">Licencia Editorial Abierta y Libre (<span class="smallcap">LEAL</span>)</a>.</p>
+  <p class="vertical-space1"><a target="_blank" href="https://ted.cliteratu.re/">ted.cliteratu.re</a> | <a target="_blank" href="https://ed.cliteratu.re/">ed.cliteratu.re</a> | <a target="_blank" href="https://pecas.cliteratu.re/">pecas.cliteratu.re</a> | <a target="_blank" href="https://xxx.cliteratu.re/">xxx.cliteratu.re</a></p>
 </footer>
+</body>
--- a/template/head.html
+++ b/template/head.html
@ -1,10 +1,14 @@
+<!DOCTYPE html>
+<html lang="$language$">
 <head>
  <title>$site_name$ | $title$</title>
  <meta charset="utf-8" />
  <meta name="application-name" content="$site_name$">
  <meta name="description" content="$site_description$">
  <meta name="keywords" content="$site_keywords$">
-  <link rel="shortcut icon" href="$site_img$">
+  <link rel="shortcut icon" href="../$site_img$">
  <link rel="alternate" type="application/rss+xml" href="$site_link$/feed/" title="$site_name$">
  <link type="text/css" rel="stylesheet" href="../css/styles.css">
+  <link type="text/css" rel="stylesheet" href="../css/extra.css">
 </head>
+<body>
--- a/template/header.html
+++ b/template/header.html
@ -10,7 +10,7 @@
  <nav class="vertical-space1">
    <h3>Contact</h3>
    <p><a target="_blank" href="mailto:nika.zhenya@cliteratu.re">Email</a></p>
-    <p><a target="_blank" href="https://mastodon.social/@_perroTuerto">Mastodon.social</a></p>
+    <p><a target="_blank" href="https://mastodon.social/@_perroTuerto">Mastodon</a></p>
    <p><a target="_blank" href="https://twitter.com/_perroTuerto">Twitter</a></p>
  </nav>
  <nav class="vertical-space1">
@ -20,3 +20,4 @@
    <p><a target="_blank" href="https://www.paypal.me/perrotuerto">PayPal</a></p>
  </nav>
 </header>
+<section>
--- a/ttf/bitter-bold.ttf
+++ b/ttf/bitter-bold.ttf
--- a/ttf/bitter-bolditalic.ttf
+++ b/ttf/bitter-bolditalic.ttf
--- a/ttf/bitter-italic.ttf
+++ b/ttf/bitter-italic.ttf
--- a/ttf/bitter-regular.ttf
+++ b/ttf/bitter-regular.ttf