Implement /tags and /tag/id endpoints

lib/PoorBooru.pm

@@ -2,10 +2,25 @@ package PoorBooru;
 use Dancer2;
 use HTTP::Tiny;
 
-our $VERSION = v0.1;
+our $VERSION = v0.0.1;
 
 my $POORBOORU_API = setting("poorbooru_api");
 
+sub http_tiny ()
+{
+	return HTTP::Tiny->new(
+		timeout    => 15,
+		verify_SSL => true,
+		agent      => setting("appname") . " backend " .
+		    version::->parse($VERSION)->normal,
+
+		default_headers => {
+			"Accept"       => "application/json",
+			"Content-Type" => "application/json",
+		},
+	);
+}
+
 hook before_template_render => sub {
 	my $tokens = shift;
 
@@ -18,20 +33,50 @@ hook before_template_render => sub {
 
 get "/" => sub {
 	template "index" => {
-		"title" => "main",
+		title => "main",
 	};
 };
 
 get "/tags" => sub {
+	my $res = http_tiny()->get("$POORBOORU_API/tags");
+	send_error("API error", 500) if !$res->{success};
+
+	my $data = decode_json($res->{content});
+	my @tags = map +( {
+		name  => $_->{name},
+		count => $_->{count},
+		uri   => uri_for("/tag/" . $_->{name}),
+	} ), @$data;
+
+	template "tags" => {
+		title => "Tags",
+		tags  => \@tags,
+	};
 };
 
-get "/tag/:tag_id" => sub {
+get "/tag/:tag_id_or_name" => sub {
+	my $tag_id_or_name = route_parameters->get("tag_id_or_name");
+
+	my $res = http_tiny()->get("$POORBOORU_API/tag/$tag_id_or_name");
+	send_error("API error", 500) if !$res->{success};
+
+	my $data = decode_json($res->{content});
+	my @media = map +( {
+		# XXX point to a cache
+		image_src => $_->{download_uri},
+		view_uri  => uri_for("/view/" . $_->{id}),
+	} ), @{$data->{media}};
+
+	template "gallery" => {
+		title => $data->{name},
+		media => \@media,
+	};
 };
 
 get "/random" => sub {
 };
 
-get "/image/:image_id" => sub {
+get "/view/:media_id" => sub {
 };
 
 true;

public/css/style.css

@@ -135,6 +135,20 @@ nav {
   gap: 0 1rem;
 }
 
+/* 0.5rem padding compensates the unused 1rem gap at the end. */
+.gallery {
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.5rem;
+}
+
+.gallery-image {
+  max-height: 24rem;
+  max-width: 14rem;
+  height: 100%;
+  width: 100%;
+}
+
 .flex-c-horizontal {
   display: flex;
 }
@@ -150,6 +164,10 @@ nav {
   align-items: center;
 }
 
+.flex-c-wrap {
+  flex-wrap: wrap;
+}
+
 .flex-i-fullsize {
   flex: auto;
 }

views/gallery.tt

@@ -0,0 +1,9 @@
+<h1>[% title %]</h1>
+
+<div class="flex-c-horizontal flex-c-wrap gallery">
+[% FOREACH entry IN media -%]
+  <a href="[% entry.view_uri %]">
+    <img class="gallery-image" src="[% entry.image_src %]" />
+  </a>
+[% END -%]
+</div>

views/index.tt

@@ -1 +1 @@
-<h1>No content</h1>
+<h1>PoorBooru</h1>

views/tags.tt

@@ -0,0 +1,7 @@
+<h1>Tags</h1>
+
+<p class="text-center">
+[% FOREACH tag IN tags -%]
+<a href="[% tag.uri %]">[% tag.name %] ([% tag.count %])</a>
+[% END -%]
+</p>