lookbook 2.0.0.beta.2 → 2.0.0.beta.4

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,6 +6,7 @@
     @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" %>

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

@@ -17,11 +17,11 @@
   <% 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"
+      href="data:image/svg+xml,%3Csvg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='nonzero'%3E%3Cpath d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/%3E%3Cpath d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/%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"
+      href="data:image/svg+xml,%3Csvg viewBox='0 0 167 204' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233730A3' fill-rule='nonzero'%3E%3Cpath d='M157 0c5.523 0 10 4.477 10 10v184c0 5.523-4.477 10-10 10H32.969C17 204 3.687 192.638.65 177.554A9.97 9.97 0 0 1 0 174c0-.512.011-1.017.033-1.516A33.115 33.115 0 0 1 0 171V33C0 14.778 14.758 0 32.969 0H157Zm-10 166H32.969c-8.292 0-12.22 2.22-12.871 6.606.79 6.424 6.253 11.394 12.87 11.394H147v-18Zm0-146H32.969c-7.056 0-12.8 5.65-12.965 12.689L20 33v114.762c3.932-1.167 8.3-1.762 12.969-1.762H147V20Z'/%3E%3Cpath d='M64.022 126c-4.107 0-7.304-1.143-9.591-3.428-2.287-2.285-3.431-5.48-3.431-9.583l.14-63.978c0-4.197 1.12-7.415 3.36-9.653C56.74 37.119 59.916 36 64.023 36c4.2 0 7.398 1.12 9.592 3.358 2.193 2.238 3.29 5.456 3.29 9.653l-.14 55.584h34.166c3.547 0 6.277.91 8.19 2.728 1.915 1.819 2.871 4.454 2.871 7.905 0 3.45-.956 6.109-2.87 7.974-1.914 1.865-4.644 2.798-8.191 2.798H64.022Z'/%3E%3C/g%3E%3C/svg%3E"
       media="(prefers-color-scheme: light)">
   <% end %>
 

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/pages/show.html.erb

@@ -1,15 +1,14 @@
 <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 %>
-      
+
       <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
         <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
         <div class="relative z-10 flex items-center">
-        
+
         <% if @previous_page %>
           <%= lookbook_render :icon_button,
             size: :lg,
@@ -46,19 +45,21 @@
     <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 %>
 
         <% if @page.sections.any? %>
           <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
             <% @page.sections.each do |section| %>
-              <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
+              <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
                 <%= page_controller.render_page(section) %>
               <% end %>
             <% 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

@@ -42,6 +42,7 @@ shared:
   component_paths: [app/views]
 
   reload_on_change: ~
+  live_updates: false
   listen_paths: []
   listen_extensions: [rb, html.*]
 
@@ -55,8 +56,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

data/lib/lookbook/engine.rb

@@ -26,7 +26,7 @@ module Lookbook
     end
 
     config.after_initialize do
-      if opts.using_view_component || Rails.env.test?
+      if opts.using_view_component
         vc_config = Engine.host_config.view_component
 
         opts.preview_paths += vc_config.preview_paths
@@ -79,7 +79,10 @@ module Lookbook
       end
 
       def auto_refresh?
-        reloading? && runtime_context.web? && FileWatcher.evented?
+        opts.live_updates == true &&
+          reloading? &&
+          runtime_context.web? &&
+          FileWatcher.evented?
       end
 
       def preview_embeds_allowed?
@@ -129,14 +132,18 @@ module Lookbook
       end
 
       def view_paths
-        ActionView::ViewPaths.all_view_paths.flat_map do |view_path|
-          view_path.paths.map { |path| Pathname(path.to_s) }
+        # handle view path registry changes in Rails 7.1
+        paths = if defined?(ActionView::PathRegistry)
+          ActionView::PathRegistry.all_file_system_resolvers.map(&:path)
+        else
+          ActionView::ViewPaths.all_view_paths.flat_map(&paths)
         end
+        paths.map { |path| Pathname(path.to_s) }
       end
 
       def component_paths
         @_component_paths ||= begin
-          paths = [*opts.component_paths, *Engine.view_paths, host_app_path]
+          paths = [*opts.component_paths, *view_paths, host_app_path]
           PathUtils.normalize_paths(paths)
         end
       end

data/lib/lookbook/entities/concerns/annotatable_entity.rb

@@ -1,23 +1,48 @@
 module Lookbook
-  # @api private
   module AnnotatableEntity
     extend ActiveSupport::Concern
 
     included do
       delegate :has_tag?, to: :code_object
 
+      # @!group Annotations
+
+      # Any notes added to the entity.
+      # Returns the raw (unrendered) string which may contain markdown formatting.
+      #
+      # @return [String] The notes, or an empty string if none have been added
       def notes
         code_object.docstring.to_s.strip
       end
 
+      # All tags that have been added to the entity.
+      # Can be filtered by tag name by providing the name as an argument.
+      #
+      # @example :ruby
+      #   all_tags = entity.tags
+      #   display_tags = entity.tags(:display)
+      #
+      # @param name [Symbol] Optional tag type to filter by
+      # @return [Array<YardTag>] Array of tags
       def tags(name = nil)
         code_object.tags(name)
       end
 
+      # The first tag (optionally of a particular type)
+      # added to the entity.
+      #
+      # @example :ruby
+      #   first_tag = entity.tag
+      #   first_display_tag = entity.tag(:display)
+      #
+      # @param name [Symbol] Optional tag type to filter by
+      # @return [Array<YardTag>] Array of tags
       def tag(name = nil)
         tags(name).first
       end
 
+      # @!endgroup
+
       protected
 
       attr_reader :code_object

data/lib/lookbook/entities/concerns/inspectable_entity.rb

@@ -1,9 +1,13 @@
 module Lookbook
-  # @api private
   module InspectableEntity
     extend ActiveSupport::Concern
 
     included do
+      # @!group Source
+
+      # Scenario method source code
+      #
+      # @return [String] The source code0
       def source
         source_code = if custom_source?
           File.read(source_file_path)
@@ -19,10 +23,21 @@ module Lookbook
         source_code.strip_heredoc.strip
       end
 
+      # Source code language info.
+      #
+      # Returns a Hash with `name`, `ext` & `label` entries.
+      #
+      # @example :ruby
+      #   source_lang_name = entity.lang[:name]
+      #
+      # @return [Hash] Language info hash
       def source_lang
         custom_source? ? Lang.guess(source_file_path, :ruby) : Lang.find(:ruby)
       end
 
+      # @!endgroup
+
+      # @api private
       def custom_source?
         source_file_path.present?
       end
@@ -35,7 +50,7 @@ module Lookbook
         @_source_path ||= if code_object.has_tag?(:source)
           source_path = code_object.tag(:source).value
           unless source_path.present? && File.exist?(source_path)
-            raise LookbookError, "Could not find source file '#{source_path}'"
+            raise Lookbook::Error, "Could not find source file '#{source_path}'"
           end
           source_path
         end