Add My Home Assistant tag support (#16714)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

plugins/my.rb

@@ -0,0 +1,89 @@
+require 'uri'
+
+module Jekyll
+  module HomeAssistant
+    class My < Liquid::Tag
+
+      def initialize(tag_name, args, tokens)
+        super
+        if args.strip =~ SYNTAX
+          @redirect = Regexp.last_match(1).downcase
+          @options = Regexp.last_match(2)
+        else
+          raise SyntaxError, <<~MSG
+            Syntax error in tag 'my' while parsing the following options:
+            `
+            #{args}
+
+            Valid syntax:
+              {% my <redirect> [title="Link name"] [badge] [icon[="icon-puzzle-piece"]] [addon="core_ssh"] [blueprint_url=""] [domain="hue"] %}
+          MSG
+        end
+      end
+  
+      def render(context)
+        # We parse on render, as we now have context
+        options = parse_options(@options, context)
+  
+        # Base URI
+        uri =  URI.join("https://my.home-assistant.io/redirect/", @redirect)
+
+        # Build query string
+        query = []
+        query += [["addon", options[:addon]]] if options.include? :addon
+        query += [["blueprint_url", options[:blueprint_url]]] if options.include? :blueprint_url
+        query += [["domain", options[:domain]]] if options.include? :domain
+        unless query.empty?
+            uri.query = URI.encode_www_form(query)
+        end
+
+        if options[:badge]
+          title = options[:title] ? options[:title].gsub(/\ /, '_') : @redirect
+          "<a href='#{uri}' class='my badge' target='_blank'>"\
+          "<img src='https://img.shields.io/badge/#{title}-my?style=for-the-badge&label=MY&logo=home-assistant&color=41BDF5&logoColor=white' />"\
+          "</a>"
+        else
+          title = options[:title] ? options[:title] : @redirect.gsub(/_/, ' ').titlecase
+          icon = ""
+          if options[:icon]
+            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}' /> "
+          end
+          "#{icon}<a href='#{uri}' class='my' target='_blank'>#{title}</a>"
+        end
+      end
+
+      private
+
+      SYNTAX = %r!^([a-z_]+)((\s+\w+(=([\w\.]+?|".+?"))?)*)$!.freeze
+      OPTIONS_REGEX = %r!(?:\w="[^"]*"|\w=[\w\.]+|\w)+!.freeze
+
+      DEFAULT_ICONS = {
+        "config_flow_start" => "icon-plus-sign",
+        "integrations" => "icon-puzzle-piece",
+      }
+
+      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("=")
+          if !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('my', Jekyll::HomeAssistant::My)

sass/custom/_paulus.scss

@@ -459,13 +459,15 @@ div.note {
 
   .brand-logo-container {
     text-align: center;
-    height: 87px;
     margin-top: 50px;
-    margin-bottom: 25px;
 
     img {
       max-height: 67px;
     }
+
+    a.my img {
+      margin-top: 20px;
+    }
   }
 }
 
@@ -635,7 +637,6 @@ code {
   padding: 0.1em 0.4em;
 }
 
-
 @media only screen and (max-width: $menu-collapse) {
   #not_found {
     .page {
@@ -643,7 +644,6 @@ code {
 
       .search404-container {
         margin-bottom: 32px;
-
       }
     }
   }
@@ -670,3 +670,10 @@ code {
     }
   }
 }
+
+a.my {
+  img {
+    border: 0px;
+    border-radius: 3px;
+  }
+}

source/_docs/authentication/providers.markdown

@@ -113,7 +113,7 @@ homeassistant:
           - group: system-users
 ```
 
-First note, for `trusted_users` configuration you need to use `user id`, which you can find through Configuration -> Users -> View User Detail. The `trusted_users` configuration will not validate the existence of the user, so please make sure you have put in the correct user id by yourself.
+First note, for `trusted_users` configuration you need to use `user id`, which you can find through {% my users title="Configuration -> Users" %} -> View User Detail. The `trusted_users` configuration will not validate the existence of the user, so please make sure you have put in the correct user id by yourself.
 
 Second note, a trusted user with an IPv6 address must put the IPv6 address in quotes as shown.
 

source/_docs/configuration/basic.markdown

@@ -3,7 +3,7 @@ title: "Setup basic information"
 description: "Setting up the basic info of Home Assistant."
 ---
 
-As part of the default onboarding process, Home Assistant can detect your location from IP address geolocation. Home Assistant will automatically select a temperature unit and time zone based on this location. You may adjust this during onboarding, or afterwards at Configuration -> General.
+As part of the default onboarding process, Home Assistant can detect your location from IP address geolocation. Home Assistant will automatically select a temperature unit and time zone based on this location. You may adjust this during onboarding, or afterwards at {% my general title="Configuration -> General" %}.
 
 If you prefer YAML, you can add the following information to your `configuration.yaml`:
 
@@ -28,7 +28,7 @@ homeassistant:
   legacy_templates: false
 ```
 
-NOTE: You will not be able to edit anything in Configuration -> General in the UI if you are using YAML configuration for any of the following: name, latitude, longitude, elevation, unit_system, temperature_unit, time_zone, external_url, internal_url.
+NOTE: You will not be able to edit anything in {% my general title="Configuration -> General" %} in the UI if you are using YAML configuration for any of the following: name, latitude, longitude, elevation, unit_system, temperature_unit, time_zone, external_url, internal_url.
 
 {% configuration %}
 name:

source/_docs/tools/quick-bar.markdown

@@ -29,7 +29,7 @@ Type these from anywhere in the application to launch the dialog.
 
 *Hotkey: `e`*
 
-Similar to Configuration -> Entities, but more lightweight and accessible from anywhere in the frontend.
+Similar to {% my entities title="Configuration -> Entities" %}, but more lightweight and accessible from anywhere in the frontend.
 
 <p class='img'>
   <img src='/images/docs/quick-bar/quick-bar-entity-filter.gif' alt='Quick Bar'>

source/_includes/asides/component_navigation.html

@@ -6,6 +6,10 @@
     {%- else -%}
       <img src='https://brands.home-assistant.io/_/{{ page.ha_domain }}/logo.png' srcset='https://brands.home-assistant.io/_/{{ page.ha_domain }}/logo@2x.png 2x' />
     {%- endif -%}
+
+    {%- if page.ha_config_flow and page.ha_domain -%}
+      {% my config_flow_start badge title="Add Integration" domain=page.ha_domain %}
+    {%- endif -%}
   </div>
 
   {%- if page.ha_domain -%}
@@ -42,12 +46,6 @@
     </div>
   {%- endif -%}
 
-  {%- if page.ha_config_flow -%}
-    <div class='section'>
-      This integration is configurable via UI
-    </div>
-  {%- endif -%}
-
   {%- if page.ha_domain -%}
     <div class='section'>
       Source: <a href='https://github.com/home-assistant/core/tree/dev/homeassistant/components/{{ page.ha_domain }}'>View on GitHub</a>

source/_includes/integrations/config_flow.md

@@ -7,7 +7,7 @@ interface, by taking the following steps:
 
 - Browse to your Home Assistant instance.
 - In the sidebar click on <i class="icon-cog"/> _**Configuration**_.
-- From the configuration menu select: <i class="icon-puzzle-piece" /> _**Integrations**_.
+- From the configuration menu select: _**{% my integrations icon %}**_.
 
 {% if include.discovery or page.ha_dhcp or page.ha_homekit or page.ha_ssdp or page.ha_zeroconf %}
 {{ name }} can be auto-discovered by Home Assistant. If an instance was found,
@@ -20,7 +20,7 @@ manual integration entry:
 {% endif %}
 
 - In the bottom right, click on the
-  <i class="icon-plus-sign" /> _**Add Integration**_ button.
+  _**{% my config_flow_start icon title="Add Integration" domain=page.ha_domain %}**_ button.
 - From the list, search and select _**"{{ name }}"**_.
 - Follow the instruction on screen to complete the set up.
 

source/_integrations/alarmdecoder.markdown

@@ -42,7 +42,7 @@ You will be prompted to select a protocol (i.e. `socket` or `serial`). Depending
 
 ## Settings
 
-Once AlarmDecoder has been set up according to the instructions above, the arming settings and zones can be configured by selecting _Options_ on the _AlarmDecoder_ card on the **Configuration -> Integrations** page.
+Once AlarmDecoder has been set up according to the instructions above, the arming settings and zones can be configured by selecting _Options_ on the _AlarmDecoder_ card on the **{% my integrations title="Configuration -> Integrations" %}** page.
 
 ### Arming Settings
 

source/_integrations/zone.markdown

@@ -14,7 +14,7 @@ ha_iot_class:
 
 Zones allow you to specify certain regions on earth (for now). When a device tracker sees a device to be within a zone, the state will take the name from the zone. Zones can also be used as a [trigger](/getting-started/automation-trigger/#zone-trigger) or [condition](/getting-started/automation-condition/#zone-condition) inside automation setups.
 
-Zones can be added and managed through the user interface at **Configuration -> Zones**. 
+Zones can be added and managed through the user interface at **{% my zones title="Configuration -> Zones" %}**.
 
 Zones can also be configured via `configuration.yaml`: