Essential developer tools to make your life easier.
Productive. Accessible. Open Source.

🍱 Tools

Converters

• Font Size Converter
• SVG to base64

Math

• Aspect Ratio Calculator

🔥 Local Development

Install the node_modules.

pnpm install

Edit the Environment variables.

NEXT_PUBLIC_CLARITY_CODE=abcdefghij
NEXT_PUBLIC_GOAT_COUNTER=stats.your.domain
GOAT_COUNTER_AUTH_TOKEN=12345678901234567890123456789012abcdefghijklmopq

Start the site in dev mode.

pnpm dev

Open the code in your IDE of choice and start editing!

Your site is now running at http://localhost:3000.

⚙️ Tools

Configuring a new tool requires a few steps:

Create a new folder with the following files in ./tools/{my-new-tool}/

.
└── tools/
    ├── index.ts
    └── my-new-tool/
        ├── content.mdx // description and/or documentation
        ├── index.tsx // tool config
        └── server.tsx // main entry point for your component

content.mdx

This is an optional file to describe the tool and provide any extra documentation

index.tsx

import { ITool } from '@/lib/tools'

const CONFIG: ITool = {
  slug: 'my-new-tool',
  name: 'My New Tool',
  description:
    'Short description about the tool. Used for Card displays and SEO.',
  category: 'math', // check the ./lib/tools/index.ts file for allowed categories, and/or allow TS to tell you
  goatPathId: 1234, // optional goatcounter path id (will not be known for new tools yet to have had page hits)
}

export default CONFIG

server.tsx

This is the main entry point for your component. If you do not require 'use client', you may build your component directly here. If you do require 'use client', create a client.tsx file and import it here using the following boilerplate in your server.tsx file.

import { Suspense } from 'react'

import { Client } from './client'

export default function ServerComponent() {
  return (
    <span>
      <Suspense>
        <Client />
      </Suspense>
    </span>
  )
}

Update ./tools/index.ts

Add your new component to the following config constants:

• TOOL_NAMES - add the slug value of your tool (e.g. my-new-tool)
• TOOLS - add the new slug and the config (ITool)
• TOOL_COMPONENTS - add a component key and an optional content key that both resolve React components