postnhost 0.0.0 → 0.1.0

data/app/views/postnhost/public/templates/default/articles/_article_card.html.erb

@@ -0,0 +1,37 @@
+<article class="bg-white rounded-2xl border border-gray-200 hover:border-gray-300 transition-all duration-200 overflow-hidden flex flex-col break-words">
+  <%= link_to category_article_url(item), class: "block", "aria-label": t('postnhost.public.blog.read_article_aria_label', title: item.title) do %>
+    <%= render "postnhost/public/templates/default/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+  <% end %>
+
+  <div class="p-8 flex-1 flex flex-col">
+    <div class="flex items-center space-x-3 mb-4">
+      <% if category_article(item).categories.any? %>
+        <%= link_to localized_category_name(category_article(item).categories.first, @current_language), language_category_path(category_article(item).categories.first.slug, @current_language),
+                class: 'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors' %>
+      <% end %>
+      <span class="text-sm text-gray-500">
+        <%= l category_article(item).published_at.to_date, format: :long %>
+      </span>
+    </div>
+
+    <%= link_to category_article_url(item), class: "block group flex-1" do %>
+      <h2 class="text-xl font-semibold text-gray-900 group-hover:text-gray-700 mb-3 line-clamp-2">
+        <%= item.title %>
+      </h2>
+      <% if article_excerpt(item).present? %>
+        <p class="text-sm text-gray-600 mb-4 line-clamp-3">
+          <%= article_excerpt(item) %>
+        </p>
+      <% end %>
+    <% end %>
+
+    <% if author_name(category_article_author_user(item)).present? %>
+      <div class="flex items-center text-sm text-gray-500 mt-auto">
+        <div class="flex items-center space-x-2">
+          <%= render 'postnhost/public/templates/default/shared/author_avatar', user: category_article_author_user(item), size_class: 'w-6 h-6', text_size_class: 'text-xs' %>
+          <span><%= author_name(category_article_author_user(item)) %></span>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</article>

data/app/views/postnhost/public/templates/default/articles/_search_form.html.erb

@@ -0,0 +1,12 @@
+<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
+  <%= public_search_page? ? public_articles_index_heading : t("postnhost.public.search.submit") %>
+</h1>
+<%= form_with url: language_search_path(@current_language), method: :get, local: true, class: "max-w-3xl mx-auto" do %>
+  <label for="public-blog-search" class="sr-only"><%= t("postnhost.public.search.submit") %></label>
+  <div class="relative">
+    <%= text_field_tag :s, public_search_query, id: "public-blog-search", placeholder: t("postnhost.public.search.input_placeholder"), class: "w-full rounded-2xl border border-gray-200 bg-white px-5 py-3 pr-12 text-base text-gray-900 placeholder:text-gray-400 focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900" %>
+    <button type="submit" class="absolute inset-y-1 right-1 inline-flex items-center justify-center rounded-xl px-3 text-gray-500 hover:text-gray-900 cursor-pointer" aria-label="<%= t("postnhost.public.search.submit") %>">
+      <%= icon("magnifying-glass", css_class: "size-5 shrink-0") %>
+    </button>
+  </div>
+<% end %>

data/app/views/postnhost/public/templates/default/articles/_suggestions.html.erb

@@ -0,0 +1,44 @@
+<% cache [public_site_revision, @article, @actual_language, "default_suggestions"] do %>
+<% if @article.suggestions_for(language: @actual_language).any? %>
+  <div class="bg-white border-t border-gray-200 py-10">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-xl font-semibold text-gray-900 mb-8"><%= t('postnhost.public.blog.read_more') %></h2>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <% @article.suggestions_for(language: @actual_language).each_with_index do |suggestion, index| %>
+          <% cache [public_site_revision, suggestion, article_authors_cache_key(suggestion), "default_suggestion"] do %>
+            <article class="bg-white rounded-2xl border border-gray-200 hover:border-gray-300 transition-all duration-200 overflow-hidden flex flex-col break-words">
+              <%= link_to public_article_path(suggestion.slug), class: "block", "aria-label": t('postnhost.public.blog.read_article_aria_label', title: suggestion.title) do %>
+                <%= render "postnhost/public/templates/default/shared/thumbnail_cover_image", publication: suggestion, index: index %>
+              <% end %>
+
+              <div class="p-8 flex-1 flex flex-col">
+                <div class="flex items-center space-x-3 mb-4">
+                  <% if suggestion.categories.any? %>
+                    <%= link_to localized_category_name(suggestion.categories.first, @current_language), language_category_path(suggestion.categories.first.slug, @current_language),
+                            class: 'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors' %>
+                  <% end %>
+                  <span class="text-sm text-gray-500">
+                    <%= l suggestion.published_at.to_date, format: :long %>
+                  </span>
+                </div>
+
+                <%= link_to public_article_path(suggestion.slug), class: "block group flex-1" do %>
+                  <h2 class="text-xl font-semibold text-gray-900 group-hover:text-gray-700 mb-3 line-clamp-2">
+                    <%= suggestion.title %>
+                  </h2>
+                  <% if article_excerpt(suggestion).present? %>
+                    <p class="text-gray-600 mb-4 line-clamp-3">
+                      <%= article_excerpt(suggestion) %>
+                    </p>
+                  <% end %>
+                <% end %>
+              </div>
+            </article>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+<% end %>

data/app/views/postnhost/public/templates/default/articles/_top_picks.html.erb

@@ -0,0 +1,42 @@
+<% if top_pick_articles.any? && !public_search_endpoint? && !public_search_page? && !paginated_public_page? %>
+  <section class="bg-white border-b border-gray-200 py-10">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="mb-8 border-b border-gray-200 pb-4">
+        <h2 class="text-2xl font-semibold text-gray-900"><%= t("postnhost.public.blog.top_picks") %></h2>
+      </div>
+
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <% top_pick_articles.each_with_index do |item, index| %>
+          <% cache [public_site_revision, item, article_authors_cache_key(item), "default_editors_pick"] do %>
+            <article class="border-b border-gray-200 pb-6">
+              <% if category_article(item).categories.any? %>
+                <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                  <%= localized_category_name(category_article(item).categories.first, @current_language) %>
+                </span>
+              <% end %>
+
+              <%= link_to category_article_url(item), class: "group mt-2 block cursor-pointer" do %>
+                <h3 class="text-xl font-semibold leading-tight text-gray-900 group-hover:text-gray-700">
+                  <%= item.title %>
+                </h3>
+              <% end %>
+
+              <% if article_excerpt(item).present? %>
+                <p class="mt-2 text-sm text-gray-600">
+                  <%= article_excerpt(item) %>
+                </p>
+              <% end %>
+
+              <p class="mt-3 text-xs font-medium uppercase tracking-wide text-gray-500">
+                <% if author_name(category_article_author_user(item)).present? %>
+                  <%= author_name(category_article_author_user(item)) %> ·
+                <% end %>
+                <%= l category_article(item).published_at.to_date, format: :long %>
+              </p>
+            </article>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </section>
+<% end %>

data/app/views/postnhost/public/templates/default/articles/index.html.erb

@@ -0,0 +1,53 @@
+<%= render "postnhost/public/articles/content_for/index" %>
+
+<!-- Blog Header -->
+<div class="bg-white border-b border-gray-200">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-12">
+    <div class="text-center">
+      <% if public_search_endpoint? %>
+        <%= render "postnhost/public/templates/default/articles/search_form" %>
+      <% else %>
+        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
+          <%= public_blog_heading %>
+        </h1>
+        <% if show_public_blog_subtitle? %>
+          <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+            <%= t('postnhost.public.site.blog_subtitle') %>
+          </p>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<%= render "postnhost/public/templates/default/articles/top_picks" %>
+
+<!-- Articles Section -->
+<% if category_articles.any? %>
+  <div class="bg-white py-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        <%= render partial: "postnhost/public/templates/default/articles/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "card"] } %>
+      </div>
+
+      <!-- Pagination -->
+      <div class="flex justify-center">
+        <%= render "postnhost/public/templates/default/shared/pagination", pagy: @pagy %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <!-- Empty State -->
+  <div class="bg-white py-24">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <div class="mx-auto h-12 w-12 text-gray-400">
+        <%= icon("document-text", css_class: "w-full h-full") %>
+      </div>
+      <h2 class="mt-2 text-2xl font-semibold text-gray-900 mb-4"><%= t('postnhost.public.blog.no_articles') %></h2>
+      <p class="text-lg text-gray-600"><%= t('postnhost.public.blog.no_articles_description') %></p>
+    </div>
+  </div>
+<% end %>

data/app/views/postnhost/public/templates/default/articles/preview.html.erb

@@ -0,0 +1,102 @@
+<%= render "postnhost/public/articles/content_for/preview" %>
+
+<!-- Preview Banner -->
+<div class="bg-yellow-50 border-b border-t border-yellow-200 mt-8">
+  <div class="flex items-center justify-center py-2">
+    <span class="text-xs font-medium text-yellow-800">Preview Mode</span>
+  </div>
+</div>
+
+<!-- Cover Image -->
+<% if @content.cover_image? %>
+  <div class="bg-white border-b border-gray-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <%= image_tag @content.cover_image.url,
+            loading: 'eager',
+            fetchpriority: 'high',
+            alt: @content.cover_image_alt.presence || @content.title,
+            width: 1200,
+            height: 630,
+            srcset: "#{@content.cover_image.thumbnail.url} 520w, #{@content.cover_image.medium.url} 1024w, #{@content.cover_image.url} 1200w",
+            sizes: "(max-width: 640px) 173px, (max-width: 1279px) 342px, 1200px",
+            class: 'w-full object-cover rounded-lg' %>
+    </div>
+  </div>
+<% end %>
+
+<!-- Article Header -->
+<div class="bg-white border-b border-gray-200">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="text-center">
+      <div class="flex flex-wrap items-center justify-center gap-2 mb-6">
+        <% if @article.categories.any? %>
+          <% @article.categories.each do |category| %>
+            <%= link_to localized_category_name(category, @current_language), language_category_path(category.slug, @current_language),
+                class: 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors' %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
+        <%= @content.title %>
+      </h1>
+
+      <%= render "postnhost/public/templates/default/shared/article_authors", authors: article_authors(@article), current_language: @current_language %>
+    </div>
+  </div>
+</div>
+
+<!-- Article Content -->
+<div class="bg-white">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="prose prose-gray max-w-none py-8">
+      <%= render_article_content(@content.content) %>
+    </div>
+  </div>
+</div>
+
+<!-- Language Variants -->
+<% if @available_variants.count > 1 || (@article.published? && @available_variants.any?) %>
+  <div class="bg-white py-8 border-t border-gray-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <p class="text-lg font-semibold text-gray-900 mb-6"><%= t('postnhost.public.blog.available_in_languages') %></p>
+      <div class="flex flex-wrap gap-3">
+        <% if @article.published? %>
+          <%= link_to public_article_path(@article.slug),
+              class: "inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium transition-colors #{'bg-gray-900 text-white' if @content == @article} #{'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50' if @content != @article}" do %>
+            <%= @article.language&.name %>
+          <% end %>
+        <% else %>
+          <span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium bg-gray-900 text-white">
+            <%= @article.language&.name %>
+          </span>
+        <% end %>
+
+        <% @available_variants.each do |variant| %>
+          <% if variant.published? %>
+            <%= link_to localized_public_article_path(variant.language.html_lang, @article.slug),
+                class: "inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium bg-white border border-gray-200 text-gray-700 hover:bg-gray-50" do %>
+              <%= variant.language.name %>
+            <% end %>
+          <% else %>
+            <span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium bg-white border border-gray-200 text-gray-700">
+              <%= variant.language.name %>
+            </span>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Back to Editor -->
+<div class="bg-white border-t border-gray-200 py-8">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-center">
+      <%= link_to edit_article_path(@article), class: 'inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors' do %>
+        <%= icon("arrow-left-long", css_class: "w-4 h-4 mr-2") %>
+        Back to Editor
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/public/templates/default/articles/show.html.erb

@@ -0,0 +1,111 @@
+<%= render "postnhost/public/articles/content_for/show" %>
+
+<!-- Cover Image -->
+<% if @article.cover_image? %>
+  <div class="bg-white border-b border-gray-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <%= render "postnhost/public/templates/default/shared/hero_cover_image", publication: @article, alt_text: @content.title %>
+    </div>
+  </div>
+<% end %>
+
+<% if user_signed_in? %>
+  <div class="bg-white">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
+      <div class="flex justify-center">
+        <%= link_to(@article_variant.present? ? edit_article_variant_path(@article.article_id, @article_variant.article_variant_id) : edit_article_path(@article.article_id),
+            data: { turbo_prefetch: false },
+            class: "inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 px-4 py-2 bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 focus:ring-gray-500 cursor-pointer") do %>
+          <%= icon("edit", css_class: "w-4 h-4 mr-2") %>
+          Edit
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Article Header -->
+<% cache [public_site_revision, @article, @article_variant, article_authors_cache_key(@article), "header"].compact do %>
+  <div class="bg-white border-b border-gray-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div class="text-center">
+        <div class="flex flex-wrap items-center justify-center gap-2 mb-6">
+          <% if @article.categories.any? %>
+            <% @article.categories.each do |category| %>
+              <%= link_to localized_category_name(category, @current_language), language_category_path(category.slug, @current_language),
+                  class: 'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors' %>
+            <% end %>
+          <% end %>
+          <span class="text-sm text-gray-500">
+            <%= l @article.published_at.to_date, format: :long %>
+          </span>
+        </div>
+
+        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">
+          <%= @content.title %>
+        </h1>
+
+        <%= render "postnhost/public/templates/default/shared/article_authors", authors: article_authors(@article), current_language: @current_language %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Article Content -->
+<% cache [public_site_revision, @article, @article_variant, "content"].compact do %>
+  <article class="bg-white">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="prose prose-gray max-w-none py-8">
+        <%= render_article_content(@content.content) %>
+      </div>
+    </div>
+  </article>
+<% end %>
+
+<!-- Language Variants -->
+<% if @available_variants.count > 1 || (@article.published? && @available_variants.any?) %>
+  <div class="bg-white py-8 border-t border-gray-200">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <p class="text-lg font-semibold text-gray-900 mb-6"><%= t('postnhost.public.blog.available_in_languages') %></p>
+      <div class="flex flex-wrap gap-3">
+        <% if @article.published? %>
+          <%= link_to public_article_path(@article.slug),
+              class: "inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium transition-colors #{'bg-gray-900 text-white' if @content == @article} #{'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50' if @content != @article}" do %>
+            <%= @primary_language.name %>
+          <% end %>
+        <% end %>
+
+        <% @available_variants.each do |variant| %>
+          <%= link_to localized_public_article_path(variant.language.html_lang, @article.slug),
+              class: "inline-flex items-center px-4 py-2 rounded-xl text-sm font-medium transition-colors #{'bg-gray-900 text-white' if @content == variant} #{'bg-white border border-gray-200 text-gray-700 hover:bg-gray-50' if @content != variant}" do %>
+            <%= variant.language.name %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<!-- Read More Suggestions -->
+<%= render "postnhost/public/templates/default/articles/suggestions" %>
+
+<!-- Back to Articles -->
+<div class="bg-white border-t border-gray-200 py-8">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <%= link_to language_root_path(@current_language), class: 'inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors' do %>
+        <%= icon("arrow-left-long", css_class: "w-4 h-4 mr-2") %>
+        <%= t('postnhost.public.blog.back_to_articles') %>
+      <% end %>
+
+      <div class="flex flex-wrap items-center gap-4 sm:justify-end">
+        <% if @article.categories.any? %>
+          <%= link_to language_category_path(@article.categories.first.slug, @current_language), class: 'inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors cursor-pointer' do %>
+            <%= t('postnhost.public.blog.more_in_category', category: localized_category_name(@article.categories.first, @current_language)) %>
+            <%= icon("arrow-right-long", css_class: "w-4 h-4 ml-2") %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/public/templates/default/authors/_article_card.html.erb

@@ -0,0 +1,28 @@
+<article class="bg-white rounded-2xl border border-gray-200 hover:border-gray-300 transition-all duration-200 overflow-hidden flex flex-col break-words">
+  <%= link_to category_article_url(item), class: "block", "aria-label": t('postnhost.public.blog.read_article_aria_label', title: item.title) do %>
+    <%= render "postnhost/public/templates/default/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+  <% end %>
+
+  <div class="p-8 flex-1 flex flex-col">
+    <div class="flex items-center space-x-3 mb-4">
+      <% if category_article(item).categories.any? %>
+        <%= link_to localized_category_name(category_article(item).categories.first, @current_language), language_category_path(category_article(item).categories.first.slug, @current_language),
+                class: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors" %>
+      <% end %>
+      <span class="text-sm text-gray-500">
+        <%= l category_article(item).published_at.to_date, format: :long %>
+      </span>
+    </div>
+
+    <%= link_to category_article_url(item), class: "block group flex-1", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+      <h3 class="text-xl font-semibold text-gray-900 group-hover:text-gray-700 mb-3 line-clamp-2">
+        <%= item.title %>
+      </h3>
+      <% if article_excerpt(item).present? %>
+        <p class="text-sm text-gray-600 line-clamp-3">
+          <%= article_excerpt(item) %>
+        </p>
+      <% end %>
+    <% end %>
+  </div>
+</article>

data/app/views/postnhost/public/templates/default/authors/_profile_block.html.erb

@@ -0,0 +1,29 @@
+<div class="bg-white border border-gray-200 rounded-2xl p-6 md:p-8">
+  <div class="flex flex-col sm:flex-row sm:items-start gap-5 sm:gap-6">
+    <div class="shrink-0">
+      <%= render "postnhost/public/templates/default/shared/author_avatar", user: author, size_class: "w-20 h-20", text_size_class: "text-xl" %>
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <h1 class="text-3xl md:text-4xl font-bold text-gray-900 tracking-tight">
+        <%= author_name(author) %>
+      </h1>
+      <% if author.position.present? %>
+        <p class="mt-2 text-sm font-medium uppercase tracking-wide text-gray-500"><%= author.position %></p>
+      <% end %>
+      <% if author.bio.present? %>
+        <p class="mt-3 text-base text-gray-600 leading-relaxed"><%= author.bio %></p>
+      <% end %>
+
+      <% if author_social_links(author).any? %>
+        <div class="mt-5 flex flex-wrap items-center gap-4">
+          <% author_social_links(author).each do |social| %>
+            <%= link_to social[:url], target: "_blank", rel: "noopener noreferrer", class: "inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors duration-200 cursor-pointer", aria: { label: social[:label] }, title: social[:label] do %>
+              <%= icon(social[:icon], css_class: "w-5 h-5") %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/public/templates/default/authors/show.html.erb

@@ -0,0 +1,36 @@
+<%= render "postnhost/public/authors/content_for/show" %>
+
+<div class="bg-white border-b border-gray-200">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-12">
+    <%= render "postnhost/public/templates/default/authors/profile_block", author: @author %>
+  </div>
+</div>
+
+<div class="bg-white py-8">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h2 class="text-2xl md:text-3xl font-semibold text-gray-900 mb-8">
+      <%= t("postnhost.public.authors.latest_from_author") %>
+    </h2>
+
+    <% if category_articles.any? %>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        <%= render partial: "postnhost/public/templates/default/authors/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, "author_card"] } %>
+      </div>
+
+      <div class="flex justify-center">
+        <%= render "postnhost/public/templates/default/shared/pagination", pagy: @pagy %>
+      </div>
+    <% else %>
+      <div class="text-center py-24">
+        <div class="mx-auto h-12 w-12 text-gray-400">
+          <%= icon("document-text", css_class: "w-full h-full") %>
+        </div>
+        <h3 class="mt-2 text-2xl font-semibold text-gray-900 mb-4"><%= t("postnhost.public.authors.no_articles") %></h3>
+        <p class="text-lg text-gray-600"><%= t("postnhost.public.authors.no_articles_description") %></p>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/postnhost/public/templates/default/categories/_article_card.html.erb

@@ -0,0 +1,34 @@
+<%# Article card without category badge - for category index %>
+<article class="bg-white rounded-2xl border border-gray-200 hover:border-gray-300 transition-all duration-200 overflow-hidden flex flex-col break-words">
+  <%= link_to category_article_url(item), class: "block", "aria-label": t('postnhost.public.blog.read_article_aria_label', title: item.title) do %>
+    <%= render "postnhost/public/templates/default/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+  <% end %>
+
+  <div class="p-8 flex-1 flex flex-col">
+    <div class="flex items-center space-x-3 mb-4">
+      <span class="text-sm text-gray-500">
+        <%= l category_article(item).published_at.to_date, format: :long %>
+      </span>
+    </div>
+
+    <%= link_to category_article_url(item), class: "block group flex-1" do %>
+      <h2 class="text-xl font-semibold text-gray-900 group-hover:text-gray-700 mb-3 line-clamp-2">
+        <%= item.title %>
+      </h2>
+      <% if article_excerpt(item).present? %>
+        <p class="text-sm text-gray-600 mb-4 line-clamp-3">
+          <%= article_excerpt(item) %>
+        </p>
+      <% end %>
+    <% end %>
+
+    <% if author_name(category_article_author_user(item)).present? %>
+      <div class="flex items-center text-sm text-gray-500 mt-auto">
+        <div class="flex items-center space-x-2">
+          <%= render 'postnhost/public/templates/default/shared/author_avatar', user: category_article_author_user(item), size_class: 'w-6 h-6', text_size_class: 'text-xs' %>
+          <span><%= author_name(category_article_author_user(item)) %></span>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</article>

data/app/views/postnhost/public/templates/default/categories/index.html.erb

@@ -0,0 +1,48 @@
+<%= render "postnhost/public/categories/content_for/index" %>
+
+<!-- Category Header -->
+<div class="bg-white border-b border-gray-200">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-12">
+    <div class="text-center">
+      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
+        <%= public_category_heading(@category) %>
+      </h1>
+      <% if show_public_category_description?(@category) %>
+        <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+          <%= public_category_description(@category) %>
+        </p>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- Articles Grid -->
+<% if category_articles.any? %>
+  <div class="bg-white py-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        <%= render partial: "postnhost/public/templates/default/categories/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "category_card"] } %>
+      </div>
+
+      <!-- Pagination -->
+      <div class="flex justify-center">
+        <%= render "postnhost/public/templates/default/shared/pagination", pagy: @pagy %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <!-- Empty State -->
+  <div class="bg-white py-24">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+      <div class="mx-auto h-12 w-12 text-gray-400">
+        <%= icon("document-text", css_class: "w-full h-full") %>
+      </div>
+      <h2 class="mt-2 text-2xl font-semibold text-gray-900 mb-4"><%= t('postnhost.public.category.no_articles') %></h2>
+      <p class="text-lg text-gray-600 mb-8"><%= t('postnhost.public.category.no_articles_description') %></p>
+      <%= link_to t('postnhost.public.blog.browse_all_articles'), language_root_path(@current_language), class: 'bg-gray-900 text-white px-6 py-3 rounded-2xl font-semibold hover:bg-gray-800 transition-all duration-200' %>
+    </div>
+  </div>
+<% end %>

data/app/views/postnhost/public/templates/default/shared/_article_authors.html.erb

@@ -0,0 +1,24 @@
+<% if authors.any? %>
+  <div class="mt-8 flex max-w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 px-2">
+    <% authors.each do |author| %>
+      <% if author_pages_enabled? %>
+        <%= link_to language_author_path(author.slug, current_language),
+              class: "group inline-flex max-w-full shrink-0 items-center space-x-3 rounded-xl -m-1 p-1 text-left hover:bg-gray-50 transition-colors cursor-pointer no-underline" do %>
+          <%= render "postnhost/public/templates/default/shared/author_avatar", user: author, size_class: "w-10 h-10", text_size_class: "text-sm" %>
+          <div class="text-left min-w-0">
+            <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700"><%= author_name(author) %></p>
+            <p class="text-sm text-gray-500"><%= article_author_label(author) %></p>
+          </div>
+        <% end %>
+      <% else %>
+        <div class="inline-flex max-w-full shrink-0 items-center space-x-3 rounded-xl -m-1 p-1 text-left no-underline">
+          <%= render "postnhost/public/templates/default/shared/author_avatar", user: author, size_class: "w-10 h-10", text_size_class: "text-sm" %>
+          <div class="text-left min-w-0">
+            <p class="text-sm font-medium text-gray-900"><%= author_name(author) %></p>
+            <p class="text-sm text-gray-500"><%= article_author_label(author) %></p>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/postnhost/public/templates/default/shared/_author_avatar.html.erb

@@ -0,0 +1,9 @@
+<div class="<%= size_class %> bg-gray-100 rounded-full flex items-center justify-center overflow-hidden">
+  <% if author_avatar(user).present? %>
+    <%= image_tag author_avatar(user), class: "w-full h-full object-cover", alt: "Author Image" %>
+  <% elsif author_initials(user).present? %>
+    <span class="<%= text_size_class %> font-medium text-gray-600">
+      <%= author_initials(user) %>
+    </span>
+  <% end %>
+</div>

data/app/views/postnhost/public/templates/default/shared/_hero_cover_image.html.erb

@@ -0,0 +1,11 @@
+<% if publication.cover_image? %>
+  <%= image_tag publication.cover_image.thumbnail.url,
+        loading: "eager",
+        fetchpriority: "high",
+        alt: publication.cover_image_alt.presence || local_assigns[:alt_text] || publication.title,
+        width: 520,
+        height: 273,
+        class: local_assigns.fetch(:image_class, "w-full"),
+        srcset: "#{publication.cover_image.thumbnail.url} 520w, #{publication.cover_image.medium.url} 1024w, #{publication.cover_image.url} 1200w",
+        sizes: "(max-width: 639px) 173px, (max-width: 1279px) 342px, 1200px" %>
+<% end %>