Metadata description improvements

Author: fildon

src/_data/site.js

@@ -1,7 +1,7 @@
 module.exports = {
 	url: "https://rupertmckay.com",
 	title: "Rupert Foggo McKay",
-	description: "Rupert's website.",
+	description: "Technical blog exploring TypeScript, React, JavaScript, and computer science fundamentals. In-depth articles on software development, testing, and mathematical concepts.",
 	author: {
 		name: "Rupert Foggo McKay",
 		email: "rupert@rupertmckay.com",

src/blog/2021-05-23-generics-arent-as-scary-as-you-think/index.md

@@ -1,9 +1,10 @@
 ---
 title: Generics aren't as scary as you think
-description: You already understand generics... you just don't know you do.
+description: Learn TypeScript generics through familiar examples like Arrays and Promises. Discover how you're already using generics without realizing it.
 date: 2021-05-23
 layout: layouts/post.njk
 ---
+
 I'll be demonstrating generics using TypeScript, but the core principles of generics are the same in any programming language.
 
 ## First things first
@@ -39,16 +40,16 @@ Now let's pretend `filter` didn't already exist, and we wanted to make our own f
 
 ```ts
 function numberFilter(
-  array: Array<number>,
-  callback: (num: number) => boolean
+	array: Array<number>,
+	callback: (num: number) => boolean,
 ) {
-  const result: Array<number> = [];
-  for (const num of array) {
-    if (callback(num)) {
-      result.push(num);
-    }
-  }
-  return result;
+	const result: Array<number> = [];
+	for (const num of array) {
+		if (callback(num)) {
+			result.push(num);
+		}
+	}
+	return result;
 }
 
 const numbers = [1, 31, 12, 40];
@@ -64,16 +65,16 @@ To really prove this point, lets show what a custom string filter function might
 
 ```ts
 function stringFilter(
-  array: Array<string>,
-  callback: (num: string) => boolean
+	array: Array<string>,
+	callback: (num: string) => boolean,
 ) {
-  const result: Array<string> = [];
-  for (const str of array) {
-    if (callback(str)) {
-      result.push(str);
-    }
-  }
-  return result;
+	const result: Array<string> = [];
+	for (const str of array) {
+		if (callback(str)) {
+			result.push(str);
+		}
+	}
+	return result;
 }
 
 const strings = ["cat", "horse", "dog", "dinosaur"];
@@ -87,16 +88,16 @@ What if we could abstract the implementation from the specific type of element t
 
 ```ts
 function genericFilter<Element>(
-  array: Array<Element>,
-  callback: (element: Element) => boolean
+	array: Array<Element>,
+	callback: (element: Element) => boolean,
 ) {
-  const result: Array<T> = [];
-  for (const element of array) {
-    if (callback(element)) {
-      result.push(element);
-    }
-  }
-  return result;
+	const result: Array<T> = [];
+	for (const element of array) {
+		if (callback(element)) {
+			result.push(element);
+		}
+	}
+	return result;
 }
 
 // Works with numbers!

src/blog/2021-06-09-how-to-create-custom-hooks/index.md

@@ -1,9 +1,10 @@
 ---
 title: How to Create Custom Hooks
-description: DRY component logic and separation of rendering from state management.
+description: Master React custom hooks to encapsulate reusable functionality, keep components clean, and separate rendering from state management.
 date: 2021-06-09
 layout: layouts/post.njk
 ---
+
 React hooks are a powerful tool for managing state in your React components. In this post I'll be demonstrating how we can compose existing React hooks to make custom hooks that encapsulate reusable functionality.
 
 React's built-in hooks provide a great deal of power and flexibility, between `useState`, `useEffect` and `useCallback` we can cover very many use cases. But often times we'll find ourselves repeating a pattern of hooks over and over again, or maybe we'd simply prefer to pull out a custom hook to keep our component definitions short and expressive.
@@ -28,7 +29,7 @@ Here we have a `WelcomePage` component which makes a call to some utility method
 
 ```ts
 const useOnMount = (callback: () => void) => {
-  React.useEffect(callback, []);
+	React.useEffect(callback, []);
 };
 ```
 
@@ -50,10 +51,10 @@ For simple pieces of boolean state we typically only want a way to read the curr
 
 ```ts
 const useToggle = (initialValue: boolean) => {
-  const [value, setValue] = React.useState(initialValue);
-  const toggle = () => setValue(!value);
+	const [value, setValue] = React.useState(initialValue);
+	const toggle = () => setValue(!value);
 
-  return { value, toggle };
+	return { value, toggle };
 };
 ```
 
@@ -75,11 +76,11 @@ This next example is a little more complex. Perhaps you have a list of images in
 
 ```ts
 const useCircularIndex = (length: number) => {
-  const [index, setIndex] = React.useState(0);
-  const next = () => setIndex(index === length - 1 ? 0 : index + 1);
-  const prev = () => setIndex(index === 0 ? length - 1 : index - 1);
+	const [index, setIndex] = React.useState(0);
+	const next = () => setIndex(index === length - 1 ? 0 : index + 1);
+	const prev = () => setIndex(index === 0 ? length - 1 : index - 1);
 
-  return { index, next, prev };
+	return { index, next, prev };
 };
 ```
 
@@ -189,19 +190,19 @@ type ReadyState = { state: "ready"; userDetails: UserDetails };
 type UserDetailsResponse = LoadingState | ErrorState | ReadyState;
 
 const useGetUserDetails = (userId: string) => {
-  const [response, setResponse] = React.useState<UserDetailsResponse>({
-    state: "loading",
-  });
-
-  React.useEffect(() => {
-    getUserDetails(userId)
-      .then((response) =>
-        setResponse({ state: "ready", userDetails: response })
-      )
-      .catch((error) => setResponse({ state: "error", error }));
-  }, [userId, getUserDetails]);
-
-  return { response };
+	const [response, setResponse] = React.useState<UserDetailsResponse>({
+		state: "loading",
+	});
+
+	React.useEffect(() => {
+		getUserDetails(userId)
+			.then((response) =>
+				setResponse({ state: "ready", userDetails: response }),
+			)
+			.catch((error) => setResponse({ state: "error", error }));
+	}, [userId, getUserDetails]);
+
+	return { response };
 };
 ```
 

src/blog/2021-07-03-mocking-in-jest-with-typescript-and-react/index.md

@@ -1,9 +1,10 @@
 ---
 title: Mocking in Jest with TypeScript and React
-description: It is functions all the way down.
+description: Practical guide to mocking in Jest with TypeScript. Learn type-safe mock functions and how to mock React components effectively.
 date: 2021-07-03
 layout: layouts/post.njk
 ---
+
 Key takeaways:
 
 - `jest.mock` covers many use cases
@@ -109,8 +110,8 @@ import { getUserDetails } from "./user-storage";
 
 // Declare that our mock implementation must return a valid "getUserDetails" implementation
 jest.mock("./user-storage", (): { getUserDetails: typeof getUserDetails } => ({
-  // TypeScript will now correctly tell us this doesn't match the expected type
-  getUserDetails: () => ({ naaaaaaaame: "rupert" }),
+	// TypeScript will now correctly tell us this doesn't match the expected type
+	getUserDetails: () => ({ naaaaaaaame: "rupert" }),
 }));
 ```
 
@@ -122,8 +123,8 @@ import * as UserStorage from "./user-storage";
 
 // And use the 'typeof' that namespace to enforce our mock matches
 jest.mock("./user-storage", (): typeof UserStorage => ({
-  // Correctly tells us this doesn't match the expected type
-  getUserDetails: () => ({ naaaaaaaame: "rupert" }),
+	// Correctly tells us this doesn't match the expected type
+	getUserDetails: () => ({ naaaaaaaame: "rupert" }),
 }));
 ```
 
@@ -239,15 +240,15 @@ One other thing we really need to watch out for here though is making sure we cl
 
 ```ts
 it("something is fishy here", () => {
-  expect(mockGetUserDetails).toHaveBeenCalledWith("1234");
+	expect(mockGetUserDetails).toHaveBeenCalledWith("1234");
 });
 ```
 
 That test will pass! But how? It doesn't do anything, yet somehow it is still true that the mock was called with that argument. Well, just like mock implementations persist through the whole test file, so too does the mock's "memory" of when it has been called. To prevent this confusing behavior, we should clear the "memory" of mocks between tests:
 
 ```ts
 beforeEach(() => {
-  jest.clearAllMocks();
+	jest.clearAllMocks();
 });
 ```
 
@@ -356,8 +357,8 @@ But when we inevitably do want to test a component rendered within a context, I
 
 ```ts
 expect(mockThirdPartyWidget).toHaveBeenCalledWith(
-  { userId: "1234" },
-  expect.any({}) // Ignore React contexts
+	{ userId: "1234" },
+	expect.any({}), // Ignore React contexts
 );
 ```
 
@@ -430,9 +431,9 @@ Rupert
 
 Library versions used when writing this post:
 
-| Dependency             | Version |
-| ---------------------- | ------- |
+| Dependency               | Version |
+| ------------------------ | ------- |
 | `jest`                   | 27.0.6  |
 | `react`                  | 17.0.2  |
 | `typescript`             | 4.3.5   |
-| `@testing-library/react` | 12.0.0  |
+| `@testing-library/react` | 12.0.0  |

src/blog/2021-10-09-eslint-vs-prettier/index.md

@@ -1,6 +1,6 @@
 ---
 title: ESLint vs Prettier
-description: Why I don't use the 'fix' option.
+description: Understanding the distinction between ESLint's semantic error detection and Prettier's syntactic formatting. Why automated tools can't fix everything.
 date: 2021-10-09
 layout: layouts/post.njk
 ---

src/blog/2022-01-03-what-is-a-number/index.md

@@ -1,9 +1,10 @@
 ---
 title: What is a number?
-description: Rounding errors are inevitable.
+description: Explore why JavaScript's 0.1 * 0.2 doesn't equal 0.02, understanding floating-point arithmetic and the fundamental limits of numeric representation.
 date: 2022-01-03
 layout: layouts/post.njk
 ---
+
 TL;DR:
 
 - No datatype will ever be able to represent all numeric values perfectly
@@ -129,16 +130,19 @@ We call the leading bits the "Mantissa" and the power of 2 the "Exponent".
 To demonstrate this, consider the following numbers:
 
 5 in binary is 101:
+
 - Mantissa: 1.01
 - Exponent: 10
 
 > Note that the exponent is _also_ in binary so "10" here is not "ten" but rather "two".
 
 9 in binary is 1001:
+
 - Mantissa: 1.001
 - Exponent: 11
 
 7/32 in binary is 0.00111:
+
 - Mantissa: 1.11
 - Exponent: -11
 
@@ -149,10 +153,12 @@ This format has the advantage of being very flexible in accomodating both very l
 First, we convert the numbers to their floating-point representations:
 
 0.1 in binary is 0.00011001100...:
+
 - Mantissa: 1.1001100...
 - Exponent: -100
 
-0.2 in binary is 0.0011001100...:
+  0.2 in binary is 0.0011001100...:
+
 - Mantissa: 1.1001100...
 - Exponent: -11
 
@@ -161,6 +167,7 @@ You might already see a problem, that our numeric representations have become an
 Then to complete our computation, we multiply the mantissas together and combine the exponents, which leaves us with:
 
 0.0000010100011110101...
+
 - Mantissa: 1.0100011110101...
 - Exponent: -110