postnhost 0.0.0 → 0.1.0

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

@@ -0,0 +1,35 @@
+<% if pagy.pages > 1 %>
+  <nav class="flex items-center justify-center space-x-2" aria-label="<%= t('postnhost.public.pagination.navigation', default: 'Pagination') %>">
+    <% if pagy.previous %>
+      <%= link_to pagination_url(pagy, pagy.previous), class: "inline-flex items-center justify-center p-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 cursor-pointer", aria: { label: t("postnhost.public.pagination.previous") } do %>
+        <%= icon("chevron-left", css_class: "h-5 w-5") %>
+      <% end %>
+    <% else %>
+      <span class="inline-flex items-center justify-center p-2 text-sm font-medium text-gray-600 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed opacity-50" role="link" aria-label="<%= t('postnhost.public.pagination.previous') %>" aria-disabled="true">
+        <%= icon("chevron-left", css_class: "h-5 w-5") %>
+      </span>
+    <% end %>
+
+    <% pagination_series(pagy).each do |item| %>
+      <% if item.is_a?(Integer) %>
+        <% if item == pagy.page %>
+          <span class="px-3 py-2 text-sm font-medium text-white bg-gray-900 border border-gray-900 rounded-lg" aria-current="page"><%= item %></span>
+        <% else %>
+          <%= link_to item, pagination_url(pagy, item), class: "px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 cursor-pointer" %>
+        <% end %>
+      <% elsif item == :gap %>
+        <span class="px-3 py-2 text-sm font-medium text-gray-300">…</span>
+      <% end %>
+    <% end %>
+
+    <% if pagy.next %>
+      <%= link_to pagination_url(pagy, pagy.next), class: "inline-flex items-center justify-center p-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700 cursor-pointer", aria: { label: t("postnhost.public.pagination.next") } do %>
+        <%= icon("chevron-right", css_class: "h-5 w-5") %>
+      <% end %>
+    <% else %>
+      <span class="inline-flex items-center justify-center p-2 text-sm font-medium text-gray-600 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed opacity-50" role="link" aria-label="<%= t('postnhost.public.pagination.next') %>" aria-disabled="true">
+        <%= icon("chevron-right", css_class: "h-5 w-5") %>
+      </span>
+    <% end %>
+  </nav>
+<% end %>

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

@@ -0,0 +1,9 @@
+<% if publication.cover_image? %>
+  <%= image_tag publication.cover_image.thumbnail.url,
+        loading: index.to_i < 3 ? "eager" : "lazy",
+        fetchpriority: index.to_i < 3 ? "high" : "auto",
+        alt: publication.cover_image_alt.presence || publication.title,
+        width: 520,
+        height: 273,
+        class: local_assigns.fetch(:image_class, "w-full h-48 object-cover") %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%= render "postnhost/public/static_pages/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 py-10">
+    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
+      <%= @content.title %>
+    </h1>
+    <% if @content.meta_description.present? %>
+      <p class="mt-4 text-lg text-gray-600">
+        <%= @content.meta_description %>
+      </p>
+    <% end %>
+  </div>
+</div>
+
+<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>

data/app/views/postnhost/public/templates/swiss-editorial/articles/_article_card.html.erb

@@ -0,0 +1,28 @@
+<article class="flex flex-col gap-3 break-words">
+  <% if category_article(item).cover_image? %>
+    <%= link_to category_article_url(item), class: "block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+      <%= render "postnhost/public/templates/swiss-editorial/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+    <% end %>
+  <% end %>
+
+  <% 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: "text-[11px] font-semibold uppercase text-[#d4322c] hover:text-[#a4221d] cursor-pointer" %>
+  <% end %>
+
+  <%= link_to category_article_url(item), class: "group block cursor-pointer" do %>
+    <h3 class="text-[22px] font-semibold leading-tight text-[#0a0a0a] group-hover:text-[#d4322c]">
+      <%= item.title %>
+    </h3>
+  <% end %>
+
+  <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] font-medium uppercase text-[#6b6b6b]">
+    <% if author_name(category_article_author_user(item)).present? %>
+      <span>
+      <%= author_name(category_article_author_user(item)) %>
+      </span>
+    <% end %>
+    <span><%= l category_article(item).published_at.to_date, format: :long %></span>
+  </div>
+</article>

data/app/views/postnhost/public/templates/swiss-editorial/articles/_search_form.html.erb

@@ -0,0 +1,19 @@
+<div class="mx-auto max-w-4xl text-center">
+  <h1 class="break-words text-[42px] font-extrabold leading-[0.95] sm:text-[56px] md:text-[84px]">
+    <%= 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: "mt-10" do %>
+    <label for="public-blog-search" class="sr-only"><%= t("postnhost.public.search.submit") %></label>
+    <div class="flex items-end gap-4 border-b-2 border-[#0a0a0a] pb-3">
+      <%= text_field_tag :s,
+            public_search_query,
+            id: "public-blog-search",
+            placeholder: t("postnhost.public.search.input_placeholder"),
+            class: "w-full border-0 bg-transparent px-0 text-left text-[20px] text-[#0a0a0a] placeholder:text-[#6b6b6b] focus:outline-none focus:ring-0" %>
+      <button type="submit" class="inline-flex items-center justify-center p-2 text-[#0a0a0a] hover:text-[#d4322c] cursor-pointer" aria-label="<%= t("postnhost.public.search.submit") %>">
+        <%= icon("magnifying-glass", css_class: "size-5 shrink-0") %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/public/templates/swiss-editorial/articles/_suggestions.html.erb

@@ -0,0 +1,42 @@
+<% cache [public_site_revision, @article, @actual_language, "swiss-editorial_suggestions"] do %>
+<% if @article.suggestions_for(language: @actual_language).any? %>
+  <section class="mx-auto max-w-[1440px] px-6 pt-24">
+    <div class="mb-8 flex items-baseline justify-between border-b-2 border-[#0a0a0a] pb-4">
+      <h2 class="text-[40px] font-bold leading-none"><%= t("postnhost.public.blog.read_more") %></h2>
+    </div>
+
+    <div class="grid grid-cols-1 gap-x-6 gap-y-12 md:grid-cols-3">
+      <% @article.suggestions_for(language: @actual_language).each_with_index do |suggestion, index| %>
+        <% cache [public_site_revision, suggestion, article_authors_cache_key(suggestion), "swiss-editorial_suggestion_card"] do %>
+          <article class="flex flex-col gap-3 break-words">
+            <% if suggestion.cover_image? %>
+              <%= link_to public_article_path(suggestion.slug), class: "block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: suggestion.title) do %>
+                <%= render "postnhost/public/templates/swiss-editorial/shared/thumbnail_cover_image", publication: suggestion, index: index %>
+              <% end %>
+            <% end %>
+
+            <% if suggestion.categories.any? %>
+              <%= link_to "— #{localized_category_name(suggestion.categories.first, @current_language)}",
+                    language_category_path(suggestion.categories.first.slug, @current_language),
+                    class: "text-[11px] font-semibold uppercase text-[#d4322c] hover:text-[#a4221d] cursor-pointer" %>
+            <% end %>
+
+            <%= link_to public_article_path(suggestion.slug), class: "group block cursor-pointer" do %>
+              <h3 class="text-[22px] font-semibold leading-tight text-[#0a0a0a] group-hover:text-[#d4322c]">
+                <%= suggestion.title %>
+              </h3>
+            <% end %>
+
+            <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] font-medium uppercase text-[#6b6b6b]">
+              <% if article_authors(suggestion).any? %>
+                <span><%= author_name(article_authors(suggestion).first) %></span>
+              <% end %>
+              <span><%= l suggestion.published_at.to_date, format: :long %></span>
+            </div>
+          </article>
+        <% end %>
+      <% end %>
+    </div>
+  </section>
+<% end %>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/articles/_top_picks.html.erb

@@ -0,0 +1,38 @@
+<% if top_pick_articles.any? && !public_search_page? && !paginated_public_page? %>
+  <aside class="lg:col-span-4 lg:border-l lg:border-[#d9d9d9] lg:pl-8">
+    <div class="mb-8 border-t-2 border-[#d4322c] pt-[18px]">
+      <span class="text-[12px] font-bold uppercase tracking-[0.16em] text-[#d4322c]"><%= t("postnhost.public.blog.top_picks") %></span>
+    </div>
+
+    <% top_pick_articles.each_with_index do |item, index| %>
+      <% cache [public_site_revision, item, article_authors_cache_key(item), "swiss-editorial_top_pick"] do %>
+        <article class="<%= index < top_pick_articles.size - 1 ? "mb-8 border-b border-[#d9d9d9] pb-6" : "mb-8" %>">
+          <% if category_article(item).categories.any? %>
+            <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-[#d4322c]">
+              — <%= localized_category_name(category_article(item).categories.first, @current_language) %>
+            </span>
+          <% end %>
+
+          <%= link_to category_article_url(item), class: "group mt-1 block cursor-pointer" do %>
+            <h3 class="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-[#0a0a0a] group-hover:text-[#d4322c]">
+              <%= item.title %>
+            </h3>
+          <% end %>
+
+          <% if article_excerpt(item).present? %>
+            <p class="mt-2 text-[13px] leading-[1.5] text-[#6b6b6b]">
+              <%= article_excerpt(item) %>
+            </p>
+          <% end %>
+
+          <p class="mt-2 text-[11px] font-medium uppercase tracking-[0.12em] text-[#6b6b6b]">
+            <% 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 %>
+  </aside>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/articles/index.html.erb

@@ -0,0 +1,133 @@
+<%= render "postnhost/public/articles/content_for/index" %>
+
+<% if public_search_endpoint? %>
+  <section class="mx-auto max-w-[1440px] px-6 py-14">
+    <%= render "postnhost/public/templates/swiss-editorial/articles/search_form" %>
+  </section>
+
+  <% if category_articles.any? %>
+    <section class="mx-auto max-w-[1440px] px-6">
+      <div class="mb-8 flex items-baseline justify-between border-b-2 border-[#0a0a0a] pb-4">
+        <h2 class="text-[40px] font-bold leading-none"><%= public_articles_index_heading %></h2>
+      </div>
+
+      <div class="grid grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-3">
+        <%= render partial: "postnhost/public/templates/swiss-editorial/articles/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "swiss-editorial_search_card"] } %>
+      </div>
+
+      <div class="pt-12">
+        <%= render "postnhost/public/templates/swiss-editorial/shared/pagination", pagy: @pagy %>
+      </div>
+    </section>
+  <% else %>
+    <section class="mx-auto max-w-[1440px] px-6 pb-20 text-center">
+      <div class="border-y border-[#d9d9d9] py-14">
+        <h2 class="text-[40px] font-bold leading-tight"><%= t("postnhost.public.blog.no_articles") %></h2>
+        <p class="mt-4 text-[18px] text-[#6b6b6b]"><%= t("postnhost.public.blog.no_articles_description") %></p>
+      </div>
+    </section>
+  <% end %>
+<% elsif category_articles.any? %>
+  <section class="mx-auto max-w-[1440px] px-6 pt-12">
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-center">
+      <div class="lg:col-span-7">
+        <% cache [public_site_revision, category_articles.first, article_authors_cache_key(category_articles.first), "swiss-editorial_hero"] do %>
+          <div class="text-[11px] font-bold uppercase text-[#d4322c]">
+            <% if category_article(category_articles.first).categories.any? %>
+              <%= localized_category_name(category_article(category_articles.first).categories.first, @current_language) %>
+            <% end %>
+          </div>
+          <%= link_to category_article_url(category_articles.first), class: "group block cursor-pointer" do %>
+            <h1 class="mt-2 max-w-4xl break-words text-[42px] font-extrabold leading-[0.95] text-[#0a0a0a] group-hover:text-[#d4322c] sm:text-[58px] md:text-[78px] lg:text-[96px] xl:text-[112px]">
+              <%= category_articles.first.title %>
+            </h1>
+            <% if article_excerpt(category_articles.first).present? %>
+              <p class="mt-6 max-w-2xl text-[21px] leading-8 text-[#1f1f1f]">
+                <%= article_excerpt(category_articles.first) %>
+              </p>
+            <% end %>
+          <% end %>
+          <div class="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 border-y border-[#d9d9d9] py-4 text-[12px] font-medium uppercase text-[#6b6b6b]">
+            <% if author_name(category_article_author_user(category_articles.first)).present? %>
+              <span><%= author_name(category_article_author_user(category_articles.first)) %></span>
+            <% end %>
+            <span><%= l category_article(category_articles.first).published_at.to_date, format: :long %></span>
+          </div>
+        <% end %>
+      </div>
+
+      <% if category_article(category_articles.first).cover_image? %>
+        <div class="border-y border-[#d9d9d9] py-4 lg:col-span-5 lg:self-center">
+          <%= link_to category_article_url(category_articles.first), class: "block cursor-pointer" do %>
+            <%= render "postnhost/public/templates/swiss-editorial/shared/thumbnail_cover_image", publication: category_article(category_articles.first), index: 0 %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <% if category_articles.drop(1).any? %>
+    <section class="mx-auto max-w-[1440px] px-6 pt-12">
+      <div class="mb-8 flex items-baseline justify-between border-b-2 border-[#0a0a0a] pb-4">
+        <h2 class="text-[40px] font-bold leading-none"><%= public_blog_heading %></h2>
+      </div>
+
+      <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
+        <%= render partial: "postnhost/public/templates/swiss-editorial/articles/article_card",
+              collection: category_articles.drop(1).first(3),
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "swiss-editorial_top_story"] },
+              locals: { index_offset: 1 } %>
+      </div>
+    </section>
+  <% end %>
+
+  <% if category_articles.drop(4).any? %>
+    <section class="mx-auto max-w-[1440px] px-6 pt-20">
+      <div class="grid grid-cols-1 gap-10 lg:grid-cols-12">
+        <div class="lg:col-span-8">
+          <div class="mb-0 flex items-baseline justify-between border-b-2 border-[#0a0a0a] pb-4">
+            <h2 class="text-[40px] font-bold leading-none"><%= t("postnhost.public.blog.browse_all_articles") %></h2>
+          </div>
+
+          <% category_articles.drop(4).each_with_index do |item, index| %>
+            <% cache [public_site_revision, item, article_authors_cache_key(item), "swiss-editorial_latest"] do %>
+              <article class="border-t border-[#d9d9d9] py-5">
+                <div class="mb-2 text-[11px] font-bold uppercase text-[#d4322c]">
+                  <% if category_article(item).categories.any? %>
+                    <%= localized_category_name(category_article(item).categories.first, @current_language) %>
+                  <% end %>
+                </div>
+                <%= link_to category_article_url(item), class: "group block cursor-pointer" do %>
+                  <h3 class="break-words text-[22px] font-semibold leading-tight group-hover:text-[#d4322c] sm:text-[28px]"><%= item.title %></h3>
+                <% end %>
+                <p class="mt-2 text-[11px] font-medium uppercase text-[#6b6b6b]">
+                  <% 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>
+
+        <%= render "postnhost/public/templates/swiss-editorial/articles/top_picks" %>
+      </div>
+    </section>
+  <% end %>
+
+  <div class="mx-auto max-w-[1440px] px-6 pt-12">
+    <%= render "postnhost/public/templates/swiss-editorial/shared/pagination", pagy: @pagy %>
+  </div>
+<% else %>
+  <section class="mx-auto max-w-[1440px] px-6 py-24 text-center">
+    <div class="border-y border-[#d9d9d9] py-14">
+      <h1 class="text-[40px] font-bold leading-tight"><%= t("postnhost.public.blog.no_articles") %></h1>
+      <p class="mt-4 text-[18px] text-[#6b6b6b]"><%= t("postnhost.public.blog.no_articles_description") %></p>
+    </div>
+  </section>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/articles/preview.html.erb

@@ -0,0 +1,42 @@
+<%= render "postnhost/public/articles/content_for/preview" %>
+
+<article class="bg-[#fafaf7]">
+  <header class="mx-auto max-w-[1440px] px-6 pb-10 pt-20">
+    <div class="grid grid-cols-1 lg:grid-cols-12">
+      <div class="lg:col-span-8 lg:col-start-3">
+        <% if @article.categories.any? %>
+          <div class="text-[11px] font-bold uppercase text-[#d4322c]">
+            <%= localized_category_name(@article.categories.first, @current_language) %>
+          </div>
+        <% end %>
+        <h1 class="mt-3 break-words text-[42px] font-extrabold leading-[0.95] sm:text-[56px] md:text-[84px]"><%= @content.title %></h1>
+
+        <%= render "postnhost/public/templates/swiss-editorial/shared/article_authors", authors: article_authors(@article), current_language: @current_language %>
+      </div>
+    </div>
+  </header>
+
+  <% if @content.cover_image? %>
+    <div class="mx-auto max-w-[1180px] px-6">
+      <div class="border-y border-[#d9d9d9] py-6">
+        <%= 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: 639px) 100vw, (max-width: 1279px) 90vw, 1200px",
+              class: "h-auto w-full" %>
+      </div>
+    </div>
+  <% end %>
+
+  <div class="mx-auto max-w-[1440px] px-6 pt-10">
+    <div class="grid grid-cols-1 gap-12 lg:grid-cols-12">
+      <div class="prose prose-zinc max-w-none prose-headings:font-semibold prose-headings:leading-tight prose-a:text-[#d4322c] prose-blockquote:border-l-[#d4322c] lg:col-span-7 lg:col-start-3">
+        <%= render_article_content(@content.content) %>
+      </div>
+    </div>
+  </div>
+</article>

data/app/views/postnhost/public/templates/swiss-editorial/articles/show.html.erb

@@ -0,0 +1,100 @@
+<%= render "postnhost/public/articles/content_for/show" %>
+
+<article class="bg-[#fafaf7]">
+  <header class="mx-auto max-w-[1440px] px-6 pb-10 pt-20">
+    <div class="grid grid-cols-1 lg:grid-cols-12">
+      <div class="lg:col-span-8 lg:col-start-3">
+        <% if @article.categories.any? %>
+          <div class="text-[11px] font-bold uppercase text-[#d4322c]">
+            <%= localized_category_name(@article.categories.first, @current_language) %>
+          </div>
+        <% end %>
+        <h1 class="mt-3 break-words text-[42px] font-extrabold leading-[0.95] sm:text-[56px] md:text-[84px]"><%= @content.title %></h1>
+
+        <%= render "postnhost/public/templates/swiss-editorial/shared/article_authors", authors: article_authors(@article), current_language: @current_language, published_at: @article.published_at %>
+      </div>
+    </div>
+  </header>
+
+  <% if @article.cover_image? %>
+    <div class="mx-auto max-w-[1180px] px-6">
+      <div class="border-y border-[#d9d9d9] py-6">
+        <%= render "postnhost/public/templates/swiss-editorial/shared/hero_cover_image", publication: @article, alt_text: @content.title %>
+      </div>
+    </div>
+  <% end %>
+
+  <% if user_signed_in? %>
+    <div class="mx-auto max-w-[1440px] px-6 pt-6 text-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 border border-[#0a0a0a] px-4 py-2 text-[12px] font-semibold uppercase text-[#0a0a0a] hover:bg-[#0a0a0a] hover:text-[#fafaf7] cursor-pointer") do %>
+        <%= icon("edit", css_class: "mr-2 h-4 w-4") %>
+        Edit
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="mx-auto max-w-[1440px] px-6 pt-10">
+    <div class="grid grid-cols-1 gap-12 lg:grid-cols-12">
+      <div class="prose prose-zinc max-w-none prose-headings:font-semibold prose-headings:leading-tight prose-a:text-[#d4322c] prose-blockquote:border-l-[#d4322c] lg:col-span-7 lg:col-start-3">
+        <%= render_article_content(@content.content) %>
+      </div>
+
+      <aside class="lg:col-span-2">
+        <div class="sticky top-36 space-y-8">
+          <% if @article.categories.any? %>
+            <div class="border-t-2 border-[#0a0a0a] pt-4">
+              <div class="space-y-2">
+                <% @article.categories.each do |category| %>
+                  <%= link_to localized_category_name(category, @current_language),
+                        language_category_path(category.slug, @current_language),
+                        class: "block text-[13px] leading-5 text-[#6b6b6b] hover:text-[#d4322c] cursor-pointer" %>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+
+        </div>
+      </aside>
+    </div>
+  </div>
+</article>
+
+<% if @available_variants.count > 1 || (@article.published? && @available_variants.any?) %>
+  <section class="mx-auto max-w-[1440px] px-6 pt-12">
+    <div class="border-y border-[#d9d9d9] py-6">
+      <p class="mb-4 text-[12px] font-bold uppercase text-[#0a0a0a]"><%= t("postnhost.public.blog.available_in_languages") %></p>
+      <div class="flex flex-wrap gap-2">
+        <% if @article.published? %>
+          <%= link_to public_article_path(@article.slug), class: "border px-3 py-2 text-[12px] font-semibold uppercase #{@content == @article ? 'border-[#0a0a0a] bg-[#0a0a0a] text-[#fafaf7]' : 'border-[#d9d9d9] text-[#0a0a0a] hover:border-[#0a0a0a]'} cursor-pointer" do %>
+            <%= @primary_language.name %>
+          <% end %>
+        <% end %>
+        <% @available_variants.each do |variant| %>
+          <%= link_to localized_public_article_path(variant.language.html_lang, @article.slug), class: "border px-3 py-2 text-[12px] font-semibold uppercase #{@content == variant ? 'border-[#0a0a0a] bg-[#0a0a0a] text-[#fafaf7]' : 'border-[#d9d9d9] text-[#0a0a0a] hover:border-[#0a0a0a]'} cursor-pointer" do %>
+            <%= variant.language.name %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </section>
+<% end %>
+
+<%= render "postnhost/public/templates/swiss-editorial/articles/suggestions" %>
+
+<div class="mx-auto max-w-[1440px] px-6 pt-12">
+  <div class="flex flex-col gap-4 border-t border-[#d9d9d9] pt-8 sm:flex-row sm:items-center sm:justify-between">
+    <%= link_to language_root_path(@current_language), class: "inline-flex items-center text-[12px] font-semibold uppercase text-[#6b6b6b] hover:text-[#d4322c] cursor-pointer" do %>
+      <%= icon("arrow-left-long", css_class: "mr-2 h-4 w-4") %>
+      <%= t("postnhost.public.blog.back_to_articles") %>
+    <% end %>
+
+    <% if @article.categories.any? %>
+      <%= link_to language_category_path(@article.categories.first.slug, @current_language), class: "inline-flex items-center text-[12px] font-semibold uppercase text-[#6b6b6b] hover:text-[#d4322c] 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: "ml-2 h-4 w-4") %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/postnhost/public/templates/swiss-editorial/authors/_article_card.html.erb

@@ -0,0 +1,27 @@
+<article class="border-t border-[#d9d9d9] py-5 break-words">
+  <% if category_article(item).cover_image? %>
+    <%= link_to category_article_url(item), class: "mb-4 block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+      <%= render "postnhost/public/templates/swiss-editorial/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+    <% end %>
+  <% end %>
+
+  <div class="mb-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] font-semibold uppercase text-[#6b6b6b]">
+    <% 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: "text-[#d4322c] hover:text-[#a4221d] cursor-pointer" %>
+    <% end %>
+    <span><%= l category_article(item).published_at.to_date, format: :long %></span>
+  </div>
+
+  <%= link_to category_article_url(item), class: "group block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+    <h3 class="text-[22px] font-semibold leading-tight text-[#0a0a0a] group-hover:text-[#d4322c] sm:text-[24px]">
+      <%= item.title %>
+    </h3>
+    <% if article_excerpt(item).present? %>
+      <p class="mt-2 text-[15px] leading-6 text-[#1f1f1f] line-clamp-2">
+        <%= article_excerpt(item) %>
+      </p>
+    <% end %>
+  <% end %>
+</article>

data/app/views/postnhost/public/templates/swiss-editorial/authors/_profile_block.html.erb

@@ -0,0 +1,32 @@
+<section class="grid grid-cols-1 gap-8 md:grid-cols-12">
+  <div class="md:col-span-3">
+    <%= render "postnhost/public/templates/swiss-editorial/shared/author_avatar", user: author, size_class: "aspect-square w-full max-w-[260px]", text_size_class: "text-5xl" %>
+  </div>
+
+  <div class="md:col-span-9 md:pl-8">
+    <h1 class="break-words text-[42px] font-extrabold leading-[0.95] sm:text-[58px] md:text-[96px]"><%= author_name(author) %></h1>
+
+    <% if author.position.present? %>
+      <p class="mt-5 text-[12px] font-semibold uppercase text-[#6b6b6b]"><%= author.position %></p>
+    <% end %>
+
+    <% if author.bio.present? %>
+      <p class="mt-6 max-w-3xl text-[21px] leading-8 text-[#1f1f1f]"><%= author.bio %></p>
+    <% end %>
+
+    <% if author_social_links(author).any? %>
+      <div class="mt-8 flex flex-wrap gap-x-6 gap-y-3 border-t border-[#d9d9d9] pt-6">
+        <% author_social_links(author).each do |social| %>
+          <%= link_to social[:url],
+                target: "_blank",
+                rel: "noopener noreferrer",
+                class: "inline-flex items-center text-[#0a0a0a] hover:text-[#d4322c] cursor-pointer",
+                aria: { label: social[:label] },
+                title: social[:label] do %>
+            <%= icon(social[:icon], css_class: "h-4 w-4") %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/postnhost/public/templates/swiss-editorial/authors/show.html.erb

@@ -0,0 +1,31 @@
+<%= render "postnhost/public/authors/content_for/show" %>
+
+<div class="mx-auto max-w-[1440px] px-6 py-20">
+  <%= render "postnhost/public/templates/swiss-editorial/authors/profile_block", author: @author %>
+</div>
+
+<section class="mx-auto max-w-[1440px] px-6 pt-8">
+  <div class="grid grid-cols-1 gap-10 lg:grid-cols-12">
+    <div class="lg:col-span-8 lg:col-start-3">
+      <div class="mb-0 flex items-baseline justify-between border-b-2 border-[#0a0a0a] pb-4">
+        <h2 class="text-[40px] font-bold leading-none"><%= t("postnhost.public.authors.latest_from_author") %></h2>
+      </div>
+
+      <% if category_articles.any? %>
+        <%= render partial: "postnhost/public/templates/swiss-editorial/authors/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, "author_card"] } %>
+
+        <div class="pt-8">
+          <%= render "postnhost/public/templates/swiss-editorial/shared/pagination", pagy: @pagy %>
+        </div>
+      <% else %>
+        <div class="border-b border-[#d9d9d9] py-14 text-center">
+          <h3 class="text-[32px] font-bold leading-tight"><%= t("postnhost.public.authors.no_articles") %></h3>
+          <p class="mt-3 text-[#6b6b6b]"><%= t("postnhost.public.authors.no_articles_description") %></p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/postnhost/public/templates/swiss-editorial/categories/_article_card.html.erb

@@ -0,0 +1,28 @@
+<article class="flex flex-col gap-3 break-words">
+  <% if category_article(item).cover_image? %>
+    <%= link_to category_article_url(item), class: "block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+      <%= render "postnhost/public/templates/swiss-editorial/shared/thumbnail_cover_image", publication: category_article(item), index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) } %>
+    <% end %>
+  <% end %>
+
+  <% 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: "text-[11px] font-semibold uppercase text-[#d4322c] hover:text-[#a4221d] cursor-pointer" %>
+  <% end %>
+
+  <%= link_to category_article_url(item), class: "group block cursor-pointer" do %>
+    <h3 class="text-[22px] font-semibold leading-tight text-[#0a0a0a] group-hover:text-[#d4322c]">
+      <%= item.title %>
+    </h3>
+  <% end %>
+
+  <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] font-medium uppercase text-[#6b6b6b]">
+    <% if author_name(category_article_author_user(item)).present? %>
+      <span>
+      <%= author_name(category_article_author_user(item)) %>
+      </span>
+    <% end %>
+    <span><%= l category_article(item).published_at.to_date, format: :long %></span>
+  </div>
+</article>