Adding initial webpage.

README.md

@@ -1,2 +1,6 @@
-# burguillos.info
+## BURGUILLOS.INFO
+
+### Descripción
+
+Este repositorio permite añadir contenido nuevo a burguillos.info, de momento está en desarrollo.
 

build_styles.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+if which sassc &> /dev/null; then
+	sassc public/css/styles.scss > public/css/styles.css
+else
+	exit 1
+fi

burguillos_info.yml

@@ -0,0 +1,3 @@
+---
+secrets:
+  - e092a1a031c589ba2433b606b74ba0881b9c36f0

content/categories/autobuses.xml

@@ -0,0 +1,27 @@
+<category>
+	<title>Horarios de Autobuses.</title>
+	<description>
+		<h3>Nuestros pésimos horarios de Autobuses.</h3>
+
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+		<p>Los horarios de autobuses de nuestro pueblo, que ya os advierto que son para echarse al monte en el contexto de una crisis climática.</p>
+	</description>
+	<priority>1</priority>
+	<menu_text>Autobuses</menu_text>
+	<slug>autobuses</slug>
+</category>

content/categories/index.xml

@@ -0,0 +1,11 @@
+<category>
+	<title>Portal de información de Burguillos.</title>
+	<description>
+		<p><b>burguillos.info no está afiliado con el Ayuntamiento de Burguillos.</b></p>
+
+		<p>Esta página está destinada a informar de los sucesos y negocios de nuestro pueblo, cualquiera puede redactar una noticia para que aparezca en este medio mientras pase un proceso de revisión por parte del staff de burguillos.info.</p>
+	</description>
+	<priority>0</priority>
+	<menu_text><img alt="Escudo de burguillos hypervinculo a página principal" src="/img/burguillos.png"/></menu_text>
+	<slug>index</slug>
+</category>

content/posts/primer-post.xml

@@ -0,0 +1,17 @@
+<post>
+	<author>Bobby Tables not welcome in a xml driven site.</author>
+	<date>2022-11-08T22:38+00:00</date>
+	<title>Primer post.</title>
+	<ogdesc>El primer artículo de burguillos.info.</ogdesc>
+	<category>index</category>
+	<slug>primer-post</slug>
+	<content>
+		<p>Bienvenidos a burguillos.info, tu portal a todas las novedades de lo que sucede en Burguillos.</p>
+		<p>burguillos.info es un proyecto hecho como hobby en menos de 2 días para prácticar mis habilidades de frontend.</p>
+		<p>La intención es que sea una web estática colaborativa, para escribir artículos puedes hacerlo desde <a href="https://git.owlcode.tech/sergiotarxz/burguillos.info">git</a>, tan solo se requiere conocimiento de html.</p>
+
+		<p>Todos los artículos pasarán por un proceso de revisión.</p>
+
+		<p>No tengo mucha idea de frontend, así que el diseño ha quedado como he podido, he usado <a href="https://randoma11y.com">randoma11y</a> para generar los colores con contraste alto por accesibilidad.</p>
+	</content>
+</post>

content/posts/segundo-post.xml

@@ -0,0 +1,51 @@
+<post>
+	<author>Bobby Tables not welcome in a xml driven site.</author>
+	<date>2022-11-09T12:01+00:00</date>
+	<title>Segundo post.</title>
+	<ogdesc>El segundo artículo de burguillos.info.</ogdesc>
+	<category>index</category>
+	<slug>segundo-post</slug>
+	<content>
+		<p>Este artículo se ha creado para ver como quedan múltiples artículos en una categoría, puedes ignorarlo felizmente ya que no contienen nada importante.</p>
+
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+		<p>blowaw</p>
+	</content>
+</post>

lib/BurguillosInfo.pm

@@ -0,0 +1,23 @@
+package BurguillosInfo;
+use Mojo::Base 'Mojolicious', -signatures;
+
+# This method will run once at server start
+sub startup ($self) {
+
+  # Load configuration from config file
+  my $config = $self->plugin('NotYAMLConfig');
+
+  # Configure the application
+  $self->secrets($config->{secrets});
+
+  # Router
+  my $r = $self->routes;
+
+  # Normal route to controller
+  $r->get('/')->to('Page#index');
+#  $r->get('/:post')->to('Page#post');
+  $r->get('/:category')->to('Page#category');
+  $r->get('/posts/:slug')->to('Page#post');
+}
+
+1;

lib/BurguillosInfo/Categories.pm

@@ -0,0 +1,53 @@
+package BurguillosInfo::Categories;
+
+use v5.34.1;
+
+use strict;
+use warnings;
+
+use Const::Fast;
+use Mojo::DOM;
+use Path::Tiny;
+
+const my $CURRENT_FILE => __FILE__;
+const my $CATEGORIES_DIR =>
+  path($CURRENT_FILE)->parent->parent->parent->child('content/categories');
+
+my $cached_categories;
+
+sub new {
+    return bless {}, shift;
+}
+
+sub Retrieve {
+    if ( defined $cached_categories ) {
+        return $cached_categories;
+    }
+    $cached_categories = {};
+    for my $category_file ( $CATEGORIES_DIR->children ) {
+        warn "Bad file $category_file, omiting...", next
+          if !-f $category_file || $category_file !~ /\.xml$/;
+        my $dom   = Mojo::DOM->new( $category_file->slurp_utf8 );
+        my $title = $dom->at(':root > title')->text
+          or die "Missing title at $category_file.";
+        my $description = $dom->at(':root > description')->content
+          or die "Missing description at $category_file";
+        my $slug = $dom->at(':root > slug')->text
+          or die "Missing slug at $category_file";
+        my $menu_text = $dom->at(':root > menu_text')->content
+          or die "Missing menu_text at $category_file";
+        defined (my $priority = $dom->at(':root > priority')->text)
+          or die "Missing priority at $category_file";
+        my $category = {
+            title       => $title,
+            menu_text   => $menu_text,
+            slug        => $slug,
+            description => $description,
+            priority    => $priority,
+        };
+        $cached_categories->{$slug} = $category;
+    }
+    return $cached_categories;
+}
+
+1;

lib/BurguillosInfo/Controller/Example.pm

@@ -0,0 +1,11 @@
+package BurguillosInfo::Controller::Example;
+use Mojo::Base 'Mojolicious::Controller', -signatures;
+
+# This action will render a template
+sub welcome ($self) {
+
+  # Render template "example/welcome.html.ep" with message
+  $self->render(msg => 'Welcome to the Mojolicious real-time web framework!');
+}
+
+1;

lib/BurguillosInfo/Controller/Page.pm

@@ -0,0 +1,57 @@
+package BurguillosInfo::Controller::Page;
+
+use BurguillosInfo::Categories;
+use BurguillosInfo::Posts;
+
+use v5.34.1;
+
+use strict;
+use warnings;
+
+use Data::Dumper;
+
+use Mojo::Base 'Mojolicious::Controller';
+
+sub index {
+    my $self             = shift;
+    my $categories       = BurguillosInfo::Categories->new->Retrieve;
+    my $current_category = $categories->{'index'};
+
+    # Render template "example/welcome.html.ep" with message
+    $self->render(
+        categories       => $categories,
+        current_category => $current_category
+    );
+}
+
+sub post {
+    my $self = shift;
+    my $slug = $self->param('slug');
+    my ( $posts_categories, $posts_slug ) =
+      BurguillosInfo::Posts->new->Retrieve;
+    my $categories       = BurguillosInfo::Categories->new->Retrieve;
+    my $post             = $posts_slug->{$slug};
+    my $current_category = $categories->{ $post->{category} };
+    if ( !defined $post ) {
+        $self->render( template => '404', status => 404 );
+        return;
+    }
+    $self->render( post => $post, current_category => $current_category );
+}
+
+sub category {
+    my $self             = shift;
+    my $categories       = BurguillosInfo::Categories->new->Retrieve;
+    my $category_name    = $self->param('category');
+    my $current_category = $categories->{$category_name};
+    if ( !defined $current_category ) {
+        $self->render( template => '404', status => 404 );
+        return;
+    }
+    $self->render(
+        template         => 'page/index',
+        categories       => $categories,
+        current_category => $current_category
+    );
+}
+1;

lib/BurguillosInfo/Posts.pm

@@ -0,0 +1,70 @@
+package BurguillosInfo::Posts;
+
+use v5.34.1;
+
+use strict;
+use warnings;
+
+use Const::Fast;
+use Mojo::DOM;
+use Path::Tiny;
+use DateTime::Format::ISO8601;
+
+use Data::Dumper;
+
+const my $CURRENT_FILE => __FILE__;
+const my $POSTS_DIR =>
+  path($CURRENT_FILE)->parent->parent->parent->child('content/posts');
+
+my $iso8601 = DateTime::Format::ISO8601->new;
+
+my $cached_posts_by_category;
+my $cached_posts_by_slug;
+
+sub new {
+    return bless {}, shift;
+}
+
+sub Retrieve {
+    if ( defined $cached_posts_by_category && defined $cached_posts_by_slug ) {
+        return ( $cached_posts_by_category, $cached_posts_by_slug );
+    }
+    $cached_posts_by_category = {};
+    $cached_posts_by_slug     = {};
+    for my $post_file ( $POSTS_DIR->children ) {
+        warn "Bad file $post_file, omiting...", next
+          if !-f $post_file || $post_file !~ /\.xml$/;
+        my $dom   = Mojo::DOM->new( $post_file->slurp_utf8 );
+        my $title = $dom->at(':root > title')->text
+          or die "Missing title at $post_file.";
+        my $author = $dom->at(':root > author')->text
+          or die "Missing author at $post_file.";
+        my $date = $dom->at(':root > date')->text
+          or die "Missing date at $post_file.";
+        my $ogdesc = $dom->at(':root > ogdesc')->text
+          or die "Missing ogdesc at $post_file";
+        my $category = $dom->at(':root > category')->text
+          or die "Missing category at $post_file.";
+        my $slug = $dom->at(':root > slug')->text
+          or die "Missing slug at $post_file.";
+        my $content = $dom->at(':root > content')->content
+          or die "Missing content at $post_file.";
+
+        my $post = {
+            title    => $title,
+            author   => $author,
+            date     => $date,
+            ogdesc   => $ogdesc,
+            category => $category,
+            slug     => $slug,
+            content  => $content,
+        };
+	$cached_posts_by_category->{$category} //= [];
+        my $category_posts = $cached_posts_by_category->{$category};
+	$cached_posts_by_slug->{$slug} = $post;
+	push @$category_posts, $post;
+    }
+    return ($cached_posts_by_category, $cached_posts_by_slug);
+}
+
+1;

public/css/styles.scss

@@ -0,0 +1,217 @@
+$background: url(../img/parque_patos.jpg);
+$color: #2f4f4f;
+$background_div: #d8079e;
+$color_div: #fafcdd;
+$background-secondary: #635283;
+$color-secondary: #8eea6d;
+$accent-secondary: #fde68f;
+$primary-secondary: #590e11;
+html {
+    height: 100%;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	min-height: 100%;
+	width: 100%;
+	height: 100%;
+	div.site-wrapper {
+		display: table;
+	        width: 100%;
+		height: 100%; /* For at least Firefox */
+		min-height: 100%;
+		color: $color;
+		background: $background;
+		filter: blur(10px);
+		background-size: cover;
+		overflow: hidden;
+	}
+	div.page-contents {
+		position: absolute;
+		position: fixed;
+		overflow-y: scroll;
+		z-index: 2;
+		background: $color_div;
+		color: $background_div;
+		top: 0%;
+		left: 0%;
+		height: 100%;
+		width: 100%;
+		b,p {
+			font-size: 40px;
+		}
+		h3 {
+			font-size: 47px;
+		}
+		h2 {
+			font-size: 53px;
+		}
+		h1 {
+			font-size: 60px;
+		}
+		div.description {
+			padding: 1%;
+			margin-left: 10%;
+			margin-right: 10%;
+			margin-bottom: 1%;
+			margin-top: 10%;
+			div.articles {
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+				a {
+					width: 100%;
+					max-height: 500px;
+					overflow: hidden;
+					display:block;
+					text-decoration: none;
+					text-overflow: ellipsis;
+					margin-bottom: 10px;
+					article {
+						width: 90%;
+						b,p {
+							font-size: 38px;
+						}
+						h4 {
+							font-size: 44px;
+						}
+						h3 {
+							font-size: 47px;
+						}
+						h2 {
+							font-size: 53px;
+						}
+						h1 {
+							font-size: 60px;
+						}
+						padding-left: 3%;
+						padding-right: 3%;
+						padding-bottom: 3%;
+						padding-top: 0px; 
+						color: $color-secondary;
+						background: $background-secondary;
+						&:hover {
+							color: $background-secondary;
+							background: $color-secondary;
+							p.author {
+								color: $primary-secondary;
+							}
+						}
+						p.author {
+							color: $accent-secondary;
+							font-size: 30px;
+							text-align: right;
+						}
+					}
+				}
+			}
+		}
+		nav > a > img {
+			vertical-align: middle;
+			width: 30px;
+			height: 30px;
+		}
+		nav {
+			overflow: auto;
+			display: block;
+			font-size: 35px;
+			margin: 0px;
+			a.go-to-index img {
+				margin-top: 5%;
+			}
+			a {
+				display: inline-block;
+				height: 100%;
+				text-decoration: none;
+				background: $background_div;
+				color: $color_div;
+				padding: 10px;
+				margin: 0;
+				&.selected {
+					background: $color_div;
+					color: $background_div; 
+				}
+				&:hover {
+					background: $color_div;
+					color: $background_div; 
+				}
+			}
+			a.menu-expand {
+				position: relative;
+				float: right;
+			}
+		}
+
+		nav.mobile-shortcuts {
+			position: fixed;
+			background: $background_div;
+			width: 100%;
+		}
+		nav.desktop {
+			display: none;
+		
+		}
+		nav.mobile-foldable {
+			display: none;
+			background: $background-secondary;
+			color: $color-secondary;
+			a {
+				color: $color-secondary;
+				background: $background-secondary;
+				display: block;
+			}
+		}
+		nav.mobile-foldable.show {
+			display: block;
+		}
+
+		h1 {
+			text-align: center;
+			font-size: 50px;
+		}
+		
+	}
+
+}
+
+@media (min-width: 720px) {
+	body {
+		div.page-contents {
+			nav.mobile-foldable,nav.mobile-foldable.show {
+				display: none;
+			}
+			div.description {
+				margin-top: auto;
+			}
+			nav.desktop {
+				display: block;
+				height: auto;
+			}
+			nav.mobile-shortcuts {
+				display: none;
+			}
+			top: 2%;
+			left: 5%;
+			height: 96%;
+			width: 90%;
+		}
+	}
+}
+
+@media (min-width: 1222px) {
+	body {
+		div.page-contents {
+			div.description {
+				margin-top: auto;
+				div.articles {
+					a {
+						width: 49%;
+						margin-left: 1%;
+					}
+				}
+			}
+		}
+	}
+}

public/js/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+window.onload = () => {
+	let menu_expand = document.querySelector('a.menu-expand');
+	let mobile_foldable = document.querySelector('nav.mobile-foldable');
+
+	menu_expand.addEventListener('click', () => {
+		mobile_foldable.classList.toggle('show');
+	});
+};

templates/404.html.ep

@@ -0,0 +1,7 @@
+% use Mojo::Util;
+% use BurguillosInfo::Categories;
+% layout 'default', current_slug => undef, categories => BurguillosInfo::Categories->new->Retrieve;
+<div class="description">
+	<h2>Esta página no existe.</h2>
+	<p>Si un enlace te ha llevado aquí, reporta el error a <a href="mailto://contact@owlcode.tech">los administradores</a>.</p>
+</div>

templates/layouts/default.html.ep

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+	  <script src="/js/index.js"></script>
+	  <link rel="stylesheet" href="/css/styles.css"/>
+	  <title><%= title %></title>
+	  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+	<div class="site-wrapper">
+	</div>
+	<div class="page-contents">
+	<nav class="desktop"><% for my $category_key (sort {
+		       $categories->{$a}{priority} <=> $categories->{$b}{priority} 
+		   } keys %$categories) {
+			   my $category = $categories->{$category_key};
+			   my $selected = defined($current_slug) && $category->{slug} eq $current_slug;
+			%><a class="<%=$selected && "selected" %>" href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><% 
+		   }
+	%></nav>
+	<nav class="mobile-shortcuts">
+		<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
+		<a href="#mobile-foldable" class="menu-expand"><img src="/img/menu.png" alt="Expandir el menú."/></a>
+	</nav>
+	<nav class="mobile-foldable" id="mobile-foldable"><% for my $category_key (sort {
+		       $categories->{$a}{priority} <=> $categories->{$b}{priority} 
+		   } keys %$categories) {
+			   my $category = $categories->{$category_key};
+			%><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><% 
+		   }
+	%></nav>
+
+	<%= content %></body>
+	</div>
+</html>

templates/not_found.html.ep

@@ -0,0 +1 @@
+404.html.ep

templates/page/index.html.ep

@@ -0,0 +1,33 @@
+% use Mojo::DOM;
+% use Mojo::Util;
+%
+% use BurguillosInfo::Posts;
+%
+% layout 'default', current_slug => $current_category->{slug};
+% title $current_category->{title};
+<div class="description">
+	<h2><%= $current_category->{title} %></h2>
+	<%== $current_category->{description} %>
+	<h3>Artículos</h3>
+	<div class="articles">
+% my ($cached_posts_by_category) = BurguillosInfo::Posts->new->Retrieve;
+% my $category_post = $cached_posts_by_category->{$current_category->{slug}};
+% if (defined $category_post) {
+% 	for my $post (@$category_post) {
+		<a href="/posts/<%=$post->{slug}%>">
+			<article>	
+				<h4><%=$post->{title}%></h4>
+%		my $xml = Mojo::DOM->new($post->{content});
+%		my $text = $xml->all_text;
+%		if (length($text) > 120) {
+%			$text = substr($text, 0, 100).'...';
+%		}
+				<p><%=$text%></p>
+				<p class="author">Escrito por <%=$post->{author}%></p>
+			</article>
+		</a>
+%	}
+% } else {
+	<p>Parece que aun no hay artículos.</p>
+% }
+</div>

templates/page/post.html.ep

@@ -0,0 +1,12 @@
+% use Mojo::DOM;
+% use Mojo::Util;
+%
+% use BurguillosInfo::Posts;
+% use BurguillosInfo::Categories;
+% my $categories = BurguillosInfo::Categories->new->Retrieve;
+% layout 'default', current_slug => $current_category->{slug}, categories => $categories;
+% title $post->{title};
+<div class="description">
+	<h2><%= $post->{title} %></h2>
+	<%== $post->{content} %>
+</div>