Merge branch 'current' into patch-108

Gemfile.lock

@@ -88,7 +88,7 @@ GEM
     prism (0.30.0)
     public_suffix (6.0.0)
     racc (1.8.0)
-    rack (3.1.4)
+    rack (3.1.6)
     rack-protection (4.0.0)
       base64 (>= 0.1.0)
       rack (>= 3.0.0, < 4)
@@ -142,12 +142,12 @@ GEM
       rack-protection (= 4.0.0)
       rack-session (>= 2.0.0, < 3)
       tilt (~> 2.0)
-    sorbet-runtime (0.5.11447)
+    sorbet-runtime (0.5.11466)
     stringex (2.8.6)
     strscan (3.1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    tilt (2.3.0)
+    tilt (2.4.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     tzinfo-data (1.2024.1)

plugins/alerts.rb

@@ -0,0 +1,83 @@
+module Jekyll
+  module HomeAssistant
+    class AlertBlock < Liquid::Block
+      def initialize(tag_name, args, tokens)
+        super
+        raise SyntaxError, <<~MSG unless args.strip =~ SYNTAX
+          Syntax error in alert block while parsing the following options:
+
+          #{args}
+
+          Valid syntax:
+            {% <note|tip|important|warning|caution> [title="Extra title"] [icon="mdi:alert"] %}
+        MSG
+
+        @type = tag_name
+        @options = Regexp.last_match(1)
+      end
+
+      def render(context)
+        # We parse on render, as we now have context
+        options = parse_options(@options, context)
+        contents = super(context)
+
+        title = @type.capitalize
+        if options.include? :title
+          title += ": #{options[:title]}"
+        end
+
+        if options.include? :icon
+          icon = options[:icon]
+        elsif @type == 'tip'
+          icon = "mdi:lightbulb-outline"
+        elsif @type == 'important'
+          icon = "mdi:message-alert-outline"
+        elsif @type == 'warning'
+          icon = "mdi:alert-outline"
+        elsif @type == 'caution'
+          icon = "mdi:alert-circle-outline"
+        else
+          icon = "mdi:information-outline"
+        end
+
+        <<~MARKUP
+          <div class="alert alert-#{@type}">
+            <p class="alert-title"><iconify-icon inline icon='#{icon}'></iconify-icon> #{title}</p>
+            <p class="alert-content">
+              #{contents}
+            </p>
+          </div>
+        MARKUP
+      end
+
+      private
+
+      SYNTAX = /^((\s+\w+(=([\w.]+?|".+?"))?)*)$/
+      OPTIONS_REGEX = /(?:\w="[^"]*"|\w=[\w.]+|\w)+/
+
+      def parse_options(input, context)
+        options = {}
+        return options if input.empty?
+
+        # Split along 3 possible forms: key="value", key=value, or just key
+        input.scan(OPTIONS_REGEX) do |opt|
+          key, value = opt.split('=')
+          unless value.nil?
+            if value&.include?('"')
+              value.delete!('"')
+            else
+              value = context[value]
+            end
+          end
+          options[key.to_sym] = value || true
+        end
+        options
+      end
+    end
+  end
+end
+Liquid::Template.register_tag('note', Jekyll::HomeAssistant::AlertBlock)
+Liquid::Template.register_tag('tip', Jekyll::HomeAssistant::AlertBlock)
+Liquid::Template.register_tag('important', Jekyll::HomeAssistant::AlertBlock)
+Liquid::Template.register_tag('warning', Jekyll::HomeAssistant::AlertBlock)
+Liquid::Template.register_tag('caution', Jekyll::HomeAssistant::AlertBlock)

plugins/configuration.rb

@@ -64,7 +64,7 @@ def render_config_vars(vars:, component:, platform:, converter:, classes: nil, p
       result << vars.map do |key, attr|
         markup = Array.new
         # There are spaces around the "{key}", to improve double-click selection in Chrome.
-        markup << "<div class='config-vars-item'><div class='config-vars-label'><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a> <span class='config-vars-label-name'> #{key} </span>"
+        markup << "<div class='config-vars-item'><div class='config-vars-label'><span class='config-vars-label-name'> #{key} </span>"
 
         if attr.key? 'type'
 
@@ -121,7 +121,7 @@ def render_config_vars(vars:, component:, platform:, converter:, classes: nil, p
           markup << "<span class='config-vars-required'>#{startSymbol}<span class='#{attr['required'].to_s}'>#{required_value(attr['required'])}</span><span class='default'>#{shortDefaultValue}</span>#{endSymbol}</span>"
         end
 
-        markup << "</div><div class='config-vars-description-and-children'>"
+        markup << "<a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a></div><div class='config-vars-description-and-children'>"
 
         if attr.key? 'description'
           markup << "<span class='config-vars-description'>#{converter.convert(attr['description'].to_s)}</span>"
@@ -168,9 +168,9 @@ def render(context)
 
       <<~MARKUP
         <div class="config-vars">
-          <h3>
-            <a class="title-link" name="configuration-variables" href="#configuration-variables"></a> Configuration Variables
-          </h3>
+          <h4>
+            Configuration Variables <a class="title-link" name="configuration-variables" href="#configuration-variables"></a>
+          </h4>
           <div class="configuration-link">
             <a href="/docs/configuration/" target="_blank">Looking for your configuration file?</a>
           </div>

plugins/configuration_basic.rb

@@ -15,7 +15,7 @@ def render_config_vars(vars:, component:, platform:, converter:, classes: nil, p
 
       result << vars.map do |key, attr|
         markup = Array.new
-        markup << "<div class='config-vars-item'><div class='config-vars-label'><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a> <span class='config-vars-label-name'>#{key}</span></div><div class='config-vars-description-and-children'>"
+        markup << "<div class='config-vars-item'><div class='config-vars-label'><span class='config-vars-label-name'>#{key}</span><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a></div><div class='config-vars-description-and-children'>"
 
         if attr.key? 'description'
           markup << "<span class='config-vars-description'>#{converter.convert(attr['description'].to_s)}</span>"

plugins/details.rb

@@ -1,27 +1,44 @@
 module Jekyll
   class DetailsBlock < Liquid::Block
 
-    def initialize(tag_name, title, tokens)
+    def initialize(tag_name, args, tokens)
       super
-      @title = title
       @details_idx = 1
+
+      raise SyntaxError, <<~MSG unless args.strip =~ SYNTAX
+        Syntax error in tag 'details' while parsing the following options:
+
+        #{args}
+
+        Valid syntax:
+          {% details <title> [icon="iconify icon identifier"] %}
+      MSG
+
+      @title = Regexp.last_match(1)
+      @options = Regexp.last_match(2)
     end
 
     def render(context)
+      # We parse on render, as we now have context
+      options = parse_options(@options, context)
+
       contents = super(context)
-      if @title.nil? || @title.empty? then
-        title = "More info"
+      title = if @title.nil? || @title.empty? then
+        "More information"
       else
-        title = @title
+        @title
       end
       title = title.to_s.delete("\"")
 
       idx = context["details_idx"]
-      if idx.nil? then
-        idx = 0
-      end
+      idx = 0 if idx.nil?
       context["details_idx"] = idx + 1
 
+      icon = ""
+      if options.include? :icon
+        icon = "<iconify-icon inline icon='#{options[:icon]}'></iconify-icon> "
+      end
+
       <<~MARKUP
         <script>
         function showDetails(el) {
@@ -38,7 +55,7 @@ def render(context)
         <div class="details-block">
           <div class='details-block-item'>
             <button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false">
-              #{title}
+              <span>#{icon}#{title}</span>
               <div class='details-block-arrow'>
               <svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
               <svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
@@ -49,6 +66,30 @@ def render(context)
         </div>
       MARKUP
     end
+
+    private
+
+    SYNTAX = /^(".+?")((\s+\w+(=([\w\.]+?|".+?"))?)*)$/
+    OPTIONS_REGEX = /(?:\w="[^"]*"|\w=[\w\.]+|\w)+/
+
+    def parse_options(input, context)
+      options = {}
+      return options if input.empty?
+
+      # Split along 3 possible forms: key="value", key=value, or just key
+      input.scan(OPTIONS_REGEX) do |opt|
+        key, value = opt.split("=")
+        unless value.nil?
+          if value&.include?('"')
+            value.delete!('"')
+          else
+            value = context[value]
+          end
+        end
+        options[key.to_sym] = value || true
+      end
+      options
+    end
   end
 end
 

plugins/my.rb

@@ -65,10 +65,10 @@ def render(context)
             raise ArgumentError, "No default icon for redirect #{@redirect}" \
             if !!options[:icon] == options[:icon] and ! DEFAULT_ICONS.include?(@redirect)
               icon = !!options[:icon] == options[:icon] ? DEFAULT_ICONS[@redirect] : @options[:icon]
-            icon = "<i class='#{icon}' /> "
+            icon = "<iconify-icon inline icon='#{icon}'></iconify-icon> "
           end
 
-          "#{icon}<a href='#{uri}' class='my' target='_blank'>#{title}</a>"
+          "<a href='#{uri}' class='my' target='_blank'>#{icon}#{title}</a>"
         end
       end
 
@@ -79,8 +79,9 @@ def render(context)
 
       # Default icons when used in in-line text
       DEFAULT_ICONS = {
-        "config_flow_start" => "icon-plus-sign",
-        "config" => "icon-cog",
+        "config_flow_start" => "mdi:plus",
+        "config" => "mdi:cog",
+        "integrations" => "mdi:devices",
       }
 
       # Default title used for in-line text

plugins/output_modder.rb

@@ -21,8 +21,18 @@ def output_modder(content)
                 # All external links start with 'http', skip when this one does not
                 next unless link.get_attribute('href') =~ /\Ahttp/i
 
-                # Play nice with our own links
+                # Append an external link icon, if there isn't an icon already
                 next if link.get_attribute('href') =~ /\Ahttps?:\/\/\w*.?home-assistant.io/i
+                next if link.css('iconify-icon').any?
+
+                icon = Nokogiri::XML::Node.new('iconify-icon', dom)
+                icon['inline'] = true
+                icon['icon'] = 'tabler:external-link'
+                icon['class'] = 'external-link'
+                link.add_child(icon)
+
+                # Play nice with our own links
+                next if link.get_attribute('href') =~ /\Ahttps?:\/\/(?:\w+\.)?(?:home-assistant\.io|esphome\.io|nabucasa\.com|openhomefoundation\.org)/i
 
                 # Play nice with links that already have a rel attribute set
                 rel.unshift(link.get_attribute('rel'))
@@ -39,7 +49,7 @@ def output_modder(content)
 
                 title = header.content
                 slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
-                header.children = "<a class='title-link' name='#{slug}' href='\##{slug}'></a> #{title}"
+                header.children = "#{title} <a class='title-link' name='#{slug}' href='\##{slug}'></a>"
             end
 
             dom.to_s

plugins/terminology_tooltip.rb

@@ -34,7 +34,7 @@ def render(context)
 
         if glossary.key?("link")
           rendered_link = Liquid::Template.parse(glossary["link"]).render(context).strip
-          link = "<small><a class='terminology-link' href='#{rendered_link}' target='_blank'>[Learn more]</a></small>"
+          link = "<small><a class='terminology-link' href='#{rendered_link}'>[Learn more]</a></small>"
         end
 
         tooltip = "<span class='terminology-tooltip'>#{definition}#{link || ""}</span>"