postnhost 0.0.0 → 0.1.1

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

@@ -0,0 +1,88 @@
+<%= render "postnhost/public/categories/content_for/index" %>
+
+<section class="mx-auto max-w-[1440px] px-6 py-14">
+  <div class="grid grid-cols-1 gap-8 lg:grid-cols-12">
+    <div class="lg:col-span-8">
+      <h1 class="break-words text-[42px] font-extrabold leading-[0.95] sm:text-[58px] md:text-[78px] lg:text-[96px]"><%= public_category_heading(@category) %></h1>
+      <% if show_public_category_description?(@category) %>
+        <p class="mt-6 max-w-2xl text-[21px] leading-8 text-[#6b6b6b]"><%= public_category_description(@category) %></p>
+      <% end %>
+    </div>
+  </div>
+</section>
+
+<% if category_articles.any? %>
+  <section class="mx-auto max-w-[1440px] px-6">
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-start">
+      <div class="lg:col-span-8">
+        <% if category_article(category_articles.first).cover_image? %>
+          <div class="border-y border-[#d9d9d9] py-4">
+            <%= 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 %>
+        <%= link_to category_article_url(category_articles.first), class: "group block cursor-pointer" do %>
+          <h2 class="mt-6 break-words text-[38px] font-bold leading-none group-hover:text-[#d4322c] md:text-[56px]"><%= category_articles.first.title %></h2>
+          <% if article_excerpt(category_articles.first).present? %>
+            <p class="mt-5 max-w-2xl text-[21px] leading-8 text-[#1f1f1f]"><%= article_excerpt(category_articles.first) %></p>
+          <% end %>
+        <% end %>
+        <p class="mt-5 text-[11px] font-medium uppercase text-[#6b6b6b]">
+          <% if author_name(category_article_author_user(category_articles.first)).present? %>
+            <%= author_name(category_article_author_user(category_articles.first)) %> ·
+          <% end %>
+          <%= l category_article(category_articles.first).published_at.to_date, format: :long %>
+        </p>
+      </div>
+
+      <% if category_articles.drop(1).any? %>
+        <aside class="lg:col-span-4">
+          <div class="border-t-2 border-[#0a0a0a]">
+            <% category_articles.drop(1).first(4).each do |item| %>
+              <article class="border-b border-[#d9d9d9] py-5">
+                <%= link_to category_article_url(item), class: "group block cursor-pointer" do %>
+                  <h3 class="text-[22px] font-semibold leading-tight group-hover:text-[#d4322c]"><%= 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 %>
+          </div>
+        </aside>
+      <% end %>
+    </div>
+  </section>
+
+  <% if category_articles.drop(5).any? %>
+    <section class="mx-auto max-w-[1440px] px-6 pt-20">
+      <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.browse_all_articles") %></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/categories/article_card",
+              collection: category_articles.drop(5),
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "category_card"] },
+              locals: { index_offset: 5 } %>
+      </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-20 text-center">
+    <div class="border-y border-[#d9d9d9] py-14">
+      <h2 class="text-[40px] font-bold leading-tight"><%= t("postnhost.public.category.no_articles") %></h2>
+      <p class="mt-4 text-[18px] text-[#6b6b6b]"><%= t("postnhost.public.category.no_articles_description") %></p>
+      <%= link_to t("postnhost.public.blog.browse_all_articles"), language_root_path(@current_language), class: "mt-8 inline-flex border border-[#0a0a0a] bg-[#0a0a0a] px-6 py-3 text-[12px] font-semibold uppercase text-[#fafaf7] hover:border-[#d4322c] hover:bg-[#d4322c] cursor-pointer" %>
+    </div>
+  </section>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/shared/_article_authors.html.erb

@@ -0,0 +1,26 @@
+<% if authors.any? || local_assigns[:published_at].present? %>
+  <div class="mt-10 flex flex-col gap-y-4 border-y border-[#d9d9d9] py-5 text-left sm:flex-row sm:items-center sm:justify-between sm:gap-x-6">
+    <% if authors.any? %>
+      <div class="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6 sm:gap-y-4">
+        <% authors.each do |author| %>
+          <div class="flex min-w-0 items-center gap-x-4">
+            <%= render "postnhost/public/templates/swiss-editorial/shared/author_avatar", user: author, size_class: "h-14 w-14", text_size_class: "text-base" %>
+            <div class="min-w-0">
+              <% if author_pages_enabled? %>
+                <%= link_to author_name(author), language_author_path(author.slug, current_language), class: "block text-[15px] font-semibold text-[#0a0a0a] hover:text-[#d4322c] cursor-pointer" %>
+              <% else %>
+                <span class="block text-[15px] font-semibold text-[#0a0a0a]"><%= author_name(author) %></span>
+              <% end %>
+              <p class="text-[13px] text-[#6b6b6b]"><%= article_author_label(author) %></p>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+    <% if local_assigns[:published_at].present? %>
+      <time datetime="<%= local_assigns[:published_at].to_date.iso8601 %>" class="text-[12px] font-medium uppercase text-[#6b6b6b]">
+        <%= l local_assigns[:published_at].to_date, format: :long %>
+      </time>
+    <% end %>
+  </div>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/shared/_author_avatar.html.erb

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

data/app/views/postnhost/public/templates/swiss-editorial/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: 1200,
+        height: 630,
+        class: local_assigns.fetch(:image_class, "h-auto w-full"),
+        srcset: "#{publication.cover_image.thumbnail.url} 520w, #{publication.cover_image.medium.url} 1024w, #{publication.cover_image.url} 1200w",
+        sizes: "(max-width: 639px) 100vw, (max-width: 1279px) 90vw, 1200px" %>
+<% end %>

data/app/views/postnhost/public/templates/swiss-editorial/shared/_pagination.html.erb

@@ -0,0 +1,35 @@
+<% if pagy.pages > 1 %>
+  <nav class="flex items-center justify-center gap-1 border-y border-[#d9d9d9] py-8">
+    <% if pagy.previous %>
+      <%= link_to pagination_url(pagy, pagy.previous), class: "h-10 min-w-10 inline-flex items-center justify-center border border-zinc-300 text-zinc-700 hover:border-zinc-900 hover:text-zinc-900 cursor-pointer", aria: { label: t('postnhost.public.pagination.previous') } do %>
+        <%= icon('chevron-left', css_class: 'h-5 w-5') %>
+      <% end %>
+    <% else %>
+      <span class="h-10 min-w-10 inline-flex items-center justify-center border border-zinc-200 text-zinc-300" 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="h-10 min-w-10 inline-flex items-center justify-center border border-zinc-900 bg-zinc-900 text-stone-50 text-sm" aria-current="page"><%= item %></span>
+        <% else %>
+          <%= link_to item, pagination_url(pagy, item), class: "h-10 min-w-10 inline-flex items-center justify-center border border-zinc-300 text-zinc-700 hover:border-zinc-900 hover:text-zinc-900 text-sm cursor-pointer" %>
+        <% end %>
+      <% elsif item == :gap %>
+        <span class="h-10 min-w-10 inline-flex items-center justify-center text-zinc-400 text-sm">…</span>
+      <% end %>
+    <% end %>
+
+    <% if pagy.next %>
+      <%= link_to pagination_url(pagy, pagy.next), class: "h-10 min-w-10 inline-flex items-center justify-center border border-zinc-300 text-zinc-700 hover:border-zinc-900 hover:text-zinc-900 cursor-pointer", aria: { label: t('postnhost.public.pagination.next') } do %>
+        <%= icon('chevron-right', css_class: 'h-5 w-5') %>
+      <% end %>
+    <% else %>
+      <span class="h-10 min-w-10 inline-flex items-center justify-center border border-zinc-200 text-zinc-300" 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/swiss-editorial/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, "h-auto w-full") %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<%= render "postnhost/public/static_pages/content_for/show" %>
+
+<header class="mx-auto max-w-[1440px] px-6 py-16">
+  <div class="grid grid-cols-1 lg:grid-cols-12">
+    <div class="lg:col-span-8 lg:col-start-3">
+      <h1 class="break-words text-[42px] font-extrabold leading-[0.95] sm:text-[56px] md:text-[84px]"><%= @content.title %></h1>
+    </div>
+  </div>
+</header>
+
+<article class="mx-auto max-w-[1440px] px-6">
+  <div class="grid grid-cols-1 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>
+</article>

data/app/views/postnhost/public/templates/workspace-journal/articles/_article_card.html.erb

@@ -0,0 +1,44 @@
+<article class="group break-words">
+  <% if category_article(item).cover_image? %>
+    <%= link_to category_article_url(item), class: "mb-5 block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+      <%= render "postnhost/public/templates/workspace-journal/shared/thumbnail_cover_image",
+            publication: category_article(item),
+            index: local_assigns.fetch(:index) { item_counter + local_assigns.fetch(:index_offset, 0) },
+            image_class: "aspect-[16/9] w-full rounded-md border border-[#e8e6e1] bg-[#f7f6f3] object-cover" %>
+    <% 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-sm/6 font-medium text-[#85827d] hover:text-[#1f1f1f] cursor-pointer" %>
+  <% end %>
+
+  <%= link_to category_article_url(item), class: "mt-2 block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: item.title) do %>
+    <h2 class="text-xl/7 font-semibold text-[#1f1f1f] group-hover:text-[#5f5d59]">
+      <%= item.title %>
+    </h2>
+
+    <% if article_excerpt(item).present? %>
+      <p class="mt-3 line-clamp-3 text-sm/6 text-[#77736e]">
+        <%= article_excerpt(item) %>
+      </p>
+    <% end %>
+  <% end %>
+
+  <div class="mt-5 flex items-center gap-3">
+    <% if author_name(category_article_author_user(item)).present? %>
+      <%= render "postnhost/public/templates/workspace-journal/shared/author_avatar", user: category_article_author_user(item), size_class: "size-11", text_size_class: "text-sm" %>
+      <div class="min-w-0">
+        <p class="truncate text-sm/6 font-medium text-[#1f1f1f]"><%= author_name(category_article_author_user(item)) %></p>
+        <time datetime="<%= category_article(item).published_at.to_date.iso8601 %>" class="block truncate text-sm/6 text-[#a6a29d]">
+          <%= l category_article(item).published_at.to_date, format: :long %>
+        </time>
+      </div>
+    <% else %>
+      <time datetime="<%= category_article(item).published_at.to_date.iso8601 %>" class="text-sm/6 text-[#85827d]">
+        <%= l category_article(item).published_at.to_date, format: :long %>
+      </time>
+    <% end %>
+  </div>
+</article>

data/app/views/postnhost/public/templates/workspace-journal/articles/_search_form.html.erb

@@ -0,0 +1,19 @@
+<div class="mx-auto max-w-3xl">
+  <h1 class="break-words text-[2rem] font-semibold leading-none text-zinc-950 sm:text-[2.75rem]">
+    <%= 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-8" do %>
+    <label for="public-blog-search" class="sr-only"><%= t("postnhost.public.search.submit") %></label>
+    <div class="flex items-center gap-3 border-b border-zinc-950/20 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-sm/6 text-zinc-950 placeholder:text-zinc-400 focus:outline-none focus:ring-0 sm:text-base/7" %>
+      <button type="submit" class="inline-flex size-10 shrink-0 items-center justify-center rounded-md text-zinc-600 hover:bg-zinc-950/5 hover:text-zinc-950 cursor-pointer" aria-label="<%= t("postnhost.public.search.submit") %>">
+        <%= icon("magnifying-glass", css_class: "size-5") %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/public/templates/workspace-journal/articles/_suggestions.html.erb

@@ -0,0 +1,49 @@
+<% cache [public_site_revision, @article, @actual_language, "workspace-journal_suggestions"] do %>
+<% if @article.suggestions_for(language: @actual_language).any? %>
+  <section class="mx-auto max-w-[1800px] px-6 pt-10 lg:px-10 lg:pt-12">
+    <div class="grid grid-cols-1 gap-8 lg:gap-12 xl:grid-cols-[minmax(0,1fr)_minmax(0,820px)_minmax(0,1fr)]">
+      <div class="lg:mx-auto lg:w-full lg:max-w-[820px] xl:col-start-2 xl:mx-0 xl:max-w-none">
+        <div class="mb-6 border-b border-[#eeeeec] pb-4 lg:mb-8">
+          <h2 class="text-lg/6 font-semibold text-[#1f1f1f]"><%= t("postnhost.public.blog.read_more") %></h2>
+        </div>
+
+        <div class="grid grid-cols-1 gap-x-10 gap-y-10 md:grid-cols-2">
+          <% @article.suggestions_for(language: @actual_language).each_with_index do |suggestion, index| %>
+            <% cache [public_site_revision, suggestion, article_authors_cache_key(suggestion), "workspace-journal_suggestion_card"] do %>
+              <article class="group break-words">
+                <% if suggestion.cover_image? %>
+                  <%= link_to public_article_path(suggestion.slug), class: "mb-5 block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: suggestion.title) do %>
+                    <%= render "postnhost/public/templates/workspace-journal/shared/thumbnail_cover_image",
+                          publication: suggestion,
+                          index: index,
+                          image_class: "aspect-[16/9] w-full rounded-md border border-[#e8e6e1] bg-[#f7f6f3] object-cover" %>
+                  <% 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-sm/6 font-medium text-[#85827d] hover:text-[#1f1f1f] cursor-pointer" %>
+                <% end %>
+
+                <%= link_to public_article_path(suggestion.slug), class: "mt-2 block cursor-pointer", "aria-label": t("postnhost.public.blog.read_article_aria_label", title: suggestion.title) do %>
+                  <h3 class="text-lg/6 font-semibold text-[#1f1f1f] group-hover:text-[#5f5d59]">
+                    <%= suggestion.title %>
+                  </h3>
+                <% end %>
+
+                <p class="mt-3 text-sm/6 text-[#85827d]">
+                  <% if article_authors(suggestion).any? %>
+                    <%= author_name(article_authors(suggestion).first) %> /
+                  <% end %>
+                  <%= l suggestion.published_at.to_date, format: :long %>
+                </p>
+              </article>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </section>
+<% end %>
+<% end %>

data/app/views/postnhost/public/templates/workspace-journal/articles/_top_picks.html.erb

@@ -0,0 +1,34 @@
+<% if top_pick_articles.any? && !public_search_endpoint? && !public_search_page? && !paginated_public_page? %>
+  <section class="mb-12 border-b border-[#eeeeec] pb-8 lg:mb-14 lg:pb-10">
+    <div class="mb-6 lg:mb-8">
+      <h2 class="text-lg/6 font-semibold text-[#1f1f1f]"><%= t("postnhost.public.blog.top_picks") %></h2>
+    </div>
+
+    <div class="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-2">
+      <% top_pick_articles.each_with_index do |item, index| %>
+        <% cache [public_site_revision, item, article_authors_cache_key(item), "workspace-journal_top_pick"] do %>
+          <article class="break-words">
+            <% if category_article(item).categories.any? %>
+              <p class="mb-1 text-sm/6 font-medium text-[#85827d]">
+                <%= localized_category_name(category_article(item).categories.first, @current_language) %>
+              </p>
+            <% end %>
+
+            <%= 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-lg/6 font-semibold text-[#1f1f1f] group-hover:text-[#5f5d59]">
+                <%= item.title %>
+              </h3>
+            <% end %>
+
+            <p class="mt-3 text-sm/6 text-[#85827d]">
+              <% 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>
+  </section>
+<% end %>

data/app/views/postnhost/public/templates/workspace-journal/articles/index.html.erb

@@ -0,0 +1,69 @@
+<%= render "postnhost/public/articles/content_for/index" %>
+
+<% if public_search_endpoint? %>
+  <section class="mx-auto max-w-[1180px] px-4 py-8 sm:px-6 lg:px-8 lg:py-10">
+    <%= render "postnhost/public/templates/workspace-journal/articles/search_form" %>
+  </section>
+
+  <% if category_articles.any? %>
+    <section class="mx-auto max-w-[1800px] px-6 lg:px-10">
+      <div class="grid grid-cols-1 gap-x-12 gap-y-10 md:grid-cols-2 lg:gap-y-14 xl:grid-cols-3">
+        <%= render partial: "postnhost/public/templates/workspace-journal/articles/article_card",
+              collection: category_articles,
+              as: :item,
+              cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "workspace-journal_search_card"] } %>
+      </div>
+
+      <div class="pt-8 lg:pt-10">
+        <%= render "postnhost/public/templates/workspace-journal/shared/pagination", pagy: @pagy %>
+      </div>
+    </section>
+  <% else %>
+    <section class="mx-auto max-w-[1180px] px-4 pb-12 text-center sm:px-6 lg:px-8 lg:pb-16">
+      <div class="border-y border-zinc-950/10 py-10 lg:py-12">
+        <h2 class="text-2xl/8 font-semibold text-zinc-950"><%= t("postnhost.public.blog.no_articles") %></h2>
+        <p class="mt-3 text-sm/6 text-zinc-600"><%= t("postnhost.public.blog.no_articles_description") %></p>
+      </div>
+    </section>
+  <% end %>
+<% elsif category_articles.any? %>
+  <section class="mx-auto max-w-[1800px] px-6 pb-8 pt-10 lg:px-10 lg:pb-10 lg:pt-12">
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-[260px_minmax(0,1fr)] lg:gap-12 xl:grid-cols-[300px_minmax(0,1fr)]">
+      <aside class="lg:sticky lg:top-28 lg:self-start lg:border-r lg:border-[#eeeeec] lg:pb-16 lg:pr-16">
+        <h1 class="break-words text-[2.5rem] font-semibold leading-none text-[#111111] sm:text-[3rem] lg:text-[2.875rem]">
+          <%= public_blog_heading %>
+        </h1>
+
+        <% if show_public_blog_subtitle? %>
+          <p class="mt-4 max-w-[18rem] text-sm/6 text-[#77736e] lg:mt-6">
+            <%= t("postnhost.public.site.blog_subtitle") %>
+          </p>
+        <% end %>
+
+        <%= render "postnhost/public/templates/workspace-journal/shared/category_navigation" %>
+      </aside>
+
+      <div class="min-w-0">
+        <%= render "postnhost/public/templates/workspace-journal/articles/top_picks" %>
+
+        <div class="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-2 lg:gap-y-14">
+          <%= render partial: "postnhost/public/templates/workspace-journal/articles/article_card",
+                collection: category_articles,
+                as: :item,
+                cached: ->(item) { [public_site_revision, item, article_authors_cache_key(item), "workspace-journal_index_card"] } %>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <div class="mx-auto max-w-[1800px] px-6 pt-8 lg:px-10 lg:pt-10">
+    <%= render "postnhost/public/templates/workspace-journal/shared/pagination", pagy: @pagy %>
+  </div>
+<% else %>
+  <section class="mx-auto max-w-[1180px] px-4 py-12 text-center sm:px-6 lg:px-8 lg:py-16">
+    <div class="border-y border-zinc-950/10 py-10 lg:py-12">
+      <h1 class="text-2xl/8 font-semibold text-zinc-950"><%= t("postnhost.public.blog.no_articles") %></h1>
+      <p class="mt-3 text-sm/6 text-zinc-600"><%= t("postnhost.public.blog.no_articles_description") %></p>
+    </div>
+  </section>
+<% end %>

data/app/views/postnhost/public/templates/workspace-journal/articles/preview.html.erb

@@ -0,0 +1,113 @@
+<%= render "postnhost/public/articles/content_for/preview" %>
+
+<div class="border-b border-amber-200 bg-amber-50">
+  <div class="mx-auto flex max-w-[1800px] items-center justify-center px-6 py-2 lg:px-10">
+    <span class="text-sm/6 font-medium text-amber-900">Preview Mode</span>
+  </div>
+</div>
+
+<article class="mx-auto max-w-[1800px] px-6 pt-8 lg:px-10 lg:pt-14">
+  <div class="grid grid-cols-1 gap-8 lg:gap-12 xl:grid-cols-[minmax(0,1fr)_minmax(0,820px)_minmax(0,1fr)]">
+    <aside class="max-w-[260px] xl:sticky xl:top-28 xl:col-start-1 xl:row-start-1 xl:self-start xl:pb-16">
+      <%= link_to language_root_path(@current_language), class: "inline-flex items-center gap-2 text-sm/6 text-[#85827d] hover:text-[#1f1f1f] cursor-pointer" do %>
+        <%= icon("arrow-left-long", css_class: "size-5") %>
+        <%= t("postnhost.public.blog.back_to_articles") %>
+      <% end %>
+
+      <% if @article.categories.any? %>
+        <div class="mt-5 h-px w-24 bg-[#e4e2de] lg:mt-9"></div>
+        <nav class="mt-4 flex flex-col items-start gap-3 lg:mt-7" aria-label="<%= t("postnhost.public.footer.explore_categories") %>">
+          <% @article.categories.each do |category| %>
+            <%= link_to localized_category_name(category, @current_language),
+                  language_category_path(category.slug, @current_language),
+                  class: "text-sm/6 text-[#77736e] hover:text-[#1f1f1f] cursor-pointer" %>
+          <% end %>
+        </nav>
+      <% end %>
+    </aside>
+
+    <div class="min-w-0 lg:mx-auto lg:w-full lg:max-w-[820px] xl:col-start-2 xl:row-start-1 xl:mx-0 xl:max-w-none">
+      <header>
+        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm/6 text-[#85827d]">
+          <% if @article.categories.any? %>
+            <%= link_to localized_category_name(@article.categories.first, @current_language),
+                  language_category_path(@article.categories.first.slug, @current_language),
+                  class: "underline decoration-[#c7c3bc] underline-offset-4 hover:text-[#1f1f1f] cursor-pointer" %>
+          <% end %>
+        </div>
+
+        <h1 class="mt-5 break-words text-[2.5rem] font-semibold leading-[0.98] text-[#111111] sm:text-[3.5rem]">
+          <%= @content.title %>
+        </h1>
+
+        <%= render "postnhost/public/templates/workspace-journal/shared/article_authors", authors: article_authors(@article), current_language: @current_language %>
+      </header>
+
+      <% if @content.cover_image? %>
+        <div class="mt-8 lg:mt-12">
+          <%= image_tag @content.cover_image.url,
+                loading: "eager",
+                fetchpriority: "high",
+                alt: @content.cover_image_alt.presence || @content.title,
+                width: 1200,
+                height: 675,
+                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: "aspect-[16/9] w-full rounded-md border border-[#e8e6e1] bg-[#f7f6f3] object-cover" %>
+        </div>
+      <% end %>
+
+      <div class="pt-8 lg:pt-12">
+        <div class="prose prose-zinc max-w-none prose-headings:font-semibold prose-headings:leading-tight prose-headings:text-[#111111] prose-p:font-serif prose-p:text-lg prose-p:leading-8 prose-p:text-[#2f2f2f] prose-a:text-[#1f1f1f] prose-a:underline prose-a:decoration-[#c7c3bc] prose-a:underline-offset-4 prose-blockquote:border-l-[#d8d5cf] prose-blockquote:text-[#5f5d59]">
+          <%= render_article_content(@content.content) %>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
+
+<% if @available_variants.count > 1 || (@article.published? && @available_variants.any?) %>
+  <section class="mx-auto max-w-[1800px] px-6 pt-8 lg:px-10 lg:pt-10">
+    <div class="grid grid-cols-1 gap-8 lg:gap-12 xl:grid-cols-[minmax(0,1fr)_minmax(0,820px)_minmax(0,1fr)]">
+      <div class="lg:mx-auto lg:w-full lg:max-w-[820px] xl:col-start-2 xl:mx-0 xl:max-w-none">
+        <div class="border-y border-[#eeeeec] py-5">
+          <p class="mb-3 text-sm/6 font-semibold text-[#1f1f1f]"><%= 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: "rounded-md bg-[#f7f6f3] px-3 py-2 text-sm/6 font-medium text-[#5f5d59] hover:bg-[#eeeeec] hover:text-[#1f1f1f] cursor-pointer" do %>
+                <%= @article.language&.name %>
+              <% end %>
+            <% else %>
+              <span class="rounded-md bg-[#1f1f1f] px-3 py-2 text-sm/6 font-medium 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: "rounded-md bg-[#f7f6f3] px-3 py-2 text-sm/6 font-medium text-[#5f5d59] hover:bg-[#eeeeec] hover:text-[#1f1f1f] cursor-pointer" do %>
+                  <%= variant.language.name %>
+                <% end %>
+              <% else %>
+                <span class="rounded-md bg-[#f7f6f3] px-3 py-2 text-sm/6 font-medium text-[#5f5d59]">
+                  <%= variant.language.name %>
+                </span>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+<% end %>
+
+<div class="mx-auto max-w-[1800px] px-6 pt-8 lg:px-10 lg:pt-10">
+  <div class="grid grid-cols-1 gap-8 lg:gap-12 xl:grid-cols-[minmax(0,1fr)_minmax(0,820px)_minmax(0,1fr)]">
+    <div class="flex items-center justify-center border-t border-[#eeeeec] pt-5 lg:mx-auto lg:w-full lg:max-w-[820px] lg:pt-6 xl:col-start-2 xl:mx-0 xl:max-w-none">
+      <%= link_to edit_article_path(@article), class: "inline-flex items-center gap-2 text-sm/6 text-[#85827d] hover:text-[#1f1f1f] cursor-pointer" do %>
+        <%= icon("arrow-left-long", css_class: "size-4") %>
+        Back to Editor
+      <% end %>
+    </div>
+  </div>
+</div>