Introducing doodles

I've decided to add a feature that will allow me to personalize my blog by adding different elements on the potato image on the home page. Kind of a personalized google doodle for the website.

For example, I want to put a birthday hat on my blog's picture of potato when it's my birthday (yes - I'm kind of funny). A Santa Claus hat to the picture around Christmas. Other days, I want posts with different stuff in there, too. One day it might be just an ordinary potato and another day, you might see a heart on it if we're talking about Valentines Day. It all depends on what mood my roast is in! This should make my writing even more interesting for you and we hope that you would find this fun! I really enjoy seeing all these possibilities from one small image of a potato.

While my website does not have a CMS where I can manage these images from, putting together a quick and easy solution was the only way to doing it. Adding a CMS has never been on my priority list, but these small little features make it more fun to run this website.

I'll quickly run you through the code, so in case you want to build something like this, you'll have a good point of reference.

First things first, each day of the year has a number. We call it the nth day of the year. 1st of Jan is day number 1. 2nd of feb will be day number 33. I hope you have a gist.

To load the right image for a particular day, we check for a png image with the nth day in a directory. This function gives us the current nth day. Note that this will run on the browser and follow browser time.

const daysIntoYear = (date) => {
  return (
    (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) -
      Date.UTC(date.getFullYear(), 0, 0)) /
    24 /
    60 /
    60 /
    1000
  )
}

To add a little more jazz to it, I have created an enum with a small alt text to show when you hover on the image.

It looks something like this.

const doodleData = {
  24: 'Happy birthday to me!',
}

export default doodleData

And just like that, we change the image to a component where we separate the doodle business logic and load the correct image. nth day image if it exists, and a standard potato image on all other days.

import { daysIntoYear } from '@/lib/utils/datetime'
import doodleData from '@/data/doodle'
import siteMetadata from '@/data/siteMetadata'

const Doodle = () => {
  const today = daysIntoYear(new Date())

  if (doodleData[today] !== undefined) {
    return (
      <img
        src={`/static/images/doodle/${today}.png`}
        alt="avatar"
        title={doodleData[today]}
        className="w-48 h-48 rounded-full"
      />
    )
  }

  return (
    <img
      src={siteMetadata.image}
      alt="avatar"
      title={'Sorry bud, no special image for today'}
      className="w-48 h-48 rounded-full"
    />
  )
}

export default Doodle