Test 3

I’m testing now

Another test

This post is an example of how to add a custom open graph social image, also known as an OG image, to a blog post. By adding the optional ogImage property to the frontmatter of a post, you opt out of satori automatically generating an image for this page.

If you open this markdown file src/content/post/social-image.md you’ll see the ogImage property set to an image which lives in the public folder¹. sadf

// Using 'typeof' to infer types
const person = { name: "Alice", age: 30 };
type PersonType = typeof person; // { name: string; age: number }

// 'satisfies' to ensure a type matches but allows more specific types
type Animal = { name: string };
const dog = { name: "Buddy", breed: "Golden Retriever" } satisfies Animal;

// Generics with 'extends' and default values
function identity<T extends number | string = string>(arg: T): T {
  return arg;
}

let str = identity(); // Default type is string
let num = identity(42); // T inferred as number

// 'extends' with interface and class
interface HasLength {
  length: number;
}

function logLength<T extends HasLength = string>(arg: T): void {
  console.log(arg.length);
}

logLength("Hello"); // OK: string has length (default is string)
logLength([1, 2, 3]); // OK: array has length
// logLength(123);      // Error: number doesn't have length

// 'typeof' with functions
function add(x: number, y: number): number {
  return x + y;
}

type AddFunctionType = typeof add; // (x: number, y: number) => number

// Generic interfaces with 'extends' and default types
interface Box<T extends object = { message: string }> {
  content: T;
}

let defaultBox: Box = { content: { message: "Hello" } }; // Uses default type
let customBox: Box<{ status: number }> = { content: { status: 200 } };

// Complex example with 'satisfies' and default generics
type Task = {
  title: string;
  description?: string;
  completed: boolean;
};

const myTask = {
  title: "Learn TypeScript",
  completed: false,
  priority: "High",
} satisfies Task; // Allows priority but ensures Task structure

// Generic function with default type
function wrapInArray<T = string>(value: T): T[] {
  return [value];
}

const stringArray = wrapInArray(); // Default to string
const numberArray = wrapInArray(42); // T inferred as number

/**
 * Combines two generic types into a tuple.
 *
 * @template T - The first type.
 * @template U - The second type.
 * @param {T} first - The first value.
 * @param {U} second - The second value.
 * @returns {[T, U]} A tuple containing both values.
 */
function combine<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

this is a test

const test = "hello guys";

const MyRender = () => {
  return (
    <div>
      {/*
      <div>this is atest</div>
      */}
    </div>
  );
};

You can view the one set for this template page here.

Footnotes

1. The image itself can be located anywhere you like. ⤴