lookbook 1.0.0.beta.4 → 1.0.0.beta.7

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

@@ -1,78 +1,94 @@
 <% content_for :shell do %>
-  <%= render_component :split_layout,
-    alpine_data: "$store.layout.main",
-    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+  <% if Lookbook.previews? || Lookbook.pages? %>
+    <%= render_component :split_layout,
+      alpine_data: "$store.layout.main",
+      ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-    <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
-      ":class": "{
-        'transition': $store.layout.mobile,
-        'translate-x-full': $store.layout.mobile && sidebarHidden,
-        '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
-      }",
-      "@click.outside": "closeMobileSidebar",
-      x_cloak: true do %>
+      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
+        ":class": "{
+          'transition': $store.layout.mobile,
+          'translate-x-full': $store.layout.mobile && sidebarHidden,
+          '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+        }",
+        "@click.outside": "closeMobileSidebar",
+        cloak: true do %>
 
-      <%= render_component :split_layout,
-        alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}",
-        style: "height: calc(100vh - 2.5rem);" do |layout| %>
-        <% layout.pane class: "overflow-hidden" do %>
-          <%= render_component :nav,
-            id: "previews-nav",
-            collection: Lookbook.previews,
-            alpine_data: "$store.nav.previews",
-            label: "Previews",
-            collapse_singles: true do |nav| %>
-            <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name&hellip;" %>
+        <%= render_component :split_layout,
+          alpine_data: "$store.layout.#{Lookbook.pages? && Lookbook.previews? ? "sidebar" : "singleSectionSidebar"}",
+          style: "height: calc(100vh - 2.5rem);" do |layout| %>
+
+          <% if Lookbook.previews? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "previews-nav",
+                collection: Lookbook.previews,
+                alpine_data: "$store.nav.previews",
+                collapse_singles: true do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Previews</h4>
+                  <% end %>
+                <% end %>
+                <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+              <% end %>
+            <% end %>
           <% end %>
-        <% end %>
 
-        <% if Lookbook.pages.any? %>
-          <% layout.pane class: "overflow-hidden" do %>
-            <%= render_component :nav,
-              id: "pages-nav",
-              collection: Lookbook.pages,
-              alpine_data: "$store.nav.pages",
-              label: "Pages" %>
+          <% if Lookbook.pages? %>
+            <% layout.pane class: "overflow-hidden" do %>
+              <%= render_component :nav,
+                id: "pages-nav",
+                collection: Lookbook.pages,
+                alpine_data: "$store.nav.pages" do |nav| %>
+                <%= nav.toolbar do |toolbar| %>
+                  <% toolbar.section padded: true do %>
+                    <h4 class="pt-1">Pages</h4>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
           <% end %>
         <% end %>
 
-      <% end %>
-
-      <% if Lookbook::Preview.errors.any? %>
-        <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
-          <%= render_component :toolbar do |toolbar| %>
-            <% toolbar.section padded: true, class: "flex items-center" do %>
-              <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
-              <span class="ml-2">Preview load errors</span>
-            <% end %>
-            <% toolbar.section align: :right do %>
-              <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+        <% if Lookbook::Preview.errors.any? %>
+          <div x-data="{hidden: false}" class="flex-none border-t border-lookbook-divider absolute bottom-0 left-0 right-0" x-show="!hidden">
+            <%= render_component :toolbar do |toolbar| %>
+              <% toolbar.section padded: true, class: "flex items-center" do %>
+                <%= icon  :alert_triangle, size: 4, class: "text-red-700" %>
+                <span class="ml-2">Preview load errors</span>
+              <% end %>
+              <% toolbar.section align: :right do %>
+                <% render_component :button, icon: :x, "@click": "hidden = !hidden" %>
+              <% end %>
             <% end %>
-          <% end %>
 
-          <div class="h-full max-h-[300px] overflow-hidden">
-            <div class="bg-red-50 w-full overflow-auto h-full">
-              <ul class="text-sm divide-y divide-red-200">
-                <% Lookbook::Preview.errors.each do |error| %>
-                  <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
-                  <li class="px-4 py-3">
-                    <h4 class="break-all leading-tight text-xs ">
-                      <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
-                    </h4>
-                    <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
-                  </li>
-                <% end %>
-              </ul>
+            <div class="h-full max-h-[300px] overflow-hidden">
+              <div class="bg-red-50 w-full overflow-auto h-full">
+                <ul class="text-sm divide-y divide-red-200">
+                  <% Lookbook::Preview.errors.each do |error| %>
+                    <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
+                    <li class="px-4 py-3">
+                      <h4 class="break-all leading-tight text-xs ">
+                        <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>
+                      </h4>
+                      <pre class="text-red-800 text-xs mt-2 whitespace-pre-wrap opacity-80 font-mono"><%= error.message %></pre>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <% layout.pane id: "app-main", class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
-      <%= content_for?(:main) ? yield(:main) : yield %>
+      <% layout.pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      <% end %>
     <% end %>
-
+  <% else %>
+    <div id="app-main" class="w-screen h-full overflow-hidden">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>
   <% end %>
   <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
 <% end %>

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

@@ -4,45 +4,45 @@
     x-data="{}"
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
-    <div class="h-full bg-lookbook-page 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 opacity-90 absolute inset-0 w-full h-full z-0"></div>
-        <div class="relative z-10 flex items-center">
+    <div class="h-full bg-lookbook-page-bg relative">
+      <% unless @error %>
         
-        <% if @previous_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            tooltip: "Previous page",
-            href: lookbook_page_path(@previous_page.lookup_path),
-            class: "pr-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+        <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 %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              tooltip: "Previous page",
+              href: lookbook_page_path(@previous_page.lookup_path),
+              class: "pr-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_left,
+              disabled: true,
+              class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+          <% end %>
 
-        <% if @next_page %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            tooltip: "Next page",
-            href: lookbook_page_path(@next_page.lookup_path),
-            class: "pl-0.5 bg-transparent" %>
-        <% else %>
-          <%= render_component :button,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
+          <% if @next_page %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              tooltip: "Next page",
+              href: lookbook_page_path(@next_page.lookup_path),
+              class: "pl-0.5 bg-transparent" %>
+          <% else %>
+            <%= render_component :button,
+              size: :lg,
+              icon: :chevron_right,
+              disabled: true,
+              class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+          <% end %>
+          </div>
         </div>
-      </div>
-    <% end %>
+      <% end %>
 
       <%= yield %>
     </div>

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

@@ -7,6 +7,12 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
+    <% if content_for? :panel_css %>
+      <style media="all" id="panel-styles">
+        <%= content_for :panel_css -%>
+      </style>
+    <% end %>
+
     <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
       <% header.branding { config.project_name } %>
     <% end %>

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

@@ -5,22 +5,24 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
-  <link href="/lookbook-assets/css/lookbook.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <link href="/lookbook-assets/css/themes/<%= config.ui_theme %>.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <% if @theme_overrides.present? %>
-    <style media="all">
-      <%== @theme_overrides %>
-    </style>
-  <% end %>
+  <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
+  <link href="<%= asset_path("/css/themes/#{config.ui_theme}.css") %>" rel="stylesheet">
 
-  <% if content_for? :styles %>
+  <%- if @theme_overrides.present? %>
     <style media="all">
-      <%= content_for :styles %>
+      <%== @theme_overrides %>
     </style>
   <% end %>
 
-  <% if config.ui_favicon != false %>
-    <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
+  <% 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)">
   <% end %>
 
   <script>
@@ -31,15 +33,14 @@
     <% end %>
   </script>
   
-  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
+  <script src="<%= asset_path("/js/lookbook.js") %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
+    <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
-  
   <%= yield :body %>
   
   <% if Rails.env.development? %>

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

@@ -1,14 +1,27 @@
-<div id="welcome-message" class="flex flex-col h-full w-full">
-  <div class="flex flex-col items-center justify-center h-full">
-    <div class="p-4 text-center mx-auto">
-      <%= icon  :layers, size: 10, class: "opacity-30 mx-auto" %>
-      <div class="mt-6 text-base opacity-40">
-        <% if Lookbook.previews.any? %>
-          <h5>Select a preview to get started</h5>
-        <% else %>
-          <p>Create a <a href="https://viewcomponent.org/guide/previews.html" target="_blank">preview file</a> to get started.</p>
-      <% end %>
+<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
+  <div class="p-4 text-center mx-auto">
+    <% if Lookbook.previews? %>
+      <div id="landing-with-content">
+        <h5 class="text-lg opacity-50"><%= config.project_name %></h5>
+        <div class="mt-2 italic opacity-30 max-w-[400px]">
+          <p>
+            Select a preview from the nav to get started.
+          </p>
+        </div>
       </div>
-    </div>
+    <% else %>
+      <div id="landing-no-content">
+        <h5 class="text-lg font-bold opacity-80"><%= config.project_name %></h5>
+        <div class="mt-3 italic opacity-40 max-w-[400px]">
+          <p>
+            Nothing here yet! 
+            <a class="underline" href="https://viewcomponent.org/guide/previews.html" target="_blank">
+              Create a preview
+            </a>
+            to get started.
+          </p>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

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

@@ -1,5 +1,5 @@
 <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-3xl mx-auto h-full flex flex-col">
+  <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>

data/app/views/lookbook/previews/panels/_content.html.erb

@@ -1,4 +1,4 @@
-<div class="p-4 bg-lookbook-prose h-full">
+<div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
     <%= render_component :prose, markdown: true do %>
       <%== panel.content %>

data/app/views/lookbook/previews/panels/_notes.html.erb

@@ -1,6 +1,6 @@
 <% items = examples.select { |example| example.notes.present? } %>
 <% if items.many? %>
-  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>
       <div class="px-4 py-6 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose w-full h-full">
+  <div class="p-4 bg-lookbook-prose-bg w-full h-full">
     <%= render_component :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

data/app/views/lookbook/previews/panels/_params.html.erb

@@ -1,5 +1,5 @@
 <% if preview.params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
     <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>

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

@@ -3,7 +3,7 @@
   ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'" do |layout| %>
 
   <%= layout.pane class: "flex flex-col h-full overflow-hidden",
-    x_effect: "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
+    "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
   
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path),
+            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -46,7 +46,7 @@
             tooltip: "Show drawer",
             "@click": "$store.inspector.drawer.hidden = false",
             class: "rotate-180",
-            x_show: "$store.inspector.drawer.hidden",
+            "x-show": "$store.inspector.drawer.hidden",
             cloak: true %>
         <% end %>
       <% end %>
@@ -63,8 +63,8 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
-    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
+    "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
       <% toolbar.section ":class": "layoutResizing && 'overflow-hidden'" do %>
@@ -84,7 +84,7 @@
             <% group.button icon: :copy,
               tooltip: "Copy panel contents",
               copy: !!panel.copy,
-              x_show: "$store.inspector.drawer.activeTab === '#{panel.name}'",
+              "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
               cloak: true do %>
               <%== panel.copy ? panel.copy : "" %>
               <% end %>
@@ -98,18 +98,18 @@
           <% group.button icon: :corner_up_right,
             tooltip: "Move drawer to right",
             "@click": "switchOrientation",
-            x_show: "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
+            "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
             cloak: true %>
 
           <% group.button icon: :corner_up_right,
-            x_show: "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
+            "x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
             disabled: true,
             cloak: true %>
 
           <% group.button icon: :corner_left_down,
             tooltip: "Move drawer to bottom",
             "@click": "switchOrientation",
-            x_show: "vertical",
+            "x-show": "vertical",
             cloak: true %>
 
           <% group.button icon: :x_circle,
@@ -124,7 +124,9 @@
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
           <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
-            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
+              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>