Platform Labels Update (#3581)

* First preview of platform indicators

* Fix

* Update
- Format 2FA section.
- Fix known edge cases.

* Update
- Update Mac & Linux icons.
- Fix icon cut-off bug.

* Remove dependency

* Better icons

* Update
- Labelled PowerShell platforms.
- Updated regex.
- Fixed an edge case.

* Update
- Removed need for trailing `/` at EOL.
- Updated more entries to the new format.

* Deploy for main-4

* Update

* Update
- Added icon for "Web".
- Updated any entries to "All Platforms".
- Formatted "Encrypted Messengers" section.

* Update
- Tidied Song Identification section.
- Some misc changes.

* Update
- Tweaked wording on Contribute guide.

* Undo deploy

* Update

docs/.vitepress/transformer.ts

@@ -313,6 +313,43 @@ const transformLinks = (text: string): string =>
         find: /\[.onion\]\(([^\)]*?)\)/gm,
         replace:
           '<a target="_blank" href="$1"><div alt=".onion" class="i-simple-icons:torbrowser w-1em h-1em" /></a>'
+      },
+      // Platform indicators
+      {
+        name: 'Windows',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Windows(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="Windows" class="i-qlementine-icons:windows-24" /> '
+      },
+      {
+        name: 'Mac',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Mac(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="Mac" class="i-qlementine-icons:mac-fill-16" /> '
+      },
+      {
+        name: 'Linux',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Linux(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="Linux" class="i-fluent-mdl2:linux-logo-32" /> '
+      },
+      {
+        name: 'Android',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Android(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="Android" class="i-material-symbols:android" /> '
+      },
+      {
+        name: 'iOS',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)iOS(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="iOS" class="i-simple-icons:ios" /> '
+      },
+      {
+        name: 'Web',
+        find: /(?<=\/ (\/>|[^/\r\n])*)(,\s)?(?<![a-z]\s)Web(?=,|[ \t]\/|$)/gm,
+        replace:
+          ' <div alt="Web" class="i-fluent:globe-32-filled" /> '
       }
     ])
     .getText()