Adding first post.

content/posts/0000001-first-post.xml

@@ -0,0 +1,28 @@
+<post>
+    <author>Owlcode.tech</author>
+	<date>2022-05-18T06:15+00:00</date>
+	<title>Contrata nuestros servicios de desarrollo web.</title>
+	<ogdesc>Contrata nuestros servicios de desarrollo web.</ogdesc>
+	<category>index</category>
+	<slug>contrata-nuestros-servicios</slug>
+    <img src="/img/contratanos.webp"/>
+    <content>
+        <h2>Mantenimiento y desarrollo en Sevilla.</h2>
+
+        <p>Desde Owlcode.tech queremos que su empresa tenga la tecnología web más ajustada a sus necesidades del presente y del futuro.</p>
+
+        <p>Es por eso que ofrecemos servicios de mantenimiento y desarrollo web, nuestra especialidad son los lenguages y tecnologías libres como son Docker, Perl, C, C++, GNU/Linux, Nextcloud, Hugo, Rust, Golang, Postfix, Dovecot, etc.</p>
+
+        <p>Obtenga los mejores consejos para mejorar su posicionamiento en los buscadores mediante una estrategia de SEO efectiva.</p>
+
+        <p>Capte clientes de forma pasiva con su presencia en la web.</p>
+
+        <p>Mantenga su web segura mediante nuestro servicio de mantenimiento preventivo contra intrusiones.</p>
+
+        <p>Transfiera su dominio ya existente a partir de 30€/mes.</p>
+
+        <p>Simplifique su arquitectura web para mayor velocidad y menor riesgo de acceso no autorizado.</p>
+
+        <p>Todo eso y mucho más con Owlcode.tech, contactanos en <a href="mailto:contact@owlcode.tech">contact@owlcode.tech</a>.</p>
+    </content>
+</post>

lib/OwlcodeTech/Posts.pm

@@ -18,6 +18,7 @@ use Path::Tiny;
 use DateTime::Format::ISO8601;
 use DateTime;
 
+use OwlcodeTech;
 use OwlcodeTech::Preview;
 
 const my $CURRENT_FILE => __FILE__;
@@ -185,7 +186,8 @@ sub RetrieveDirectPostsForCategory ( $self, $category_name ) {
 sub PreviewOg {
     my $self       = shift;
     my $post       = shift;
-    my $site_name  = $self->config('site_name');
+
+    my $site_name  = OwlcodeTech->new->config('site_name');
     my $title      = $post->{title};
     my $content    = $post->{content};
     my $image_file = $post->{image};

public/css/styles.css

@@ -125,7 +125,7 @@ body {
               height: 12em; }
             body div.page-contents div.description div.articles a article div.article-down-part {
               margin-top: 2em;
-              height: 9em;
+              height: 100px;
               display: flex;
               align-items: end;
               padding-bottom: 2em; }

public/css/styles.scss

@@ -175,7 +175,7 @@ body {
 
             div.article-down-part {
                 margin-top: 2em; 
-                height: 9em;
+                height: 100px;
                 display: flex;
                 align-items: end;
                 padding-bottom: 2em;

templates/page/post.html.ep

@@ -12,10 +12,21 @@
 % layout 'default', current_category_slug => $current_category->{slug}, categories => $categories, description_og => $description_og, ogimage => "$base_url/posts/$post->{slug}-preview.png?v=4";
 % title $post->{title};
 <div id="first-box" class="description margin">
+% if (defined $post->{image}) {
+    <div class="title-image">
+        <img alt="Portada del artículo: <%= $post->{title} %>" src="<%=$post->{image}%>"/>
+        <div class="text-title">
+            <h1><%== $post->{title} %></h1>
+        </div>
+    </div>
+% } else {
 	<h1><%= $post->{title} %></h1>
+% }
 % my $user_agent = stash 'useragent';
 % if ($user_agent !~ /LinkedInBot/) {
-	<%== $post->{content} %>
+    <div class="padding">
+        <%== $post->{content} %>
+    </div>
 % } else {
 %       my $content = $post->{content};
 %       my $dom = Mojo::DOM->new($content);