Abrebocas: El blog

Hacia el final del apartado previo vimos la un bosquejo del flujo de datos en Brea e ilustramos un ejemplo particular en el que combinámos un archivo de texto (Markdown) con una plantilla (Mustache) para producir una página web (HTML). Ahora veremos cómo es el procedimiento que lo produce, como motivación previa a la instalación de Brea, para estar en condiciones de producir nuestras propias páginas y sitios web.

Nuestro ejemplo inicial será un blog. Fue uno de las primeras formas de presencia autónoma en línea (y también una de las que primero se privatizó), con diversidad de plataformas y opciones, incluso hay plataformas de software libre y código abierto, como WordPress, que han sido funcionales y sostenibles desde hace décadas. Y aún tanto tiempo después y a pesar del auge de las redes sociales, plataformas tanto libres (ejp Ghost como privativas (ejp Medium) que intentan convertirse en el siguiente lugar por omisión (o “top of the mind”) cuando personas o colectivos piensan en publicar blogs.

Una vez hallamos instalado Grafoscopio y Brea (lo veremos en detalle en la próxima sección) abrimos su libreta interactiva con la siguiente opción del menú superior Grafoscopio > Launch > Notebook from the Internet...

Y en la caja de diálogo siguiente copiamos esta dirección:

https://mutabit.com/repos.fossil/brea/doc/tip/brea.ston

Al presionar OK debería cargar una libreta interactiva como esta:

La libreta interactiva tiene las siguientes partes:

  1. El árbol, en la izquierda, que está constituido por nodos, los cuales a su vez pueden contener más nodos y en ese caso están precedidos por un triángulo a la izquierda.

  2. Los nodos, cuyos detalles se despliegan a derecha cuando cliqueamos sobre ellos y además la selección queda resaltada en el árbol. Cada nodo tiene las siguientes partes:

    1. La cabecera: que corresponde a una línea corta que se muestra tanto en el árbol, como en la parte superior del nodo. Suelen dar una panorámica de los contenidos del nodo o de los nodos que agrupan.
    2. El cuerpo: que corresponde a la parte más voluminosa del nodo. Usualmente contiene código o prosa que describe en detalle aquello que la cabecera resume.
    3. Los enlaces: que están en la parte inferior del cuerpo. Suelen contener información extra en la web o el disco duro, asociada al nodo.

Cliqueamos en el triángulo a la izquerda de Themes y veremos los nodos contenidos en el mismo:

Para ver los cambios que dicha libreta realiza en nuestros archivos, instalando plantillas para sitios web y paquetes de archivos que controlan la apariencia del sitio (llamados temas), es conveniente tener el navegador de archivos y la libreta interactiva abiertas lado a lado, como se muestra en la figura siguiente

| theme blogFolder |

blogFolder := FileLocator documents / 'IndieWeb/blog'.
theme := BreaTheme new 
    name: 'Future Imperfect';
  installInto: blogFolder.

Ejecutamos el nodo y aparece esto:

Y si navegamos dentro de la carpeta recien creada veremos esto:

Después de descargar y aplicar el tema:

Tomamos la plantilla base y creamos una entrada extra a partir de la misma:

Vamos a crear a partir de este archivo, la vista web (De Markdown a HTML):

Que corresponde al siguiente código:

| blogFolder entrada |

blogFolder := FileLocator documents / 'IndieWeb/blog/entrada'.
entrada := BreaPage new.
entrada 
    shortName: 'entrada-ejemplo';
    folder: blogFolder;
    template: 'pagina.mus.html';
    bodyTag: 'contenido';
    splitterAt: 'categorias' with: 'categoria'.
entrada exportAsHTML 

Instala Brea y crea tu propia entrada al blog adaptando los pasos descritos en este capítulo. El orden es el siguiente:

  • Instalar Pharo, Grafoscopio, Brea, Fossil y Pandoc.
  • Abrir el cuaderno interactivo de Brea y ejecutar los nodos:
    • Instalar El tema “Future Imperfect”.
    • Descargar y aplicar las personalizaciones.
    • Crear una entrada de ejemplo a partir de pagina.md (Copiar el archico pagina.md con el nombre de la pagina a crear y modificar el contenido).
    • Crear una página HTML a partir de esta entrada de ejemplo.

||