macron-cms 1.0.0

data/app/helpers/macron/cms/content_helper.rb

@@ -0,0 +1,31 @@
+module Macron
+  module Cms
+    module ContentHelper
+      def cms_render_article_contents(article)
+        return "".html_safe if article.nil?
+
+        contents = article.article_contents.includes(:content).order(:sort_order, :id)
+        rendered = contents.map { |ac| cms_render_widget(ac) }
+        safe_join(rendered)
+      end
+
+      def cms_render_widget(article_content)
+        return "".html_safe if article_content.nil? || article_content.content.nil?
+
+        content_name = article_content.content.name.to_s
+        widget_class_name = "Widgets::#{content_name.camelize}Component"
+        widget_class = widget_class_name.safe_constantize
+
+        unless widget_class
+          raise Macron::Cms::MissingWidgetError,
+                "Missing widget component #{widget_class_name} for content type '#{content_name}'."
+        end
+
+        render widget_class.new(
+          payload: article_content.payload,
+          fields: article_content.content.normalized_fields
+        )
+      end
+    end
+  end
+end

data/app/helpers/macron/cms/fields_helper.rb

@@ -0,0 +1,30 @@
+module Macron
+  module Cms
+    module FieldsHelper
+      SUPPORTED_KINDS = %w[string text].freeze
+
+      def cms_render_field(field_def, value: nil, input_name: nil, input_id: nil)
+        field_hash = field_def.stringify_keys
+        fname = field_hash["name"]
+        fkind = field_hash["kind"].to_s.presence || "string"
+
+        input_name ||= "article_content[payload][#{fname}]"
+        input_id ||= "article_content_payload_#{fname}"
+
+        partial_path = "macron/cms/fields/#{fkind}"
+        unless lookup_context.exists?(partial_path, [], true)
+          partial_path = "macron/cms/fields/string"
+        end
+
+        render partial: partial_path, locals: {
+          field: field_hash,
+          field_name: fname,
+          field_kind: fkind,
+          value: value,
+          input_name: input_name,
+          input_id: input_id
+        }
+      end
+    end
+  end
+end

data/app/helpers/macron/cms/seo_helper.rb

@@ -0,0 +1,37 @@
+module Macron
+  module Cms
+    module SeoHelper
+      def cms_seo_meta(record, canonical_url: nil)
+        return if record.nil?
+
+        title = if record.respond_to?(:seo_title)
+          record.seo_title
+        elsif record.respond_to?(:title)
+          record.title
+        end
+
+        description = if record.respond_to?(:seo_description)
+          record.seo_description
+        elsif record.respond_to?(:meta_description)
+          record.meta_description.presence
+        end
+
+        canonical = canonical_url || (respond_to?(:request) && request.respond_to?(:original_url) ? request.original_url : nil)
+
+        content_for(:title, title) if title.present?
+
+        content_for(:head) do
+          tags = []
+          tags << tag.meta(name: "description", content: description) if description.present?
+          tags << tag.link(rel: "canonical", href: canonical) if canonical.present?
+          tags << tag.meta(property: "og:title", content: title) if title.present?
+          tags << tag.meta(property: "og:description", content: description) if description.present?
+          tags << tag.meta(property: "og:url", content: canonical) if canonical.present?
+          safe_join(tags, "\n    ")
+        end
+
+        nil
+      end
+    end
+  end
+end

data/app/jobs/macron/cms/application_job.rb

@@ -0,0 +1,6 @@
+module Macron
+  module Cms
+    class ApplicationJob < ActiveJob::Base
+    end
+  end
+end

data/app/mailers/macron/cms/application_mailer.rb

@@ -0,0 +1,8 @@
+module Macron
+  module Cms
+    class ApplicationMailer < ActionMailer::Base
+      default from: "from@example.com"
+      layout "mailer"
+    end
+  end
+end

data/app/models/macron/cms/application_record.rb

@@ -0,0 +1,7 @@
+module Macron
+  module Cms
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/models/macron/cms/article.rb

@@ -0,0 +1,42 @@
+module Macron
+  module Cms
+    class Article < ApplicationRecord
+      before_validation :derive_name_from_title
+
+      extend FriendlyId
+      friendly_id :name, use: :slugged
+
+      validates :title, presence: true
+      validates :name, presence: true, uniqueness: true
+
+      has_many :article_contents, -> { order(:sort_order) }, class_name: "Macron::Cms::ArticleContent", dependent: :destroy
+      has_many :contents, through: :article_contents
+
+      def seo_title
+        meta_title.presence || title
+      end
+
+      def seo_description
+        meta_description.presence
+      end
+
+      private
+
+      def derive_name_from_title
+        return if name.present? || title.blank?
+
+        base = title.parameterize.presence || "article"
+        candidate = base
+        scope = id.present? ? self.class.where.not(id: id) : self.class.all
+
+        counter = 1
+        while scope.exists?(name: candidate)
+          counter += 1
+          candidate = "#{base}-#{counter}"
+        end
+
+        self.name = candidate
+      end
+    end
+  end
+end

data/app/models/macron/cms/article_content.rb

@@ -0,0 +1,31 @@
+module Macron
+  module Cms
+    class ArticleContent < ApplicationRecord
+      belongs_to :article, class_name: "Macron::Cms::Article"
+      belongs_to :content, class_name: "Macron::Cms::Content"
+
+      before_validation :assign_default_sort_order, on: :create
+
+      validates :sort_order, numericality: { only_integer: true }
+
+      default_scope -> { order(:sort_order, :id) }
+
+      def filter_payload(raw_payload)
+        return {} unless content && raw_payload.respond_to?(:to_h)
+
+        allowed = content.field_names
+        raw_payload.to_h.stringify_keys.slice(*allowed)
+      end
+
+      private
+
+      def assign_default_sort_order
+        return if sort_order.present? && sort_order != 0
+        return unless article
+
+        max_order = article.article_contents.unscoped.where(article_id: article.id).maximum(:sort_order)
+        self.sort_order = max_order ? max_order + 1 : 1
+      end
+    end
+  end
+end

data/app/models/macron/cms/content.rb

@@ -0,0 +1,34 @@
+module Macron
+  module Cms
+    class Content < ApplicationRecord
+      validates :name, presence: true, uniqueness: true
+
+      has_many :article_contents, class_name: "Macron::Cms::ArticleContent", dependent: :destroy
+      has_many :articles, through: :article_contents
+
+      def normalized_fields
+        raw = if fields.is_a?(Array)
+          fields
+        elsif fields.is_a?(Hash) && fields.present?
+          [ fields ]
+        else
+          []
+        end
+
+        raw.filter_map do |f|
+          next unless f.is_a?(Hash)
+
+          fname = (f["name"] || f[:name]).to_s.strip
+          next if fname.blank?
+
+          fkind = (f["kind"] || f[:kind]).presence || "string"
+          f.stringify_keys.merge("name" => fname, "kind" => fkind.to_s)
+        end
+      end
+
+      def field_names
+        normalized_fields.map { |f| f["name"] }
+      end
+    end
+  end
+end

data/app/views/layouts/macron/cms/application.html.erb

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full bg-zinc-50">
+<head>
+  <title><%= content_for(:title) || "Macron CMS" %></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag "macron/cms/application", media: "all" %>
+  <%= yield :head %>
+</head>
+<body class="min-h-screen text-zinc-900 antialiased flex bg-zinc-50">
+  <!-- Sidebar Navigation -->
+  <aside class="sticky top-0 h-screen w-64 shrink-0 bg-white border-r border-zinc-200 flex flex-col justify-between overflow-y-auto z-20">
+    <div>
+      <!-- Brand Logo / Title -->
+      <div class="h-16 flex items-center gap-3 px-6 border-b border-zinc-200">
+        <div class="w-8 h-8 rounded-lg bg-zinc-900 text-white flex items-center justify-center font-bold text-sm tracking-wide shadow-sm">
+          M
+        </div>
+        <div>
+          <span class="font-bold text-zinc-900 text-base tracking-tight">MacronCMS</span>
+          <span class="block text-[10px] font-mono uppercase tracking-wider text-zinc-600 font-semibold">Engine Admin</span>
+        </div>
+      </div>
+
+      <!-- Navigation Links -->
+      <nav class="p-4 space-y-1" aria-label="Sidebar">
+        <% is_dashboard = current_page?(root_path) %>
+        <%= link_to root_path, class: cms_nav_link_classes(is_dashboard) do %>
+          <svg class="w-5 h-5 <%= is_dashboard ? 'text-white' : 'text-zinc-500' %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+          </svg>
+          Dashboard
+        <% end %>
+
+        <% is_articles = controller_name == "articles" %>
+        <%= link_to articles_path, class: cms_nav_link_classes(is_articles) do %>
+          <svg class="w-5 h-5 <%= is_articles ? 'text-white' : 'text-zinc-500' %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+          </svg>
+          Articles
+        <% end %>
+
+        <% is_content_types = controller_name == "content_types" %>
+        <%= link_to content_types_path, class: cms_nav_link_classes(is_content_types) do %>
+          <svg class="w-5 h-5 <%= is_content_types ? 'text-white' : 'text-zinc-500' %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
+          </svg>
+          Content Types
+        <% end %>
+      </nav>
+    </div>
+
+    <!-- Bottom Sidebar (Host App Link) -->
+    <div class="p-4 border-t border-zinc-200">
+      <% host_root = main_app.respond_to?(:root_path) ? main_app.root_path : "/" %>
+      <%= link_to host_root, class: "flex items-center justify-between px-3 py-2 text-sm text-zinc-600 hover:text-zinc-900 rounded-lg hover:bg-zinc-100 transition-colors group" do %>
+        <span class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-zinc-600 group-hover:text-zinc-700" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+          </svg>
+          View Main Site
+        </span>
+        <svg class="w-4 h-4 text-zinc-600 group-hover:text-zinc-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+        </svg>
+      <% end %>
+    </div>
+  </aside>
+
+  <!-- Main Layout Area -->
+  <div class="flex-1 flex flex-col min-w-0 min-h-screen">
+    <!-- Top Header -->
+    <header class="sticky top-0 z-10 h-16 bg-white border-b border-zinc-200 px-6 sm:px-8 flex items-center justify-between shrink-0">
+      <nav class="flex items-center gap-2 text-sm text-zinc-500" aria-label="Breadcrumb">
+        <span>MacronCMS</span>
+        <span>/</span>
+        <%= render "macron/cms/shared/breadcrumbs" %>
+      </nav>
+
+      <div class="flex items-center gap-4">
+        <!-- Admin Badge -->
+        <span class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-800 ring-1 ring-inset ring-zinc-300">
+          Admin
+        </span>
+
+        <!-- User Info & Sign Out -->
+        <div class="flex items-center gap-3 pl-4 border-l border-zinc-200">
+          <% current_admin = cms_current_user %>
+          <span class="text-sm font-medium text-zinc-700">
+            <%= cms_user_display_name(current_admin) %>
+          </span>
+
+          <% if main_app.respond_to?(:destroy_user_session_path) %>
+            <%= button_to "Sign out", main_app.destroy_user_session_path, method: :delete, class: "text-xs font-medium text-zinc-500 hover:text-zinc-900 transition-colors ml-1 cursor-pointer" %>
+          <% end %>
+        </div>
+      </div>
+    </header>
+
+    <!-- Flash Notifications -->
+    <div class="max-w-7xl w-full mx-auto px-6 sm:px-8 pt-6">
+      <% if notice.present? %>
+        <div class="p-4 mb-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm flex items-center gap-3">
+          <svg class="w-5 h-5 text-emerald-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+          <span class="font-medium"><%= notice %></span>
+        </div>
+      <% end %>
+
+      <% if alert.present? %>
+        <div class="p-4 mb-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-sm flex items-center gap-3">
+          <svg class="w-5 h-5 text-rose-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
+          </svg>
+          <span class="font-medium"><%= alert %></span>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Main Content Canvas -->
+    <main class="flex-1 max-w-7xl w-full mx-auto px-6 sm:px-8 pb-12">
+      <%= yield %>
+    </main>
+  </div>
+</body>
+</html>

data/app/views/macron/cms/articles/_form.html.erb

@@ -0,0 +1,65 @@
+<%= form_with(model: article, class: "space-y-6") do |form| %>
+  <% if article.errors.any? %>
+    <div class="rounded-xl bg-rose-50 p-4 border border-rose-200">
+      <div class="flex">
+        <svg class="h-5 w-5 text-rose-500 shrink-0" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+        </svg>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-rose-800">
+            <%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:
+          </h3>
+          <ul role="list" class="mt-2 list-disc pl-5 space-y-1 text-xs text-rose-700">
+            <% article.errors.full_messages.each do |message| %>
+              <li><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <div>
+    <%= form.label :title, class: "block text-sm font-semibold text-zinc-900" %>
+    <div class="mt-1.5">
+      <%= form.text_field :title, required: true, placeholder: "e.g., Getting Started with Macron CMS", class: "block w-full rounded-lg border border-zinc-300 px-3.5 py-2 text-zinc-900 shadow-xs placeholder:text-zinc-400 focus:outline-none focus:border-zinc-900 focus:ring-1 focus:ring-zinc-900 text-sm" %>
+    </div>
+    <p class="mt-1 text-xs text-zinc-500">The public headline of this article.</p>
+  </div>
+
+  <div>
+    <%= form.label :name, "Identifier Name", class: "block text-sm font-semibold text-zinc-900" %>
+    <div class="mt-1.5">
+      <%= form.text_field :name, placeholder: "Leave blank to generate from title", class: "block w-full rounded-lg border border-zinc-300 px-3.5 py-2 text-zinc-900 shadow-xs placeholder:text-zinc-400 focus:outline-none focus:border-zinc-900 focus:ring-1 focus:ring-zinc-900 text-sm font-mono" %>
+    </div>
+    <p class="mt-1 text-xs text-zinc-500">Optional. Unique identifier used by FriendlyId to generate clean URLs (derived from title if left blank).</p>
+  </div>
+
+  <div class="pt-6 border-t border-zinc-200 space-y-4">
+    <div>
+      <h3 class="text-sm font-semibold text-zinc-900">SEO Settings</h3>
+      <p class="text-xs text-zinc-500">Optional search engine and social metadata overrides.</p>
+    </div>
+
+    <div>
+      <%= form.label :meta_title, "Meta Title", class: "block text-sm font-medium text-zinc-700" %>
+      <div class="mt-1.5">
+        <%= form.text_field :meta_title, placeholder: "Defaults to article title if left blank", class: "block w-full rounded-lg border border-zinc-300 px-3.5 py-2 text-zinc-900 shadow-xs placeholder:text-zinc-400 focus:outline-none focus:border-zinc-900 focus:ring-1 focus:ring-zinc-900 text-sm" %>
+      </div>
+      <p class="mt-1 text-xs text-zinc-500">Custom title for &lt;title&gt; and Open Graph cards.</p>
+    </div>
+
+    <div>
+      <%= form.label :meta_description, "Meta Description", class: "block text-sm font-medium text-zinc-700" %>
+      <div class="mt-1.5">
+        <%= form.text_area :meta_description, rows: 3, placeholder: "Brief summary of the article for search results...", class: "block w-full rounded-lg border border-zinc-300 px-3.5 py-2 text-zinc-900 shadow-xs placeholder:text-zinc-400 focus:outline-none focus:border-zinc-900 focus:ring-1 focus:ring-zinc-900 text-sm" %>
+      </div>
+      <p class="mt-1 text-xs text-zinc-500">Recommended length: 150–160 characters.</p>
+    </div>
+  </div>
+
+  <div class="flex items-center gap-4 pt-4 border-t border-zinc-200">
+    <%= form.submit class: "rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-zinc-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 cursor-pointer transition-colors" %>
+    <%= link_to "Cancel", (article.persisted? ? article_path(article) : articles_path), class: "text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors" %>
+  </div>
+<% end %>

data/app/views/macron/cms/articles/_table.html.erb

@@ -0,0 +1,54 @@
+<% if articles.any? %>
+  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y divide-zinc-200 text-left text-sm">
+        <thead class="bg-zinc-50 text-zinc-700 font-semibold text-xs uppercase tracking-wider">
+          <tr>
+            <th scope="col" class="px-6 py-3.5">Title</th>
+            <th scope="col" class="px-6 py-3.5">Created At</th>
+            <th scope="col" class="px-6 py-3.5 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-zinc-200">
+          <% articles.each do |article| %>
+            <tr class="hover:bg-zinc-50/80 transition-colors">
+              <td class="px-6 py-4 font-semibold text-zinc-900 whitespace-nowrap">
+                <%= link_to article.title, article_path(article), class: "hover:underline" %>
+              </td>
+              <td class="px-6 py-4 text-zinc-500 text-xs whitespace-nowrap">
+                <%= article.created_at.strftime("%b %d, %Y") %>
+              </td>
+              <td class="px-6 py-4 text-right text-xs font-medium whitespace-nowrap">
+                <div class="flex items-center justify-end gap-3 whitespace-nowrap">
+                  <% if main_app.respond_to?(:article_path) %>
+                    <%= link_to "Public View", main_app.article_path(article), class: "text-zinc-600 hover:text-zinc-900 hover:underline", target: "_blank", rel: "noopener" %>
+                  <% end %>
+                  <%= link_to "Show", article_path(article), class: "text-zinc-700 hover:text-zinc-900 hover:underline" %>
+                  <%= link_to "Edit", edit_article_path(article), class: "text-zinc-700 hover:text-zinc-900 hover:underline" %>
+                  <% delete_confirm = "Are you sure you want to delete \"#{article.title}\"?" %>
+                  <%= button_to "Delete", article_path(article), method: :delete, form_class: "inline", onclick: "return confirm(#{delete_confirm.to_json});", data: { turbo_confirm: delete_confirm }, class: "text-rose-600 hover:text-rose-800 hover:underline cursor-pointer" %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+<% else %>
+  <div class="rounded-xl border border-dashed border-zinc-300 bg-white p-12 text-center">
+    <svg class="mx-auto h-12 w-12 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+    </svg>
+    <h3 class="mt-2 text-sm font-semibold text-zinc-900">No articles found</h3>
+    <p class="mt-1 text-sm text-zinc-500">Create your first article to begin managing content.</p>
+    <div class="mt-6">
+      <%= link_to new_article_path, class: "inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-3.5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-800 transition-colors" do %>
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        Create First Article
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/macron/cms/articles/edit.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, "Edit Article - Macron CMS" %>
+<% cms_breadcrumb "Articles", articles_path %>
+<% cms_breadcrumb @article.title, article_path(@article) %>
+<% cms_breadcrumb "Edit" %>
+
+<div class="max-w-2xl space-y-6">
+  <div class="border-b border-zinc-200 pb-4">
+    <h1 class="text-2xl font-bold tracking-tight text-zinc-900">Edit Article</h1>
+    <p class="mt-1 text-sm text-zinc-500">Modify article information and update URL identifiers.</p>
+  </div>
+
+  <div class="rounded-xl border border-zinc-200 bg-white p-6 sm:p-8 shadow-xs">
+    <%= render "form", article: @article %>
+  </div>
+</div>

data/app/views/macron/cms/articles/index.html.erb

@@ -0,0 +1,28 @@
+<% content_for :title, "Articles - Macron CMS" %>
+<% cms_breadcrumb "Articles" %>
+
+<div class="space-y-6">
+  <!-- Page Header -->
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-zinc-200 pb-6">
+    <div>
+      <div class="flex items-center gap-3">
+        <h1 class="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl">Articles</h1>
+        <span class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-800 ring-1 ring-inset ring-zinc-300">
+          <%= pluralize(@articles.count, "article") %>
+        </span>
+      </div>
+      <p class="mt-1 text-sm text-zinc-500">Manage all articles registered across the application.</p>
+    </div>
+    <div>
+      <%= link_to new_article_path, class: "inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-800 transition-colors" do %>
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+        </svg>
+        New Article
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Articles Table -->
+  <%= render "macron/cms/articles/table", articles: @articles %>
+</div>

data/app/views/macron/cms/articles/new.html.erb

@@ -0,0 +1,14 @@
+<% content_for :title, "New Article - Macron CMS" %>
+<% cms_breadcrumb "Articles", articles_path %>
+<% cms_breadcrumb "New Article" %>
+
+<div class="max-w-2xl space-y-6">
+  <div class="border-b border-zinc-200 pb-4">
+    <h1 class="text-2xl font-bold tracking-tight text-zinc-900">Create New Article</h1>
+    <p class="mt-1 text-sm text-zinc-500">Enter content details to register a new article within Macron CMS.</p>
+  </div>
+
+  <div class="rounded-xl border border-zinc-200 bg-white p-6 sm:p-8 shadow-xs">
+    <%= render "form", article: @article %>
+  </div>
+</div>