general SEO fixes and style updates (#250)

* feat: add bluesky link. closes #249

* content: add more tag header images

* fix: schema markup for post lists

* fix: resolves heading level sin list pages. fixes #247

site/src/components/article.js

@@ -45,7 +45,7 @@ const StyledListArticle = styled(Article)`
   }
 
   & li {
-    & h2 {
+    & h2, h3 {
       background: none;
       color: var(--dark-base);
       box-shadow: none;

site/src/components/header.js

@@ -245,12 +245,16 @@ const PostData = styled(Para)`
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: calc(0.5 * var(--gutter));
-  min-width: 90vw;
+  gap: calc(0.25 * var(--gutter));
+  min-width: 100%;
 
   @media only screen and ${device.medium} {
     font-size: 2rem;
   }
+
+  @container (min-width: 400px) {
+    gap: calc(0.5 * var(--gutter));
+  }
 `;
 
 const Title = ({children, url, smalltitle, largetitle}) => {
@@ -420,4 +424,4 @@ Header.defaultProps = {
 
 export default Header;
 
-export { OldHeader, Header };
+export { OldHeader, Header, PostData };

site/src/components/list-layout.js

@@ -41,7 +41,7 @@ const Layout = ({ children, featured={}, slug}) => {
         readingTime={timeToRead} wordCount={wordCount} />
       <Main>
         <ListArticle>
-          <section>{children}</section>
+          <section itemscope="" itemtype="https://schema.org/Blog">{children}</section>
         </ListArticle>
         <Aside>
           <Nav/>

site/src/components/list.js

@@ -6,7 +6,10 @@ import humanize from 'humanize-plus';
 import moment from 'moment';
 
 import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClock } from '@fortawesome/free-solid-svg-icons';
 
+import { PostData } from './header';
 import { device } from './devices';
 import { pathDate } from '../lib/utils';
 
@@ -27,6 +30,7 @@ export const ListItems = styled.ul`
 const Item = styled.li`
   width: 100%;
   height: min-content;
+  container-type: inline-size;
 
   @media only screen and ${device.medium} {
     width: 49%;
@@ -139,23 +143,30 @@ export const PostListItem = ({title, image, position, excerpt, date,
     const rounded_time = Math.ceil(readingtime);
     const humanised_words = humanize.compactInteger(wordcount, 1);
     // work out if we should say An 8 minute or A 7 seven minute
-    const a_an = ([8,11,18].includes(rounded_time)) ? 'An' : 'A';
+    // const a_an = ([8,11,18].includes(rounded_time)) ? 'An' : 'A';
 
-    const reading_time = `${a_an} ${rounded_time} minute read (${humanised_words} words).`;
+    const reading_time = `${rounded_time} min (${humanised_words} words).`;
 
     return (
-      <Item>
+      <Item itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
         <ImageLink $position={position}>
-          <Link to={url}>
+          <Link to={url} itemprop="url">
             {listimage}
           </Link>
         </ImageLink>
-        <h2><Link to={url}>{title}</Link></h2>
-        <PostDate>{moment(date).format("dddd, MMMM Do YYYY")}</PostDate>
+        <h3 itemprop="headline"><Link to={url}>{title}</Link></h3>
+        <PostDate itemprop="datePublished" datetime={moment(date).format("YYYY-MM-DD")}>{moment(date).format("dddd, MMMM Do YYYY")}</PostDate>
         { excerpt.length > 0 &&
-          <p>{excerpt}</p>
+          <p itemprop="abstract" itemtype="https://schema.org/CreativeWork">{excerpt}</p>
         }
-        <p>{reading_time}</p>
+        <PostData aria-hidden="true" itemprop="timeRequired" content={`PT${rounded_time}M`}>
+          <span>
+            <FontAwesomeIcon icon={faClock}/>
+          </span>
+          <span>
+            {reading_time}
+          </span>
+        </PostData>
       </Item>
     );
 };

site/src/components/nav.js

@@ -5,7 +5,7 @@ import { Link } from 'gatsby';
 import { OutboundLink } from 'gatsby-plugin-google-analytics';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTwitter, faInstagram, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { faTwitter, faInstagram, faGithub, faLinkedin, faBluesky } from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 
@@ -128,11 +128,11 @@ const NavItems = styled.ul`
     }
 
     @media only screen and ${device.large} {
-      font-size: 3.5rem;
+      font-size: 3rem;
     }
 
     @media only screen and ${device.wide} {
-      font-size: 4rem;
+      font-size: 3.2rem;
     }
 
     & a {
@@ -181,6 +181,9 @@ const Navigation = () => {
         <OutboundLink title="@ajfisher on Twitter" href="https://twitter.com/ajfisher" target="_blank" rel="noopener noreferrer">
           <FontAwesomeIcon icon={faTwitter}/>
         </OutboundLink>
+        <OutboundLink title="@ajfisher on Bluesky" href="https://bsky.app/profile/ajfisher.social" target="_blank" rel="noopener noreferrer">
+          <FontAwesomeIcon icon={faBluesky}/>
+        </OutboundLink>
         <OutboundLink title="@ajfisher on LinkedIn" href="https://www.linkedin.com/in/andrewfisher/" target="_blank" rel="noopener noreferrer">
           <FontAwesomeIcon icon={faLinkedin}/>
         </OutboundLink>

site/src/lib/tag_data.json

@@ -57,7 +57,8 @@
     {
         "tag": "conference",
         "title": "Conference synthesis and observation",
-        "intro": "A good conference gives you a boost of knowledge, downloading months or years of learning into your brain in a couple of days. A great conference gets your brain working overtime, thinking about all the new possibilities that you can pursue as a result of that knowledge. This is a distillation of various conferences, synthesising the key themes."
+        "intro": "A good conference gives you a boost of knowledge, downloading months or years of learning into your brain in a couple of days. A great conference gets your brain working overtime, thinking about all the new possibilities that you can pursue as a result of that knowledge. This is a distillation of various conferences, synthesising the key themes.",
+        "tagimage": "../img/posts/tag_conference.png"
     },
     {
         "tag": "consumer electronics",
@@ -291,7 +292,8 @@
     {
         "tag": "security",
         "title": "Secure your information",
-        "intro": "Data breaches are becoming ever more common and the security threat for most people, in this digital age is constant. How organisations take security seriously and how they design experiences that manage security for their users is becoming a critical capability of most businesses."
+        "intro": "Data breaches are becoming ever more common and the security threat for most people, in this digital age is constant. How organisations take security seriously and how they design experiences that manage security for their users is becoming a critical capability of most businesses.",
+        "tagimage": "../img/posts/tag_security.png"
     },
     {
         "tag": "standards",
@@ -301,7 +303,8 @@
     {
         "tag": "strategy",
         "title": "Business, technology and customer strategy",
-        "intro": "Strategy is the art of choosing what not to do out of the long list of things you could do in your organisation. Whether it's determining to pursue a particular market, create a new product, acquire a business or shut a division down, strategic thinking is critical to realise the organisational goals."
+        "intro": "Strategy is the art of choosing what not to do from the long list of things you could do in your organisation. Whether it's determining to pursue a particular market, create a new product, acquire a business or shut a division down, strategic thinking is critical to realise the organisational goals.",
+        "tagimage": "../img/posts/tag_strategy.png"
     },
     {
         "tag": "supercomputers",