Renovando o aspecto do blog

Introducción

Levo xa algún tempo co blog para recolectar cousas que vou probando. Como só é para mín o certo é que non me molestei moito en canto ao seu aspecto. Pero cada vez que entraba a revisar algo, o certo é que non me remataba de gustar. Así que aproveitando a IA dinlle un rápido lavado de cara. Non me quixen complicar moito, así que vou expor por riba os prompts que utilicei.

Para facer isto utilicei OpenCode cos seguintes axentes:

1. Mistral Medium: só por despiste. Este é o modelo máis caro de Mistral.
2. Devstral 2
3. Devstral Small 2
4. Big Pickle: é o modelo máis potente que da de balde open code. Useino para revisar os cambios de estilo ao final da tarefa.

Remodelando a web

Para comezar, como dicía o primeiro modelo que usei foi o Mistral Medium. Isto foi un erro xa que o consumo só en comezar a tarefa levouse cinco euros, por uns poucos prompts. Xa o quitei do listado que amosa OpenCode. Se nalgún momento preciso esa potencia, xa o activarei.

No primer prompt pedinlle que me mudase o aspecto da web. Que nese momento só amosaba un listado continuo de artigos, de máis recente a máis antigo. Quería un aspecto máis moderno, cun menú superior amosando as categorías. A continuación unha listaxe dos últimos dez artigos. E nunha columna lateral as etiquetas agrupadas en forma de nube.

Os seguintes prompts foron para correxir cousas. Por exemplo engadíume categorías e etiquetas que non existen. A categoría escollida tiña unha cor morada, que sobre o fondo gris escuro era ilexible.

Á fin, como me engadiu no lateral as categorías tamén, eliminei o menú superior.

O seguinte foi correxir o pé da páxina que non estaba aliñado. Isto correxiuno ao momento. Este foi o punto no que, por curiosidade, fun mirar o gasto de tokens. Xa que estou a probar o pago por consumo da API de Mistral. Se nos días anteriores con Devstral consumín dous euros, estes poucos cambios consumiron cinco.

Para quen queira consultar os prezos, pode velos aquí.

Xa con Devstral Small 2, o que fixen foi pequenas correccións de estilos. As fontes, artigos relacionados e os links para ir ao anterior e ao seguinte, estaban moi pegados. Así que dinlles máis espazo entre eles e mudei os links de anterior e seguinte, por elementos con aspecto de botón.

Durante as interaccións, fíxeome varias veces cambios que non reflexaban o que buscaba. Por isto cando tiven o aspecto que quixen, utilicei BigPickle, o modelo gratuíto de Open Code. Con el revisei os cambios para eliminar o inneceario. Isto foi só por facer a proba, xa que non teño pensado traballar con el. Xa que Open Code utiliza estes modelos gratuítos para entrenalos.

Con isto pasei de isto:

A isto:

Que mudou

Vamos ver o que fixo a IA para deixar este novo aspecto.

A nivel xeral

Para comezar agregou dous novos arquivos en _data. Un para incluír as categorías e outro as etiquetas, cos correspondentes nomes e rutas. Estes son empregados para crear os menús laterais para acceder aos contidos de cada categoría ou etiqueta.

O arquivo sidebar.html será o que crea estes menús e unha sección onde se repite a descripción do blog. Si, de momento repítese. Aínda non decidín se deixala aí ou no pé de páxina.

A continuación vemos un pequeno fragmento deste arquivo. A parte das etiquetas é prácticamente igual.
O primeiro que fai é meter en variables o contido dos arquivos anteriores. Para a continuación, no caso de que teñamos categorías percorrelas e crear un menú de tipo lista. Non me vou parar moito xa que os bucles xa os vimos noutro artigo. Pero o que podemos ver é ordear as categorias por nome, co filtro sort. Despois recórreas e vai creando os elementos da lista con cada unha das partes. O slug é a ruta que veremos na URL. Tamén inclúe un contador de cantos artigos ten cada categoría. Isto xa é algo que existía na funcionalidade básica.

Este novo ficheiro de sidebar foi incluído no layout principal, simplemente engadindo isto

# Código para importar o sidebar

{%- include sidebar.html -%}

Tamén me modificou o category_tag_page.html para poder filtrar por categoría ou etiqueta. Isto paréceme moi útil para poder ver de golpe todo-los artigos de Jekyll por exemplo.

# Código para engadir as categorías

{%- assign site_tags = site.data.tags -%}
{%- assign site_categories = site.data.categories -%}

{%- if site_categories and site_categories.size > 0 -%}
<section class="sidebar-section">
	<h3>Categorías</h3>
	<ul class="category-list">
	{%- assign sorted_categories = site_categories | sort: 'name' -%}
	{%- for category in sorted_categories -%}
		{%- assign category_slug = category.slug -%}
		{%- assign category_name = category.name | escape -%}
		{%- assign category_posts = site.categories[category_slug] -%}
		{%- assign category_count = category_posts.size | default: 0 -%}
		<li>
		<a href="/categories/{{ category_slug }}/">{{ category_name }} <span class="count">({{ category_count }})</span></a>
		</li>
	{%- endfor -%}
	</ul>
</section>
{%- endif -%}

Aquí vemos como recorre as publicacións da categoría ou etiqueta seleccionada. Publicando o título e a data. Tamén, se esa sección aínda non ten artigos amosará a mensaxe que o índica.

# Código para filtrar por categoría ou etiqueta

<div class="category-tag-page">
	<h1>{{ page.title }}</h1>
	{%- assign taxonomy_posts = site[page.taxonomy][page.term] -%}
			{%- if taxonomy_posts and taxonomy_posts.size > 0 -%}
			{%- assign posts = taxonomy_posts | sort: 'date' | reverse -%}
			<ul>
			{% for post in posts %}
			<li>
				<a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
				<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
			</li>
			{% endfor %} 
			</ul>
			{%- else -%}
			<p>Non hai artigos nesta categoría/etiqueta aínda.</p>
			{%- endif -%}

O resto de cambios repítese bastante, pero cabe mencionar en especial á parte dos artigos de portada. En concreto estas liñas.

Primeiro ordeamos os artigos por data de forma descendente, os artigos máis recentes primeiro e por último limitamos os artigos a dez.

# Código para amosar os dez últimos artigos

{%- assign latest_posts = site.posts | sort: 'date' | reverse | slice: 0, 10 -%}
	{%- for post in latest_posts -%}

Esta liña daranos un pequeno fragmento do contido do artigo, para que dun vistazo teñamos unha idea da introducción do mesmo. Outra vez fai uso dos filtros. Primeiro eliminando calquer posible etiqueta de HTML e segundo limitando o contido a sesenta palabras.

# Código para amosar as sesenta primeiras palabras do artigo

<p>{{ post.content | strip_html | truncatewords: 60 }}</p>

Artigos

A distribución dos artigos tamén mudou. Como de costume o primeiro que veremos será o título, pero agora a continuación veremos a data de publicación, o autor e as categorías ás que pertence o artigo. E despois do contido teremos ás etiquetas que aplican a este artigo, así como os artigos relacionados e os botóns para ir aos artigos seguinte e anterior.

Conclusión

O uso da intelixencia artificial introduce a opción de facer cousas nas que ata o de agora non puxen o foco. Como dicía, o aspecto do blog non remataba de me gustar. Pero tampouco quería perder tempo en mudar a aparencia dalgo que só teño para recoller anotacións. Se fose algo a explotar poría máis interese en que lucise bonito e accesible. Pero non é algo que esté pensando dese xeito. Só quero ter un sitio ao que acudir cando queira volver facer algo que xa incluín aquí.

Fontes

• Mistral.ai: prezos