feat(ui): add error handling, flash messages and SEO optimization

- Add custom error pages (404, 403, 500) with user-friendly messages
- Add flash message system with signed cookies for security
- Add toast notifications with auto-dismiss and manual close
- Add comprehensive SEO meta tags (description, keywords, OG, Twitter)
- Add canonical URLs for SEO
- Update routes to use slug-based URLs (/posts/{slug} instead of /posts/{id})
- Add Open Graph and Twitter Card meta tags for social sharing
- Add favicon SVG
- Update all templates with proper meta tags and URLs
- Add error handlers registration in main.py
- Add flash middleware for request handling
- Install itsdangerous dependency

app/presentation/templates/pages/index.html

@@ -1,6 +1,15 @@
 {% extends "base.html" %}
 
 {% block title %}Blog - Home{% endblock %}
+{% block meta_description %}Discover stories, thinking, and expertise from writers on any topic. A modern blog built with FastAPI.{% endblock %}
+{% block meta_keywords %}blog, articles, posts, writing, fastapi, python{% endblock %}
+
+{% block og_type %}website{% endblock %}
+{% block og_title %}Blog - Home{% endblock %}
+{% block og_description %}Discover stories, thinking, and expertise from writers on any topic.{% endblock %}
+
+{% block twitter_title %}Blog - Home{% endblock %}
+{% block twitter_description %}Discover stories, thinking, and expertise from writers on any topic.{% endblock %}
 
 {% block content %}
 <section class="page-header" data-testid="page-header-home">
@@ -26,7 +35,7 @@
     <article class="card post-card" data-testid="post-card-{{ post.id }}">
         <div class="post-card-header" data-testid="post-card-header-{{ post.id }}">
             <h2 class="post-card-title" data-testid="post-title-{{ post.id }}">
-                <a href="/posts/{{ post.id }}" data-testid="post-title-link-{{ post.id }}">{{ post.title }}</a>
+                <a href="/web/posts/{{ post.slug.value }}" data-testid="post-title-link-{{ post.id }}">{{ post.title }}</a>
             </h2>
             {% if post.published %}
             <span class="badge badge-success" data-testid="post-status-{{ post.id }}">Published</span>
@@ -55,7 +64,7 @@
                 <span class="tag" data-testid="post-tag-{{ post.id }}-{{ loop.index }}">{{ tag }}</span>
                 {% endfor %}
             </div>
-            <a href="/posts/{{ post.id }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">
+            <a href="/web/posts/{{ post.slug.value }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">
                 Read more
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.25rem;">
                     <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>