Feat: tag headers and consolidation (#240)

* refactor: clean up the tagging across pages #239 * refactor: clean up some whitespace * new template and layout for tag headers #238 * refactor: remove unused variables * docs: update to reflect image generation * refactor: tag cleanup and consolidation * content: all basic tag info into the database #238 * feat: new main images for tag pages
ajfisher · Oct 6, 2024 · b540e13 · b540e13
1 parent 715e8d2
commit b540e13
Show file tree

Hide file tree

Showing 97 changed files with 469 additions and 191 deletions.
diff --git a/site/src/components/article.js b/site/src/components/article.js
@@ -34,8 +34,8 @@ const StyledListArticle = styled(Article)`
 
   & p {
     font-size: 2rem;
-
   }
+
   & p.tagintro {
     font-size: 1.8rem;
   }

diff --git a/site/src/components/header.js b/site/src/components/header.js
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import humanize from 'humanize-plus';
 import moment from 'moment';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCamera, faClock } from '@fortawesome/free-solid-svg-icons';
+import { faCamera, faClock, faNewspaper } from '@fortawesome/free-solid-svg-icons';
 
 import { device } from './devices';
 
@@ -290,6 +290,7 @@ const Header = ({
   title, date, excerpt, url,
   featured=false,
   featuredimage, featuredImageBy,
+  tagimage=null, postcount=null,
   smalltitle, largetitle,
   readingTime=0, wordCount={} }) => {
 
@@ -302,14 +303,26 @@ const Header = ({
     const humanised_words = humanize.compactInteger(wordCount.words, 1) || 0;
 
     const PostHeader = (featuredimage === null) ? TextHeader : ImageHeader;
-    const postimage = getImage(featuredimage);
+
+    let headerimage;
+    if (featuredimage) {
+      headerimage = getImage(featuredimage);
+    } else if (tagimage) {
+      headerimage = getImage(tagimage);
+    }
+
+    let pluralArticle = postcount > 1 ? 'articles' : 'article';
 
     return (
       <PostHeader>
         { featuredimage !== null &&
-          <GatsbyImage image={postimage} alt={featuredImageBy} class="headerimage" />
+          <GatsbyImage image={headerimage} alt={featuredImageBy} class="headerimage" />
         }
-        { featuredimage === null &&
+        {
+          tagimage !== null &&
+          <GatsbyImage image={headerimage} class="headerimage" />
+        }
+        { featuredimage === null && tagimage === null &&
           <div class="imagefill" />
         }
         <Container className="wrapper">
@@ -343,6 +356,14 @@ const Header = ({
               <span>{featuredImageBy}</span>
             </PostData>
           }
+          { postcount !== null &&
+            <PostData>
+              <span>
+                <FontAwesomeIcon icon={faNewspaper}/>
+              </span>
+              <span>Read {postcount} {pluralArticle} in this topic.</span>
+            </PostData>
+          }
         </Container>
       </PostHeader>
     );

diff --git a/site/src/components/list-layout.js b/site/src/components/list-layout.js
@@ -14,17 +14,29 @@ const Layout = ({ children, featured={}, slug}) => {
     timeToRead, wordCount
   } = featured;
   const excerpt = frontmatter.excerpt || fields.excerpt || featured?.excerpt || '';
-  const url = `/${pathDate(frontmatter.date)}/${frontmatter.slug}/`;
+
+  // check if we're building a linkable page or not. If we're getting a featured
+  // post then this will evaluate to be true so it can link through. If it's a
+  // tag listing page then this won't be needed
+  let url;
+  if (frontmatter?.date && frontmatter?.slug) {
+    url = `/${pathDate(frontmatter.date)}/${frontmatter.slug}/`;
+  }
 
   const {title, date, imageby} = frontmatter;
   const featuredImage = frontmatter?.featureimage || null;
   const featurePost = frontmatter.featured || false;
 
+  // this is used for tag listing pages to set a header image and number of posts
+  const tagImage = frontmatter?.tagimage || null;
+  const postCount = frontmatter?.postcount || null;
+
   return (
     <>
       <Header featured={featurePost} title={title} date={date}
         excerpt={excerpt} url={url}
         featuredimage={featuredImage} featuredImageBy={imageby}
+        tagimage={tagImage} postcount={postCount}
         smalltitle={frontmatter.small_title} largetitle={frontmatter.large_title}
         readingTime={timeToRead} wordCount={wordCount} />
       <Main>

diff --git a/site/src/content/pages/colophon.md b/site/src/content/pages/colophon.md
@@ -33,8 +33,13 @@ Certificates and cloudfront distributions.
 
 #### Images
 
-Images are a mix of pictures I take myself where needed for a project or else
-I source Creative Commons available images from Flickr which are then attributed.
+Images are a mix of pictures I take myself where needed for a project,
+sourced from Creative Commons available images in Flickr which are then
+attributed. As of 2024, some images are now produced for headers using Stable
+Diffusion, which I do locally. I acknowledge that Generative image models have
+likely been trained on copyright artwork (including mine) I explicitly do not
+use prompts that mimic artists' unique style (eg "in the style of... " type
+prompts).
 
 Gatsby has an excellent image processing system which can produce various sizes
 of image in order to make the site responsive and keep the page weight as light

diff --git a/site/src/content/posts/2007-02-15-please-nokia-slap-me-again-no-really.md b/site/src/content/posts/2007-02-15-please-nokia-slap-me-again-no-really.md
@@ -4,7 +4,7 @@ date: 2007-02-15 13:56:00+00:00
 layout: post.hbt
 slug: please-nokia-slap-me-again-no-really
 title: Please nokia slap me again - no really
-tags: mobile, nokia
+tags: mobile, nokia, business
 ---
 
 I love Nokia phones. In fact you could probably say that I have had a love affair with Nokia devices for over the last 10 years ever since my first one.

diff --git a/site/src/content/posts/2007-03-05-fuzzys-where-its-at-or-will-be-eventually.md b/site/src/content/posts/2007-03-05-fuzzys-where-its-at-or-will-be-eventually.md
@@ -4,7 +4,7 @@ date: 2007-03-05 16:07:00+00:00
 layout: post.hbt
 slug: fuzzys-where-its-at-or-will-be-eventually
 title: Fuzzy's where it's at... or will be eventually
-tags: fuzzy logic, retail, web, ecommerce
+tags: algorithms, retail, ecommerce
 excerpt: >
     Using fuzzy logic can create significantly better customer experience.
     However it hasn't caught on on web circles yet but examples are starting.

diff --git a/site/src/content/posts/2007-04-23-why-is-css-such-a-painful-tool.md b/site/src/content/posts/2007-04-23-why-is-css-such-a-painful-tool.md
@@ -4,7 +4,7 @@ date: 2007-04-23 13:43:00+00:00
 layout: post.hbt
 slug: why-is-css-such-a-painful-tool
 title: Why is CSS such a painful tool?
-tags: css, W3C, development, standards
+tags: css, development, standards
 ---
 
 Looking at the title above you'd be expecting to see a rant covering the lines of CSS is rubbish, it doesn't work properly and why can't we go back to the days of nested tables and lots of little shim images.

diff --git a/site/src/content/posts/2007-04-24-the-things-we-take-for-granted.md b/site/src/content/posts/2007-04-24-the-things-we-take-for-granted.md
@@ -4,7 +4,7 @@ date: 2007-04-24 13:48:00+00:00
 layout: post.hbt
 slug: the-things-we-take-for-granted
 title: The things we take for granted
-tags: UX, design
+tags: ux, design
 ---
 
 I had one of those amazing moments as a techie last night where you get so gobsmacked by something that you think about it even a day or so later.

diff --git a/site/src/content/posts/2007-04-29-when-css-goes-bad.md b/site/src/content/posts/2007-04-29-when-css-goes-bad.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: when-css-goes-bad
 title: When CSS goes bad
 large-title: true
-tags: development, css, debugging, standards
+tags: development, css, standards
 ---
 
 If you do a lot of CSS work you'll have seen particular bugs time after time and how to deal with them, however when things do go wrong [and they will trust me] finding bug related information can be a nightmare.

diff --git a/...tent/posts/2007-04-30-super-computer-required-to-simulate-half-a-mouse-brain.md b/...tent/posts/2007-04-30-super-computer-required-to-simulate-half-a-mouse-brain.md
@@ -4,7 +4,7 @@ date: 2007-04-30 19:15:00+00:00
 layout: post.hbt
 slug: super-computer-required-to-simulate-half-a-mouse-brain
 title: Super computer required to simulate half a mouse brain
-tags: AI, supercomputers
+tags: ai, supercomputers
 ---
 
 Scientists have published that the've used the [IBM Blue Gene L supercomputer](http://www.llnl.gov/asc/computing_resources/bluegenel/bluegene_home.html) to simulate half of a typical mouse's brain. More accurately they've simulated about half the neurons and just over half the number of synaptic connections for 10 seconds - which because the simulation was running at about a tenth of normal speed showed about 1 second's worth of realtime information.

diff --git a/site/src/content/posts/2007-05-03-drmed-for-life.md b/site/src/content/posts/2007-05-03-drmed-for-life.md
@@ -5,7 +5,7 @@ date: 2007-05-03 13:49:00+00:00
 layout: post.hbt
 slug: drmed-for-life
 title: DRMed for Life
-tags: DRM, media, movies, piracy, rant
+tags: drm, media, piracy, rant
 ---
 
 In the news recently has been the whole thing about not only the copy protection on [HD-DVD and Blu-Ray disks being cracked](http://www.infoworld.com/article/06/12/29/HNdrmhacked_1.html) but people posting digg links with decryption keys in them. I can understand Digg's position in removing said posts until the community kicked off and [they then decided they'll go down with the ship ](http://blog.digg.com/?p=74)if they got prosecuted. Hurrah for someone over there seeing sense.

diff --git a/site/src/content/posts/2007-07-03-is-180-good-value-for-wii-sports.md b/site/src/content/posts/2007-07-03-is-180-good-value-for-wii-sports.md
@@ -5,7 +5,7 @@ date: 2007-07-03 08:07:00+00:00
 layout: post.hbt
 slug: is-180-good-value-for-wii-sports
 title: Is £180 good value for Wii Sports?
-tags: gaming, nintendo
+tags: gaming, media, consumer electronics
 ---
 
 I am definitely a [Nintendo](http://www.nintendo.com/) fan boy. I've had every Nintendo console released on the market plus so many Game & Watches it's not funny. Call me sentimental but Nintendo has been a part of and is one of the definers of my life.

diff --git a/site/src/content/posts/2007-08-25-jquery-saves-the-day.md b/site/src/content/posts/2007-08-25-jquery-saves-the-day.md
@@ -5,10 +5,7 @@ date: 2007-08-25 11:28:00+00:00
 layout: post.hbt
 slug: jquery-saves-the-day
 title: JQuery saves the day?
-categories:
-- development
-- web
-tags: css, javascript, jquery, web
+tags: css, javascript, web
 ---
 
 If you haven't come across it yet there is a javascript library called [JQuery](http://jquery.com/) which is being developed as an open source project, designed to give us better control over our web pages and the things we can do with them.

diff --git a/site/src/content/posts/2007-10-14-jquery-slideshow.md b/site/src/content/posts/2007-10-14-jquery-slideshow.md
@@ -5,7 +5,7 @@ date: 2007-10-14 07:26:00+00:00
 layout: post.hbt
 slug: jquery-slideshow
 title: JQuery Slideshow
-tags: css, javascript, jquery, development, web
+tags: css, javascript, development, web
 ---
 
 It seems JQuery is definitely gaining some traction as a useful library - not least because of the development of the [ThickBox Gallery library ](http://jquery.com/demo/thickbox/)by [Cody Lindley](http://www.codylindley.com/) which is seeing huge amounts of use around the web at the moment as a means for displaying galleries for product or photos without being constrained by the page template you are building for and by maintaining the semantic integrity of the HTML you have put into the page. The last cool feature is that you don't have to use the dreaded pop up which brings into play the whole pop-up-blocker issues.

diff --git a/site/src/content/posts/2007-10-15-let-the-new-gaming-witch-hunt-begin.md b/site/src/content/posts/2007-10-15-let-the-new-gaming-witch-hunt-begin.md
@@ -7,7 +7,7 @@ title: Let the new gaming witch hunt begin
 tags: censorship, gaming, government, media, rant
 ---
 
-I'm in my thirties now and I've been playing computer games from the age of about four when my dad first brought home the venerable Vic 20 - partly because he was doing a computer science degree at University but mostly because he wanted to tinker.
+I'm in my thirties now and I've been playing computer games from the age of about four when my dad first brought home the venerable VIC 20 - partly because he was doing a computer science degree at University but mostly because he wanted to tinker.
 
 Through my life I've borne witness to the rise of computer gaming as a media format to rival and now surpass film and I've seen countless witch hunts focus on computer games as being the root of many of society's teenage evils - everything from being the cause of the obesity epidemic to turning children into cold blooded murderers and violent criminals.
 

diff --git a/site/src/content/posts/2007-11-02-css-structure-what-a-mess.md b/site/src/content/posts/2007-11-02-css-structure-what-a-mess.md
@@ -4,7 +4,7 @@ date: 2007-11-02 17:29:00+00:00
 layout: post.hbt
 slug: css-structure-what-a-mess
 title: CSS Structure - what a mess
-tags: css, W3C, web, standards, rant, development
+tags: css, web, standards, rant, development
 ---
 
 James posted a message on my blog some weeks ago and it's only now that a penny has dropped in my mind about what we need to deal with the issue of structure in CSS - the problem is we have none. As James points out you end up with a flat mess that with all the best will in the world definitions are hard to find.

diff --git a/site/src/content/posts/2007-11-02-fah-goes-number-1-but-we-could-do-better.md b/site/src/content/posts/2007-11-02-fah-goes-number-1-but-we-could-do-better.md
@@ -5,8 +5,6 @@ date: 2007-11-02 11:44:00+00:00
 layout: post.hbt
 slug: fah-goes-number-1-but-we-could-do-better
 title: FAH goes number 1 but we could do better
-categories:
-- general
 tags: distributed computing, gaming, supercomputers
 ---
 

diff --git a/site/src/content/posts/2007-11-05-bye-bye-openmoko.md b/site/src/content/posts/2007-11-05-bye-bye-openmoko.md
@@ -6,9 +6,7 @@ layout: post.hbt
 slug: bye-bye-openmoko
 title: Bye bye OpenMoko
 large-title: true
-categories:
-- mobile
-tags: google, mobile, nokia, phone, web
+tags: google, mobile, nokia, web, android, os, strategy
 ---
 
 Google announced today that they would be partnering up with a load of other companies including Samsung, Motorola and LG to produce a new phone "software stack". For those of us in the technology game this basically means Google plans to release mobile phone operating system to rival that of Microsoft, Symbian and the various Linux flavours out there already.

diff --git a/site/src/content/posts/2007-11-08-why-cant-i-have-100-laptop.md b/site/src/content/posts/2007-11-08-why-cant-i-have-100-laptop.md
@@ -4,7 +4,7 @@ date: 2007-11-08 10:51:00+00:00
 layout: post.hbt
 slug: why-cant-i-have-100-laptop
 title: Why can't I have $100 laptop
-tags: government, OLPC
+tags: government, hardware
 ---
 
 Don't you hate it when you can't get something you'd really like?

diff --git a/site/src/content/posts/2007-11-19-fuzzy-logic-could-book-more-flights.md b/site/src/content/posts/2007-11-19-fuzzy-logic-could-book-more-flights.md
@@ -4,7 +4,7 @@ date: 2007-11-19 10:43:00+00:00
 layout: post.hbt
 slug: fuzzy-logic-could-book-more-flights
 title: Fuzzy logic could book more flights
-tags: agents, fuzzy logic, web
+tags: agents, algorithms, web
 featureimage: ../../img/posts/planes.jpg
 imageby: Martyn
 imagelink: https://www.flickr.com/photos/martynr/129190027

diff --git a/...posts/2007-11-21-why-was-data-being-passed-on-a-disc-and-what-was-eds-advice.md b/...posts/2007-11-21-why-was-data-being-passed-on-a-disc-and-what-was-eds-advice.md
@@ -4,7 +4,7 @@ date: 2007-11-21 09:14:00+00:00
 layout: post.hbt
 slug: why-was-data-being-passed-on-a-disc-and-what-was-eds-advice
 title: Why was data being passed on a disc and what was EDS' advice?
-tags: rant, data, privacy, government
+tags: rant, privacy, government, security
 ---
 
 Readers in the UK will be aware of a Data Protection Act train crash that we have been watching unfold in front of us over the last few days. It turns out that 25 million records of a database managed by [HMRC](http://www.hmrc.gov.uk/) have been lost in the post because they were sent on a couple of disks using unrecorded mail.

diff --git a/site/src/content/posts/2007-11-26-adding-cron-jobs-to-a-qnap-server.md b/site/src/content/posts/2007-11-26-adding-cron-jobs-to-a-qnap-server.md
@@ -4,7 +4,7 @@ date: 2007-11-26 13:53:00+00:00
 layout: post.hbt
 slug: adding-cron-jobs-to-a-qnap-server
 title: Adding Cron Jobs to a QNAP server
-tags: development, linux, scripting, sysadmin
+tags: development, linux, devops
 ---
 
 If you haven't come across them yet[ QNAP](http://www.qnap.co.uk/) make these amazing little NAS boxes that are perfect for home or SME use. I've got mine running as a home server but might get one for the office as our old server is on it's last legs and a fully tricked out 1U dell server is a bit of overkill for a glorified file server.

diff --git a/site/src/content/posts/2007-11-30-pci-dss-will-wreak-havoc-on-smes.md b/site/src/content/posts/2007-11-30-pci-dss-will-wreak-havoc-on-smes.md
@@ -4,7 +4,7 @@ date: 2007-11-30 13:15:00+00:00
 layout: post.hbt
 slug: pci-dss-will-wreak-havoc-on-smes
 title: PCI DSS will wreak havoc on SMEs
-tags: rant, banking, PCI DSS, security
+tags: rant, security, business
 ---
 
 One of my clients was asking me about [PCI DSS](http://www.pcisecuritystandards.org/) certification today. Coincidentally I also received our letter about compulsory compliance to the PCI DSS standard.

diff --git a/site/src/content/posts/2007-12-19-sms-bamboozlement.md b/site/src/content/posts/2007-12-19-sms-bamboozlement.md
@@ -4,7 +4,7 @@ date: 2007-12-19 10:33:00+00:00
 layout: post.hbt
 slug: sms-bamboozlement
 title: SMS Bamboozlement...
-tags: rant, mobile, sms, web
+tags: rant, mobile, web
 ---
 
 I'm doing some work for a client at the moment who's industry is particularly technophobic. The absolute cutting edge is a bit of YouTube video thrown willy nilly into a page. I'd also point out that design is something that rarely makes an appearance in this particular industry.

diff --git a/site/src/content/posts/2007-12-20-my-top-5-jquery-seasonal-wishes.md b/site/src/content/posts/2007-12-20-my-top-5-jquery-seasonal-wishes.md
@@ -7,7 +7,7 @@ slug: my-top-5-jquery-seasonal-wishes
 title: My top 5 jQuery seasonal wishes
 categories:
 - development
-tags: javascript, jquery, web
+tags: javascript, web
 ---
 
 I've waxed lyrical about jQuery before, I've been using it a lot to do worker code which I just can't be bothered to hand write any more. Not least because jQuery handles all the little browser inconsistencies for me so the code I actually call into a page is infinitely more maintainable, especially if someone follows behind who maybe isn't so up to speed with JavaScript as I am.

diff --git a/site/src/content/posts/2007-12-21-potent-messages-of-impotent-industries.md b/site/src/content/posts/2007-12-21-potent-messages-of-impotent-industries.md
@@ -4,7 +4,7 @@ date: 2007-12-21 13:56:00+00:00
 layout: post.hbt
 slug: potent-messages-of-impotent-industries
 title: Potent messages of impotent industries
-tags: rant, censorship, distributed computing, DRM, media, movies, piracy
+tags: rant, censorship, distributed computing, drm, media, piracy
 ---
 
 I should probably know better than to open my mouth but the obvious has to be stated on this one. For anyone that is net Savvy enough to know what BitTorrent is, the news that TorrentSpy has just lost its court case against the MPAA isn't exactly surprising.

diff --git a/site/src/content/posts/2008-01-08-the-warm-glow-of-site-launch.md b/site/src/content/posts/2008-01-08-the-warm-glow-of-site-launch.md
@@ -4,7 +4,7 @@ date: 2008-01-08 22:08:00+00:00
 layout: post.hbt
 slug: the-warm-glow-of-site-launch
 title: The warm glow of site launch
-tags: media, launch, web
+tags: media, web
 ---
 
 I've been in this game a long time but there is still nothing sweeter than launching a site after spending a months building it with your team and the client. As a TD, site launch brings a mix of emotion - fatigue from the lack of sleep for the 10 days prior to launch, relief that the site is launching on time and on budget and the client seems happy with it all and finally worry about whether the thing will work as expected, what will everyone else think about it and by god I hope the server doesn't fall over on Day 1 under load...

diff --git a/site/src/content/posts/2008-01-31-the-state-of-oz-technology.md b/site/src/content/posts/2008-01-31-the-state-of-oz-technology.md
@@ -5,14 +5,10 @@ date: 2008-01-31 05:53:00+00:00
 layout: post.hbt
 slug: the-state-of-oz-technology
 title: The state of Oz technology
-categories:
-- linux
-- mobile
-- rant
-tags: linux, mobile, PCI DSS, sms, web
+tags: linux, mobile, security, web
 ---
 
-Well rarely does an entire country entice me to start ranting (and at this point I'll point out I am in fact Australian) but by crikey Australian technology hasn't really moved in the last 5 years.
+Rarely does an entire country entice me to start ranting (and at this point I'll point out I am in fact Australian) but by crikey Australian technology hasn't really moved in the last 5 years.
 
 Now I appreciate this is a sweeping statement and I'll point out that the technology I'm talking about primarily is media based - mobile / web / internet. I have also had the benefit of living in London for the better part of 10 years so I've been at the hub of what is going on.
 

diff --git a/...ntent/posts/2008-02-12-why-industries-can-still-be-revolutionised-on-the-web.md b/...ntent/posts/2008-02-12-why-industries-can-still-be-revolutionised-on-the-web.md
@@ -4,7 +4,7 @@ date: 2008-02-12 04:56:00+00:00
 layout: post.hbt
 slug: why-industries-can-still-be-revolutionised-on-the-web
 title: Why industries can still be revolutionised on the web
-tags: general, media, rant, W3C, web
+tags: media, rant, design, web, ux, business, strategy
 ---
 
 I'm a bit of a cynic really. Anyone that's trawled through the depths of this blog will know that I have a fairly acid tongue when it comes to technology. I am a walking example of the phrase "familiarity breeds contempt".

diff --git a/site/src/content/posts/2008-02-20-dvd-jon-strikes-again.md b/site/src/content/posts/2008-02-20-dvd-jon-strikes-again.md
@@ -5,7 +5,7 @@ layout: post.hbt
 slug: dvd-jon-strikes-again
 title: DVD Jon strikes again
 large-title: true
-tags: DRM, media, piracy, rant
+tags: drm, media, piracy, rant
 ---
 
 [DVD Jon or Jon Lech Johansen](http://en.wikipedia.org/wiki/Jon_Lech_Johansen) as he is more commonly known gets a lot of love here. This great Norwegian famously broke the DVD encryption put in place by the big firms with the release of some software primarily aimed at allowing DVDs to be played on computers and unlocking the regionality of DVDs and DVD players.

diff --git a/...ontent/posts/2008-03-15-security-101-the-user-should-be-able-to-authenticate.md b/...ontent/posts/2008-03-15-security-101-the-user-should-be-able-to-authenticate.md
@@ -5,9 +5,9 @@ layout: post.hbt
 slug: security-101-the-user-should-be-able-to-authenticate
 title: 'Security 101 : The user should be able to authenticate'
 small-title: true
-tags: banking, data, security, rant
+tags: security, rant, ux
 excerpt: >
-    Security needs to be appropriate for the value of the asset it protects.
+    Security needs to be appropriate to the value of the asset it protects.
 ---
 
 Are you listening Barclays?