panda_cms 0.2.0

data/app/models/panda_cms/page.rb

@@ -0,0 +1,86 @@
+require "awesome_nested_set"
+
+module PandaCms
+  class Page < ApplicationRecord
+    acts_as_nested_set counter_cache: :children_count
+    self.table_name = "panda_cms_pages"
+    self.implicit_order_column = "lft"
+
+    has_paper_trail versions: {
+      class_name: "PandaCms::PageVersion"
+    }
+
+    after_save :after_save
+
+    belongs_to :template, foreign_key: :panda_cms_template_id, class_name: "PandaCms::Template", inverse_of: :pages, optional: false, counter_cache: :pages_count
+    has_many :blocks, through: :template
+    has_many :block_contents, foreign_key: :panda_cms_page_id, class_name: "PandaCms::BlockContent", inverse_of: :page
+    has_many :menu_items, foreign_key: :panda_cms_page_id, class_name: "PandaCms::MenuItem", inverse_of: :page
+    has_many :menus, through: :menu_items
+    has_many :menus_of_parent, through: :parent, source: :menus
+    has_one :page_menu, foreign_key: :panda_cms_menu_id, class_name: "PandaCms::Menu", inverse_of: :start_page
+
+    validates :title, presence: true
+    validates :path,
+      presence: true,
+      uniqueness: true,
+      format: {with: /\A\/.*\z/, message: "must start with a forward slash"}
+    validates :parent, presence: true, unless: -> { path == "/" }
+    validates :panda_cms_template_id, presence: true
+
+    scope :ordered, -> { order(:lft) }
+
+    private
+
+    #
+    # After save callbacks
+    #
+    # @return nil
+    # @visibility private
+    #
+    def after_save
+      generate_content_blocks
+      update_existing_menu_items
+      update_auto_menus
+    end
+
+    def generate_content_blocks
+      template_block_ids = template.blocks.ids
+      page_existing_block_ids = block_contents.map { |bc| bc.block.id }
+      required_block_ids = template_block_ids - page_existing_block_ids
+
+      if required_block_ids.count > 0
+        required_block_ids.each do |block_id|
+          PandaCms::BlockContent.find_or_create_by!(page: self, panda_cms_block_id: block_id, content: "")
+        end
+      end
+    end
+
+    #
+    # Update text of existing menu items if the title differs
+    #
+    # @return nil
+    # @todo Only run this if the page title has changed
+    # @visibility private
+    #
+    def update_existing_menu_items
+      menu_items.where.not(text: title).update_all(text: title)
+    end
+
+    #
+    # Update any menus which include this page or its parent as a menu item
+    #
+    # @return nil
+    # @visibility private
+    #
+    def update_auto_menus
+      menus.find_each do |menu|
+        menu.generate_auto_menu_items
+      end
+
+      menus_of_parent.find_each do |menu|
+        menu.generate_auto_menu_items
+      end
+    end
+  end
+end

data/app/models/panda_cms/page_version.rb

@@ -0,0 +1,6 @@
+module PandaCms
+  class PageVersion < Version
+    self.table_name = :panda_cms_page_versions
+    self.sequence_name = :panda_cms_post_versions_id_seq
+  end
+end

data/app/models/panda_cms/redirect.rb

@@ -0,0 +1,9 @@
+module PandaCms
+  class Redirect < ApplicationRecord
+    belongs_to :origin_page, class_name: "PandaCms::Page", foreign_key: :origin_panda_cms_page_id
+    belongs_to :destination_page, class_name: "PandaCms::Page", foreign_key: :destination_panda_cms_page_id
+
+    validates :status_code, presence: true
+    validates :visits, presence: true
+  end
+end

data/app/models/panda_cms/template.rb

@@ -0,0 +1,44 @@
+module PandaCms
+  # Represents a template in the Panda CMS application.
+  class Template < ApplicationRecord
+    self.table_name = "panda_cms_templates"
+
+    # Enables versioning for the Template model using the `has_paper_trail` gem.
+    has_paper_trail versions: {
+      class_name: "PandaCms::TemplateVersion"
+    }
+
+    # Associations
+    has_many :pages, class_name: "PandaCms::Page", dependent: :restrict_with_error, inverse_of: :template, foreign_key: :panda_cms_template_id
+    has_many :blocks, class_name: "PandaCms::Block", dependent: :restrict_with_error, inverse_of: :template, foreign_key: :panda_cms_template_id
+    has_many :block_contents, through: :blocks
+
+    # Validations
+    validates :name, presence: true, uniqueness: true
+
+    validates :file_path,
+      presence: true,
+      uniqueness: true,
+      format: {with: /\Alayouts\/.*\z/, message: "must be a valid layout file path"}
+
+    validate :validate_template_file_exists
+
+    # Scopes
+    scope :ordered, -> { order(:sort_order) }
+    scope :available, -> { where("max_uses IS NULL OR (pages_count < max_uses)") }
+
+    private
+
+    # Custom validation method to check if the file_path is a valid layout file path
+    # NB: Currently only supports .html.erb templates, may want to expand in future?
+    # @return [void]
+    def validate_template_file_exists
+      # Remove any directory traversal attempts from the file_path
+      safe_file_path = file_path.to_s.gsub("../", "")
+      # Check if the file_path is an ERB template that exists in app/views
+      template_path = Rails.root.join("app", "views", "#{safe_file_path}.html.erb")
+      # NB: file? checks for files and excludes directories (unlike exist?)
+      errors.add(:file_path, "must be an existing layout file path") unless File.file?(template_path)
+    end
+  end
+end

data/app/models/panda_cms/template_version.rb

@@ -0,0 +1,6 @@
+module PandaCms
+  class TemplateVersion < Version
+    self.table_name = :panda_cms_template_versions
+    self.sequence_name = :panda_cms_template_versions_id_seq
+  end
+end

data/app/models/panda_cms/user.rb

@@ -0,0 +1,11 @@
+module PandaCms
+  class User < ApplicationRecord
+    validates :firstname, presence: true
+    validates :lastname, presence: true
+    validates :email, presence: true, uniqueness: {case_sensitive: true}
+  end
+
+  def is_admin?
+    admin
+  end
+end

data/app/models/panda_cms/version.rb

@@ -0,0 +1,6 @@
+module PandaCms
+  class Version < ApplicationRecord
+    include PaperTrail::VersionConcern
+    self.abstract_class = true
+  end
+end

data/app/models/panda_cms/visit.rb

@@ -0,0 +1,7 @@
+module PandaCms
+  class Visit < ApplicationRecord
+    belongs_to :page, class_name: "PandaCms::Page", foreign_key: :panda_cms_page_id, optional: true
+    belongs_to :user, class_name: "PandaCms::User", foreign_key: :panda_cms_user_id, optional: true
+    belongs_to :redirect, class_name: "PandaCms::Redirect", foreign_key: :panda_cms_redirect_id, optional: true
+  end
+end

data/app/views/layouts/panda_cms/application.html.erb

@@ -0,0 +1,68 @@
+<%= render "panda_cms/shared/header", html_class: "h-full bg-gray-50" %>
+  <div class="flex h-full" id="panda-container">
+    <div class="lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col top-0 -m-t-2 w-full absolute" data-controller="panda-cms-menu">
+      <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-panda-cms-dark px-4 pb-4 lg:max-h-full max-h-16" data-panda-cms-menu-target="menu" data-transition-enter="transition-all ease-in-out duration-300" data-transition-enter-from="m-h-16" data-transition-enter-to="max-h-full" data-transition-leave="transition-all ease-in-out duration-300" data-transition-leave-from="max-h-full" data-transition-leave-to="max-h-16">
+        <%= render partial: "panda_cms/admin/shared/sidebar" %>
+      </div>
+    </div>
+
+    <div class="flex flex-col flex-1 ml-0 lg:ml-72 mt-16 lg:mt-0" id="panda-inner-container" <% if content_for :sidebar %> data-controller="toggle" data-action="keydown.esc->modal#close" tabindex="-1"<% end %>>
+      <header class="w-full" id="panda-action-bar">
+        <div class="flex relative z-10 flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm">
+          <div class="flex flex-1 justify-between px-4 sm:px-6">
+            <div class="flex flex-1">
+              <form class="flex w-full md:ml-0" action="#" method="GET">
+                <label for="search-field" class="sr-only">Search</label>
+                <div class="relative w-full text-gray-400 focus-within:text-gray-600">
+                  <div class="flex absolute inset-y-0 left-0 items-center pointer-events-none">
+                    <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
+                    </svg>
+                  </div>
+                  <input name="search-field" autocomplete="off" id="search-field" class="py-2 pr-3 pl-8 w-full h-full text-gray-900 border-0 sm:text-sm focus:ring-0 focus:outline-none focus:placeholder:text-gray-400" placeholder="Search" type="search">
+                </div>
+                <% if content_for :sidebar %>
+                  <a href="#" id="slideover-toggle" data-action="click->toggle#toggle touch->toggle#toggle" class="block relative right-0 py-4 pr-0 mt-1 w-32 font-semibold text-right text-gray-500 hover:text-gray-700 min-w-32 px-auto"><i class="fa-light fa-gear"></i> <%= yield :sidebar_title %></a>
+                <% end %>
+              </form>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <%= render "panda_cms/admin/shared/breadcrumbs" %>
+
+      <section id="panda-main" class="flex flex-row h-full">
+        <div class="flex-1 h-full" id="panda-cms-primary-content">
+          <%= yield %>
+        </div>
+
+        <% if content_for :sidebar %>
+          <div data-toggle-target="toggleable" class="flex hidden flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12 absolute right-0"
+            data-transition-enter="transform transition ease-in-out duration-500"
+            data-transition-enter-from="translate-x-full"
+            data-transition-enter-to="translate-x-0"
+            data-transition-leave="transform transition ease-in-out duration-500"
+            data-transition-leave-from="translate-x-full"
+            data-transition-leave-to="translate-x-0"
+            id="slideover">
+            <div class="overflow-y-auto flex-1 h-0">
+              <div class="py-3 px-4 bg-panda-cms-dark">
+                <div class="flex justify-between items-center">
+                  <h2 class="text-base font-semibold leading-6 text-white" id="slideover-title"><i class="mr-2 fa-light fa-gear"></i> <%= yield :sidebar_title %> </h2>
+                  <a href="#" data-action="click->toggle#toggle touch->toggle#toggle"><i class="font-bold text-white fa-regular fa-xmark right"></i></a>
+                </div>
+              </div>
+              <div class="flex flex-col flex-1 justify-between">
+                <div class="px-4 space-y-6">
+                  <%= yield :sidebar %>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </section>
+
+    </div>
+  </div>
+<%= render "panda_cms/shared/footer" %>

data/app/views/layouts/panda_cms/public.html.erb

@@ -0,0 +1,3 @@
+<%= render "panda_cms/shared/header", html_class: "h-full bg-panda-cms-dark" %>
+  <%= yield %>
+<%= render "panda_cms/shared/footer" %>

data/app/views/panda_cms/admin/dashboard/show.html.erb

@@ -0,0 +1,8 @@
+<div data-controller='toggle' class="m-2">
+  <div data-action='click->toggle#toggle touch->toggle#toggle' class="bg-gray-900 text-white p-6">
+    What is the question? (Click to play with toggle!)
+  </div>
+  <div data-toggle-target='toggleable' class="m-4 hidden">
+    <p>This is the answer</p>
+  </div>
+</div>

data/app/views/panda_cms/admin/files/index.html.erb

@@ -0,0 +1,124 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Files", level: 1) %>
+
+  <% component.with_slideover(title: "File Details") do %>
+    <div class="pt-4 pb-16 space-y-6">
+      <div>
+        <div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
+          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover">
+        </div>
+        <div class="flex justify-between items-start mt-4">
+          <div>
+            <h2 class="text-lg font-medium text-gray-900"><span class="sr-only">Details for </span>IMG_4985.HEIC</h2>
+            <p class="text-sm font-medium text-gray-500">3.9 MB</p>
+          </div>
+          <button type="button" class="flex relative justify-center items-center ml-4 w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
+            <span class="absolute -inset-1.5"></span>
+            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+            </svg>
+            <span class="sr-only">Favorite</span>
+          </button>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Information</h3>
+        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Uploaded by</dt>
+            <dd class="text-gray-900 whitespace-nowrap">Marie Culver</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Created</dt>
+            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Last modified</dt>
+            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Dimensions</dt>
+            <dd class="text-gray-900 whitespace-nowrap">4032 x 3024</dd>
+          </div>
+          <div class="flex justify-between py-3 text-sm font-medium">
+            <dt class="text-gray-500">Resolution</dt>
+            <dd class="text-gray-900 whitespace-nowrap">72 x 72</dd>
+          </div>
+        </dl>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Description</h3>
+        <div class="flex justify-between items-center mt-2">
+          <p class="text-sm italic text-gray-500">Add a description to this image.</p>
+          <button type="button" class="flex relative justify-center items-center w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
+            <span class="absolute -inset-1.5"></span>
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
+            </svg>
+            <span class="sr-only">Add description</span>
+          </button>
+        </div>
+      </div>
+      <div>
+        <h3 class="font-medium text-gray-900">Shared with</h3>
+        <ul role="list" class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+          <li class="flex justify-between items-center py-3">
+            <div class="flex items-center">
+              <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=1024&h=1024&q=80" alt="" class="w-8 h-8 rounded-full">
+              <p class="ml-4 text-sm font-medium text-gray-900">Aimee Douglas</p>
+            </div>
+            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Aimee Douglas</span></button>
+          </li>
+          <li class="flex justify-between items-center py-3">
+            <div class="flex items-center">
+              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="w-8 h-8 rounded-full">
+              <p class="ml-4 text-sm font-medium text-gray-900">Andrea McMillan</p>
+            </div>
+            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Andrea McMillan</span></button>
+          </li>
+
+          <li class="flex justify-between items-center py-2">
+            <button type="button" class="flex items-center p-1 -ml-1 bg-white rounded-md focus:ring-2 focus:outline-none group focus:ring-panda-dark">
+              <span class="flex justify-center items-center w-8 h-8 text-gray-400 rounded-full border-2 border-gray-300 border-dashed">
+                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+                </svg>
+              </span>
+              <span class="ml-4 text-sm font-medium text-panda-dark group-hover:text-panda-dark">Share</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="flex gap-x-3">
+        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-white rounded-md shadow-sm bg-panda-cms-dark hover:bg-panda-cms-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark">Download</button>
+        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-gray-900 bg-white rounded-md ring-1 ring-inset ring-gray-300 shadow-sm hover:bg-gray-50">Delete</button>
+      </div>
+    </div>
+  <% end %>
+
+  <% component.with_tab_bar do %>
+    <%= component.with_tab(name: "Recently Viewed", active: true) %>
+    <%= component.with_tab(name: "Recently Added") %>
+    <%= component.with_tab(name: "Favourited") %>
+  <% end %>
+
+  <section>
+    <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
+    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <li class="relative">
+        <!-- Current: "ring-2 ring-panda-dark ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-panda-dark focus-within:ring-offset-2 focus-within:ring-offset-gray-100" -->
+        <div class="block overflow-hidden w-full bg-gray-100 rounded-lg ring-2 ring-offset-2 ring-panda-dark aspect-w-10 aspect-h-7 group">
+          <!-- Current: "", Default: "group-hover:opacity-75" -->
+          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover pointer-events-none">
+          <button type="button" class="absolute inset-0 focus:outline-none">
+            <span class="sr-only">View details for IMG_4985.HEIC</span>
+          </button>
+        </div>
+        <p class="block mt-2 text-sm font-medium text-gray-900 pointer-events-none truncate">IMG_4985.HEIC</p>
+        <p class="block text-sm font-medium text-gray-500 pointer-events-none">3.9 MB</p>
+      </li>
+
+      <!-- More files... -->
+    </ul>
+  </section>
+<% end %>

data/app/views/panda_cms/admin/files/show.html.erb

@@ -0,0 +1,2 @@
+<h1>Admin::Files#show</h1>
+<p>Find me in app/views/panda_cms/admin/files/show.html.erb</p>

data/app/views/panda_cms/admin/menus/_form.html.erb

@@ -0,0 +1,21 @@
+  <%= panda_cms_form_with model: menu, url: admin_menus_path, method: :post do |form| %>
+    <%= form.text_field :name %>
+
+    <div data-controller="nested-form" nested_form_wrapper_selector_value=".nested-form-wrapper">
+      <template data-nested-form-target="template">
+        <%= form.fields_for :menu_items, PandaCms::MenuItem.new, child_index: 'NEW_RECORD' do |item| %>
+          <%= render "menu_item_fields", form: item %>
+        <% end %>
+      </template>
+
+      <%= form.fields_for :menu_items do |item| %>
+        <%= render "menu_item_fields", form: item %>
+      <% end %>
+
+      <div data-nested-form-target="target"></div>
+
+      <%= render PandaCms::Admin::ButtonComponent.new(text: "Add Menu Item", action: :add, data: {action: "nested-form#add"}, size: :small) %>
+    </div>
+
+    <%= form.submit "Create" %>
+  <% end %>

data/app/views/panda_cms/admin/menus/_menu_item_fields.html.erb

@@ -0,0 +1,7 @@
+<div class="nested-form-wrapper border mt-2 mb-4 rounded-md border-grey-900 p-4" data-new-record="<%= form.object.new_record? %>">
+  <%= form.text_field :text %>
+  <%= form.text_field :external_url %>
+  <%= form.collection_select :panda_cms_page_id, PandaCms::Page.all, :id, :title, include_blank: true %>
+  <%= render PandaCms::Admin::ButtonComponent.new(text: "Remove Menu Item", action: :delete, data: {action: "nested-form#remove"}, size: :small) %>
+  <%= form.hidden_field :_destroy %>
+</div>

data/app/views/panda_cms/admin/menus/edit.html.erb

@@ -0,0 +1,58 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Edit Menu", level: 1) %>
+
+  <%= panda_cms_form_with model: @menu, url: admin_menu_path, method: :put do |form| %>
+    <%= form.text_field :name %>
+
+    <% if @menu.kind == "static" %>
+    <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".nested-form-wrapper">
+      <template data-nested-form-target="template">
+        <%= form.fields_for :menu_items, PandaCms::MenuItem.new, child_index: "NEW_RECORD" do |item| %>
+          <%= render "menu_item_fields", form: item %>
+        <% end %>
+      </template>
+
+      <% if @menu.menu_items.count > 0 %>
+        <%= form.fields_for :menu_items, @menu.menu_items.sort_by(&:lft) do |item| %>
+          <%= render "menu_item_fields", form: item %>
+        <% end %>
+      <% end %>
+
+      <div data-nested-form-target="target"></div>
+
+      <%= render PandaCms::Admin::ButtonComponent.new(text: "Add Menu Item", action: :add, data: {action: "nested-form#add"}, size: :small) %>
+    </div>
+    <% else %>
+    <table class="-mx-3 min-w-full divide-y divide-gray-300">
+      <thead>
+        <tr>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Text</th>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Page</th>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">External Link</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% @menu.menu_items.root.self_and_descendants.each do |menu_item| %>
+        <tr>
+          <td class="py-5 pr-3 pl-3 text-sm whitespace-nowrap">
+            <div class="flex items-center">
+              <div class="<%= table_indent(menu_item) %>">
+                <div class="font-medium text-gray-900"><%= menu_item.text %></div>
+              </div>
+            </div>
+          </td>
+          <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+            <div class="text-gray-900"><%= menu_item.page.title %></div>
+          </td>
+          <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+            <div class="text-gray-900"><%= menu_item.external_url %></div>
+          </td>
+        </tr>
+        <% end %>
+      </tbody>
+    </table>
+    <% end %>
+
+    <%= form.button %>
+  <% end %>
+<% end %>

data/app/views/panda_cms/admin/menus/index.html.erb

@@ -0,0 +1,32 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Menus", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Menu", link: new_admin_menu_path) %>
+  <% end %>
+
+  <table class="-mx-3 min-w-full divide-y divide-gray-300">
+    <thead>
+      <tr>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Name</th>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Kind</th>
+        <th scope="col" class="relative py-3.5 pr-4 pl-3 sm:pr-0">
+          <span class="sr-only">Edit</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+      <% @menus.each do |menu| %>
+      <tr>
+        <td class="py-5 px-3 whitespace-nowrap font-medium text-gray-900">
+          <%= menu.name %>
+        </td>
+        <td class="py-5 px-3 whitespace-nowrap text-gray-900">
+          <%= menu.kind.titleize %>
+        </td>
+        <td class="py-5 pr-4 pl-3 text-sm font-medium text-right whitespace-nowrap">
+          <%= link_to "Edit", edit_admin_menu_path(menu), class: "text-panda-dark hover:text-indigo-900" %>
+        </td>
+      </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

data/app/views/panda_cms/admin/menus/new.html.erb

@@ -0,0 +1,5 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Add Menu", level: 1) do |heading| %>
+  <% end %>
+  <%= render "form", menu: @menu %>
+<% end %>

data/app/views/panda_cms/admin/pages/edit.html.erb

@@ -0,0 +1,35 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "#{page.title}", level: 1) do |heading| %>
+    <%# heading.with_button(action: :secondary, text: "Save Draft", link: "#", icon: "clipboard-check") %>
+    <%# heading.with_button(action: :save, text: "Publish Page", link: "#") %>
+  <% end %>
+
+  <% component.with_slideover(title: "Page Details") do %>
+    <%= form_with model: page, url: admin_page_path, method: :put do |f| %>
+      <div class="col-span-3 mb-2 sm:col-span-2">
+        <%= f.label :title, class: "mt-2 block text-sm font-medium leading-6 text-gray-900" %>
+        <div class="flex mt-2 rounded-md shadow-sm">
+          <%= f.text_field :title, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6 hover:pointer" %>
+        </div>
+
+        <%= f.label :template, class: "mt-2 block text-sm font-medium leading-6 text-gray-900" %>
+        <div class="flex mt-2 rounded-md shadow-sm">
+          <%= f.text_field :template, value: template.name,  readonly: true, class: "read-only:bg-gray-100 block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6 hover:pointer" %>
+        </div>
+
+        <%= f.submit "Save", class: "mt-4 inline-flex justify-center rounded-md bg-panda-cms-dark px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-panda-cms-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark" %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <a class="text-sm text-gray-400 block -mt-4 mb-2" target="_blank" href="<%= @page.path %>"><%= @page.path %> <i class="fa-solid fa-arrow-up-right-from-square ml-2"></i></a>
+
+  <iframe id="editablePageFrame" src="<%= page.path %>?embed_id=<%= page.id %>" class="w-full h-full m-0 p-0 border border-slate-200"></iframe>
+
+  <script src="/panda-cms-assets/editable.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const editable = new EditableController("<%= page.id %>", document.getElementById("editablePageFrame"));
+    });
+  </script>
+<% end %>

data/app/views/panda_cms/admin/pages/index.html.erb

@@ -0,0 +1,46 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Pages", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+  <% end %>
+
+  <table class="-mx-3 min-w-full divide-y divide-gray-300">
+    <thead>
+      <tr>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Name</th>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Status</th>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Last Updated</th>
+        <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Checks</th>
+        <th scope="col" class="relative py-3.5 pr-4 pl-3 sm:pr-0">
+          <span class="sr-only">Edit</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+      <% root_page.self_and_descendants.each do |page| %>
+      <tr>
+        <td class="py-5 pr-3 pl-3 text-sm whitespace-nowrap">
+          <div class="flex items-center">
+            <div class="<%= table_indent(page) %>">
+              <div class="font-medium text-gray-900"><%= page.title %></div>
+              <div class="mt-1 text-gray-500"><%= link_to page.path, page.path, target: "_blank" %></div>
+            </div>
+          </div>
+        </td>
+        <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+          <span class="inline-flex items-center py-1 px-2 text-xs font-medium text-green-700 bg-green-50 rounded-md ring-1 ring-inset ring-green-600/20">Active</span>
+        </td>
+        <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+          <div class="text-gray-900"><%#= page.versions.last.whodunnit %></div>
+          <div class="mt-1 text-gray-500"><%= time_ago_in_words(page.updated_at) %> ago</div>
+        </td>
+        <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+          <div class="text-gray-900"><i class="text-gray-500 fa fa-fw fa-paint-brush"></i> <%= page.template.name %></div>
+        </td>
+        <td class="py-5 pr-4 pl-3 text-sm font-medium text-right whitespace-nowrap">
+          <%= link_to "Edit", edit_admin_page_path(page), class: "text-panda-dark hover:text-indigo-900" %>
+        </td>
+      </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>

data/app/views/panda_cms/admin/pages/new.html.erb

@@ -0,0 +1,16 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
+  <% end %>
+
+  <%= panda_cms_form_with model: page, url: admin_pages_path, method: :post do |f| %>
+  <% options = nested_set_options(PandaCms::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
+    <div data-controller="text-field-update">
+      <input type="hidden" value="<%= PandaCms::Current.root %>" data-text-field-update-target="existing_root">
+      <%= f.select :parent_id, options, {}, { "data-text-field-update-target": "input_select", "data-action": "change->text-field-update#setPrePath" } %>
+      <%= f.text_field :title, { data: { "text-field-update-target": "input_text", action: "focusout->text-field-update#generatePath" } } %>
+      <%= f.text_field :path, { data: { prefix: PandaCms::Current.root, "text-field-update-target": "output_text" } } %>
+      <%= f.collection_select :panda_cms_template_id, PandaCms::Template.available, :id, :name %>
+      <%= f.button %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/panda_cms/admin/pages/show.html.erb

@@ -0,0 +1 @@
+Show page