postnhost 0.0.0 → 0.1.1

data/app/views/postnhost/shared/_ai_translation_modal.html.erb

@@ -0,0 +1,85 @@
+<!-- AI Translation Modal -->
+<dialog data-dialog-target="dialog" class="bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+  <div class="p-8">
+    <!-- Modal Header -->
+    <div class="flex items-center justify-between mb-8">
+      <div>
+        <h2 class="text-2xl font-semibold text-gray-900">Translate with AI</h2>
+        <% if postnhost_openai_api_key_configured? %>
+          <p class="text-gray-600 mt-1">Select languages to translate "<%= subject_title %>" using AI.</p>
+        <% else %>
+          <p class="text-gray-600 mt-1">AI translation requires an OpenAI API key.</p>
+        <% end %>
+      </div>
+      <button data-action="dialog#close" class="text-gray-400 hover:text-gray-600 transition-colors cursor-pointer">
+        <%= icon("close", css_class: "w-6 h-6") %>
+      </button>
+    </div>
+
+    <% unless postnhost_openai_api_key_configured? %>
+      <div class="rounded-xl border border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-900 space-y-3">
+        <p class="font-medium">openai_api_key is not configured</p>
+        <p class="text-yellow-950">
+          Set <code class="rounded bg-yellow-100 px-1.5 py-0.5 text-xs font-mono text-yellow-950">config.openai_api_key</code>
+          in <code class="rounded bg-yellow-100 px-1.5 py-0.5 text-xs font-mono text-yellow-950">config/initializers/postnhost.rb</code>,
+          or add <code class="rounded bg-yellow-100 px-1.5 py-0.5 text-xs font-mono text-yellow-950">postnhost.openai_access_token</code>
+          to your Rails credentials (<code class="rounded bg-yellow-100 px-1.5 py-0.5 text-xs font-mono text-yellow-950">bin/rails credentials:edit</code>).
+          See the <a href="https://github.com/postnhost/postnhost/blob/main/README.md" target="_blank" class="text-yellow-950 hover:text-yellow-700">README</a> for details.
+        </p>
+      </div>
+      <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200 mt-8">
+        <button type="button" data-action="dialog#close" class="<%= button_classes(variant: :secondary) %> cursor-pointer">
+          Close
+        </button>
+      </div>
+    <% else %>
+    <%= form_with url: form_url, method: :post, data: { turbo: false } do |f| %>
+      <!-- Language Selection -->
+      <div class="mb-8">
+        <div class="flex items-center justify-between mb-6">
+          <h3 class="text-lg font-medium text-gray-900">Available Languages</h3>
+          <div class="flex space-x-3">
+            <button type="button" data-action="click->ai-translation#selectAll" class="text-sm text-gray-600 hover:text-gray-900 transition-colors cursor-pointer">Select All</button>
+            <span class="text-gray-300">|</span>
+            <button type="button" data-action="click->ai-translation#selectNone" class="text-sm text-gray-600 hover:text-gray-900 transition-colors cursor-pointer">Select None</button>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-80 overflow-y-auto">
+          <% available_languages.each do |language| %>
+            <label class="flex items-center p-4 border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-gray-300 cursor-pointer transition-all duration-200">
+              <input
+                type="checkbox"
+                name="language_ids[]"
+                value="<%= language.id %>"
+                data-ai-translation-target="checkbox"
+                data-action="change->ai-translation#toggleCheckbox"
+                class="h-4 w-4 text-gray-900 border-gray-300 rounded focus:ring-gray-900 focus:ring-2"
+              >
+              <div class="ml-4">
+                <div class="text-sm font-medium text-gray-900"><%= language.name %></div>
+                <div class="text-xs text-gray-500"><%= language.html_lang %></div>
+              </div>
+            </label>
+          <% end %>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
+        <button type="button" data-action="dialog#close" class="<%= button_classes(variant: :secondary) %>">
+          Cancel
+        </button>
+        <button
+          type="submit"
+          data-ai-translation-target="submitButton"
+          disabled
+          class="<%= button_classes(disabled: true) %>"
+        >
+          Select languages to translate
+        </button>
+      </div>
+    <% end %>
+    <% end %>
+  </div>
+</dialog>

data/app/views/postnhost/shared/_flash_messages.html.erb

@@ -0,0 +1,27 @@
+<% flash.each do |type, message| %>
+  <% unless message.nil? %>
+    <div data-controller="flash-message" data-flash-message-target="message" class="<%= flash_class(type) %> px-3 py-2 rounded-lg font-medium relative text-sm max-w-md mx-auto" role="alert" data-turbo-temporary>
+      <div class="flex items-center">
+        <div class="flex-shrink-0">
+          <% if type.to_s == 'notice' %>
+            <%= icon("info-circle", css_class: "h-4 w-4 text-blue-600") %>
+          <% elsif type.to_s == 'success' %>
+            <%= icon("check-circle", css_class: "h-4 w-4 text-green-600") %>
+          <% elsif type.to_s == 'error' %>
+            <%= icon("alert-circle", css_class: "h-4 w-4 text-red-600") %>
+          <% elsif type.to_s == 'alert' %>
+            <%= icon("warning", css_class: "h-4 w-4 text-yellow-600") %>
+          <% end %>
+        </div>
+        <div class="ml-2 flex-1">
+          <%= message.html_safe %>
+        </div>
+      </div>
+
+      <!-- Close Button -->
+      <button type="button" data-action="click->flash-message#close" class="absolute top-2.5 right-3 text-gray-400 hover:text-gray-600 transition-colors duration-200 cursor-pointer">
+        <%= icon("close", css_class: "w-3 h-3") %>
+      </button>
+    </div>
+  <% end %>
+<% end %>

data/app/views/postnhost/shared/_form_errors.html.erb

@@ -0,0 +1,22 @@
+<% if resource.errors.any? %>
+  <div id="error_explanation" class="bg-red-50 border border-red-200 text-red-800 px-5 py-4 rounded-2xl mb-6 font-medium" data-turbo-temporary>
+    <div class="flex items-start">
+      <div class="flex-shrink-0">
+        <%= icon("alert-circle", css_class: "h-5 w-5 text-red-600 mt-0.5") %>
+      </div>
+      <div class="ml-3 flex-1">
+        <h3 class="text-sm font-semibold text-red-800 mb-2">
+          <%= pluralize(resource.errors.count, "error") %> prohibited this from being saved:
+        </h3>
+        <ul class="text-sm space-y-1">
+          <% resource.errors.full_messages.each do |message| %>
+            <li class="flex items-start">
+              <span class="inline-block w-1.5 h-1.5 bg-red-400 rounded-full mt-2 mr-2 flex-shrink-0"></span>
+              <%= message %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/postnhost/shared/_seo_meta_tags.html.erb

@@ -0,0 +1,70 @@
+<!-- Basic Meta Tags -->
+<title data-turbo-track="reload"><%= page_title %></title>
+<% if render_description_meta_tags? %>
+  <meta name="description" content="<%= meta_description_content %>" data-turbo-track="reload">
+<% end %>
+<meta name="robots" content="<%= robots_content %>" data-turbo-track="reload">
+
+<!-- Canonical URL -->
+<link rel="canonical" href="<%= canonical_url %>" data-turbo-track="reload">
+
+<!-- Open Graph tags -->
+<meta property="og:title" content="<%= og_title %>" data-turbo-track="reload">
+<% if render_description_meta_tags? %>
+  <meta property="og:description" content="<%= meta_description_content %>" data-turbo-track="reload">
+<% end %>
+<meta property="og:url" content="<%= page_url %>" data-turbo-track="reload">
+<meta property="og:type" content="<%= @article ? 'article' : 'website' %>" data-turbo-track="reload">
+<meta property="og:site_name" content="<%= schema_site_name %>" data-turbo-track="reload">
+<% if article_cover_for_seo(@article) %>
+  <meta property="og:image" content="<%= article_cover_for_seo(@article).cover_image.url %>" data-turbo-track="reload">
+  <meta property="og:image:secure_url" content="<%= article_cover_for_seo(@article).cover_image.url %>" data-turbo-track="reload">
+  <meta property="og:image:width" content="1200" data-turbo-track="reload">
+  <meta property="og:image:height" content="630" data-turbo-track="reload">
+  <% if article_cover_for_seo(@article).cover_image_alt.present? %>
+    <meta property="og:image:alt" content="<%= article_cover_for_seo(@article).cover_image_alt %>" data-turbo-track="reload">
+  <% end %>
+<% else %>
+  <meta property="og:image" content="<%= setting_og_image_absolute_url %>" data-turbo-track="reload">
+  <meta property="og:image:secure_url" content="<%= setting_og_image_absolute_url %>" data-turbo-track="reload">
+  <meta property="og:image:width" content="1200" data-turbo-track="reload">
+  <meta property="og:image:height" content="630" data-turbo-track="reload">
+  <meta property="og:image:alt" content="postnhost - Modern blogging platform" data-turbo-track="reload">
+<% end %>
+
+<!-- Twitter Card data -->
+<meta name="twitter:card" content="summary_large_image" data-turbo-track="reload">
+<meta name="twitter:title" content="<%= page_title %>" data-turbo-track="reload">
+<% if render_description_meta_tags? %>
+  <meta name="twitter:description" content="<%= meta_description_content %>" data-turbo-track="reload">
+<% end %>
+<meta name="twitter:url" content="<%= page_url %>" data-turbo-track="reload">
+<% if article_cover_for_seo(@article) %>
+  <meta name="twitter:image" content="<%= article_cover_for_seo(@article).cover_image.url %>" data-turbo-track="reload">
+  <% if article_cover_for_seo(@article).cover_image_alt.present? %>
+    <meta name="twitter:image:alt" content="<%= article_cover_for_seo(@article).cover_image_alt %>" data-turbo-track="reload">
+  <% end %>
+<% else %>
+  <meta name="twitter:image" content="<%= setting_og_image_absolute_url %>" data-turbo-track="reload">
+  <meta name="twitter:image:alt" content="postnhost - Modern blogging platform" data-turbo-track="reload">
+<% end %>
+
+<!-- Article specific meta tags -->
+<% if @article %>
+  <% if @article.is_a?(Postnhost::Snapshot::Article) %>
+    <meta property="article:published_time" content="<%= @article.published_at.iso8601 %>" data-turbo-track="reload">
+  <% end %>
+  <meta property="article:modified_time" content="<%= @article.updated_at.iso8601 %>" data-turbo-track="reload">
+  <% article_authors(@article).each do |author| %>
+    <% if author_pages_enabled? %>
+      <meta property="article:author" content="<%= language_author_url(author.slug, @current_language) %>" data-turbo-track="reload">
+    <% end %>
+    <meta name="author" content="<%= author_name(author) %>" data-turbo-track="reload">
+  <% end %>
+  <% if @article.categories.any? %>
+    <meta property="article:section" content="<%= @article.categories.first.name %>" data-turbo-track="reload">
+  <% end %>
+<% end %>
+
+<!-- Hreflang tags -->
+<%= yield :hreflang if content_for?(:hreflang) %>

data/app/views/postnhost/shared/_structured_data.html.erb

@@ -0,0 +1,5 @@
+<!-- Structured Data -->
+<%= structured_data_script(
+  structured_data_graph(article: @article, author: @author, category: @category),
+  id: "main-schema"
+) %>

data/app/views/postnhost/shared/articles/_action_buttons.html.erb

@@ -0,0 +1,87 @@
+<div class="order-2 md:order-3 hidden md:block w-full md:w-1/5 bg-white border border-gray-200 p-4 md:p-6 border-t-0 md:sticky md:top-0 md:self-start md:min-h-screen"
+     data-editor-mobile-sidebars-target="<%= local_assigns[:mobile_target] %>">
+  <div class="md:hidden flex items-center justify-between mb-4">
+    <h3 class="text-sm font-semibold text-gray-900">Actions</h3>
+    <button type="button"
+            class="text-gray-500 hover:text-gray-700 cursor-pointer"
+            data-action="click->editor-mobile-sidebars#closeActions">
+      <%= icon("close", css_class: "w-4 h-4") %>
+    </button>
+  </div>
+  <div class="space-y-4">
+    <button
+      type="button"
+      data-auto-save-target="saveButton"
+      data-action="click->auto-save#save"
+      disabled
+      class="w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium cursor-pointer opacity-50">
+      Saved
+    </button>
+
+    <% if is_variant %>
+      <%= link_to edit_article_path(article), class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+        <div class="flex items-center justify-center space-x-2">
+          <%= icon("arrow-left", css_class: "w-4 h-4") %>
+          <span>Back to Original</span>
+        </div>
+      <% end %>
+
+      <div class="border-b border-gray-100 pb-4">
+        <%= link_to article_variants_path(article), data: { turbo_prefetch: false }, class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+          <div class="flex items-center justify-center space-x-2">
+            <%= icon("language", css_class: "w-4 h-4") %>
+            <span>All Translations</span>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="border-b border-gray-100 pb-4">
+        <%= link_to article_variants_path(article), data: { turbo_prefetch: false }, class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block" do %>
+          <div class="flex items-center justify-center space-x-2">
+            <%= icon("language", css_class: "w-4 h-4") %>
+            <span>Translations</span>
+            <% if article.article_variants.any? %>
+              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-800">
+                <%= article.article_variants_count %>
+              </span>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render "postnhost/shared/articles/post_actions",
+        resource: resource,
+        resource_type: resource_type,
+        article: article,
+        form: local_assigns[:form] %>
+
+
+    <div class="pt-4">
+      <% if is_variant %>
+        <%= render "postnhost/shared/elements/button_link",
+          text: "Delete",
+          url: article_variant_path(article, resource),
+          variant: :danger,
+          icon: "trash",
+          extra_class: "w-full",
+          data: {
+            turbo_method: :delete,
+            turbo_confirm: "Are you sure you want to delete this variant? This action cannot be undone."
+          } %>
+      <% else %>
+        <%= render "postnhost/shared/elements/button_link",
+          text: "Delete",
+          url: resource,
+          variant: :danger,
+          icon: "trash",
+          extra_class: "w-full",
+          data: {
+            turbo_method: :delete,
+            turbo_confirm: "Are you sure you want to delete this article? This action cannot be undone."
+          } %>
+      <% end %>
+    </div>
+
+  </div>
+</div>

data/app/views/postnhost/shared/articles/_cover_image_preview.html.erb

@@ -0,0 +1,30 @@
+<div class="px-6 py-4 border-b border-gray-100 <%= 'hidden' unless article.cover_image? %>"
+     data-controller="collapsible-sidebar"
+     data-collapsible-sidebar-storage-key-value="article-cover-image-preview-<%= article.id %>">
+  <div data-collapsible-sidebar-target="section" data-section-id="cover-image-preview">
+    <button type="button"
+            class="inline-flex items-center text-left mb-2 cursor-pointer"
+            data-role="section-toggle"
+            data-action="click->collapsible-sidebar#toggle"
+            data-collapsible-sidebar-id-param="cover-image-preview"
+            aria-expanded="true"
+            aria-controls="cover-image-preview-section-<%= article.id %>">
+      <span class="text-sm font-medium text-gray-900">Cover Image (ogimage)</span>
+      <span data-role="section-icon" class="ml-1 inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+        <%= icon("chevron-down", css_class: "w-4 h-4") %>
+      </span>
+    </button>
+
+    <!-- Preview with Alt Text -->
+    <div class="space-y-2" data-role="section-content" id="cover-image-preview-section-<%= article.id %>">
+      <div class="relative">
+        <%= image_tag(article.cover_image? ? article.cover_image.url : '',
+              alt: article.cover_image_alt,
+              width: 1200,
+              height: 630,
+              class: "w-full object-cover") %>
+      </div>
+      <%= form.text_field :cover_image_alt, value: article.cover_image_alt.presence, class: "#{'hidden' unless article.cover_image_alt.presence} w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs bg-gray-100 cursor-not-allowed", disabled: true, readonly: true %>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/shared/articles/_editor_column.html.erb

@@ -0,0 +1,15 @@
+<div class="order-3 md:order-2 w-full md:w-3/5 bg-white border-t border-b border-gray-200 border-t-0">
+  <% if is_variant %>
+    <%= render 'postnhost/shared/articles/cover_image_preview', form: form, article: article %>
+  <% else %>
+    <%= render 'postnhost/articles/cover_image_upload', form: form, article: article %>
+  <% end %>
+
+  <%= render 'postnhost/shared/articles/title_field', form: form, placeholder: placeholder %>
+
+  <%= render 'postnhost/shared/articles/tiptap_editor',
+      form: form,
+      content: content,
+      resource_type: 'article',
+      resource_id: article.id %>
+</div>

data/app/views/postnhost/shared/articles/_editor_column_preview.html.erb

@@ -0,0 +1,33 @@
+<div class="w-full md:w-3/5 bg-white border-t border-b border-gray-200 border-t-0">
+  <!-- Cover Image (Read-only) -->
+  <div class="px-6 py-4 border-b border-gray-100 <%= 'hidden' unless article.cover_image? %>">
+    <div class="space-y-2">
+      <div class="relative">
+        <%= image_tag(article.cover_image? ? article.cover_image.url : '',
+              alt: article.cover_image_alt,
+              width: 1200,
+              height: 630,
+              class: "w-full object-cover") %>
+      </div>
+      <% if article.cover_image_alt.present? %>
+        <div class="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs bg-gray-50 text-gray-700">
+          <%= article.cover_image_alt %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Title Field (Read-only) -->
+  <div class="px-6 py-6 border-b border-gray-100">
+    <div class="w-full text-4xl font-bold text-gray-900 p-0 bg-transparent leading-tight">
+      <%= article.title %>
+    </div>
+  </div>
+
+  <!-- Content (Read-only) -->
+  <div class="min-h-[400px] p-4">
+    <div class="prose max-w-none">
+      <%= render_article_content(content) %>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/shared/articles/_error_messages.html.erb

@@ -0,0 +1,23 @@
+<% if resource.errors.any? %>
+  <div class="mb-6 bg-red-50 border border-red-200 rounded-2xl p-6">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
+          <%= icon("alert-circle", css_class: "w-4 h-4 text-red-600") %>
+        </div>
+      </div>
+      <div class="ml-4">
+        <h3 class="text-sm font-semibold text-red-800">
+          <%= pluralize(resource.errors.count, "error") %> prevented this <%= resource_type %> from being saved:
+        </h3>
+        <div class="mt-2 text-sm text-red-700">
+          <ul class="list-disc pl-5 space-y-1">
+            <% resource.errors.full_messages.each do |message| %>
+              <li><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>