General layout fixes and improvements (#167)

* fix: make a / an preface work correctly fixes #162 * fix: undefined links causing warnings fixes #163 * fix: featured items on tag pages and QoL fixes for tag pages fixes #41 * fix: links with images lost border radius on hover * feat: add linkedin to nav #164 * fix: double feature in footer fixes #165 * fix: general style tuning * fix: tune tag naming * feat: add list image placeholders closes #166
ajfisher · Sep 24, 2023 · db3b09d · db3b09d
1 parent 6784cb4
commit db3b09d
Show file tree

Hide file tree

Showing 20 changed files with 169 additions and 51 deletions.
diff --git a/site/src/components/footer.js b/site/src/components/footer.js
@@ -32,6 +32,7 @@ export const FooterImageLink = styled(ImageLink)`
 
   :hover {
     border-bottom: 0.5rem solid var(--light-base);
+    border-radius: 0.2rem;
   }
 `;
 
@@ -108,11 +109,11 @@ const PostItem = ({title, image, url, excerpt}) => {
 
   return <>
     <FooterImageLink>
-      <Link to={url}>
+      <Link to={url || '/'}>
         <GatsbyImage image={postImage} alt={title} />
       </Link>
     </FooterImageLink>
-    <p><Link to={url}>{title}</Link></p>
+    <p><Link to={url || '/'}>{title}</Link></p>
     { excerpt.length > 0 &&
       <p>{excerpt}</p>
     }
@@ -140,7 +141,7 @@ const Footer = ({slug}) => {
   featuredPosts: allMarkdownRemark(
     filter: {frontmatter: {featured: {eq: true}}}
     sort: {frontmatter: {date: DESC}}
-    limit: 2
+    limit: 3
   ) {
     edges {
       node {
@@ -173,6 +174,9 @@ const Footer = ({slug}) => {
   // make sure we don't feature the current post on itself
   if (featured.slug === slug) {
     featured = featuredPosts[1]; // second latest
+    if (featured.slug === 'podcast-enterprise-ai') {
+      featured = featuredPosts[2]; // last
+    }
   }
 
   featured.url = `/${pathDate(featured.date)}/${featured.slug}/`;
@@ -189,14 +193,14 @@ const Footer = ({slug}) => {
         <section>
           <Title>Recent Media</Title>
           <FooterImageLink>
-            <Link href="/2023/02/12/podcast-enterprise-ai/">
+            <Link to="/2023/02/12/podcast-enterprise-ai/">
               <GatsbyImage
                 image={data.podcast.childImageSharp.gatsbyImageData}
                 alt="Generative AI in the enterprise" />
             </Link>
           </FooterImageLink>
           <p>
-            <Link href="/2023/02/12/podcast-enterprise-ai/">
+            <Link to="/2023/02/12/podcast-enterprise-ai/">
               ChatGPT and Generative AI in the enterprise
             </Link>
           </p>

diff --git a/site/src/components/list-layout.js b/site/src/components/list-layout.js
@@ -10,7 +10,7 @@ const Layout = ({ children, featured={}, slug}) => {
 
   // determine the featured article and pull it from the list.
   const {frontmatter={}, fields={}} = featured;
-  const excerpt = frontmatter.excerpt || fields.excerpt || '';
+  const excerpt = frontmatter.excerpt || fields.excerpt || featured?.excerpt || '';
   const url = `/${pathDate(frontmatter.date)}/${frontmatter.slug}/`;
 
   const {title, date} = frontmatter;

diff --git a/site/src/components/list.js b/site/src/components/list.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import humanize from 'humanize-plus';
 import moment from 'moment';
 
-import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image";
 
 import { device } from './devices';
 import { pathDate } from '../lib/utils';
@@ -47,6 +47,7 @@ export const ImageLink = styled.div`
 
   :hover {
     border-bottom: 0.5rem solid var(--dark-grey);
+    border-radius: 0.2rem;
   }
 
   @media only screen and ${device.large} {
@@ -71,33 +72,88 @@ const PostDate = styled.p`
   font-size: 1.5rem !important;
 `;
 
+const ListItemPlaceholderImage = () => {
+  // return a placeholder image from the set randomly
+  const noPlaceholders = 12;
+
+  switch (Math.floor(Math.random() * noPlaceholders)) {
+    case 1:
+      return(<StaticImage src="../img/posts/listimages/li1.png"
+        placeholder="blurred" layout="fullWidth" alt="" />);
+    case 2:
+      return(<StaticImage src="../img/posts/listimages/li2.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 3:
+      return(<StaticImage src="../img/posts/listimages/li3.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 4:
+      return(<StaticImage src="../img/posts/listimages/li4.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 5:
+      return(<StaticImage src="../img/posts/listimages/li5.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 6:
+      return(<StaticImage src="../img/posts/listimages/li6.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 7:
+      return(<StaticImage src="../img/posts/listimages/li7.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 8:
+      return(<StaticImage src="../img/posts/listimages/li8.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 9:
+      return(<StaticImage src="../img/posts/listimages/li9.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 10:
+      return(<StaticImage src="../img/posts/listimages/li10.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    case 11:
+      return(<StaticImage src="../img/posts/listimages/li11.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+    default:
+      // this conveniently handles a result of 0 as well.
+      return(<StaticImage src="../img/posts/listimages/li0.png"
+        placeholder="blurred" layout="fullWidth" alt=""/>);
+  }
+};
+
 export const PostListItem = ({title, image, position, excerpt, date,
   slug, readingtime, wordcount}) => {
 
     image = image || '';
 
     const url = `/${pathDate(date)}/${slug}/`;
 
-    const listimage = getImage(image);
+    let listimage;
+    if (image === '') {
+      listimage = ListItemPlaceholderImage();
+    } else {
+      const PostImage = (image, title) => {
+        const postimage = getImage(image);
+        return(<GatsbyImage image={postimage} alt={title} />);
+      };
+
+      listimage = PostImage(image, title);
+    }
 
     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';
 
     return (
       <Item>
-        {typeof(listimage) !== 'undefined' &&
-          <ImageLink $position={position}>
-            <Link to={url}>
-              <GatsbyImage image={listimage} alt={title} />
-            </Link>
-          </ImageLink>
-        }
+        <ImageLink $position={position}>
+          <Link to={url}>
+            {listimage}
+          </Link>
+        </ImageLink>
         <h2><Link to={url}>{title}</Link></h2>
         <PostDate>{moment(date).format("dddd, MMMM Do YYYY")}</PostDate>
         { excerpt.length > 0 &&
           <p>{excerpt}</p>
         }
-        <p>A {rounded_time} minute read ({humanised_words} words)</p>
+        <p>{a_an} {rounded_time} minute read ({humanised_words} words)</p>
       </Item>
     );
 };

diff --git a/site/src/components/nav.js b/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 } from '@fortawesome/free-brands-svg-icons';
+import { faTwitter, faInstagram, faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 
 import { device } from './devices';
@@ -85,9 +85,6 @@ const Nav = ({children}) => {
         <li><Link to="/colophon/">Colophon</Link></li>
         <li><Link to="/dis-everything/">Disclaimer & Disclosure</Link></li>
         <li className="icons">
-          <OutboundLink title="@ajfisher on Twitter" href="https://twitter.com/ajfisher" target="_blank" rel="noopener noreferrer">
-            <FontAwesomeIcon icon={faTwitter}/>
-          </OutboundLink>
           <OutboundLink title="@ajfisher on Github" href="https://github.com/ajfisher" target="_blank" rel="noopener noreferrer">
             <FontAwesomeIcon icon={faGithub}/>
           </OutboundLink>
@@ -97,6 +94,12 @@ const Nav = ({children}) => {
           <OutboundLink title="Send ajfisher an email" href="mailto:ajfisher.td@gmail.com" target="_blank" rel="noopener noreferrer">
             <FontAwesomeIcon icon={faEnvelope}/>
           </OutboundLink>
+          <OutboundLink title="@ajfisher on Twitter" href="https://twitter.com/ajfisher" target="_blank" rel="noopener noreferrer">
+            <FontAwesomeIcon icon={faTwitter}/>
+          </OutboundLink>
+          <OutboundLink title="@ajfisher on LinkedIn" href="https://www.linkedin.com/in/andrewfisher/" target="_blank" rel="noopener noreferrer">
+            <FontAwesomeIcon icon={faLinkedin}/>
+          </OutboundLink>
         </li>
       </ul>
     </Navigation>

diff --git a/site/src/components/postdata.js b/site/src/components/postdata.js
@@ -18,7 +18,7 @@ const Published = styled.p`
   @media only screen and ${device.large} {
     box-shadow: none;
     padding: 0.5rem;
-    border-bottom: 0.2rem solid var(--light-base);
+    border-bottom: 0.4rem solid var(--light-base);
     border-radius: 0.2rem;
   }
 `;

diff --git a/site/src/components/tags.js b/site/src/components/tags.js
@@ -9,6 +9,13 @@ const TagPara = styled.p`
 
   & a {
     font-size: 2rem;
+    background: var(--dark-grey);
+    padding: 0 0.5rem;
+	  border-radius: 0.2rem;
+  }
+
+  & a:hover, a:visited:hover {
+    color: var(--light-base);
   }
 `;
 
@@ -25,7 +32,7 @@ const Tags = ({children}) => {
   });
 
   return (
-    <TagPara>Tagged: {taglist}</TagPara>
+    <TagPara>Tags:<br/>{taglist}</TagPara>
   );
 };
 

diff --git a/site/src/img/posts/listimages/li0.png b/site/src/img/posts/listimages/li0.png
diff --git a/site/src/img/posts/listimages/li1.png b/site/src/img/posts/listimages/li1.png
diff --git a/site/src/img/posts/listimages/li10.png b/site/src/img/posts/listimages/li10.png
diff --git a/site/src/img/posts/listimages/li11.png b/site/src/img/posts/listimages/li11.png
diff --git a/site/src/img/posts/listimages/li2.png b/site/src/img/posts/listimages/li2.png
diff --git a/site/src/img/posts/listimages/li3.png b/site/src/img/posts/listimages/li3.png
diff --git a/site/src/img/posts/listimages/li4.png b/site/src/img/posts/listimages/li4.png
diff --git a/site/src/img/posts/listimages/li5.png b/site/src/img/posts/listimages/li5.png
diff --git a/site/src/img/posts/listimages/li6.png b/site/src/img/posts/listimages/li6.png
diff --git a/site/src/img/posts/listimages/li7.png b/site/src/img/posts/listimages/li7.png
diff --git a/site/src/img/posts/listimages/li8.png b/site/src/img/posts/listimages/li8.png
diff --git a/site/src/img/posts/listimages/li9.png b/site/src/img/posts/listimages/li9.png
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
@@ -84,18 +84,15 @@ h3 {
 
 a {
     color: var(--highlight);
-    background: var(--dark-grey);
     text-decoration: none;
-    padding: 0 0.5rem;
     transition: all 0.4s ease;
-	border-radius: 0.2rem;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
 }
 
 a:hover,
 a:visited:hover {
-    color: var(--light-base);
+    color: var(--dark-base);
 }
 
 /** general article content specific styles **/
@@ -142,7 +139,7 @@ article p.caption {
     padding-left: var(--gutter) !important;
     display: inline-block;
 	border-radius: 0.2rem;
-    border-bottom: 0.2rem solid var(--light-base);
+    border-bottom: 0.4rem solid var(--light-base);
 }
 
 article p.caption a, article p.caption a:visited {