Fix: SEO structural fixes (#248)

* fix: remove domain from titles and fix header layout

* content: change order of tag list

* content: remove featured from podcast

* fix: better handle featured item duplication on home page

* fix: styling to better reflect heading structures for home page

Closes #242

site/src/components/article.js

@@ -23,11 +23,11 @@ const StyledListArticle = styled(Article)`
     font-size: 3rem;
   }
 
-  & h1.home {
+  & h2.home {
     font-size: 4rem;
   }
 
-  & h1.home, h2.list {
+  & h2.home, h3.list, h2.list {
     margin: calc(0.5 * var(--gutter)) var(--gutter);
     display: block;
     background: none;

site/src/components/footer.js

@@ -141,7 +141,7 @@ const Footer = ({slug}) => {
   featuredPosts: allMarkdownRemark(
     filter: {frontmatter: {featured: {eq: true}}}
     sort: {frontmatter: {date: DESC}}
-    limit: 3
+    limit: 4
   ) {
     edges {
       node {
@@ -171,12 +171,25 @@ const Footer = ({slug}) => {
 
   let featured = featuredPosts[0]; // latest
 
+  // there's some logic to this:
+  // If we're on the URL of the post that is most recent, then we should
+  // choose the second post in the list instead.
+  // Similarly if we're on the home page then the most recent featured post
+  // will be at the top so we should get the 4th one from the list as it will
+  // be dropped off the top list
+  // Additionally, do a check to see if the post happens to be something we're
+  // also prioritising in the footer.
   // make sure we don't feature the current post on itself
-  if (featured.slug === slug) {
+  if (slug === '/') {
+    // home page - take the 4th item from the featured list
+    featured = featuredPosts[3];
+  } else if (featured.slug === slug) {
+    // we're on the same page so choose the next one
     featured = featuredPosts[1]; // second latest
-    if (featured.slug === 'podcast-enterprise-ai') {
-      featured = featuredPosts[2]; // last
-    }
+  }
+  // specifically test if we've landed on the same as the other post
+  if (featured.slug === 'podcast-enterprise-ai') {
+    featured = featuredPosts[2]; // take t
   }
 
   featured.url = `/${pathDate(featured.date)}/${featured.slug}/`;

site/src/components/header.js

@@ -289,7 +289,7 @@ const Featured = styled.p`
 const Header = ({
   title, date, excerpt, url,
   featured=false,
-  featuredimage, featuredImageBy,
+  featuredimage=null, featuredImageBy,
   tagimage=null, postcount=null,
   smalltitle, largetitle,
   readingTime=0, wordCount={} }) => {

site/src/content/posts/2023-02-14-podcast-enterprise-ai.md

@@ -15,7 +15,7 @@ twitter_excerpt: >
 featureimage: ../../img/posts/enterprise_ai_future.png
 imageby: "ajfisher: a business person looking into an AI environment - SDXL"
 listimage: ../../img/posts/enterprise_ai.jpg
-featured: true
+featured: false
 ---
 
 I was invited to sit down with some other technology leaders for a podcast

site/src/content/posts/2024-10-28-software-engineering-reimagined-ai-native-era.md

@@ -16,7 +16,7 @@ featureimage: ../../img/posts/native-ai-hero.png
 imageby: ajfisher - Flux.Dev
 listimage: ../../img/posts/native-ai-working.png
 featured: true
-tags: essay, ai, development, generative ai, devops
+tags: ai, development, generative ai, devops, essay
 ---
 
 At the back end of 2024, [most developers at this point are using some sort of

site/src/pages/404.js

@@ -8,7 +8,7 @@ export const Head = () => {
   return (
     <>
       <PageHead
-        title="This page cannot be found | ajfisher.me"
+        title="This page cannot be found | ajfisher"
         description="The page you requested does not exist or has moved."
         type="website"
       />

site/src/pages/index.js

@@ -6,15 +6,18 @@ import PageHead from '../components/page-head';
 import Layout from '../components/list-layout';
 import { ListItems, PostListItem } from '../components/list';
 
-const Intro = styled.p`
-  margin-top: var(--gutter) !important;
+const Intro = styled.h1`
+  margin: var(--gutter) 0 !important;
+  font-size: 2.2rem !important;
+  font: var(--main-font-family);
+  color: var(--dark-text-colour) !important;
 `;
 
 export const Head = () => {
   return (
     <>
       <PageHead
-        title="Home | ajfisher.me"
+        title="Home | ajfisher"
         description="Explore insights on technology, business and user experience at the intersection of AI, web, media and digital innovation."
         type="list"
       />
@@ -43,12 +46,18 @@ const HomePage = ({pageContext, data}) => {
 
   return (
     <Layout slug="/" featured={featured.edges[0].node}>
-      <Intro>Observations, images and code from ajfisher</Intro>
-      <h1 className="home">Featured posts</h1>
+      <Intro>
+        Observations, insights, images and code from ajfisher exploring the
+        intersection of AI, web, media and digital innovation.
+      </Intro>
+      <h2 className="home">Featured posts</h2>
       <ListItems>
         {featured.edges.map(({node}, index) => {
           // jump out on first as this will appear up top
-          if (index === 0) return null;
+          // jump out on last as this will appear in the footer
+          // This will force the second and third in the list under the
+          // featured posts header
+          if (index === 0 || index === 3 ) return null;
 
           const { slug, title, date,
             listimage, listimage_position } = node.frontmatter;
@@ -75,7 +84,7 @@ const HomePage = ({pageContext, data}) => {
         })}
       </ListItems>
 
-      <h1 className="home">Recent posts</h1>
+      <h2 className="home">Recent posts</h2>
       <ListItems>
         {filtered_posts.map(({node}) => {
           const { slug, title, date,
@@ -118,7 +127,7 @@ export const pageQuery = graphql`
         featured: {eq: true}
       }}
       sort: {frontmatter: {date: DESC}}
-      limit: 3
+      limit: 4
     ) {
       edges {
         node {
@@ -162,7 +171,7 @@ export const pageQuery = graphql`
         layout: {regex: "/^post/"}
       }}
       sort: {frontmatter: {date: DESC}}
-      limit: 13
+      limit: 14
     ) {
       edges {
         node {

site/src/pages/leaders.js

@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
-// import styled from 'styled-components';
 import { Link, graphql } from 'gatsby';
 
 import PageHead from '../components/page-head';
 import Layout from '../components/post-layout';
-import { getFeaturedImageSources } from '../lib/utils';
 
 export const Head = () => {
   return (
     <>
       <PageHead
-        title="Leaders | ajfisher.me"
+        title="Leaders | ajfisher"
         description="Information for leaders"
         type="article"
       />
@@ -20,11 +18,9 @@ export const Head = () => {
 
 
 const LeadersPage = ({data}) => {
-  const {base, large, medium, small, wide, share} = data?.headimage?.nodes[0];
+  const { featureimage } = data?.headimage?.nodes[0];
 
-  const featuredImageSrc = getFeaturedImageSources({
-    small, medium, large, wide, share, base
-  });
+  const featuredImage = featureimage || null;
 
   const title = 'Resources, materials and links for Leaders';
   const slug = '/leaders';
@@ -80,7 +76,7 @@ const LeadersPage = ({data}) => {
 
   return (
     <Layout frontmatter={frontmatter} tags={tags}
-      path='/leaders' featuredimage={featuredImageSrc}
+      path='/leaders' featuredimage={featuredImage}
     >
       <PageHead title={title}/>
       <section class="content">
@@ -204,22 +200,7 @@ export const pageQuery = graphql`
     ) {
       nodes {
         id
-        base: gatsbyImageData(width: 400, quality: 100
-          transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
-        )
-        small: gatsbyImageData(width: 400, quality: 100
-          transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
-        )
-        medium: gatsbyImageData(width: 750, quality: 90
-          transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
-        )
-        large: gatsbyImageData(width: 1050, quality: 100
-          transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
-        )
-        wide: gatsbyImageData(width: 1600, quality: 100
-          transformOptions: {duotone: {highlight:"#FF5E9A", shadow:"#000000", opacity: 80}}
-        )
-        share: gatsbyImageData(width: 1200, quality: 90)
+        featureimage: gatsbyImageData(layout: FULL_WIDTH)
       }
     }
   }