Oluwasetemi

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandList,
} from '@/components/ui/command'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { useControlledState } from '@/hooks/use-controlled-state'
import { useIsomorphicLayoutEffect } from '@/hooks/use-isomorphic-layout-effect'

Oluwasetemi

name	explain-diff-html
description	Use when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.

Explain Diff

Please make me a rich, interactive explanation of the specified code change.

It should have these sections:

Oluwasetemi

Prerequisites

• Use Node.js v24. Trusted Publishing does not work on earlier versions of Node.js.

Steps

1. Go to "Account > Access Tokens" and click "Generate Access Token".
2. Give the new token "read and write" persmissions to "All packages".
3. If you have 2FA enabled on npm (which you should), check the "Bypass 2FA" checkbox neatly hidden in the UI. Otherwise, npm will fail with an error demanding an OTP during automatic publishing.
4. Create the token.

Oluwasetemi

// Run this command to generate base config and vs code settings:
// pnpm dlx @antfu/eslint-config@latest

import antfu from "@antfu/eslint-config";

export default antfu({
  type: "app",
  typescript: true,
  formatters: true,
  stylistic: {

Oluwasetemi

/* eslint-disable node/no-process-env */
import type { ZodObject, ZodRawShape } from "zod";

import { ZodError } from "zod";

export default function tryParseEnv<T extends ZodRawShape>(
  EnvSchema: ZodObject<T>,
  buildEnv: Record<string, string | undefined> = process.env,
) {
  try {

Oluwasetemi

const path = require('path');

const SOURCE = 'src';
const SOURCE_PATH = path.resolve(SOURCE)  + '/';

const removeSourceDirName = path =>
    path.replace(new RegExp(`^${SOURCE}\/?`, 'gi'), '');

Oluwasetemi

import * as React from "react";

type ThemeConfig = "system" | "light" | "dark";
type ThemeName = "light" | "dark";
// Custom themes are keyed by a unique id.
type KeyedThemes = {
  [k: string]: {
    config: ThemeConfig;
    themeName: ThemeName;
  };

Oluwasetemi

import * as React from "react";

type Theme = "system" | "light" | "dark";

const STORAGE_KEY = "theme";
const VALID_THEMES: Theme[] = ["system", "light", "dark"];
const DARK_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";

function getAppTheme(): Theme {
  if (typeof window !== "undefined") {

Oluwasetemi

{
  "name": "workshop-computer-validator",
  "version": "1.0.0",
  "description": "I use this to validate people's computers have the proper versions of node and npm installed for a workshop",
  "bin": "./validate-system.js",
  "dependencies": {
    "semver": "7.1.3"
  }
}

Oluwasetemi

import React, { Suspense, useState } from "react";
import { unstable_createResource as createResource } from "react-cache";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption
} from "./Combobox2.js";

function App({ tabIndex, navigate }) {