panda_cms 0.5.0

data/app/models/panda_cms/menu_item.rb

@@ -0,0 +1,56 @@
+require "awesome_nested_set"
+
+module PandaCms
+  class MenuItem < ApplicationRecord
+    acts_as_nested_set scope: [:panda_cms_menu_id], counter_cache: :children_count
+
+    self.implicit_order_column = "lft"
+    self.table_name = "panda_cms_menu_items"
+
+    belongs_to :menu, foreign_key: :panda_cms_menu_id, class_name: "PandaCms::Menu", inverse_of: :menu_items, touch: true
+    belongs_to :page, foreign_key: :panda_cms_page_id, class_name: "PandaCms::Page", inverse_of: :menu_items, optional: true
+
+    validates :text, presence: true, uniqueness: {scope: :panda_cms_menu_id, case_sensitive: false}
+    validates :page, presence: true, unless: -> { external_url.present? }
+    validates :external_url, presence: true, unless: -> { page.present? }
+
+    validate :validate_is_actual_link
+
+    #
+    # Returns the resolved link for the menu item.
+    #
+    # If the menu item is associated with a page, it returns the path of the page.
+    # If the menu item is associated with an external URL, it returns the external URL.
+    #
+    # @return [String] Resolved link
+    # @visibility public
+    def resolved_link
+      if page
+        page.path
+      elsif external_url
+        external_url
+      else
+        ""
+      end
+    end
+
+    private
+
+    #
+    # Validate that the link is an actual link or a page
+    #
+    # @return nil
+    # @visibility private
+    def validate_is_actual_link
+      if page.nil? && external_url.nil?
+        errors.add(:page, "must be a valid page or external link, neither are set")
+        errors.add(:external_url, "must be a valid page or external link, neither are set")
+      end
+
+      if !page.nil? && !external_url.nil?
+        errors.add(:page, "must be a valid page or external link, both are set")
+        errors.add(:external_url, "must be a valid page or external link, both are set")
+      end
+    end
+  end
+end

data/app/models/panda_cms/page.rb

@@ -0,0 +1,81 @@
+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(&:generate_auto_menu_items)
+      menus_of_parent.find_each(&:generate_auto_menu_items)
+    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_page_versions_id_seq
+  end
+end

data/app/models/panda_cms/post.rb

@@ -0,0 +1,25 @@
+require "awesome_nested_set"
+
+module PandaCms
+  class Post < ApplicationRecord
+    self.table_name = "panda_cms_posts"
+
+    has_paper_trail versions: {
+      class_name: "PandaCms::PostVersion"
+    }
+
+    belongs_to :user, class_name: "PandaCms::User"
+
+    validates :title, presence: true
+
+    scope :ordered, -> { order(published_at: :desc) }
+
+    def excerpt(length = 100)
+      content.gsub(/<[^>]*>/, "").truncate(length)
+    end
+
+    def path
+      PandaCms.posts[:prefix] + "/" + slug.to_s
+    end
+  end
+end

data/app/models/panda_cms/post_version.rb

@@ -0,0 +1,6 @@
+module PandaCms
+  class PostVersion < Version
+    self.table_name = :panda_cms_post_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,117 @@
+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
+
+    # Import templates from the filesystem into the database
+    # @return [void]
+    def self.load_from_filesystem
+      Rails.root.glob("app/views/layouts/**/*.html.erb").each do |file|
+        # Extract the file path from the Rails root
+        file_path = file.to_s.sub("#{Rails.root}/app/views/", "").sub(".html.erb", "")
+
+        next if file_path == "layouts/application" || file_path == "layouts/mailer"
+
+        # Find or create the template based on the file path
+        find_or_create_by(file_path: file_path) do |t|
+          t.name = file_path.sub("layouts/", "").titleize
+        end
+      end
+    end
+
+    private_class_method :load_from_filesystem
+
+    # Generate missing blocks for all templates
+    # @return [void]
+    def self.generate_missing_blocks
+      # Loop through all templates in app/views/layouts/*.html.erb
+      Dir.glob("app/views/layouts/*.html.erb").each do |file|
+        # TODO: Delete all blocks which aren't in use by a template?
+
+        File.open(file).each_line do |line|
+          # Matches:
+          # PandaCms::RichTextComponent.new(key: :value)
+          # PandaCms::RichTextComponent.new key: :value, key: value
+          line.match(/PandaCms::([a-zA-Z]+)Component\.new[ \(]+([^\)]+)[\)]*/) do |match|
+            puts "- #{match[0]}"
+            # Extract the hash values
+            template_path = file.gsub("app/views/", "").gsub(".html.erb", "")
+            template_name = template_path.gsub("layouts/", "").titleize
+
+            # Create the template if it doesn't exist
+            template = PandaCms::Template.find_or_create_by!(file_path: template_path) do |template|
+              template.name = template_name
+            end
+
+            # Previously used match[1].underscore but this supports more complex database
+            # operations, and is more secure as it'll force the usage of a class
+            block_kind = "PandaCms::#{match[1]}Component".constantize::KIND
+
+            match[2].split(",").map do |keyvar|
+              key, value = keyvar.split(":", 2)
+              next if key != "key"
+
+              block_name = value.to_s.strip.tr(":", "")
+              # Create the block if it doesn't exist
+              # TODO: +/- the output if it's created or removed
+              begin
+                block = PandaCms::Block.find_or_create_by!(template: template, kind: block_kind, key: block_name) do |block|
+                  block.name = block_name.titleize
+                end
+              rescue ActiveRecord::RecordInvalid => e
+                raise "Error creating block '#{block_name}' on template '#{template_name}': #{e.message}"
+              end
+
+              # For the given block, create the block_content for each page using the template
+              template.pages.each do |page|
+                PandaCms::BlockContent.find_or_create_by!(block: block, page: page) do |block_content|
+                  block_content.content = ""
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private_class_method :generate_missing_blocks
+  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,15 @@
+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
+
+  def name
+    "#{firstname} #{lastname}"
+  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: :page_id, optional: true
+    belongs_to :user, class_name: "PandaCms::User", foreign_key: :user_id, optional: true
+    belongs_to :redirect, class_name: "PandaCms::Redirect", foreign_key: :redirect_id, optional: true
+  end
+end

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

@@ -0,0 +1,44 @@
+<%= render "panda_cms/shared/header", html_class: "h-full bg-white" %>
+  <div class="flex h-full" id="panda-container">
+    <div class="absolute top-0 w-full lg:flex lg:fixed lg:inset-y-0 lg:z-50 lg:flex-col lg:w-72">
+      <div class="flex overflow-y-auto flex-col gap-y-5 px-4 pb-4 max-h-16 bg-gradient-to-br lg:max-h-full grow from-dark to-mid" 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 mt-16 ml-0 lg:mt-0 lg:ml-72" id="panda-inner-container" <% if content_for :sidebar %> data-controller="toggle" data-action="keydown.esc->modal#close" tabindex="-1"<% end %>>
+      <section id="panda-main" class="flex flex-row h-full">
+        <div class="flex-1 h-full" id="panda-cms-primary-content">
+          <%= render "panda_cms/admin/shared/breadcrumbs" %>
+          <%= yield %>
+        </div>
+
+        <% if content_for :sidebar %>
+          <div data-toggle-target="toggleable" class="flex hidden absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12"
+            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 mb-4 bg-black">
+                <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-gradient-to-br from-dark to-mid" %>
+  <%= yield %>
+<%= render "panda_cms/shared/footer" %>

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

@@ -0,0 +1,11 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |container| %>
+  <% container.with_heading(text: "Dashboard", level: 1) do |heading| %>
+    <% heading.with_button(action: :add, text: "Add Page", link: new_admin_page_path) %>
+  <% end %>
+
+  <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
+    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Today", value: PandaCms::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
+    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Week", value: PandaCms::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
+    <%= render PandaCms::Admin::StatisticsComponent.new(metric: "Views Last Month", value: PandaCms::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
+  </dl>
+<% end %>

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 bg-black rounded-md shadow-sm hover:bg-black 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 shadow-sm hover:bg-gray-50 ring-mid">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/forms/index.html.erb

@@ -0,0 +1,13 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: "Forms", level: 1) do |heading| %>
+  <% end %>
+
+  <%= render PandaCms::Admin::TableComponent.new(rows: forms) do |table| %>
+    <% table.column("Name") { |form| block_link_to form.name, admin_form_path(form) } %>
+    <% table.column("Status") { |form| render PandaCms::Admin::TagComponent.new(status: :active) } %>
+    <% table.column("Last Submission") do |form| %>
+      <%= "#{time_ago_in_words(form.form_submissions&.last&.created_at)} ago" if form.form_submissions&.last %>
+    <% end %>
+    <% table.column("Completion Path", &:completion_path) %>
+  <% end %>
+<% end %>

data/app/views/panda_cms/admin/forms/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/forms/show.html.erb

@@ -0,0 +1,35 @@
+<%= render PandaCms::Admin::ContainerComponent.new do |component| %>
+  <% component.with_heading(text: form.name, level: 1) do |heading| %>
+  <% end %>
+
+  <div class="overflow-x-auto -mx-4 rounded-lg ring-1 sm:mx-0 sm:rounded-lg ring-mid">
+    <table class="min-w-full divide-y divide-gray-300 border-collapse table-auto">
+      <thead>
+        <tr>
+          <% fields.each do |field, title| %>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900"><%= title %></th>
+          <% end %>
+          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Submitted</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <% submissions.each do |submission| %>
+        <tr class="relative bg-white cursor-pointer hover:bg-gray-50">
+          <% fields.each do |field| %>
+          <td class="py-5 px-3 text-sm text-gray-500">
+            <% if field[0] == "email" || field[0] == "email_address" %>
+              <a href="mailto:<%= submission.data[field[0]] %>" class="border-b border-gray-500 hover:text-gray-900"><%= submission.data[field[0]] %></a>
+            <% else %>
+              <%= simple_format(submission.data[field[0]]) %>
+            <% end %>
+          </td>
+          <% end %>
+          <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
+            <div class="text-gray-500"><%= time_ago_in_words(submission.created_at) %> ago</div>
+          </td>
+        </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

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="p-4 mt-2 mb-4 rounded-md border nested-form-wrapper border-grey-900" 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>