Skip to content

Commit 44932fc

Browse files
lamATnginxlamATnginx
authored
Icon support in MF + backwards compatability (#232)
* feat: Icon support in MF + backwards compatability * feat: Support the pre-built icon shortcodes * feat: Support all needed icons * feat: Fixed playwright issues on old theme
1 parent 23c2870 commit 44932fc

File tree

7 files changed

+9419
-3
lines changed

7 files changed

+9419
-3
lines changed

‎assets/css/v2/style.css

+12-1
Original file line numberDiff line numberDiff line change
@@ -1583,6 +1583,18 @@ hr {
15831583
margin: 0;
15841584
}
15851585

1586+
.lucide {
1587+
width: 1.5rem;
1588+
height: 1.5rem;
1589+
stroke: currentColor;
1590+
fill: none;
1591+
stroke-width: 2;
1592+
stroke-linecap: square;
1593+
stroke-linejoin: square;
1594+
vertical-align: sub;
1595+
margin: 0;
1596+
}
1597+
15861598
/* FILTHY HACKS BEGIN */
15871599

15881600
/* Override logo with black text version */
@@ -1603,7 +1615,6 @@ hr {
16031615
}
16041616

16051617
/* FILTHY HACKS END */
1606-
16071618
/* Hidden temporarily */
16081619

16091620
.code-copy {

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
description: Lucide icon usage
3+
title: Lucide
4+
weight: 300
5+
toc: true
6+
---

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
description: Where lucide icons are allowed to be used
3+
title: Permitted usage
4+
weight: 100
5+
---
6+
7+
[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.
8+
9+
{{<fe "book-headphones">}}
10+
11+
[Lucide link{{<fe "circle">}}](#)
12+
13+
{{<fe "circle">}} in text.
14+
15+
Here are some icons that are using font-awesome but should be backwards compatible:
16+
<i class="fa-solid fa-check" style="color:green"></i>
17+
<i class="fa fa-circle"></i>
18+
<i class="fa-solid fa-bug" style="color:#E4002B"></i>
19+
<i class="fa-solid fa-bug-slash" style="color:#666666"></i>
20+
<i class="fa-solid fa-circle-info" style="color:#1d9cd3;"></i>
21+
<i class="fa-solid fa-file-circle-plus" style="color:#009639"></i>
22+
<i class="fa-solid fa-check"></i>
23+
<i class="fa fa-x"></i>
24+
<i class="fa-solid fa-download"></i>
25+
<i class="fa-solid fa-ban" style="color: red"></i>
26+
<i class="fa fa-check-circle" aria-hidden="true"></i>
27+
<i class="fas fa-heartbeat"></i>
28+
<i class="fas fa-code-branch"></i>
29+
<i class="fas fa-desktop"></i>
30+
<i class="fas fa-certificate"></i>
31+
<i class="fas fa-cogs"></i>
32+
<i class="fas fa-shield-alt"></i>
33+
<i class="fas fa-microchip"></i>
34+
<i class="fas fa-memory"></i>
35+
<i class="fas fa-hdd"></i>
36+
<i class="fas fa-exclamation-triangle"></i>
37+
<i class="fas fa-tachometer-alt"></i>
38+
<i class="fa-solid fa-circle-exclamation"></i>
39+
<i class="far fa-file-code"></i>
40+
<i class="fa-solid fa-circle-info"></i>
41+
<i class="fa fa-exclamation-triangle" aria-hidden="true" aria-label="Warning"></i>
42+
<i class="fa-regular fa-lightbulb" aria-hidden="true" aria-label="Tip"></i>
43+
<i class="fa-solid fa-circle-check center"></i>
44+
<i class="fa-solid fa-triangle-exclamation"></i>
45+
<i class="fa-solid fa-info-circle"></i>
46+
<i class="fa-solid fa-arrow-up-right-from-square" style="color:#009639;"></i>
47+
<i class="fa-solid fa-chevron-right"></i>
48+
<i class="fa-regular fa-pen-to-square"></i>
49+
<i class="fa-regular fa-star" style='color:gold'></i>
50+
<i class="fas fa-link fa-xs" aria-hidden="true"></i>
51+
<i class="fa fa-chevron-right sidebar-visible-collapsed"></i>
52+
<i class="fa fa-chevron-left sidebar-visible-expanded"></i>
53+
<i class="fa fa-chevron-up"></i>
54+
<i class="fa fa-chevron-down"></i>
55+
<i class="fas fa-flask fa-lg beta-icon"></i>
56+
{{<warning>}}
57+
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">}}
58+
{{</warning>}}

‎layouts/_default/docs.html

+54-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,59 @@
55
{{ partial "sidebar.html" . }}
66
</nav>
77

8+
{{$content := .Content}}
9+
{{$pattern := `<i[^>]*class=["'][^"']*(?:fas?|fa-solid|fa-regular|fa-brands|far)\s+fa-([^"'\s]+)[^"']*["'][^>]*?(?:\s+style=["']([^"']*)["'])?[^>]*></i>`}}
10+
{{$matches := findRE $pattern $content}}
11+
12+
{{range $matches}}
13+
{{$currentMatch := .}}
14+
{{$iconName := ""}}
15+
{{$styleAttr := ""}}
16+
17+
{{$submatches := findRESubmatch $pattern $currentMatch}}
18+
{{if gt (len $submatches) 0}}
19+
{{$iconName = index (index $submatches 0) 1}}
20+
{{$styleAttr = index (index $submatches 0) 2}}
21+
22+
{{- $iconMappings := dict
23+
"bug-slash" "bug-off"
24+
"circle-info" "info"
25+
"info-circle" "info"
26+
"file-circle-plus" "file-plus"
27+
"check-circle" "circle-check"
28+
"heartbeat" "heart-pulse"
29+
"code-branch" "git-branch"
30+
"desktop" "monitor"
31+
"certificate" "badge"
32+
"cogs" "cog"
33+
"shield-alt" "shield-half"
34+
"memory" "cpu"
35+
"hdd" "hard-drive"
36+
"exclamation-triangle" "triangle-alert"
37+
"triangle-exclamation" "triangle-alert"
38+
"tachometer-alt" "circle-gauge"
39+
"circle-exclamation" "circle-alert"
40+
"arrow-up-right-from-square" "external-link"
41+
"pen-to-square" "square-pen"
42+
"flask" "flask-conical"
43+
-}}
44+
45+
{{ with index $iconMappings $iconName }}
46+
{{$iconName = .}}
47+
{{ end }}
48+
49+
{{$iconHTML := partial "lucide" (dict
50+
"context" $
51+
"icon" $iconName
52+
"style" $styleAttr
53+
)}}
54+
55+
{{ $modifiedMatch := replaceRE `>` ` data-mf=false>` $currentMatch 1}}
56+
{{ $modifiedMFIcon := printf "%s %s" $modifiedMatch $iconHTML }}
57+
{{$content = replace $content $currentMatch $modifiedMFIcon}}
58+
59+
{{end}}
60+
{{end}}
861

962
{{if (.Params.catalog) }}
1063
<main class="content content-has-toc" role="main">
@@ -31,7 +84,7 @@
3184
{{ end }}
3285
</section>
3386
<h1>{{ .Title }}</h1>
34-
{{ .Content }}
87+
{{ $content | safeHTML }}
3588
{{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
3689
{{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
3790

‎layouts/partials/lucide.html

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

‎layouts/shortcodes/fe.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{{ partial "feather" (dict "context" . "icon" (.Get 0)) }}
1+
{{ partial "lucide" (dict "context" . "icon" (.Get 0)) }}

0 commit comments

Comments
 (0)