feat: Icon support in MF + backwards compatability

Author: lamATnginx

assets/css/v2/style.css

@@ -1513,6 +1513,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 */
@@ -1533,7 +1545,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,20 @@
+---
+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>
+{{<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,30 @@
     {{ partial "sidebar.html" . }}
   </nav>
 
+  {{$content := .Content}}
+  {{$pattern := `<i[^>]*class=["'][^"']*(?:fas?|fa-solid|fa-regular|fa-brands)\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}}
+
+      {{$iconHTML := partial "lucide" (dict 
+          "context" $ 
+          "icon" $iconName
+          "style" $styleAttr
+      )}}
+
+      {{$content = replace $content $currentMatch $iconHTML}}
+    {{end}}
+  {{end}}
+  
 
   {{if (.Params.catalog) }}
   <main class="content content-has-toc" role="main">
@@ -31,7 +55,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 }}">
+    <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)) }}