Fix FontAwesome6 breaking directory website (#1522)

* fix: filter meta font json from render method

* refactor: return to original render method

* feat: add FA6 to customFontMap

* fix: remove meta files from map

* Fix filter logic

---------

Co-authored-by: Joel Arvidsson <joel@oblador.se>

directory/bin/generate-font-styles.js

@@ -6,6 +6,8 @@ const path = require('path');
 const customFontMap = {
   'FontAwesome5_Solid.ttf': 'FontAwesome5',
   'FontAwesome5_Brands.ttf': 'FontAwesome5Brands',
+  'FontAwesome6_Solid.ttf': 'FontAwesome6',
+  'FontAwesome6_Brands.ttf': 'FontAwesome6Brands',
 };
 
 const fontDirectory = path.resolve(__dirname, '../../Fonts');

directory/bin/generate-glyphmap-index.js

@@ -6,14 +6,24 @@ const path = require('path');
 const glypmapDirectory = path.resolve(__dirname, '../../glyphmaps');
 const glypmapExtension = '.json';
 
-const fontAwesomeGlyphmap = require(path.join(
+const fontAwesome5Glyphmap = require(path.join(
   glypmapDirectory,
   'FontAwesome5Free.json'
 ));
-const fontAwesomeMeta = require(path.join(
+const fontAwesome5Meta = require(path.join(
   glypmapDirectory,
   'FontAwesome5Free_meta.json'
 ));
+
+const fontAwesome6Glyphmap = require(path.join(
+  glypmapDirectory,
+  'FontAwesome6Free.json'
+));
+const fontAwesome6Meta = require(path.join(
+  glypmapDirectory,
+  'FontAwesome6Free_meta.json'
+));
+
 const pickGlyps = (glyps, glyphmap) =>
   glyps.reduce((acc, glyp) => {
     acc[glyp] = glyphmap[glyp];
@@ -22,19 +32,27 @@ const pickGlyps = (glyps, glyphmap) =>
 
 const index = fs
   .readdirSync(glypmapDirectory)
-  .filter(f => path.extname(f) === glypmapExtension)
-  .filter(f => !f.startsWith('FontAwesome5'))
+  .filter(
+    f =>
+      path.extname(f) === glypmapExtension &&
+      !(f.startsWith('FontAwesome5') || f.startsWith('FontAwesome6'))
+  )
   .reduce(
     (acc, file) => {
       const name = path.basename(file, glypmapExtension);
       acc[name] = require(path.join(glypmapDirectory, file));
       return acc;
     },
     {
-      FontAwesome5: pickGlyps(fontAwesomeMeta.solid, fontAwesomeGlyphmap),
+      FontAwesome5: pickGlyps(fontAwesome5Meta.solid, fontAwesome5Glyphmap),
       FontAwesome5Brands: pickGlyps(
-        fontAwesomeMeta.brands,
-        fontAwesomeGlyphmap
+        fontAwesome5Meta.brands,
+        fontAwesome5Glyphmap
+      ),
+      FontAwesome6: pickGlyps(fontAwesome6Meta.solid, fontAwesome6Glyphmap),
+      FontAwesome6Brands: pickGlyps(
+        fontAwesome6Meta.brands,
+        fontAwesome6Glyphmap
       ),
     }
   );

directory/src/App.js

@@ -1,6 +1,8 @@
+import './App.css';
+
 /* eslint-disable react/prop-types, jsx-a11y/label-has-associated-control */
 import * as React from 'react';
-import './App.css';
+
 import IconFamilies from './generated/glyphmapIndex.json';
 
 const WAITING_INTERVAL = 300;