From 69d098bce1c0cf759d2ed25ab056aa48fcc18d36 Mon Sep 17 00:00:00 2001
From: Franck Nijhof <git@frenck.dev>
Date: Thu, 4 Jul 2024 09:32:48 +0200
Subject: [PATCH] Add Jekyll icon tag plugin (#33560)

---
 plugins/icon.rb                               | 32 +++++++++++++++++++
 .../_posts/2024-07-03-release-20247.markdown  | 10 +++---
 source/dashboards/cards.markdown              |  2 +-
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 plugins/icon.rb

diff --git a/plugins/icon.rb b/plugins/icon.rb
new file mode 100644
index 00000000000..95d45b58bdc
--- /dev/null
+++ b/plugins/icon.rb
@@ -0,0 +1,32 @@
+module Jekyll
+  module HomeAssistant
+    class Icon < Liquid::Tag
+
+      def initialize(tag_name, args, tokens)
+        super
+        if args.strip =~ SYNTAX
+          @icon = Regexp.last_match(1).downcase
+        else
+          raise SyntaxError, <<~MSG
+            Syntax error in tag 'icon' while parsing the following options:
+
+            #{args}
+
+            Valid syntax:
+              {% icon "<icon>" %}
+          MSG
+        end
+      end
+
+      def render(_context)
+        "<iconify-icon inline icon='#{@icon}'></iconify-icon>"
+      end
+
+      private
+
+      SYNTAX = %r!^"(.+?)"$!.freeze
+    end
+  end
+end
+
+Liquid::Template.register_tag('icon', Jekyll::HomeAssistant::Icon)
diff --git a/source/_posts/2024-07-03-release-20247.markdown b/source/_posts/2024-07-03-release-20247.markdown
index 68438cab423..82a4472b0df 100644
--- a/source/_posts/2024-07-03-release-20247.markdown
+++ b/source/_posts/2024-07-03-release-20247.markdown
@@ -92,7 +92,7 @@ our experimental [sections view], which was recently released with drag-and-drop
 It works with [every card], which gives users a lot of freedom. Most cards have
 been given a built-in minimum and maximum size, to make it easier to get your
 layouts just right. If you mess up the look of a card, luckily we have included
-a revert button <iconify-icon inline icon="mdi:restore"></iconify-icon> in the
+a revert button {% icon "mdi:restore" %} in the
 top left corner 😉.
 
 [every card]: /dashboards/cards/
@@ -112,11 +112,11 @@ customize the columns shown! 😎
 
 <img src='/images/blog/2024-07/data-tables-customize-columns.png' style='border: 0;box-shadow: none;' alt='Screenshot showing the dialog that allow customizing the order and visibility of data table columns available on the device page.'>
 
-By selecting the cog <iconify-icon inline icon="mdi:cog"></iconify-icon> in
+By selecting the cog {% icon "mdi:cog" %} in
 the top right, you can not only customize the columns shown by toggling
-visibility <iconify-icon inline icon="mdi:eye"></iconify-icon>, but you
+visibility {% icon "mdi:eye" %}, but you
 can also change the order of the columns by
-dragging <iconify-icon inline icon="mdi:drag"></iconify-icon> them around.
+dragging {% icon "mdi:drag" %} them around.
 Making it even easier to show the data you want, in the order you want it.
 
 Your customized columns and view are stored in your browser, so you only have 
@@ -191,7 +191,7 @@ Well, now you can! 🎉
 <img src='/images/blog/2024-07/blueprint-automation-take-control.png' style='border: 0;box-shadow: none;' alt='Screenshot showing a blueprint-based automation that can be taken of using the "Take control" option in the three-dotted menu.'>
 
 You can now [take full control over the automations created from a blueprint](/docs/automation/using_blueprints/#editing-an-imported-blueprint).
-By taking control <iconify-icon inline icon="mdi:file-edit"></iconify-icon>,
+By taking control {% icon "mdi:file-edit" %},
 Home Assistant will convert the blueprint automation into a regular,
 stand-alone, automation. This allows you to make any tweak you want,
 without having to re-invent the wheel.
diff --git a/source/dashboards/cards.markdown b/source/dashboards/cards.markdown
index c5ce2ae19c5..d457e80322b 100644
--- a/source/dashboards/cards.markdown
+++ b/source/dashboards/cards.markdown
@@ -112,7 +112,7 @@ In [sections view](/dashboards/sections/), you can resize cards. Follow these st
 
 If you previously [resized](#resizing-a-card) a card in the [sections view](/dashboards/sections/), and you don't like the new size, you can revert back to the card's default size. Follow these steps:
 
-1. On the **Layout** tab, select the <iconify-icon inline icon="mdi-restore"></iconify-icon> icon.
+1. On the **Layout** tab, select the {% icon "mdi-restore" %} icon.
    ![Screenshot of the Layout tab in the card dialog](/images/dashboards/card_resize.png)
 
 2. Select **Save**.