small changes to improve lighthouse scores (#645)

Co-authored-by: wil <test@local.host>

src/gatsby-blog/src/components/BlogRollItem.tsx

@@ -13,7 +13,7 @@ export const BlogRollItem = ({postFrontmatter: pfm}:{postFrontmatter: staiFrontm
 
     return (
       <li className="group">
-        <Link to={pfm.slug}>
+        <Link to={pfm.slug} title={pfm.title}>
           <div className="h-32 overflow-hidden rounded-lg bg-panel/5 sm:h-52">
             {featuredImage && (
               <GatsbyImage
@@ -23,7 +23,7 @@ export const BlogRollItem = ({postFrontmatter: pfm}:{postFrontmatter: staiFrontm
               />
             )}
           </div>
-
+        </Link>
           <div className="mt-3 flex flex-col">
             <div>
               <Link
@@ -33,14 +33,15 @@ export const BlogRollItem = ({postFrontmatter: pfm}:{postFrontmatter: staiFrontm
                 {category.displayName}
               </Link>
             </div>
-            <H4 className="my-0 text-[16px] transition-all group-hover:text-link md:text-[18px]">
-              {pfm.title}
-            </H4>
-            
+            <Link to={pfm.slug}>
+              <H4 className="my-0 text-[16px] transition-all group-hover:text-link md:text-[18px]">
+                {pfm.title}
+              </H4>
+            </Link>
           </div>
           {/* <p>{frontmatter.date}</p> */}
           {/* <p className="italic">by {frontmatter.author ?? "unknown"}</p> */}
-        </Link>
+        
       </li>
     );
 }

src/gatsby-blog/src/components/HeroPost.tsx

@@ -8,7 +8,7 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import * as MdTypography from "./MdTypography";
 import { staiFrontmatter } from "../models/frontmatter";
 import { getCateogry } from "../models";
-const {P, H2} = MdTypography;
+const { P, H2 } = MdTypography;
 
 export const HeroPost = ({postFrontmatter}:{postFrontmatter:staiFrontmatter})=>{
   const pfm = postFrontmatter;

src/gatsby-blog/src/components/SocialIcons.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faFacebook,
+  // faFacebook,
   faInstagram,
-  faLinkedin,
+  // faLinkedin,
   faTiktok,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
 
 const socialMedia = [
-  { icon: faTwitter, link: "https://twitter.com" },
-  { icon: faInstagram, link: "https://instagram.com" },
-  { icon: faTiktok, link: "https://tiktok.com" },
+  { name: "Twitter", icon: faTwitter, link: "https://twitter.com" },
+  { name: "Instagram", icon: faInstagram, link: "https://instagram.com" },
+  { name: "Tiktok", icon: faTiktok, link: "https://tiktok.com" },
 ];
 
 const SocialIcons = () => {
@@ -25,7 +25,7 @@ const SocialIcons = () => {
           rel="noopener noreferrer"
           className="text-md flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white transition-all hover:bg-white/20"
         >
-          <FontAwesomeIcon icon={social.icon} />
+          <FontAwesomeIcon icon={social.icon} title={social.name}/>
         </a>
       ))}
     </div>

src/gatsby-blog/src/pages/index.tsx

@@ -8,9 +8,21 @@ import { BlogRoll, HeroPost, Layout } from "../components";
 import "../styles/global.css";
 import { staiFrontmatter } from "../models/frontmatter";
 
-const {P, H1} = MdTypography;
+const { P, H1 } = MdTypography;
+
+export const Head: HeadFC = () => {
+  return(
+    <>
+      <html lang="en" />
+      <title>Storyteller Blog</title>
+      <meta
+        name="description"
+        content="Blog of Storyteller.ai, including tutorials, press releases, etc."
+      />
+    </>
+  );
+};
 
-export const Head: HeadFC = () => <title>Storyteller Blog</title>;
 const IndexPage = ({ data }: PageProps<Queries.IndexPageQuery>) => {
   const allPosts = data.allMdx.nodes;
   const heroPost = allPosts.find((post)=>post?.frontmatter?.featured);

src/gatsby-blog/yarn.lock

@@ -1191,6 +1191,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.2.1"
 
+"@fortawesome/react-fontawesome@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@gatsbyjs/parcel-namer-relative-to-cwd@^2.13.1":
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-2.13.1.tgz#79d2692330a942394200c9bf3e820a4e55075ffb"
@@ -10502,7 +10509,16 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10604,7 +10620,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10625,6 +10641,13 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -11641,7 +11664,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11659,6 +11682,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"