Hello World - Hello Blog

This is the first post of my new blog.

The aim is to write up what I'm learning while I build. I'm hoping that this will help me to learn more deeply and to share what I'm learning with others.

This Blog

This website / blog is made using a few technologies that I like - some I've used before and some are new to me.

The big ones

• Next.js - A React framework for building static and server-rendered applications
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
• MDX - A fileformat that allows you to write JSX in your markdown content - ideal for creating interactive blog posts
• Contentlayer - A content SDK that validates and transforms content into type-safe JSON data
• Vercel - A platform for hosting static websites and serverless functions
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript

Some additional libraries

• heroicons - A set of free MIT-licensed high-quality SVG icons for UI development
• clsx - A tiny (228B) utility for constructing className strings conditionally
• rough-notation - A library for creating and animating annotations on a web page
• rehype-autolink-headings - A rehype plugin to automatically add links to headings
• rehype-pretty-code - A rehype plugin to prettify code blocks

MDX Demonstration

Just a quick demo of MDX.

Aside

I've included an 'Aside' in my markdown file:

<Aside styled>
  This is an aside - hopefully it will allow me to draw attention to points that
  I don't want to include in the body text.
</Aside>

Link Previews

This is a little JSX component that calls an API I created to fetch a website and return the open-graph data to allow me to render links to other webpages I have created nicely.

For example, I wrote this Jypyter notebook on Kaggle to explain how to use Binary splits to create a baseline model for the (yes, well used) Titanic dataset:

<LinkPreview url="https://www.kaggle.com/code/greensamiam/titanic-dataset-a-single-binary-split" />

With the resulting output being as follows:

Code blocks

I can create codeblocks and highlight imporant parts for you.

For example, below is a codeblock that shows some code for the LinkPreview component:

• Lines 2-3 - calls an API to fetch the data for the link preview
• Lines 14-16 - ensures that the component is only rendered when the data has been fetched
• Line 18 - renders the preview card

async function getPreivewData(url: string) {
  const res = await fetch(API + `?url=${url}`);
  const data = await res.json();
  return data;
}
 
export const LinkPreview = ({ url }: { url: string }) => {
  const [data, setData] = useState<PreviewData | null>(null);
 
  useEffect(() => {
    getPreivewData(url).then((data) => setData(data));
  }, [url]);
 
  if (!data) {
    return null;
  }
 
  return <PreviewCard data={data}>;
};

Conclusion

This is just a quick post to kick-start the year, but I hope it allows you to explore the technologies I've used to build this blog should you want to create a similar one.

You can follow my progress here if you like: