lookbook 0.8.3 → 1.0.0.beta.1

data/app/helpers/lookbook/page_helper.rb

@@ -4,38 +4,30 @@ module Lookbook
 
     def page_path(id)
       page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
-      lookbook.page_path page.lookup_path
+      if page.present?
+        lookbook.page_path page.lookup_path
+      else
+        Lookbook.logger.warn "Could not find page with id ':#{id}'"
+      end
     end
 
-    def embed(*args, params: {}, type: :preview, **opts)
+    def embed(*args, params: {}, type: :preview, max_height: nil, **opts)
       return unless args.any?
 
       @embed_counter ||= 0
 
       preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_name(args.first)
       preview = Lookbook.previews.find(preview_lookup)
-
       example = args[1] ? preview&.example(args[1]) : preview&.default_example
 
-      if example
-        @embed_counter += 1
-        render_component "embed",
-          id: generate_id("embed", url_for, example.lookup_path, @embed_counter - 1),
-          example: example,
-          params: params,
-          opts: opts
-      else
-        embed_not_found
-      end
-    end
-
-    protected
+      embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
 
-    def embed_not_found
-      render_component "not_found", {
-        title: "Preview not found",
-        text: "The preview may have been renamed or deleted."
-      }
+      render_component :embed,
+        id: embed_id,
+        example: example,
+        params: params,
+        max_height: max_height,
+        opts: opts
     end
   end
 end

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

@@ -1,30 +1,78 @@
-<%= content_for :body do %>
-  <div
-    id="app"
-    x-data="app"
-    :style="`grid-template-columns: ${$store.sidebar.width}px 1px 1fr;`"
-    :class="{'grid': $store.sidebar.open && $store.layout.desktop}"
-    @popstate.window="await update(); $dispatch('page:changed')"
-    @refresh.window="update"
-    @resize.window="$store.layout.desktop = window.innerWidth >= $store.layout.desktopWidth"
-    class="w-screen h-screen">
-    <%= component "sidebar" %>
-    <div
-      x-data="splitter('vertical', {minSize: $store.sidebar.minWidth})"
-      class="h-full gutter border-r border-gray-300 relative"
-      x-show="$store.sidebar.open && $store.layout.desktop"
-      x-effect="$store.sidebar.width = Math.min(splits[0] || $store.sidebar.width, $store.sidebar.maxWidth)"
-      x-cloak>
-      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 -translate-x-1/2 cursor-[col-resize] z-10"></div>
-    </div>
-    <main
-      id="main"
-      class="h-full overflow-hidden w-full"
-      x-show="$store.layout.desktop || ($store.layout.mobile && !$store.sidebar.open)"
-      x-cloak>
-      <%= yield %>
-    </main>
-  </div>
+<% content_for :shell do %>
+  <%= render_component :split_layout,
+    alpine_data: "$store.layout.main",
+    ":class": "$store.layout.mobile && '!block'" do |layout| %>
+
+    <% layout.pane 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 %>
+
+      <%= 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,
+            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;" %>
+          <% end %>
+        <% end %>
+
+        <% if Lookbook.pages.any? %>
+          <% layout.pane class: "overflow-hidden" do %>
+            <%= render_component :nav,
+              collection: Lookbook.pages,
+              alpine_data: "$store.nav.pages",
+              label: "Pages" %>
+          <% 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 %>
+              <%= render_component :icon, name: :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 %>
+
+          <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>
+      <% end %>
+    <% end %>
+
+    <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %>
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    <% end %>
+
+  <% 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 %>
 
-<%= render template: "layouts/lookbook/skeleton" %>
+<%= render template: "layouts/lookbook/shell" %>

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

@@ -0,0 +1,7 @@
+<%= content_for :main do %>
+  <main class="h-[calc(100vh_-_2.5rem)]">
+    <%= yield %>
+  </main>
+<% end %>
+
+<%= render template: "layouts/lookbook/application" %>

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

@@ -0,0 +1,53 @@
+<%= content_for :main do %>
+  <div
+    class="h-[calc(100vh_-_40px)]"
+    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">
+        
+        <% if @previous_page %>
+          <%= render_component :button,
+            size: :lg,
+            icon: :chevron_left,
+            tooltip: "Previous page",
+            href: 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: 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>
+    <% end %>
+
+      <%= yield %>
+    </div>
+    
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/application" %>

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

@@ -0,0 +1,64 @@
+<%= content_for :body do %>
+  <div
+    id="app"
+    x-data="app"
+    @popstate.window="handleNavigation"
+    @click.document="hijax"
+    @navigation:start="closeMobileSidebar"
+    class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
+
+    <%= render_component :header do |header| %>
+      <% header.branding { config.project_name } %>
+    <% end %>
+
+    <% if false %>
+      <%= render_component :toolbar, class: "group !bg-lookbook-header !text-lookbook-header-text" do |toolbar| %>
+        <% toolbar.section padded: true do %>
+          <%= render_component :branding,
+            text: config.project_name,
+            href: landing_path if config.project_name %>
+        <% end %>
+        <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
+          <%= render_component :button_group, class: "relative -top-px" do |group| %>
+            <% if Rails.env == "development" %>
+              <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
+                <% button.dropdown do %>
+                  <%= tag.div class: "divide-y divide-lookbook-divider" do %>
+                    <div class="flex items-center text-xs px-3 py-2">
+                      <span class="opacity-60 mr-1">Lookbook</span>
+                      <span class="mr-6">v<%= Lookbook::VERSION %></span>
+                      <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70">
+                        <%= render_component :icon, name: :github, size: 3 %>
+                      </a>
+                    </div>
+                    <div class="px-3 py-2">
+                      <a href="#"
+                        class="text-xs underline"
+                        @click.stop="localStorage.clear(); window.location.reload();">
+                        Clear local storage
+                      </a>
+                    </div>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+            <% group.button icon: :menu,
+              "@click.stop": "toggleSidebar",
+              x_show: "$store.layout.mobile && sidebarHidden",
+              class: "!text-lookbook-header-text" %>
+            <% group.button icon: :x,
+              "@click.stop": "toggleSidebar",
+              x_show: "$store.layout.mobile && !sidebarHidden",
+              "@keydown.esc.window": "closeMobileSidebar",
+              class: "!text-lookbook-header-text" %>
+          <% end %>    
+        <% end %>
+      <% end %>
+    <% end %>
+    
+    <%= content_for?(:shell) ? yield(:shell) : yield %>
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/skeleton" %>
+0

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

@@ -1,28 +1,45 @@
 <!DOCTYPE html>
-<html lang="en" class="h-screen">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <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/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
+  <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>
+      <%== @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>" %>">
   <% end %>
 
-  <% if Lookbook::Engine.websocket %>
-    <script>
-      window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
-    </script>
-  <% end %>
-  <script src="/lookbook-assets/js/app.js?v=<%= Lookbook.version %>" defer></script>
+  <script>
+    window.LOG_LEVEL = <%= Lookbook::Engine.log_level %>;
+    window.APP_NAME = "<%= Lookbook::Engine.app_name %>";
+    <% if Lookbook::Engine.websocket %>
+    window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
+    <% end %>
+  </script>
+  
+  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
+    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
   <% end %>
   
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
-<body class="text-gray-800 font-sans text-sm antialiased overflow-hidden">
+<body>
+  
   <%= yield :body %>
+  
+  <% if Rails.env.development? %>
+    <div id="debug-data" class="hidden" x-cloak>
+      <%= pretty_json(Lookbook.debug_data) %>
+    </div>
+  <% end %>
 </body>
 </html>

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

@@ -0,0 +1,5 @@
+<%= content_for :body do %>
+  <%= yield %>
+<% end %>
+
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -0,0 +1,15 @@
+<div class="bg-white flex flex-col items-center justify-center h-screen w-full">
+  <div class="px-4 text-center max-w-sm">
+    <%= render_component :icon, name: :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
+    <div class="mt-3">
+      <h5 class="text-base">
+        <%== message %>
+      </h5>
+      <% if defined?(description) %>
+        <p class="mt-2 opacity-50 text-sm">
+          <%== description %>
+        </p>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,46 +1,46 @@
 <%
 error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
 @title = error.title
-disable_header ||= false
 %>
-<%= component "header" unless disable_header %>
-<div class="h-full w-full bg-red-50 flex flex-col border-red-300" id="error-<%= Time.now %>">
 
-  <header class="mx-8  pt-8 mb-8 flex-none">
-    <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
-  </header>
-  
-  <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
-    <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
-  </div>
+<div class="flex flex-col h-screen">
+  <div class="h-full bg-red-50 overflow-y-auto">
+    <header class="mx-8 py-6">
+      <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
+    </header>
 
-  <% if error.file_name %>
-    <div class="text-gray-800 text-sm mx-8 mb-2 font-mono flex-none <%= "pl-2" if error.source_code %>">
-      <span><%= error.file_name %></span>
-      <% if error.line_number %>
-        <span>[line <strong><%= error.line_number %></strong>]</span>
-      <% end %>
+    <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
+      <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
     </div>
-  <% end %>
 
-  <% if error.source_code %>
-  <div class="prose max-w-full mx-8">
-      <%= code error.file_lang, highlight_lines: [error.source_code[:highlighted_line]],
-        line_numbers: true,
-        start_line: error.source_code[:start_line],
-        strip: false,
-        class: "py-4 !max-w-full !border-red-200 !mt-1" do %><%= h(error.source_code[:code]) %><% end %>
-  </div>
-  <% end %>
+    <% if error.file_name %>
+      <div class="text-sm mx-8 mb-2 font-mono">
+        <span><%= error.file_name %></span>
+        <% if error.line_number %>
+          <span>[line <strong><%= error.line_number %></strong>]</span>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% if error.source_code %>
+      <div class="mx-8 border border-red-200 max-w-screen-lg">
+        <%= render_component :code,
+          language: error.file_lang,
+          highlight_lines: [error.source_code[:highlighted_line]],
+          start_line: error.source_code[:start_line],
+          line_numbers: true do %><%= h(error.source_code[:code]) %><% end %>
+      </div>
+    <% end %>
 
-  <h3 class="font-bold mb-4 px-8 mt-8 flex-none">Full stack trace</h3>
-  <div class="text-xs font-mono flex-grow h-full overflow-hidden">
-    <div class="h-full overflow-auto px-8 pb-10 text-gray-400 leading-relaxed">
-      <% error.backtrace.each do |line| %>
-        <div class="hover:text-gray-900 transition-colors duration-100">
-          <%= line %>
-        </div>
-      <% end %>
+    <h3 class="font-bold mb-2 px-8 py-2 mt-8 sticky top-0 bg-red-50">Full stack trace:</h3>
+    <div class="text-xs font-mono">
+      <div class="px-8 pb-10 text-gray-400 leading-relaxed">
+        <% 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/index.html.erb

@@ -1,9 +1,14 @@
-<div class="flex flex-col h-full w-full">
-  <%= component "header" %>
+<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">
-      <%= icon "layers", size: 10, class: "text-gray-300 mx-auto" %>
-      <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
+    <div class="p-4 text-center mx-auto">
+      <%= render_component :icon, name: :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>
     </div>
   </div>
-</div>
+</div>

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

@@ -1,71 +1,43 @@
-<div
-  id="page"
-  class="grid grid-rows-[40px_1fr] bg-gray-50 h-full"
-  x-data="page"
-  @click="checkForNavigation"
-  @page:changed.window="scrollToTop">
-  <%= component "header" do %>
-    <div id="page-banner-<%= @page.id %>" class="flex items-center ml-auto pr-2">
-      <% if @previous_page %>
-        <a ref="header-previous-page"
-          href="<%= page_path @previous_page.lookup_path %>"
-          x-tooltip.theme.lookbook="`Previous page`"
-          class="flex-none p-1">
-          <%= icon "chevron-left", size: 4, class: "hover:text-indigo-800" %>
-        </a>
-      <% else %>
-        <span ref="header-previous-page" class="flex-none p-1">
-          <%= icon "chevron-left", size: 4, class: "opacity-20" %>
-        </span>
-      <% end %>
+<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">
+    <% if @page.header? %>
+      <header class="mb-8 prose max-w-none flex-none">
+        <h1><%= @page.title %></h1>
+      </header>
+    <% end %>
 
-      <% if @next_page %>
-        <a ref="header-next-page"
-          href="<%= page_path @next_page.lookup_path %>"
-          x-tooltip.theme.lookbook="`Next page`"
-          class="flex-none p-1">
-            <%= icon "chevron-right", size: 4, class: "hover:text-indigo-800" %>
-          </a>
-      <% else %>
-        <span ref="header-next-page" class="flex-none p-1">
-          <%= icon "chevron-right", size: 4, class: "opacity-20" %>
-        </span>
-      <% end %>
-    </div>
-  <% end %>
-  <div class="px-4 md:px-10 w-full pt-8 md:pt-12 overflow-auto pb-10 scroll-smooth" x-ref="scroller">
-    <div class="w-full max-w-3xl mx-auto text-gray-600">
-      <% if @page.header? %>
-        <header id="page-header-<%= @page.id %>" class="mb-10 prose max-w-none">
-          <h1><%= @page.title %></h1>
-        </header>
-      <% end %>
-      <div id="page-main-<%= @page.id %>" data-morph-strategy="replace">
-        <div class="prose max-w-none prose-a:text-indigo-900">
-          <%= @page_content %>
-        </div>
-      </div>
-      <% if @page.footer? %>
-        <footer id="page-footer-<%= @page.id %>" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8">
-          <% if @previous_page %>
-            <a ref="footer-previous-page"
-              href="<%= page_path @previous_page.lookup_path %>"
-              class="flex items-center flex-none">
-              <%= icon "arrow-left", size: 4, class: "hover:text-indigo-800" %>
-              <span class="ml-2 underline"><%= @previous_page.title %></span>
-            </a>
-          <% end %>
+    <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
+      <%= @page_content %>
+    <% end %>
 
-          <% if @next_page %>
-            <a ref="footer-next-page"
-              href="<%= page_path @next_page.lookup_path %>"
-              class="flex items-center flex-none ml-auto">
-              <span class="mr-2 underline"><%= @next_page.title %></span>
-              <%= icon "arrow-right", size: 4, class: "hover:text-indigo-800" %>
-            </a>
+    <% if @page.sections.any? %>
+      <%= render_component :page_tabs, markdown: false do |page_tabs| %>
+        <% @page.sections.each do |section| %>
+          <% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
+            <%= page_controller.render_page(section) %>
           <% end %>
-        </footer>
+        <% end %>
       <% end %>
-    </div>
+    <% end %>
+
+    <% if @page.footer? && @pages.many? %>
+      <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+        <% if @previous_page %>
+          <a href="<%= page_path @previous_page.lookup_path %>"
+            class="flex items-center flex-none">
+            <%= render_component :icon, name: :arrow_left, size: 4, class: "hover:text-indigo-800" %>
+            <span class="ml-2 underline"><%= @previous_page.title %></span>
+          </a>
+        <% end %>
+
+        <% if @next_page %>
+          <a href="<%= page_path @next_page.lookup_path %>"
+            class="flex items-center flex-none ml-auto">
+            <span class="mr-2 underline"><%= @next_page.title %></span>
+            <%= render_component :icon, name: :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+          </a>
+        <% end %>
+      </footer>
+    <% end %>
   </div>
-</div>
+</div>

data/app/views/{layouts/lookbook → lookbook}/preview.html.erb

@@ -1,16 +1,14 @@
 <% if examples.many? %>
+  <%# Render a group of examples %>
   <% examples.each do |example| %>
     <div style="all: unset; margin-bottom: 30px; display: block;">
       <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
-        <%= example[:label] %>
+        <%= example.label %>
       </h6>
-      <%= example[:html] %>
+      <%= example.output %>
     </div>
   <% end %>
 <% else %>
-  <%= examples.first[:html] %>
-<% end %>
-
-<% if params[:lookbook_embed] == "true" %>
-  <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
-<% end %>
+  <%# Render a single example %>
+  <%= examples.first.output %>
+<% end %>

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

@@ -0,0 +1,13 @@
+<div class="p-4 bg-lookbook-prose h-full">
+  <% if panel.content.present? %>
+    <%= render_component :prose, markdown: true do %>
+      <%== panel.content %>
+    <% end %>
+  <% else %>
+    <% if Rails.env.development? %>
+      <%= render_component :prose do %>
+        <em class='opacity-50'>No content has been defined for this panel.</em>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>