lookbook 1.0.0.beta.4 → 1.0.0.beta.5

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/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 %>
@@ -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 %>
@@ -64,7 +64,7 @@
   <% end %>
 
   <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
-    x_show: "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+    "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,

data/lib/lookbook/config.rb

@@ -28,6 +28,7 @@ module Lookbook
 
         listen: Rails.env.development?,
         listen_paths: [],
+        listen_extensions: ["rb", "html.*"],
         listen_use_polling: false,
 
         cable_mount_path: "/lookbook-cable",
@@ -133,6 +134,12 @@ module Lookbook
       normalize_paths(@options.listen_paths)
     end
 
+    def listen_extensions
+      @options.listen_extensions += ["rb", "html.*"]
+      @options.listen_extensions.uniq!
+      @options.listen_extensions
+    end
+
     def parser_registry_path
       absolute_path(@options.parser_registry_path)
     end
@@ -219,7 +226,8 @@ module Lookbook
 
     def normalize_paths(paths)
       paths.map! { |path| absolute_path(path) }
-      paths.select { |path| Dir.exist?(path) }
+      paths.select! { |path| Dir.exist?(path) }
+      paths
     end
 
     def absolute_path(path)

data/lib/lookbook/engine.rb

@@ -36,10 +36,18 @@ module Lookbook
       Preview.all
     end
 
+    def previews?
+      Preview.any?
+    end
+
     def pages
       Page.all
     end
 
+    def pages?
+      Page.any?
+    end
+
     def after_initialize(&block)
       add_hook(:after_initialize, block)
     end
@@ -112,10 +120,11 @@ module Lookbook
 
       if config.lookbook.listen
         Listen.logger = Lookbook.logger
+        
         preview_listener = Listen.to(
           *config.lookbook.listen_paths,
-          only: /\.(rb|html.*)$/,
-          force_polling: Lookbook.config.listen_use_polling
+          only: /\.(#{config.lookbook.listen_extensions.join("|")})$/,
+          force_polling: config.lookbook.listen_use_polling
         ) do |modified, added, removed|
           changes = { modified: modified, added: added, removed: removed }
           begin
@@ -131,7 +140,7 @@ module Lookbook
         page_listener = Listen.to(
           *config.lookbook.page_paths,
           only: /\.(html.*|md.*)$/,
-          force_polling: Lookbook.config.listen_use_polling
+          force_polling: config.lookbook.listen_use_polling
         ) do |modified, added, removed|
           changes = { modified: modified, added: added, removed: removed }
           Lookbook::Engine.reload_ui(changes)
@@ -166,6 +175,7 @@ module Lookbook
     class << self
 
       def websocket
+        return @websocket unless @websocket.nil?
         if config.lookbook.auto_refresh
           cable = ActionCable::Server::Configuration.new
           cable.cable = {adapter: "async"}.with_indifferent_access
@@ -176,9 +186,9 @@ module Lookbook
           @websocket ||= if Rails.version.to_f >= 6.0
             ActionCable::Server::Base.new(config: cable)
           else
-            websocket ||= ActionCable::Server::Base.new
-            websocket.config = cable
-            websocket
+            @websocket ||= ActionCable::Server::Base.new
+            @websocket.config = cable
+            @websocket
           end
         end
       end

data/lib/lookbook/markdown.rb

@@ -8,10 +8,12 @@ module Lookbook
       disable_indented_code_blocks: true,
       strikethrough: true,
       highlight: true,
-      with_toc_data: true
+      with_toc_data: true,
+      lax_spacing: true
     }
 
     def self.render(text)
+      text&.gsub!(/\<\!\-\- (BEGIN|END) (.*) \-\-\>/, "")
       markdown = Redcarpet::Markdown.new(Renderer, Lookbook.config.markdown_options)
       markdown.render(text).html_safe
     end

data/lib/lookbook/page.rb

@@ -154,6 +154,10 @@ module Lookbook
         !!find(path)
       end
 
+      def any?
+        all.any?
+      end
+
       def all
          pages, sections =
           Array(page_paths).flat_map do |dir|

data/lib/lookbook/preview.rb

@@ -122,14 +122,15 @@ module Lookbook
         !!find(path)
       end
 
-      def clear_cache
-        @previews = nil
+      def any?
+        all.any?
       end
 
       def all
         load_previews if preview_files.size > ViewComponent::Preview.descendants.size
 
-        return @previews if @previews.present?
+        @previews = nil if cache_stale?
+        return @previews unless @previews.nil?
 
         previews = ViewComponent::Preview.descendants.map do |p|
           new(p)
@@ -144,15 +145,44 @@ module Lookbook
         end
 
         sorted_previews = previews.compact.sort_by { |preview| [preview.position, preview.label] }
-        @previews ||= PreviewCollection.new(sorted_previews)
+        @previews = PreviewCollection.new(sorted_previews)
+        mark_as_cached if Lookbook.config.listen == true
+        @previews
       end
 
       def errors
         @errors ||= []
       end
 
+      def clear_cache
+        cache_dir = File.dirname(cache_marker_path)
+        FileUtils.mkdir_p(cache_dir) unless File.exists?(cache_dir)
+        File.write(cache_marker_path, Time.now.to_i)
+      end
+
       protected
 
+      def cache_marker_path
+        Rails.root.join("tmp/cache/lookbook-previews")
+      end
+
+      def cache_stale?
+        return false if !File.exists?(cache_marker_path)
+        cache_timestamp = File.read(cache_marker_path).to_i
+        if @last_cache_timestamp.nil? || cache_timestamp > @last_cache_timestamp
+          @last_cache_timestamp = cache_timestamp
+          true
+        else
+          false
+        end
+      end
+
+      def mark_as_cached
+        cache_dir = File.dirname(cache_marker_path)
+        FileUtils.mkdir_p(cache_dir) unless File.exists?(cache_dir)
+        File.write(cache_marker_path, Time.now)
+      end
+
       def load_previews
         @errors = []
         preview_files.each do |file|
@@ -166,7 +196,7 @@ module Lookbook
           )
         end
       end
-
+    
       def preview_files
         files = Array(Lookbook.config.preview_paths).map do |preview_path|
           Dir["#{preview_path}/**/*preview.rb"].map do |path|

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.beta.4"
+  VERSION = "1.0.0.beta.5"
 end

data/lib/tasks/lookbook_tasks.rake

@@ -16,7 +16,7 @@ namespace :lookbook do
 
   namespace :previews do
     desc "Preparse the previews"
-    task :preparse do
+    task :preparse => :environment do
       Lookbook::Engine.parser.parse
       puts "Lookbook preview parsing complete"
     end

data/public/lookbook-assets/css/lookbook.css

@@ -1756,14 +1756,14 @@ pre[class*="language-"] {
   margin-top: 2rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .ml-2 {
   margin-left: .5rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1976,12 +1976,12 @@ pre[class*="language-"] {
   max-width: 1024px;
 }
 
-.max-w-\[420px\] {
-  max-width: 420px;
+.max-w-\[400px\] {
+  max-width: 400px;
 }
 
-.max-w-3xl {
-  max-width: 48rem;
+.max-w-\[420px\] {
+  max-width: 420px;
 }
 
 .max-w-none {
@@ -2687,14 +2687,14 @@ pre[class*="language-"] {
   opacity: .3;
 }
 
-.opacity-40 {
-  opacity: .4;
-}
-
 .opacity-80 {
   opacity: .8;
 }
 
+.opacity-40 {
+  opacity: .4;
+}
+
 .opacity-0 {
   opacity: 0;
 }

data/public/lookbook-assets/js/lookbook.js

@@ -7849,7 +7849,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $392c8629951fa7df$exports = {};
+var $8827b5620b152958$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11502,72 +11502,6 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
-var $47a1c62621be0c54$exports = {};
-
-$parcel$defineInteropFlag($47a1c62621be0c54$exports);
-
-$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
-var $122263eab94cad08$exports = {};
-
-$parcel$defineInteropFlag($122263eab94cad08$exports);
-
-$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
-$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
-
-function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
-    let copyTimeout = null;
-    return Object.assign(context, {
-        copied: false,
-        async copyToClipboard (target = null) {
-            let targetEl;
-            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
-            else if (typeof target === "string") targetEl = document.querySelector(target);
-            if (!targetEl) {
-                this.warn("Could not find copy target");
-                return false;
-            }
-            const content = $7ae6ae39c2ec9059$export$6cb344a21ca18aec(targetEl.innerText.trim());
-            await window.navigator.clipboard.writeText(content);
-            this.copied = true;
-            if (copyTimeout) clearTimeout(copyTimeout);
-            copyTimeout = setTimeout(()=>{
-                this.copied = false;
-                this.onCopyComplete();
-            }, 1000);
-            return content;
-        },
-        onCopyComplete () {}
-    });
-}
-function $122263eab94cad08$export$2e2bcd8739ae039() {
-    return $122263eab94cad08$export$c6684e6159b21de3({});
-}
-
-
-
-function $47a1c62621be0c54$export$2e2bcd8739ae039() {
-    const button = $cbd28b10fa9798c7$export$2e2bcd8739ae039();
-    return {
-        ...button,
-        copied: false,
-        init () {
-            button.init.bind(this)();
-            $122263eab94cad08$export$c6684e6159b21de3(this);
-        }
-    };
-}
-
-
 var $e398acaded942bbe$exports = {};
 
 $parcel$defineInteropFlag($e398acaded942bbe$exports);
@@ -12466,6 +12400,16 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
+var $99486586f6691564$exports = {};
+
+$parcel$defineInteropFlag($99486586f6691564$exports);
+
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
+}
+
+
 var $e9904a14dabf652d$exports = {};
 
 $parcel$defineInteropFlag($e9904a14dabf652d$exports);
@@ -12491,36 +12435,74 @@ function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
 }
 
 
-var $36506012e0c6e9e3$exports = {};
+var $47a1c62621be0c54$exports = {};
 
-$parcel$defineInteropFlag($36506012e0c6e9e3$exports);
+$parcel$defineInteropFlag($47a1c62621be0c54$exports);
 
-$parcel$export($36506012e0c6e9e3$exports, "default", () => $36506012e0c6e9e3$export$2e2bcd8739ae039);
-function $36506012e0c6e9e3$export$2e2bcd8739ae039(iconName) {
-    return {
-        iconName: iconName
-    };
-}
+$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
+var $122263eab94cad08$exports = {};
 
+$parcel$defineInteropFlag($122263eab94cad08$exports);
 
-var $b63b9c6d236b3f65$exports = {};
+$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
+$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
 
-$parcel$defineInteropFlag($b63b9c6d236b3f65$exports);
+function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
+    let copyTimeout = null;
+    return Object.assign(context, {
+        copied: false,
+        async copyToClipboard (target = null) {
+            let targetEl;
+            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
+            else if (typeof target === "string") targetEl = document.querySelector(target);
+            if (!targetEl) {
+                this.warn("Could not find copy target");
+                return false;
+            }
+            const content = $7ae6ae39c2ec9059$export$6cb344a21ca18aec(targetEl.innerText.trim());
+            await window.navigator.clipboard.writeText(content);
+            this.copied = true;
+            if (copyTimeout) clearTimeout(copyTimeout);
+            copyTimeout = setTimeout(()=>{
+                this.copied = false;
+                this.onCopyComplete();
+            }, 1000);
+            return content;
+        },
+        onCopyComplete () {}
+    });
+}
+function $122263eab94cad08$export$2e2bcd8739ae039() {
+    return $122263eab94cad08$export$c6684e6159b21de3({});
+}
 
-$parcel$export($b63b9c6d236b3f65$exports, "default", () => $b63b9c6d236b3f65$export$2e2bcd8739ae039);
 
-function $b63b9c6d236b3f65$export$2e2bcd8739ae039() {
+
+function $47a1c62621be0c54$export$2e2bcd8739ae039() {
+    const button = $cbd28b10fa9798c7$export$2e2bcd8739ae039();
     return {
-        narrow: false,
+        ...button,
+        copied: false,
         init () {
-            $9930d46698775b42$export$a2214cc2adb2dc44(this.$el, ({ width: width  })=>{
-                this.narrow = width < 450;
-            });
+            button.init.bind(this)();
+            $122263eab94cad08$export$c6684e6159b21de3(this);
         }
     };
 }
 
 
+var $36506012e0c6e9e3$exports = {};
+
+$parcel$defineInteropFlag($36506012e0c6e9e3$exports);
+
+$parcel$export($36506012e0c6e9e3$exports, "default", () => $36506012e0c6e9e3$export$2e2bcd8739ae039);
+function $36506012e0c6e9e3$export$2e2bcd8739ae039(iconName) {
+    return {
+        iconName: iconName
+    };
+}
+
+
 var $d92d9d5253f84566$exports = {};
 
 $parcel$defineInteropFlag($d92d9d5253f84566$exports);
@@ -12563,28 +12545,19 @@ function $d92d9d5253f84566$export$2e2bcd8739ae039(store) {
 }
 
 
-var $a87dacf5139b5e2f$exports = {};
+var $b63b9c6d236b3f65$exports = {};
 
-$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
+$parcel$defineInteropFlag($b63b9c6d236b3f65$exports);
 
-$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
-function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
+$parcel$export($b63b9c6d236b3f65$exports, "default", () => $b63b9c6d236b3f65$export$2e2bcd8739ae039);
+
+function $b63b9c6d236b3f65$export$2e2bcd8739ae039() {
     return {
-        get store () {
-            return store || this;
-        },
-        get id () {
-            return this.$root.id;
-        },
-        get panels () {
-            return Array.from(this.$refs.panels.children);
-        },
-        isActive (el) {
-            return this.store.activeTab === this._getRef(el);
-        },
-        // protected
-        _getRef (el) {
-            return el.getAttribute("x-ref");
+        narrow: false,
+        init () {
+            $9930d46698775b42$export$a2214cc2adb2dc44(this.$el, ({ width: width  })=>{
+                this.narrow = width < 450;
+            });
         }
     };
 }
@@ -13143,6 +13116,33 @@ function $506dabb2bf255b38$var$sizeSplits(sizes) {
 }
 
 
+var $a87dacf5139b5e2f$exports = {};
+
+$parcel$defineInteropFlag($a87dacf5139b5e2f$exports);
+
+$parcel$export($a87dacf5139b5e2f$exports, "default", () => $a87dacf5139b5e2f$export$2e2bcd8739ae039);
+function $a87dacf5139b5e2f$export$2e2bcd8739ae039(store) {
+    return {
+        get store () {
+            return store || this;
+        },
+        get id () {
+            return this.$root.id;
+        },
+        get panels () {
+            return Array.from(this.$refs.panels.children);
+        },
+        isActive (el) {
+            return this.store.activeTab === this._getRef(el);
+        },
+        // protected
+        _getRef (el) {
+            return el.getAttribute("x-ref");
+        }
+    };
+}
+
+
 var $0db07828cadc68e0$exports = {};
 
 $parcel$defineInteropFlag($0db07828cadc68e0$exports);
@@ -13364,18 +13364,18 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$392c8629951fa7df$exports = {
+$8827b5620b152958$exports = {
     "button": $cbd28b10fa9798c7$exports,
-    "code": $99486586f6691564$exports,
-    "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
     "embed": $e1f51f020443edd4$exports,
+    "code": $99486586f6691564$exports,
     "filter": $e9904a14dabf652d$exports,
+    "copy_button": $47a1c62621be0c54$exports,
     "icon": $36506012e0c6e9e3$exports,
-    "params_editor": $b63b9c6d236b3f65$exports,
     "nav": $d92d9d5253f84566$exports,
-    "tab_panels": $a87dacf5139b5e2f$exports,
+    "params_editor": $b63b9c6d236b3f65$exports,
     "split_layout": $506dabb2bf255b38$exports,
+    "tab_panels": $a87dacf5139b5e2f$exports,
     "tabs": $0db07828cadc68e0$exports,
     "viewport": $6d64716f0b34fdf4$exports
 };
@@ -13524,7 +13524,7 @@ $caa9439642c6336c$export$2e2bcd8739ae039.store("settings", $96e0343bbb13096b$exp
 // Components
 $caa9439642c6336c$export$2e2bcd8739ae039.data("app", $d709d0f4027033b2$export$2e2bcd8739ae039);
 [
-    $392c8629951fa7df$exports,
+    $8827b5620b152958$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{