Add .ftlh extension to Freemarker (#7551)

* Add `.ftlh` and `.ftlx` extensions to Freemarker

 - Add `.ftlh` and `.ftlx` as extensions for Freemarker
 - Add samples for `.ftlh` and `.ftlx`

* Replace sample files with real world examples

* Remove support for ftlx and remove ftlx-sample

Author: tajakobsen

lib/linguist/languages.yml

@@ -2254,6 +2254,7 @@ FreeMarker:
   - ftl
   extensions:
   - ".ftl"
+  - ".ftlh"
   tm_scope: text.html.ftl
   ace_mode: ftl
   language_id: 115

samples/FreeMarker/blocks-card.ftlh

@@ -0,0 +1,59 @@
+<#-- @ftlvariable name="classes" type="String" -->
+<#-- @ftlvariable name="url" type="String" -->
+<#-- @ftlvariable name="image" type="Object" -->
+<#-- @ftlvariable name="image.src" type="String" -->
+<#-- @ftlvariable name="image.altText" type="String" -->
+<#-- @ftlvariable name="image.width" type="String" -->
+<#-- @ftlvariable name="image.height" type="String" -->
+<#-- @ftlvariable name="kicker" type="String" -->
+<#-- @ftlvariable name="title" type="String" -->
+<#-- @ftlvariable name="text" type="String" -->
+
+<div class="blocks-card ${classes!}">
+  <@linkOrDiv href=url!"" class="blocks-card--card">
+    <#if image??>
+      <figure class="blocks-card--image">
+        <img
+          src="${image.src}"
+          alt="${image.altText!}"
+          <#if image.width??>width="${image.width}"</#if>
+          <#if image.height??>height="${image.height}"</#if>
+        />
+      </figure>
+    </#if>
+
+    <#if kicker?has_content || title?has_content || text?has_content>
+      <div class="blocks-card--body html-area">
+        <#if kicker?has_content>
+          <small class="blocks-card--kicker">
+            ${kicker}
+          </small>
+        </#if>
+
+        <#if title?has_content>
+          <h3 class="blocks-card--title">
+            ${title}
+          </h3>
+        </#if>
+
+        <#if text?has_content>
+          <div class="blocks-card--text flow">
+            ${text?no_esc}
+          </div>
+        </#if>
+      </div>
+    </#if>
+  </@linkOrDiv>
+</div>
+
+<#macro linkOrDiv href class>
+  <#if href?has_content>
+    <a href="${href}" class="${class}">
+      <#nested>
+    </a>
+  <#else>
+    <div class="${class}">
+      <#nested>
+    </div>
+  </#if>
+</#macro>

samples/FreeMarker/header.ftlh

@@ -0,0 +1,33 @@
+[#-- @ftlvariable name="locale" type="String" --]
+[#-- @ftlvariable name="spaceKey" type="String" --]
+[#-- @ftlvariable name="filters" type="java.util.ArrayList" --]
+
+<header class="header">
+  <h1>
+    [@localize key="feature-toggles.displayName" locale=locale /]
+  </h1>
+
+  <div class="header--toolbar">
+    [#if filters?size == 1]
+      <div class="header--toolbar-text">
+        [@localize key="feature-toggles.spaceKey" locale=locale /] <em>${spaceKey}</em>
+      </div>
+    [#elseif filters?size > 1]
+      <div class="header--nav-label" id="header-nav-label">
+        [@localize key="feature-toggles.selectSpace" locale=locale /]
+      </div>
+
+      <nav class="header--filters" aria-labelledby="header-nav-label">
+        [#list filters as filter]
+          <a
+            class="pill"
+            href="${filter.url}"
+            [#if filter.text == spaceKey]aria-current="true"[/#if]>
+
+            ${filter.text}
+          </a>
+        [/#list]
+      </nav>
+    [/#if]
+  </div>
+</header>