Icon support in MF + backwards compatability

assets/css/v2/style.css

@@ -1582,6 +1582,18 @@ hr {
   margin: 0;
 }
 
+.lucide {
+  width: 1.5rem;
+  height: 1.5rem;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: square;
+  stroke-linejoin: square;
+  vertical-align: sub;
+  margin: 0;
+}
+
 /* FILTHY HACKS BEGIN */
 
 /* Override logo with black text version */
@@ -1602,7 +1614,6 @@ hr {
 }
 
 /* FILTHY HACKS END */
-
 /* Hidden temporarily */
 
 .code-copy {

exampleSite/content/test-product/lucide/_index.md

@@ -0,0 +1,6 @@
+---
+description: Lucide icon usage
+title: Lucide
+weight: 300
+toc: true
+---

exampleSite/content/test-product/lucide/permitted.md

@@ -0,0 +1,58 @@
+---
+description: Where lucide icons are allowed to be used 
+title: Permitted usage
+weight: 100
+---
+
+[Lucide Icons](https://lucide.dev/) is a free icon library with a permissive license (MIT). We use it for our minimal icon needs in place of FontAwesome in Oldframe.
+
+{{<fe "book-headphones">}}
+
+[Lucide link{{<fe "circle">}}](#)
+
+{{<fe "circle">}} in text.
+
+Here are some icons that are using font-awesome but should be backwards compatible:
+<i class="fa-solid fa-check" style="color:green"></i>
+<i class="fa fa-circle"></i>
+<i class="fa-solid fa-bug" style="color:#E4002B"></i>
+<i class="fa-solid fa-bug-slash" style="color:#666666"></i>
+<i class="fa-solid fa-circle-info" style="color:#1d9cd3;"></i>
+<i class="fa-solid fa-file-circle-plus" style="color:#009639"></i>
+<i class="fa-solid fa-check"></i>
+<i class="fa fa-x"></i>
+<i class="fa-solid fa-download"></i>
+<i class="fa-solid fa-ban" style="color: red"></i>
+<i class="fa fa-check-circle" aria-hidden="true"></i>
+<i class="fas fa-heartbeat"></i>
+<i class="fas fa-code-branch"></i>
+<i class="fas fa-desktop"></i>
+<i class="fas fa-certificate"></i>
+<i class="fas fa-cogs"></i>
+<i class="fas fa-shield-alt"></i>
+<i class="fas fa-microchip"></i> 
+<i class="fas fa-memory"></i> 
+<i class="fas fa-hdd"></i>
+<i class="fas fa-exclamation-triangle"></i>
+<i class="fas fa-tachometer-alt"></i>
+<i class="fa-solid fa-circle-exclamation"></i>
+<i class="far fa-file-code"></i>
+<i class="fa-solid fa-circle-info"></i>
+<i class="fa fa-exclamation-triangle" aria-hidden="true" aria-label="Warning"></i>
+<i class="fa-regular fa-lightbulb" aria-hidden="true" aria-label="Tip"></i>
+<i class="fa-solid fa-circle-check center"></i>
+<i class="fa-solid fa-triangle-exclamation"></i>
+<i class="fa-solid fa-info-circle"></i>
+<i class="fa-solid fa-arrow-up-right-from-square" style="color:#009639;"></i>
+<i class="fa-solid fa-chevron-right"></i>
+<i class="fa-regular fa-pen-to-square"></i>
+<i class="fa-regular fa-star" style='color:gold'></i>
+<i class="fas fa-link fa-xs" aria-hidden="true"></i>
+<i class="fa fa-chevron-right sidebar-visible-collapsed"></i>
+<i class="fa fa-chevron-left sidebar-visible-expanded"></i>
+<i class="fa fa-chevron-up"></i>
+<i class="fa fa-chevron-down"></i>
+<i class="fas fa-flask fa-lg beta-icon"></i>
+{{<warning>}}
+This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title. {{<fe "octagon-alert">}}
+{{</warning>}}

layouts/_default/docs.html

@@ -5,6 +5,59 @@
     {{ partial "sidebar.html" . }}
   </nav>
 
+  {{$content := .Content}}
+  {{$pattern := `<i[^>]*class=["'][^"']*(?:fas?|fa-solid|fa-regular|fa-brands|far)\s+fa-([^"'\s]+)[^"']*["'][^>]*?(?:\s+style=["']([^"']*)["'])?[^>]*></i>`}}
+  {{$matches := findRE $pattern $content}}
+
+  {{range $matches}}
+    {{$currentMatch := .}}
+    {{$iconName := ""}}
+    {{$styleAttr := ""}}
+
+    {{$submatches := findRESubmatch $pattern $currentMatch}}
+    {{if gt (len $submatches) 0}}
+      {{$iconName = index (index $submatches 0) 1}}
+      {{$styleAttr = index (index $submatches 0) 2}}
+
+      {{- $iconMappings := dict 
+        "bug-slash" "bug-off" 
+        "circle-info" "info" 
+        "info-circle" "info"
+        "file-circle-plus" "file-plus"
+        "check-circle" "circle-check" 
+        "heartbeat" "heart-pulse"
+        "code-branch" "git-branch"
+        "desktop" "monitor"
+        "certificate" "badge"
+        "cogs" "cog"
+        "shield-alt" "shield-half"
+        "memory" "cpu"
+        "hdd" "hard-drive"
+        "exclamation-triangle" "triangle-alert"
+        "triangle-exclamation" "triangle-alert"
+        "tachometer-alt" "circle-gauge"
+        "circle-exclamation" "circle-alert"
+        "arrow-up-right-from-square" "external-link"
+        "pen-to-square" "square-pen"
+        "flask" "flask-conical"
+      -}}
+
+      {{ with index $iconMappings $iconName }}
+          {{$iconName = .}}
+      {{ end }}
+
+      {{$iconHTML := partial "lucide" (dict 
+          "context" $ 
+          "icon" $iconName
+          "style" $styleAttr
+      )}}
+
+      {{ $modifiedMatch := replaceRE `>` ` data-mf=false>` $currentMatch 1}}
+      {{ $modifiedMFIcon := printf "%s %s" $modifiedMatch $iconHTML  }}
+      {{$content = replace $content $currentMatch $modifiedMFIcon}}
+
+    {{end}}
+  {{end}}
 
   {{if (.Params.catalog) }}
   <main class="content content-has-toc" role="main">
@@ -31,7 +84,7 @@
           {{ end }}
         </section>
         <h1>{{ .Title }}</h1>
-        {{ .Content }}
+        {{ $content | safeHTML }}
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
         {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
 

layouts/partials/lucide.html

@@ -0,0 +1,5 @@
+{{- /* Usage: */ -}}
+{{- /* (dict "context" . "icon" "circle") */ -}}
+<svg class="lucide" style="{{ .style | safeCSS }}" data-mf="true" style="display: none">
+    <use href="/images/lucide-sprite.svg#{{ .icon }}"></use>
+</svg>

layouts/shortcodes/fe.html

@@ -1 +1 @@
-{{ partial "feather" (dict "context" . "icon" (.Get 0)) }}
+{{ partial "lucide" (dict "context" . "icon" (.Get 0)) }}