lookbook 2.0.0.beta.3 → 2.0.0.beta.5

data/app/controllers/lookbook/application_controller.rb

@@ -4,13 +4,20 @@ module Lookbook
 
     protect_from_forgery with: :exception
 
+    layout "lookbook/application"
+
     helper Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
     helper Lookbook::ApplicationHelper
     helper Lookbook::UiElementsHelper
 
-    before_action :generate_theme_overrides
+    before_action :assign_theme_overrides
     before_action :assign_instance_vars
 
+    rescue_from ActionController::RoutingError do |err|
+      raise Lookbook::RoutingError, err.message, original: err
+    end
+    rescue_from StandardError, with: :handle_error
+
     def self.controller_path
       "lookbook"
     end
@@ -24,9 +31,13 @@ module Lookbook
       end
     end
 
+    def not_found
+      raise_not_found
+    end
+
     protected
 
-    def generate_theme_overrides
+    def assign_theme_overrides
       @theme_overrides ||= Engine.theme.to_css
     end
 
@@ -37,23 +48,36 @@ module Lookbook
       @config = Lookbook.config
       @engine = Lookbook.engine
       @embed = !!params[:lookbook_embed]
+      @blank_slate = Engine.pages.none? && Engine.previews.none?
     end
 
-    def render_in_layout(path, layout: nil, **locals)
-      @error = locals[:error]
-      render path, layout: layout.presence || (params[:lookbook_embed] ? "lookbook/basic" : "lookbook/application"), locals: locals
+    def raise_not_found(message = "Page not found")
+      raise Lookbook::RoutingError, message
     end
 
-    def prettify_error(exception)
-      error_params = {}
-      if exception.is_a?(ViewComponent::PreviewTemplateError)
-        error_params = {
-          file_path: @preview&.file_path,
-          line_number: 0,
-          source_code: @target&.source
-        }
+    def handle_error(err)
+      @error = err.is_a?(Lookbook::Error) ? err : Lookbook::Error.new(original: err)
+      @status_code = get_status_code(err)
+
+      view = (@status_code == :not_found) ? "not_found" : "default"
+      layout = current_layout || "lookbook/skeleton"
+
+      render "lookbook/errors/#{view}", layout: layout, status: @status_code
+    end
+
+    def current_layout
+      self.class.send(:_layout)
+    end
+
+    private
+
+    def get_status_code(err)
+      if err.respond_to?(:status)
+        err.status
+      else
+        status_map = ActionDispatch::ExceptionWrapper.rescue_responses
+        status_map.fetch(err.class.name, :internal_server_error)
       end
-      Lookbook::Error.new(exception, **error_params)
     end
   end
 end

data/app/controllers/lookbook/embeds_controller.rb

@@ -57,18 +57,17 @@ module Lookbook
         end
       end
 
-      show_404 layout: "lookbook/skeleton"
+      raise_not_found("Preview not found")
     end
 
     def show
       @embed = true
-
       unless @target
-        @target = @scenario_choices.first || @preview.default_scenario
+        @target = @scenario_choices.first || @preview&.default_scenario
         if @target
           redirect_to lookbook_embed_path(@target.path, req_params)
         else
-          show_404(layout: "lookbook/skeleton") unless @target
+          raise_not_found("Preview not found")
         end
       end
     end

data/app/controllers/lookbook/inspector_controller.rb

@@ -4,23 +4,15 @@ module Lookbook
     include WithPanelsConcern
     include WithPreviewControllerConcern
 
-    layout "lookbook/application"
-
     def self.controller_path
       "lookbook/inspector"
     end
 
     def show
-      if @target
-        begin
-          @main_panels = main_panels
-          @drawer_panels = drawer_panels
-        rescue => exception
-          render_in_layout "lookbook/error", layout: "lookbook/application", error: prettify_error(exception)
-        end
-      else
-        show_404
-      end
+      raise_not_found("Preview not found") unless @target
+
+      @main_panels = main_panels
+      @drawer_panels = drawer_panels
     end
   end
 end

data/app/controllers/lookbook/pages_controller.rb

@@ -1,6 +1,5 @@
 module Lookbook
   class PagesController < ApplicationController
-    layout "lookbook/application"
     helper_method :page_controller
 
     def self.controller_path
@@ -9,40 +8,29 @@ module Lookbook
 
     def index
       landing = Engine.pages.find(&:landing?) || Engine.pages.first
-      if landing.present?
-        redirect_to lookbook_page_path(landing.path)
-      else
-        show_404
-      end
+      raise_not_found("Page not found") unless landing.present?
+
+      redirect_to lookbook_page_path(landing.path)
     end
 
     def show
       @page = @pages.find_by_path(params[:path])
-      if @page
-        @next_page = @pages.next(@page)
-        @previous_page = @pages.previous(@page)
-        begin
-          @page_content = page_controller.render_page(@page)
-          @title = @page.title
-        rescue => exception
-          render_in_layout "lookbook/error",
-            layout: "lookbook/application",
-            error: Lookbook::Error.new(exception, file_path: @page.file_path, source_code: @page.content)
-        end
-      else
-        show_404
-      end
+      raise_not_found("Page not found") unless @page
+
+      @page_content = page_controller.render_page(@page)
+      @title = @page.title
+      @next_page = @pages.next(@page)
+      @previous_page = @pages.previous(@page)
+    rescue ActionView::Template::Error => err
+      raise Lookbook::TemplateError.new(
+        original: err,
+        file_path: @page.file_path,
+        source: @page.content
+      )
     end
 
     protected
 
-    def show_404
-      render "lookbook/404", locals: {
-        message: "Page not found",
-        description: "The page may have been removed or renamed."
-      }
-    end
-
     def page_controller
       controller_class = Lookbook.config.page_controller.constantize
       controller = controller_class.new

data/app/controllers/lookbook/preview_controller.rb

@@ -6,12 +6,40 @@ module Lookbook
 
     private
 
-    [:determine_layout, :prepend_application_view_paths, :prepend_preview_examples_view_path].each do |method_name|
-      define_method method_name, ViewComponentsController.instance_method(method_name)
+    def set_locale(&block)
+      I18n.with_locale(params[:locale] || I18n.default_locale, &block)
+    end
+
+    # Returns either {} or {layout: value} depending on configuration
+    def determine_layout(layout_override = nil, prepend_views: true)
+      return {} unless defined?(Rails.root)
+
+      layout_declaration = {}
+
+      if !layout_override.nil?
+        # Allow component-level override, even if false (thus no layout rendered)
+        layout_declaration[:layout] = layout_override
+      elsif default_preview_layout.present?
+        layout_declaration[:layout] = default_preview_layout
+      end
+
+      prepend_application_view_paths if layout_declaration[:layout].present? && prepend_views
+
+      layout_declaration
     end
 
     def default_preview_layout
       Lookbook.config.preview_layout
     end
+
+    def prepend_application_view_paths
+      prepend_view_path Rails.root.join("app/views") if defined?(Rails.root)
+    end
+
+    def prepend_preview_scenarios_view_path
+      prepend_view_path(Engine.preview_paths)
+    end
+
+    alias_method :prepend_preview_examples_view_path, :prepend_preview_scenarios_view_path
   end
 end

data/app/controllers/lookbook/previews_controller.rb

@@ -37,21 +37,15 @@ module Lookbook
     end
 
     def show
-      if @target
-        begin
-          opts = {layout: @preview.layout}
-          if embedded?
-            opts[:append_html] = render_to_string("lookbook/partials/_iframe_content_scripts", layout: nil)
-          end
-          @preview_html = preview_controller.process(:render_in_layout_to_string, "lookbook/previews/group", inspector_data, **opts)
-        rescue => exception
-          render_in_layout "lookbook/error",
-            layout: "lookbook/skeleton",
-            error: prettify_error(exception)
-        end
-      else
-        show_404
-      end
+      raise_not_found("Preview not found") unless @target
+
+      @preview_html = preview_controller.process(
+        :render_in_layout_to_string,
+        "lookbook/previews/group",
+        inspector_data,
+        layout: @preview.layout,
+        append_html: (iframe_content_scripts if embedded?)
+      )
     end
 
     private
@@ -60,6 +54,10 @@ module Lookbook
       params[:lookbook_embed] == "true"
     end
 
+    def iframe_content_scripts
+      render_to_string("lookbook/partials/_iframe_content_scripts", layout: nil)
+    end
+
     def scenario_json(scenario)
       {
         name: scenario.name,

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

@@ -6,13 +6,16 @@
     @popstate.window="handleNavigation"
     @click.document="hijax"
     @navigation:start="closeMobileSidebar"
+    @dom:update-complete.window="Lookbook.initEmbeds()"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
     <%= render "lookbook/partials/user_styles" %>
 
-    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.with_branding { @config.project_name } %>
-    <% end %>
+    <%= lookbook_render :header,
+      id: "app-header",
+      debug_menu: @config.debug_menu,
+      project_name: @config.project_name,
+      project_logo: @config.project_logo %>
 
     <% if @previews.any? || @pages.any? %>
       
@@ -29,58 +32,54 @@
           "@click.outside": "closeMobileSidebar",
           cloak: true do %>
 
-          <% cache @engine.last_changed do %>
-
-            <%= lookbook_render :split_layout,
-              alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
-              style: "height: calc(100vh - 2.5rem);" do |layout| %>
+          <%= lookbook_render :split_layout,
+            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
+            style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-              <% if @previews.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "previews-nav",
-                    tree: @previews.to_tree,
-                    alpine_data: "$store.nav.previews" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Previews</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @previews.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "previews-nav",
+                  tree: @previews.to_tree,
+                  alpine_data: "$store.nav.previews" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Previews</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
-                    <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                   <% end %>
+                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
+            <% end %>
 
-              <% if @pages.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "pages-nav",
-                    tree: @pages.to_tree,
-                    alpine_data: "$store.nav.pages" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Pages</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @pages.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "pages-nav",
+                  tree: @pages.to_tree,
+                  alpine_data: "$store.nav.pages" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Pages</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
             <% end %>
-
           <% end %>
         <% end %>
 

data/app/views/layouts/lookbook/skeleton.html.erb

@@ -14,15 +14,9 @@
     </style>
   <% end %>
 
-  <% if @config.ui_favicon == true %>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode @theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
-      media="(prefers-color-scheme: dark)">
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode @theme.favicon_light_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
-      media="(prefers-color-scheme: light)">
+  <% unless @config.ui_favicon == false %>
+    <link rel="icon" href="<%= @config.ui_favicon_dark %>" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="<%= @config.ui_favicon_light %>" media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>

data/app/views/lookbook/errors/default.html.erb

@@ -0,0 +1,40 @@
+<div class="bg-red-50 h-[calc(100vh_-_40px)] w-full overflow-y-auto">
+  <div>
+    <header class="px-8 py-6">
+      <h2 class="text-xl font-bold text-red-700"><%= @error.type %></h2>
+    </header>
+
+    <div class="px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base leading-relaxed">
+      <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= @error.message %></pre>
+    </div>
+
+    <% if @error.file_path %>
+      <div class="text-sm mx-8 mb-3 font-mono">
+        <span><%= @error.relative_file_path %></span>
+        <% if @error.line_number %>
+          <span>[line <strong><%= @error.line_number %></strong>]</span>
+        <% end %>
+      </div>
+
+      <div class="px-8">
+        <%= lookbook_render :file_source,
+          file_path: @error.file_path,
+          highlight_lines: [@error.line_number],
+          lines_around_highlight: 5,
+          source: @error.source,
+          class: "border border-red-200" %>
+      </div>
+    <% end %>
+
+    <h3 class="font-bold mb-2 px-8 py-2 mt-8">Full stack trace:</h3>
+    <div class="text-xs font-mono w-full overflow-auto">
+      <div class="px-8 pb-10 text-gray-400 leading-relaxed whitespace-nowrap">
+        <% @error.backtrace.each do |line| %>
+          <div class="hover:text-gray-900 transition-colors duration-100">
+            <%= line %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/errors/not_found.html.erb

@@ -0,0 +1,10 @@
+<%= render "lookbook/partials/blank_slate" do %>
+  <%= lookbook_render :message,
+      id: "not-found-message",
+      title: @error.message,
+      icon: :file_x,
+      icon_position: :right,
+      theme: :error do %>
+      <%= @error.detail || "It may have been moved or deleted." %>
+    <% end %>
+<% end %>

data/app/views/lookbook/index.html.erb

@@ -1,25 +1,30 @@
-<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
-  <div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
-  <% if @config.project_name.downcase == "lookbook" %>
-    <div class="flex justify-center pb-4">
-      <svg class="flex-none mx-auto w-[140px]" viewBox="0 0 275 36">
-        <g fill-rule="nonzero" fill="none">
-          <path d="M4.536 35c-1.408 0-2.504-.392-3.288-1.176-.784-.784-1.176-1.88-1.176-3.288V5.576c0-1.44.384-2.544 1.152-3.312.768-.768 1.856-1.152 3.264-1.152 1.44 0 2.536.384 3.288 1.152.752.768 1.128 1.872 1.128 3.312v22.08h11.712c1.216 0 2.152.312 2.808.936.656.624.984 1.528.984 2.712 0 1.184-.328 2.096-.984 2.736-.656.64-1.592.96-2.808.96H4.536ZM42.066.632c3.425 0 6.425.72 9 2.16 2.577 1.44 4.585 3.464 6.025 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C37.17 1.04 39.507.632 42.067.632Zm0 7.392c-1.663 0-3.095.392-4.295 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2 1.07-.723 1.917-1.733 2.543-3.031-.39-1.314-.934-2.855-2.087-5.286-.07-.147-.07-.233 0-.38l2.187-5.84a8.262 8.262 0 0 0-1.06-1.735c-1.407-1.76-3.375-2.64-5.903-2.64ZM80.27.632c3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C75.373 1.04 77.71.632 80.27.632Zm0 7.392c-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2.999-.675 1.804-1.6 2.416-2.775-.395-1.37-.933-2.95-2.162-5.542-.07-.147-.07-.233 0-.38l2.276-6.08a8.166 8.166 0 0 0-.946-1.495c-1.408-1.76-3.376-2.64-5.904-2.64Zm26.299 27.408c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L111.08 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#919191"/>
-          <path d="M140.403 35c-1.504 0-2.648-.392-3.432-1.176-.784-.784-1.176-1.912-1.176-3.384V5.72c0-1.472.392-2.6 1.176-3.384.784-.784 1.928-1.176 3.432-1.176h11.712c2.432 0 4.504.36 6.216 1.08 1.712.72 3.016 1.736 3.912 3.048.896 1.312 1.344 2.848 1.344 4.608 0 1.984-.568 3.68-1.704 5.088-1.136 1.408-2.68 2.368-4.632 2.88v-.768c2.304.416 4.088 1.344 5.352 2.784 1.264 1.44 1.896 3.28 1.896 5.52 0 2.976-1.064 5.32-3.192 7.032-2.128 1.712-5.032 2.568-8.712 2.568h-12.192Zm3.84-6.48h7.152c1.632 0 2.824-.312 3.576-.936.752-.624 1.128-1.56 1.128-2.808 0-1.248-.376-2.176-1.128-2.784-.752-.608-1.944-.912-3.576-.912h-7.152v7.44Zm0-13.92h6.288c1.6 0 2.776-.288 3.528-.864.752-.576 1.128-1.456 1.128-2.64 0-1.184-.376-2.056-1.128-2.616-.752-.56-1.928-.84-3.528-.84h-6.288v6.96Zm41.034 20.928c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm38.203 7.392c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm26.299 7.296c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L254.29 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#ABABAB"/>
-        </g>
-      </svg>
-    </div>
-  <% elsif @config.project_name != false %>
-    <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wide mb-2">
-      <%= @config.project_name %>
-    </h5>
+<%= render "lookbook/partials/blank_slate" do %>
+  <% if @blank_slate %>
+    <%= lookbook_render :message,
+      id: "welcome-message",
+      title: "Welcome to your Lookbook!",
+      icon: :logo do %>
+      <p>
+        There isn't much to see yet, but
+        <%= link_to "component previews",
+          "#{@config.links.docs}/guide/previews",
+          target: "_blank"
+        %>
+        and
+        <%= link_to "content pages",
+          "#{@config.links.docs}/guide/pages",
+          target: "_blank"
+        %>
+        will show up here as soon as they are added.
+      </p>
+    <% end %>
+  <% else %>
+    <%= lookbook_render :message,
+      id: "get-started-message",
+      title: @config.project_name,
+      icon: :inspect,
+      icon_position: :right do %>
+      <p>Select a preview from the nav to get started.</p>
+    <% end %>
   <% end %>
-    <div class="opacity-60">
-      <% if @previews.any? %>
-        <p>Select a preview from the nav to get started.</p>
-      <% else %>
-        <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/views/lookbook/inspector/panels/_preview.html.erb

@@ -1,5 +1,6 @@
 <div class="overflow-hidden h-full w-full">
   <%= lookbook_render :viewport,
+    key: (lookbook_preview_path(request.query_parameters).parameterize unless Rails.env.test?),
     iframe_id: "preview-iframe",
     src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
     alpine_data: "$store.inspector.main",

data/app/views/lookbook/inspector/show.html.erb

@@ -63,11 +63,19 @@
               target: "_blank" %>
 
             <% group.with_button id: "show-drawer-button",
-              icon: "vertical ? 'sidebar' : 'credit-card'",
+              icon: "sidebar",
               tooltip: "Show drawer",
               "@click": "$store.inspector.drawer.hidden = false",
               class: "rotate-180",
-              "x-show": "$store.inspector.drawer.hidden",
+              "x-show": "$store.inspector.drawer.hidden && vertical",
+              cloak: true %>
+
+            <% group.with_button id: "show-drawer-button",
+              icon: "credit-card",
+              tooltip: "Show drawer",
+              "@click": "$store.inspector.drawer.hidden = false",
+              class: "rotate-180",
+              "x-show": "$store.inspector.drawer.hidden && !vertical",
               cloak: true %>
           <% end %>
         <% end %>

data/app/views/lookbook/pages/show.html.erb

@@ -1,8 +1,7 @@
 <main
   class="h-[calc(100vh_-_40px)]"
   x-data="{}"
-  @navigation:complete.window="$refs.scroller.scrollTop = 0;"
-  @dom:update-complete.window="Lookbook.initEmbeds();">
+  @navigation:complete.window="$refs.scroller.scrollTop = 0">
   <div class="h-full bg-lookbook-page-bg relative">
     <% unless @error %>
 
@@ -46,12 +45,14 @@
     <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
       <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
         <% if @page.header? %>
-          <header id="page-header" class="mb-8 prose max-w-none flex-none">
-            <h1><%= @page.title %></h1>
+          <header id="page-header" class="mb-7 pb-6 lg:mb-9 lg:pb-8 border-b border-lookbook-divider">
+            <%= lookbook_render :prose, size: :md, markdown: false, class: "max-w-none flex-none" do %>
+              <h1><%= @page.title %></h1>
+            <% end %>
           </header>
         <% end %>
 
-        <%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+        <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none min-h-[50vh]" do %>
           <%= @page_content %>
         <% end %>
 

data/app/views/lookbook/partials/_blank_slate.html.erb

@@ -0,0 +1,7 @@
+<div class="flex justify-center w-full h-full bg-checked">
+  <div class="px-4 py-6 xs:py-8 sm:p-8 md:p-12">
+    <div class="w-full xs:w-auto xs:mx-auto xs:min-w-[440px] xs:max-w-[680px]">
+      <%= yield %>
+    </div>
+  </div>
+</div>

data/config/app.yml

@@ -1,5 +1,6 @@
 shared:
-  project_name: Lookbook
+  project_name: ~
+  project_logo: ~
 
   preview_paths: [test/components/previews]
   preview_display_options: {}
@@ -42,6 +43,7 @@ shared:
   component_paths: [app/views]
 
   reload_on_change: ~
+  live_updates: false
   listen_paths: []
   listen_extensions: [rb, html.*]
 
@@ -55,8 +57,15 @@ shared:
   debug_menu: false
   experimental_features: false
 
+  links:
+    docs: https://v2.lookbook.build
+    demo: https://v2-demo.lookbook.build
+    repo: https://github.com/ViewComponent/lookbook/tree/v2
+
 development:
   debug_menu: true
+  live_updates: true
 
 test:
   debug_menu: true
+  live_updates: false

data/config/routes.rb

@@ -17,4 +17,6 @@ Lookbook::Engine.routes.draw do
     get "/embed", to: "embeds#lookup", as: :lookbook_embed_lookup
     get "/embed/*path", to: "embeds#show", as: :lookbook_embed
   end
+
+  get "/*path", to: "application#not_found", via: :all
 end