lookbook 2.0.0.beta.4 → 2.0.0.beta.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32b443cd8b8590f1378d66d6ff64cb95a6ab1d6ff771dfc40bb9cbe5b3a13236
-  data.tar.gz: 26cafffae7ed01a3fd19be32e13f805a8e819a5984e2f178cdff66502f4989f5
+  metadata.gz: bfe0ace7c0c83d2cb22ac89815ccb492dd5c8fc16ad4b33c905caae04f942fec
+  data.tar.gz: f8c0fd31b102ab2e6846c9990574f0b1404025eec8b9d5670e61404d0590a83d
 SHA512:
-  metadata.gz: 31d790b457c4fbc1584d1fa81201a635a857ba02e3b6e9693d42589a1facc08ef72dcf90987426062ed0a5ce0b72ba7ad395a1739324a4d8f896c09d1e10629c
-  data.tar.gz: be0770e93e0ab89028a0669e6a63073374f420b9d93b59aa1364c21a06cbf79f9f274ca0ed33b48bdd5a80c86a04161748c701c4e27020f5bb2f1f3454064b8f
+  metadata.gz: 70b9c6dec1a29fbc3a2287377f9f69010c6fafac082478db74690b0ca1a746f617046f0f02b0edecc557d6aef7e8e572a73e03a9acd119f8ee3cfd7b5ba79f01
+  data.tar.gz: 6a1870ef7600be6280e7d26c4337c99bc60bc3ffd47998ee313386d6d259a14e0e00fcff6e85a232f6f7120cb3b2b6d6df5a6b0b1383d8154f4d46d195890013

data/app/components/lookbook/button/component.js

@@ -1,5 +1,5 @@
-import tippy from "~/app/assets/lookbook/js/lib/tippy";
-import { initTooltip } from "~/app/assets/lookbook/js/components/tooltip";
+import tippy from "~/assets/js/lib/tippy";
+import { initTooltip } from "~/assets/js/components/tooltip";
 
 export default function buttonComponent() {
   let tooltip = null;

data/app/components/lookbook/copy_button/component.js

@@ -1,4 +1,4 @@
-import { initClipboard } from "~/app/assets/lookbook/js/components/clipboard";
+import { initClipboard } from "~/assets/js/components/clipboard";
 import buttonComponent from "@components/button/component";
 
 export default function copyButtonComponent() {

data/app/components/lookbook/display_options/field/component.js

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
 import {
   parseSearchParamValue,
   buildSearchParamValue,
-} from "~/app/assets/lookbook/js/helpers/string";
+} from "~/assets/js/helpers/string";
 
 export default function displayOptionsFieldComponent({ name, value }) {
   return {

data/app/components/lookbook/header/component.css

@@ -0,0 +1,12 @@
+@layer components {
+  [data-component="header"] {
+    .header-project-icon {
+      @apply h-5 inline-block flex-none;
+      width: min-content;
+
+      svg {
+        @apply h-full w-auto;
+      }
+    }
+  }
+}

data/app/components/lookbook/header/component.html.erb

@@ -1,16 +1,20 @@
 <%= render_component_tag :header do %>
   <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
     <% toolbar.with_section padded: true do %>
-      <div class="flex items-center space-x-3">
-        <%= lookbook_render :logo, size: 4 %>
-        <% if branding.present? %>
-          <a
-            <% if landing_path %>href="<%= landing_path %>"<% end %>    
-            class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
-            <%= branding %>
-          </a>
+      <a <% if landing_path %>href="<%= landing_path %>"<% end %> class="flex items-center space-x-3">
+        <% if project_logo.present? %>
+          <i class="header-project-icon">
+            <%== project_logo %>
+          </i>
+        <% elsif project_logo != false %>
+          <%= lookbook_render :logo, size: 3.7 %>
         <% end %>
-      </div>
+        <% if project_name.present? %>
+          <span class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
+            <%= project_name %>
+          </span>
+        <% end %>
+      </a>
     <% end %>
 
     <% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>

data/app/components/lookbook/header/component.rb

@@ -1,9 +1,11 @@
 module Lookbook
   class Header::Component < Lookbook::BaseComponent
-    renders_one :branding
+    attr_reader :project_logo, :project_name
 
-    def initialize(debug_menu: false, **html_attrs)
+    def initialize(debug_menu: false, project_name: nil, project_logo: nil, **html_attrs)
       @debug_menu = debug_menu
+      @project_logo = project_logo
+      @project_name = project_name
       super(**html_attrs)
     end
 

data/app/components/lookbook/icon/component.css

@@ -7,5 +7,13 @@
       stroke-linecap: round;
       stroke-linejoin: round;
     }
+
+    &.icon-stroke-2 svg {
+      stroke-width: 2;
+    }
+
+    &.icon-stroke-1 svg {
+      stroke-width: 1;
+    }
   }
 }

data/app/components/lookbook/icon/component.html.erb

@@ -1,5 +1,3 @@
-<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}" do %>
-  <svg stroke-width="<%= stroke %>">
-    <use :href="`/lookbook-assets/img/lucide-sprite.svg#${iconName}`" x-cloak />
-  </svg>
+<%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}", class: "icon-stroke-#{stroke}" do %>
+  <%= svg %>
 <% end %>

data/app/components/lookbook/icon/component.rb

@@ -1,9 +1,11 @@
 module Lookbook
   class Icon::Component < Lookbook::BaseComponent
+    ICON_CACHE = {}
+
     attr_reader :stroke
 
     def initialize(name:, size: 4, stroke: 2, **html_attrs)
-      @alpine_data = name.is_a?(Symbol) ? alpine_encode(name.to_s.tr("_", "-")) : name
+      @icon_name = name.to_s.tr("_", "-")
       @size = size || 4
       @stroke = stroke
       super(**html_attrs)
@@ -13,10 +15,20 @@ module Lookbook
       "#{@size * 0.25}rem"
     end
 
-    protected
+    def svg
+      ICON_CACHE[@icon_name] ||= read_svg
+    end
+
+    def read_svg
+      File.read(svg_path).html_safe
+    rescue
+      if Rails.env.development? || Rails.env.test?
+        raise "`#{@icon_name}` is not a valid icon name"
+      end
+    end
 
-    def alpine_component
-      "iconComponent"
+    def svg_path
+      Lookbook::Engine.root.join("assets/icons/#{@icon_name}.svg")
     end
   end
 end

data/app/components/lookbook/nav/directory/component.html.erb

@@ -11,10 +11,10 @@
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.toggle" do %>
     <div class="nav-action-inner">
-      <%= icon nil,
-        size: 3,
-        class: "nav-toggle-icon",
-        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <% if children? %>
+        <%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
+        <%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
+      <% end %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span class="truncate"><%= label %></span>
     </div>

data/app/components/lookbook/nav/entity/component.html.erb

@@ -12,10 +12,10 @@
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="nav-action-inner">
-      <%= icon nil,
-        size: 3,
-        class: "nav-toggle-icon",
-        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <% if children? %>
+        <%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
+        <%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
+      <% end %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span class="truncate <% if node.type == :preview %>font-semibold<% end %>"><%= label %></span>
     </div>

data/app/components/lookbook/tabs/component.js

@@ -1,5 +1,5 @@
 import { debounce } from "throttle-debounce";
-import tippy from "~/app/assets/lookbook/js/lib/tippy";
+import tippy from "~/assets/js/lib/tippy";
 import { observeSize } from "@helpers/layout";
 import { getElementSize } from "@helpers/dom";
 

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

@@ -11,9 +11,11 @@
 
     <%= render "lookbook/partials/user_styles" %>
 
-    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.with_branding { @config.project_name } %>
-    <% end %>
+    <%= lookbook_render :header,
+      id: "app-header",
+      debug_menu: @config.debug_menu,
+      project_name: @config.project_name,
+      project_logo: @config.project_logo %>
 
     <% if @previews.any? || @pages.any? %>
       
@@ -30,58 +32,54 @@
           "@click.outside": "closeMobileSidebar",
           cloak: true do %>
 
-          <% cache @engine.last_changed do %>
-
-            <%= lookbook_render :split_layout,
-              alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
-              style: "height: calc(100vh - 2.5rem);" do |layout| %>
+          <%= lookbook_render :split_layout,
+            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
+            style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-              <% if @previews.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "previews-nav",
-                    tree: @previews.to_tree,
-                    alpine_data: "$store.nav.previews" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Previews</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @previews.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "previews-nav",
+                  tree: @previews.to_tree,
+                  alpine_data: "$store.nav.previews" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Previews</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
-                    <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                   <% end %>
+                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
+            <% end %>
 
-              <% if @pages.any? %>
-                <% layout.with_pane class: "overflow-hidden" do %>
-                  <%= lookbook_render :nav,
-                    id: "pages-nav",
-                    tree: @pages.to_tree,
-                    alpine_data: "$store.nav.pages" do |nav| %>
-                    <%= nav.with_toolbar do |toolbar| %>
-                      <% toolbar.with_section padded: true do %>
-                        <h4 class="pt-1">Pages</h4>
-                      <% end %>
-                      <% toolbar.with_section align: :right, padded: false do %>
-                        <%= lookbook_render :button_group, size: :xs do |group| %>
-                          <% group.with_button icon: :minus_square,
-                            tooltip: "Collapse all",
-                            "@click": "closeAll" %>
-                        <% end %>
+            <% if @pages.any? %>
+              <% layout.with_pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "pages-nav",
+                  tree: @pages.to_tree,
+                  alpine_data: "$store.nav.pages" do |nav| %>
+                  <%= nav.with_toolbar do |toolbar| %>
+                    <% toolbar.with_section padded: true do %>
+                      <h4 class="pt-1">Pages</h4>
+                    <% end %>
+                    <% toolbar.with_section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.with_button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
             <% end %>
-
           <% end %>
         <% end %>
 

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

@@ -14,15 +14,9 @@
     </style>
   <% end %>
 
-  <% if @config.ui_favicon == true %>
-    <link
-      rel="icon"
-      href="data:image/svg+xml,%3Csvg 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 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)">
+  <% unless @config.ui_favicon == false %>
+    <link rel="icon" href="<%= @config.ui_favicon_dark %>" media="(prefers-color-scheme: dark)">
+    <link rel="icon" href="<%= @config.ui_favicon_light %>" media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>

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

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

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

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

data/config/app.yml

@@ -1,5 +1,6 @@
 shared:
-  project_name: Lookbook
+  project_name: ~
+  project_logo: ~
 
   preview_paths: [test/components/previews]
   preview_display_options: {}

data/lib/lookbook/engine.rb

@@ -14,14 +14,21 @@ module Lookbook
       )
     end
 
+    initializer "lookbook.set_autoload_paths" do
+      unless opts.preview_paths.empty?
+        paths_to_add = opts.preview_paths - ActiveSupport::Dependencies.autoload_paths
+        ActiveSupport::Dependencies.autoload_paths.concat(paths_to_add) if paths_to_add.any?
+      end
+    end
+
     config.before_configuration do
       config.lookbook = Lookbook.config
 
       if defined?(ViewComponent)
-        config.lookbook.using_view_component = true
+        config.lookbook.using_view_component ||= true
       else
         require "view_component"
-        config.lookbook.using_view_component = false
+        config.lookbook.using_view_component ||= false
       end
     end
 
@@ -114,7 +121,7 @@ module Lookbook
       end
 
       def hooks
-        @_hooks ||= HookStore.init_from_config
+        @_hooks ||= HookStore.new
       end
 
       def run_hooks(event_name, *args)
@@ -159,10 +166,10 @@ module Lookbook
       end
 
       def preview_watch_paths
-        return @_preview_watch_paths if @_preview_watch_paths
-
-        paths = [*opts.preview_paths, *opts.component_paths, *opts.listen_paths, *view_paths].uniq
-        @_preview_watch_paths ||= PathUtils.normalize_paths(paths)
+        @_preview_watch_paths ||= begin
+          paths = [*opts.preview_paths, *opts.component_paths, *opts.listen_paths, *view_paths].uniq
+          PathUtils.normalize_paths(paths)
+        end
       end
 
       def pages
@@ -184,13 +191,17 @@ module Lookbook
         changed_files = [*changes[:added], *changes[:modified]] if changes
         parser.parse(changed_files) do |code_objects|
           previews.load(code_objects.all(:class), changes)
-          mark_changed
         end
+      rescue => e
+        Lookbook.logger.error(e)
+        raise e
       end
 
       def load_pages(changes = nil)
         pages.load(Engine.page_paths, changes)
-        mark_changed
+      rescue => e
+        Lookbook.logger.error(e)
+        raise e
       end
 
       def notify_clients(changes = nil)
@@ -205,15 +216,6 @@ module Lookbook
         reloaders.register_changes(changes)
         notify_clients(changes)
       end
-
-      def mark_changed
-        @_last_changed = (Time.now.to_f * 1000).to_i
-      end
-
-      def last_changed
-        mark_changed unless @_last_changed
-        @_last_changed
-      end
     end
 
     at_exit do

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

@@ -31,7 +31,12 @@ module Lookbook
           fetch_config(:priority, default_priority)
         end
 
-        @_priority ||= pos.to_i
+        @_priority ||= @_fallback_priority || pos.to_i
+      end
+
+      # @api private
+      def default_priority=(i)
+        @default_priority = i.to_i
       end
 
       # @api private

data/lib/lookbook/entities/preview_entity.rb

@@ -173,11 +173,31 @@ module Lookbook
     protected
 
     def load_scenarios
-      return scenario_entities unless code_object.groups.any?
-
-      scenario_entities.group_by(&:group).flat_map do |group_name, grouped_scenarios|
-        group_name.nil? ? grouped_scenarios : ScenarioGroupEntity.new(group_name.presence || label.pluralize, grouped_scenarios, self)
+      code_object.groups.any? ? grouped_scenario_entities : scenario_entities
+    end
+
+    def grouped_scenario_entities
+      scenarios = []
+      scenario_entities.each.with_index(1) do |entity, i|
+        if entity.group.nil?
+          entity.default_priority = i
+          scenarios << entity
+        else
+          group_name = entity.group.presence || entity.parent.name.pluralize
+          group = scenarios.find do |s|
+            s.is_a?(ScenarioGroupEntity) && s.name == Utils.name(group_name)
+          end
+
+          if group
+            group.add_scenario(entity)
+          else
+            group = ScenarioGroupEntity.new(group_name, [entity], self)
+            group.default_priority = i
+            scenarios << group
+          end
+        end
       end
+      scenarios
     end
 
     def scenario_entities

data/lib/lookbook/entities/scenario_group_entity.rb

@@ -126,5 +126,10 @@ module Lookbook
     def search_terms
       [parent.label, label]
     end
+
+    # @api private
+    def add_scenario(scenario)
+      @scenarios.add(scenario)
+    end
   end
 end

data/lib/lookbook/preview.rb

@@ -35,6 +35,10 @@ module Lookbook
     alias_method :render_component, :render
 
     class << self
+      def preview_name
+        name.chomp("Preview").underscore
+      end
+
       # Returns the arguments for rendering of the component in its layout
       def render_args(scenario, params: {})
         scenario_params_names = instance_method(scenario).parameters.map(&:last)

data/lib/lookbook/services/urls/data_uri_encoder.rb

@@ -0,0 +1,14 @@
+module Lookbook
+  class DataUriEncoder < Service
+    attr_reader :str, :mime_type
+
+    def initialize(str, mime_type)
+      @str = str
+      @mime_type = mime_type
+    end
+
+    def call
+      "data:#{mime_type},#{ERB::Util.url_encode(str)}"
+    end
+  end
+end

data/lib/lookbook/services/urls/file_data_uri_encoder.rb

@@ -0,0 +1,24 @@
+require "marcel"
+
+module Lookbook
+  class FileDataUriEncoder < Service
+    attr_reader :path
+
+    def initialize(path, mime_type = nil)
+      @path = path
+      @mime_type = mime_type
+    end
+
+    def content
+      File.read(path)
+    end
+
+    def mime_type
+      @mime_type || Marcel::MimeType.for(Pathname.new(path))
+    end
+
+    def call
+      DataUriEncoder.call(content, mime_type)
+    end
+  end
+end

data/lib/lookbook/stores/config_store.rb

@@ -15,6 +15,10 @@ module Lookbook
   # @api public
   class ConfigStore
     CONFIG_FILE = "config/app.yml"
+    DEFAULT_FAVICONS = {
+      light: "assets/img/favicon_light.svg",
+      dark: "assets/img/favicon_dark.svg"
+    }
 
     delegate_missing_to :store
     attr_reader :store
@@ -23,8 +27,20 @@ module Lookbook
       @store = Store.new(config, recursive: true)
     end
 
+    def project_name
+      if store[:project_name].nil?
+        if store[:project_logo].nil?
+          Rails.application.class.module_parent.name.titleize
+        else
+          false
+        end
+      else
+        store[:project_name]
+      end
+    end
+
     def project_name=(name)
-      store[:project_name] = (name == false) ? nil : name
+      store[:project_name] = name
     end
 
     def page_extensions=(extensions = nil)
@@ -52,6 +68,14 @@ module Lookbook
       end
     end
 
+    def ui_favicon_light
+      @_ui_favicon_light ||= get_favicon(:light)
+    end
+
+    def ui_favicon_dark
+      @_ui_favicon_dark ||= get_favicon(:dark)
+    end
+
     def ui_theme_overrides(&block)
       if block
         yield store[:ui_theme_overrides]
@@ -67,5 +91,26 @@ module Lookbook
     def self.default_config(env: Rails.env)
       ConfigLoader.call(CONFIG_FILE, env: env)
     end
+
+    private
+
+    def get_favicon(theme)
+      default_favicon_path = Engine.root.join(DEFAULT_FAVICONS[theme])
+      default_favicon = FileDataUriEncoder.call(default_favicon_path)
+
+      if ui_favicon.present?
+        if ui_favicon.is_a?(Hash)
+          if ui_favicon[theme].is_a?(String)
+            DataUriEncoder.call(ui_favicon[theme], "image/svg+xml")
+          else
+            default_favicon
+          end
+        elsif ui_favicon.is_a?(String)
+          DataUriEncoder.call(ui_favicon, "image/svg+xml")
+        else
+          default_favicon
+        end
+      end
+    end
   end
 end