@fortawesome/fontawesome-pro ^6.0.0 (#208)

* Gravatar partial. * JPEG quality 85. * Gravatar width/height. * Allow width and height. * Width and height on logo. * Limit the number of FA fonts needed. * transitiveRemediation * More FA CSS. * Blog index tweaks. * External link icon. * <img srcset=""> * Be tolerant of missing GitHub profile. * More Gravatar resolutions. * Sort srcset resolutions. * <picture> instead. * Dynamic Gravatar sizing. * TODOs * <picture> * npm audit fix && npm i * Misc updates. * Netlify config. * Syntax * Syntax * Syntax * Syntax * @fortawesome/fontawesome-pro ^6.0.0 * Metalsmith icon. * #155 fix.
emmercm · Feb 28, 2022 · a5bb175 · a5bb175
1 parent 1779eb8
commit a5bb175
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 65 deletions.
diff --git a/index.js b/index.js
@@ -116,7 +116,7 @@ markdownRenderer.heading = (text, level, raw) => {
     const slug = transliteration.slugify(title);
     return `<h${level} id="${slug}">
         <a href="#${slug}" title="${title}" class="link" aria-hidden="true">
-            <i class="far fa-link"></i>
+            <i class="fa-regular fa-link"></i>
         </a>
         ${text}
         </h${level}>`;
@@ -806,11 +806,11 @@ tracer(Metalsmith(__dirname))
         $('a[href*="://"]').attr('target', '_blank');
         $('a[target="_blank"]').each((i, elem) => {
             $(elem).attr('rel', 'noopener');
-            const icon = '<i class="far fa-external-link fa-xs align-middle"></i>';
+            const icon = '<i class="fa-regular fa-external-link fa-xs"></i>';
             if($(elem).children().length === 0) {
-                $(elem).html(`<span class="align-middle">${$(elem).html()}</span> ${icon}`);
+                $(elem).html(`${$(elem).html()} ${icon}`);
             } else if($(elem).children().length === 1 && $(elem).children().first().prop('tagName') === 'CODE') {
-                $(icon).insertAfter($(elem).children().first().addClass('align-middle'));
+                $(icon).insertAfter($(elem).children().first());
             }
         });
     }))

diff --git a/layouts/blog_index.hbs b/layouts/blog_index.hbs
@@ -28,7 +28,7 @@
 
         <h6>
             <a href="/blog/rss.xml" class="text-dark">
-                <i class="far fa-rss mr-1"></i>
+                <i class="fa-regular fa-rss mr-1"></i>
                 RSS Feed
             </a>
         </h6>

diff --git a/layouts/page.hbs b/layouts/page.hbs
@@ -78,7 +78,7 @@
                     {{#each icons.header}}
                         <a href="{{link}}" {{#if title}}title="{{title}}"{{/if}} class="nav-link mx-1 px-0">
                             <span class="fa-stack align-top">
-                                <i class="fal fa-circle fa-stack-2x"></i>
+                                <i class="fa-light fa-circle fa-stack-2x"></i>
                                 <i class="{{icon}} fa-stack-1x"></i>
                             </span>
                         </a>
@@ -111,26 +111,26 @@
                             <!-- TODO: "Fanboy's Social Blocking List" may block some of these -->
                             <a href="https://twitter.com/intent/tweet?url={{{encodeURI siteurl}}}{{{encodeURI paths.href}}}&text={{{encodeURI (concat title " by " twitterhandle)}}}" title="Share on Twitter" class="link-dark">
                                 <span class="fa-stack align-top">
-                                    <i class="fal fa-circle fa-stack-2x"></i>
-                                    <i class="fab fa-twitter fa-stack-1x"></i>
+                                    <i class="fa-light fa-circle fa-stack-2x"></i>
+                                    <i class="fa-brands fa-twitter fa-stack-1x"></i>
                                 </span>
                             </a>
                             <a href="https://www.linkedin.com/shareArticle?url={{{encodeURI siteurl}}}{{{encodeURI paths.href}}}&mini=true&title={{{encodeURI title}}}&summary={{{encodeURI excerpt}}}&source={{{encodeURI sitename}}}" title="Share on LinkedIn" class="link-dark">
                                 <span class="fa-stack align-top">
-                                    <i class="fal fa-circle fa-stack-2x"></i>
-                                    <i class="fab fa-linkedin-in fa-stack-1x"></i>
+                                    <i class="fa-light fa-circle fa-stack-2x"></i>
+                                    <i class="fa-brands fa-linkedin-in fa-stack-1x"></i>
                                 </span>
                             </a>
                             <!--<a href="https://www.facebook.com/sharer.php?u={{{encodeURI siteurl}}}{{{encodeURI paths.href}}}" title="Share on Facebook" class="link-dark">
                                 <span class="fa-stack align-top">
-                                    <i class="fal fa-circle fa-stack-2x"></i>
-                                    <i class="fab fa-facebook-f fa-stack-1x"></i>
+                                    <i class="fa-light fa-circle fa-stack-2x"></i>
+                                    <i class="fa-brands fa-facebook-f fa-stack-1x"></i>
                                 </span>
                             </a>-->
                             <a href="/blog/rss.xml" title="RSS Feed" class="d-none d-md-inline link-dark">
                                 <span class="fa-stack align-top">
-                                    <i class="fal fa-circle fa-stack-2x"></i>
-                                    <i class="far fa-rss fa-stack-1x"></i>
+                                    <i class="fa-light fa-circle fa-stack-2x"></i>
+                                    <i class="fa-regular fa-rss fa-stack-1x"></i>
                                 </span>
                             </a>
                         </div>
@@ -164,7 +164,7 @@
                         {{/if}}
                     </div>
                     <a href="https://twitter.com/search?q={{{encodeURI siteurl}}}{{{encodeURI paths.href}}}" title="Discuss on Twitter" class="font-italic">
-                        <i class="fab fa-twitter"></i>
+                        <i class="fa-brands fa-twitter"></i>
                         Discuss on Twitter
                     </a>
                 </div>
@@ -191,7 +191,7 @@
                         {{#each icons.footer}}
                             <a href="{{link}}" title="{{title}}" class="mx-1">
                                 <span class="fa-stack align-top">
-                                    <i class="fal fa-circle fa-stack-2x"></i>
+                                    <i class="fa-light fa-circle fa-stack-2x"></i>
                                     <i class="{{icon}} fa-stack-1x"></i>
                                 </span>
                             </a>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "start": "node index.js"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-pro": "^5.15.4",
+    "@fortawesome/fontawesome-pro": "^6.0.0",
     "@metalsmith/collections": "^1.2.1",
     "@metalsmith/default-values": "^3.1.0",
     "@metalsmith/drafts": "^1.1.1",

diff --git a/src/data/blog_tags.yml b/src/data/blog_tags.yml
@@ -1,66 +1,66 @@
 bootstrap:
   title: Bootstrap
-  icon: fab fa-bootstrap
+  icon: fa-brands fa-bootstrap
   color: bootstrap
 
 career:
   title: Career
-  icon: fad fa-briefcase
+  icon: fa-solid fa-briefcase
   color: purple
 
 ci-cd:
   title: CI/CD
-  icon: fad fa-code-merge
+  icon: fa-solid fa-code-merge
   color: yellow
 
 databases:
   title: Databases
-  icon: far fa-database
+  icon: fa-regular fa-database
   color: gray
 
 docker:
   title: Docker
-  icon: fab fa-docker
+  icon: fa-brands fa-docker
   color: docker
 
 fontawesome:
   title: Font Awesome
-  icon: fab fa-font-awesome
+  icon: fa-brands fa-font-awesome
   color: fontawesome
 
 git:
   title: Git
-  icon: fab fa-git-alt
+  icon: fa-brands fa-git-alt
   color: git
 
 github:
   title: GitHub
-  icon: fab fa-github
+  icon: fa-brands fa-github
   color: github
 
 go:
   title: Go
-  icon: far fa-brackets-curly
+  icon: fa-regular fa-brackets-curly
   color: go
 
 kubernetes:
   title: Kubernetes
-  icon: far fa-dharmachakra
+  icon: fa-regular fa-dharmachakra
   color: kubernetes
 
 metalsmith:
   title: Metalsmith
-  icon: fad fa-browser
+  icon: fa-regular fa-m
   color: metalsmith
 
 microservices:
   title: Microservices
-  icon: far fa-brackets-curly
+  icon: fa-regular fa-brackets-curly
   color: indigo
 
 node.js:
   title: Node.js
-  icon: fab fa-node-js
+  icon: fa-brands fa-node-js
   color: node
 
 shell:
@@ -70,5 +70,5 @@ shell:
 
 testing:
   title: Testing
-  icon: fad fa-vial
+  icon: fa-solid fa-vial
   color: pink
diff --git a/src/data/icons.yml b/src/data/icons.yml
@@ -2,21 +2,21 @@
 header:
   - link: https://github.com/emmercm
     title: GitHub
-    icon: fab fa-github
+    icon: fa-brands fa-github
 
   - link: https://twitter.com/emmercm
     title: Twitter
-    icon: fab fa-twitter
+    icon: fa-brands fa-twitter
 
   - link: https://www.linkedin.com/in/emmercm/
     title: LinkedIn
-    icon: fab fa-linkedin-in
+    icon: fa-brands fa-linkedin-in
 
 footer:
   - link: /sitemap.xml
     title: Sitemap
-    icon: far fa-sitemap
+    icon: fa-regular fa-sitemap
 
   - link: https://github.com/emmercm/www
     title: Website Source
-    icon: far fa-code
+    icon: fa-regular fa-code
diff --git a/src/data/links.yml b/src/data/links.yml
@@ -2,80 +2,80 @@
   icons:
     - link: https://github.com/emmercm
       title: GitHub
-      icon: fab fa-github
+      icon: fa-brands fa-github
 
     - link: https://www.npmjs.com/~emmercm
       title: npm
-      icon: fab fa-npm
+      icon: fa-brands fa-npm
 
     - link: https://hub.docker.com/u/emmercm
       title: Docker Hub
-      icon: fab fa-docker
+      icon: fa-brands fa-docker
 
 - title: Social
   icons:
     # - link: https://www.facebook.com/emmercm/
     #   title: Facebook
-    #   icon: fab fa-facebook
+    #   icon: fa-brands fa-facebook
 
     - link: https://twitter.com/emmercm
       title: Twitter
-      icon: fab fa-twitter
+      icon: fa-brands fa-twitter
 
     - link: https://www.instagram.com/emmercm/
       title: Instagram
-      icon: fab fa-instagram
+      icon: fa-brands fa-instagram
 
     - link: https://www.linkedin.com/in/emmercm/
       title: LinkedIn
-      icon: fab fa-linkedin-in
+      icon: fa-brands fa-linkedin-in
 
 - title: Music
   icons:
     - link: https://open.spotify.com/user/tsukasax
       title: Spotify
-      icon: fab fa-spotify
+      icon: fa-brands fa-spotify
 
     - link: https://www.last.fm/user/MimiruX
       title: Last.fm
-      icon: fab fa-lastfm
+      icon: fa-brands fa-lastfm
 
     - link: https://www.discogs.com/user/emmercm/collection
       title: Discogs
-      icon: far fa-record-vinyl
+      icon: fa-regular fa-record-vinyl
 
 - title: Gaming
   icons:
     - link: https://steamcommunity.com/id/emmercm/
       title: Steam
-      icon: fab fa-steam
+      icon: fa-brands fa-steam
 
     - title: "Discord: emmercm#5912"
-      icon: fab fa-discord
+      icon: fa-brands fa-discord
 
     - title: "Nintendo Switch: SW-6392-7076-9514"
-      icon: far fa-gamepad-alt
+      icon: fa-regular fa-gamepad-alt
 
     # - title: "Battle.net: emmercm#1853"
-    #   icon: far fa-snowflake
+    #   icon: fa-brands fa-battle-net
 
     # - title: "Origin: TsukasaX"
-    #   icon: far fa-hurricane
+    #   icon: fa-regular fa-hurricane
 
     # - link: https://www.twitch.tv/emmercm
     #   title: Twitch
-    #   icon: fab fa-twitch
+    #   icon: fa-brands fa-twitch
 
 - title: Miscellaneous
   icons:
     # - link: https://www.meetup.com/members/191693369/
     #   title: Meetup
-    #   icon: fab fa-meetup
+    #   icon: fa-brands fa-meetup
 
     # - link: https://www.strava.com/athletes/5684847
     #   title: Strava
-    #   icon: fab fa-strava
+    #   icon: fa-brands fa-strava
 
     - link: https://untappd.com/user/emmercm
       title: Untappd
-      icon: fab fa-untappd
+      icon: fa-brands fa-untappd
diff --git a/src/index.md b/src/index.md
@@ -15,7 +15,7 @@ pageContainer: false
             {{#each icons.header}}
                 <a href="{{link}}" {{#if title}}title="{{title}}"{{/if}} class="link-dark">
                     <span class="fa-stack align-top">
-                        <i class="fal fa-circle fa-stack-2x"></i>
+                        <i class="fa-light fa-circle fa-stack-2x"></i>
                         <i class="{{icon}} fa-stack-1x"></i>
                     </span>
                 </a>
@@ -35,7 +35,7 @@ pageContainer: false
     <div class="container mw-md-md my-6 mx-auto">
         {{#if github.profile.user.location}}
             <span class="fs-2">
-                <i class="far fa-map-marker-alt"></i>
+                <i class="fa-regular fa-location-dot"></i>
                 {{ github.profile.user.location }}
             </span>
             <br>

diff --git a/src/links.md b/src/links.md
@@ -25,7 +25,7 @@ pageContainer: false
                     </div>
                     <div class="col-1 text-end pe-3">
                         {{#if link}}
-                            <i class="far fa-external-link"></i>
+                            <i class="fa-regular fa-arrow-up-right-from-square"></i>
                         {{/if}}
                     </div>
                 </div>

diff --git a/src/projects.md b/src/projects.md
@@ -10,7 +10,7 @@ priority: 0.8
 
 {{ description }}
 
-## <i class="fab fa-docker"></i> Docker Images
+## <i class="fa-brands fa-docker"></i> Docker Images
 
 I have published a number of public Docker images to [Docker Hub](https://hub.docker.com/u/emmercm).
 
@@ -37,7 +37,7 @@ A collection of images with a headless version of [qBittorrent](https://www.qbit
 
 A collection of images with [FlexGet](https://flexget.com/) installed and the web UI exposed.
 
-## <i class="fab fa-node-js"></i> Metalsmith Plugins
+## <i class="fa-brands fa-node-js"></i> Metalsmith Plugins
 
 I have published a number of plugins for [Metalsmith](https://metalsmith.io/), a plugin-based static site generator originally from [Segment](https://segment.com/), to [npm](https://www.npmjs.com/settings/emmercm/packages).
 
@@ -122,7 +122,7 @@ A Metalsmith plugin to estimate pages' reading times, similar to Medium.
 
 A tool to automatically trace and measure Metalsmith build time.
 
-## <i class="fab fa-raspberry-pi"></i> Raspberry Pi Tools
+## <i class="fa-brands fa-raspberry-pi"></i> Raspberry Pi Tools
 
 I have written a number of Bash scripts for Raspberry Pi to automate building and installing kernels and drivers from source.
 
@@ -148,7 +148,7 @@ A script to build and install a Realtek RTL8812AU WiFi driver from source.
 
 A tool to automatically cast audio input from a Raspberry Pi.
 
-## <i class="far fa-robot"></i> FIRST Robotics Competition
+## <i class="fa-regular fa-robot"></i> FIRST Robotics Competition
 
 I have developed a number of applications for use in the [FIRST Robotics Competition](https://www.firstinspires.org/robotics/frc), a worldwide STEM competition for high school students.