https://github.com/lukethacoder/dvlp-haus
🍱 Essential developer tools to make your life easier. Productive. Accessible. Open Source.
https://github.com/lukethacoder/dvlp-haus
nextjs radix-ui shadcn-ui tailwindcss typescript
Last synced: 3 months ago
JSON representation
🍱 Essential developer tools to make your life easier. Productive. Accessible. Open Source.
- Host: GitHub
- URL: https://github.com/lukethacoder/dvlp-haus
- Owner: lukethacoder
- Created: 2019-01-25T14:37:50.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-18T01:28:44.000Z (10 months ago)
- Last Synced: 2025-02-28T19:32:26.200Z (4 months ago)
- Topics: nextjs, radix-ui, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://dvlp.haus
- Size: 1.83 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Essential developer tools to make your life easier.
Productive. Accessible. Open Source.
## 🍱 Tools
### Converters
- [Font Size Converter](https://dvlp.haus/tools/font-size-converter)
- [SVG to base64](https://dvlp.haus/tools/svg-to-base64)
### Math
- [Aspect Ratio Calculator](https://dvlp.haus/tools/font-size-converter)
## 🔥 Local Development
**Install the node_modules.**
```shell
pnpm install
```
**Edit the Environment variables.**
```env
NEXT_PUBLIC_CLARITY_CODE=abcdefghij
NEXT_PUBLIC_GOAT_COUNTER=stats.your.domain
GOAT_COUNTER_AUTH_TOKEN=12345678901234567890123456789012abcdefghijklmopq
```
**Start the site in `dev` mode.**
```sh
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`
```ts
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.
```tsx
import { Suspense } from 'react'
import { Client } from './client'
export default function ServerComponent() {
return (
)
}
```
### 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