Add icons to the byline (#17993)

gulpfile.js

@@ -174,7 +174,7 @@ gulp.task('dev-server', syncDepenedents, function() {
     open: false,
     middleware: [
       webpackDevMiddleware(bundler, {
-        publicPath: webpackConfig.output.publicPath,
+        publicPath: '/js',
         stats: 'errors-only'
       }),
       webpackHotMiddleware(bundler)

news/components/ArticleMeta.js

@@ -5,6 +5,9 @@ import differenceInMinutes from 'date-fns/difference_in_minutes';
 import differenceInHours from 'date-fns/difference_in_hours';
 import differenceInDays from 'date-fns/difference_in_calendar_days';
 import format from 'date-fns/format';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import { faCalendarAlt, faClock } from '@fortawesome/free-regular-svg-icons';
+import { faFreeCodeCamp } from '@fortawesome/free-brands-svg-icons';
 
 const propTypes = {
   article: PropTypes.object
@@ -64,10 +67,17 @@ function ArticleMeta({
       </Helmet>
       <div className='meta-item-wrapper'>
         <span className='meta-item'>By {author.name}</span>
-        <span className='meta-item'>{getTimeString(firstPublishedDate)}</span>
+        <span className='meta-item'>
-        <span className='meta-item'>{`${meta.readTime} minute read`}</span>
+          <FontAwesomeIcon icon={faCalendarAlt} />{' '}
+          {getTimeString(firstPublishedDate)}
+        </span>
+        <span className='meta-item'>
+          <FontAwesomeIcon icon={faClock} /> {`${meta.readTime} minute read`}
+        </span>
         {viewCount >= 100 ? (
-          <span className='meta-item'>{`${viewCount} views`}</span>
+          <span className='meta-item'>
+            <FontAwesomeIcon icon={faFreeCodeCamp} /> {`${viewCount} views`}
+          </span>
         ) : null}
       </div>
     </div>

news/routes/Show/components/Author.js

@@ -39,7 +39,7 @@ const styles = `
 
 function Author({ article }) {
   const {
-    author: { avatar, bio }
+    author: { avatar }
   } = article;
   return (
     <div className='author-block'>
@@ -49,7 +49,6 @@ function Author({ article }) {
       <img height='50px' src={avatar} />
       <div className='author-bio'>
         <ArticleMeta article={article} />
-        <span>{bio.slice(0, 101)}</span>
       </div>
     </div>
   );

package-lock.json

@@ -17,6 +17,66 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
       "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
     },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.2.tgz",
+      "integrity": "sha512-j+DmvRF3FPekdLir3ocSl3fO12FxKXEot/kqeodUqTBsmU0EcPvRLn9ip3xzQrMSJ2cWyqv4GNxFm5kT0XR8mw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.2.tgz",
+          "integrity": "sha512-OBzXzYJ+nDMece2nKeuV7hLuwqPN3jv1Fk56gag2DL4BiwWl8gkFQplj5Krep9HwtjFxbM6/DWN6ZG7FRC5N0w=="
+        }
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.2.0.tgz",
+      "integrity": "sha512-rGO6+T8u5/zevLOht5dLwO3yMtWJMowh3JCDo6Nr/UNk4kn1hQSPquKgfJAn1fra+hI1lNeNlREILoQmiSLDKw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.2.tgz",
+          "integrity": "sha512-OBzXzYJ+nDMece2nKeuV7hLuwqPN3jv1Fk56gag2DL4BiwWl8gkFQplj5Krep9HwtjFxbM6/DWN6ZG7FRC5N0w=="
+        }
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.2.0.tgz",
+      "integrity": "sha512-7mqDUTtQKzZBCHWIb5/H8yi0ZkOfG0oygiBuzZ5OpE3UfaHZ6SuUfdgSfd0jJ9q08DzfYxlZ21EPfwbOceox8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.2.tgz",
+          "integrity": "sha512-OBzXzYJ+nDMece2nKeuV7hLuwqPN3jv1Fk56gag2DL4BiwWl8gkFQplj5Krep9HwtjFxbM6/DWN6ZG7FRC5N0w=="
+        }
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.2.0.tgz",
+      "integrity": "sha512-ZgUtvhtdOMGaXSenAxzjVhn+Bz1tYKqUPIVeZ/40vrilOu8dF95EjRW1JcUJ938gNE8pjaB/G2AlJN8T0wcXxw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "0.2.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.2.tgz",
+          "integrity": "sha512-OBzXzYJ+nDMece2nKeuV7hLuwqPN3jv1Fk56gag2DL4BiwWl8gkFQplj5Krep9HwtjFxbM6/DWN6ZG7FRC5N0w=="
+        }
+      }
+    },
     "@fortawesome/react-fontawesome": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.0.20.tgz",

package.json

@@ -41,6 +41,10 @@
   "license": "(BSD-3-Clause AND CC-BY-SA-4.0)",
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-svg-core": "^1.2.2",
+    "@fortawesome/free-brands-svg-icons": "^5.2.0",
+    "@fortawesome/free-regular-svg-icons": "^5.2.0",
+    "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "0.0.20",
     "@freecodecamp/curriculum": "^3.1.1",
     "@freecodecamp/loopback-component-passport": "^1.0.0",