Code Updates!

A few days in and I've already made a bunch of updates.

From code blocks, to better linting, to automatic tweets, I've made a lot of small changes to the site.

Code! I have two different ways I can share code now, inline and as a larger multi-line block. I figured I'd just use them as examples to show you how they work.

The inline code is just a simple <code> tag with some styles added to it. Very easy to set up inside Sanity's blockContent editor, as it's a default option that just needs to be turned on.

The code block was a bit more work, but not difficult.

First, I installed a new plugin from sanity, code-input:

npm install @sanity/code-input

Then I set up a component to take in the new block type and use Refractor to handle the styling. I even added a "copy" button that should allow you to copy the contents of the code block all at once.

codeBlock.tsx

'use client'

import { SanityCodeBlock } from '@/types/SanityTypes'
import Image from 'next/image'
import { MouseEventHandler } from 'react'
import { Refractor, registerLanguage } from 'react-refractor'
import javascript from 'refractor/lang/javascript'
import typescript from 'refractor/lang/typescript'
import sh from 'refractor/lang/shell-session'

registerLanguage(javascript)
registerLanguage(typescript)
registerLanguage(sh)

const copyToClipboard: MouseEventHandler = (e: React.MouseEvent<HTMLAnchorElement>) => {
  const content: HTMLElement = (e.target as HTMLElement)?.closest('div')?.querySelector('code') as HTMLElement
  navigator.clipboard.writeText(content.innerText)
}

export default function CodeBlock({ value }: { value: SanityCodeBlock }) {
  return (
    <>
      { value.filename && (<h3 className="font-semibold text-lg font-mono mt-8">{ value.filename }</h3>) }
      <div className="w-full block relative">
        <Refractor language={ value.language } value={ value.code } markers={ value.highlightedLines } />
        <button type="button" className="absolute right-4 top-4" onClick={ copyToClipboard }>
          <Image src="/images/icons/copy.svg" width="0" height="0" sizes="100vw" className="w-[24px] h-auto" alt="copy" />
        </button>
      </div>
    </>
  )
}

It seems to work pretty well so far. Let's see if I end up actually using it much at all.

As part of the caching set up for the website I learned about Sanity's webhooks that allow me to send out calls to various webhooks (including one for this site) whenever items are created or updated.

Diving into IFTTT, with a little fiddling I was able to use their webhook endpoint to take in my request with the post title, slug, and image url and turn that into a tweet (X post) automatically so I can keep that up to date while I'm posting here. The first one should go out with this post!

I made some changes to how the site is linted as well as adding Prettier to help keep me honest. I also better typed some things both on the Next.js side as well as on the Sanity.io side. For instance, I now need to find an image for this post because it's now a required field.

Up next I've started setting up the framework for an image gallery type, as well as beginning to think more about how I want inline images to show in these posts and what functionality I'll want them to have.

I'm sure I'll have a new post later this week as I try and button things up before the weekend where I'll want to be able to post freely from our vacation.

Till next time!