open-index/open-npm huggingface dataset:
npm package: @ogxjs/core
Description: High-performance Open Graph image generator with Tailwind CSS support - v0.3.0 Universal Fonts
Author: Carlos Eduardo
Latest version: 0.3.0

# @ogxjs/core

> Tailwind-first OG image generator powered by Satori

Generate beautiful Open Graph images using Tailwind CSS classes and an ergonomic builder API. Built for Node.js, also compatible with Bun and Deno.

## Installation

```bash
npm install @ogxjs/core
# or
bun add @ogxjs/core
```

## Quick Start

```typescript
import { ogx } from "@ogxjs/core";
import { writeFile } from "node:fs/promises";

// Generate a PNG using a preset
const image = await ogx({
  preset: "minimal",
  title: "Hello, World!",
  subtitle: "This is my OG image",
});

// Save to file
await writeFile("og.png", image);
```

## Builder API

Create custom layouts with an ergonomic builder:

```typescript
import { stack, div, span, render } from "@ogxjs/core";

const element = stack("w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 p-20", [
  div("bg-white rounded-2xl p-12 shadow-2xl", [
    span("text-6xl font-bold text-gray-900", "Custom Layout"),
    span("text-2xl text-gray-600 mt-4", "Built with Tailwind classes"),
  ]),
]);

const image = await render(element);
```

## Presets

Built-in presets for common use cases:

- `minimal` - Clean and simple
- `blog` - Blog post headers
- `docs` - Documentation pages
- `social` - Social media cards

```typescript
await ogx({
  preset: "blog",
  title: "Building with OGX",
  description: "Learn how to create dynamic OG images",
  author: "John Doe",
  date: "Dec 28, 2024",
});
```

## Custom Fonts

```typescript
import { loadInterFont, fontRegistry } from "@ogxjs/core";

// Load and register fonts
const inter = await loadInterFont(400);
fontRegistry.register(inter);

// Use in your images
await ogx({
  preset: "minimal",
  title: "Custom Font",
  fonts: fontRegistry.getFonts(),
});
```

## Browser-safe SVG Rendering

```typescript
import { renderToSVG } from "@ogxjs/core/svg";

// Render to SVG (no Node.js dependencies)
const svg = await renderToSVG(element);
```

## Exports

- `@ogxjs/core` - Main package (PNG rendering, presets, builder)
- `@ogxjs/core/svg` - Browser-safe SVG rendering
- `@ogxjs/core/png` - Node.js PNG rendering

## License

MIT
npm package: @ogxjs/next
Description: Next.js adapter for OGX - High-performance OG image generation
Author: Carlos Eduardo
Latest version: 0.1.1

# @ogxjs/next

> Next.js integration for OGX - Generate OG images in App Router

Utilities for generating Open Graph images in Next.js App Router.

## Installation

```bash
npm install @ogxjs/next @ogxjs/core
```

## Next.js Configuration

Add this to your `next.config.mjs`:

```javascript
/** @type {import('next').NextConfig} */
const config = {
  serverExternalPackages: ["@resvg/resvg-js", "@ogxjs/core"],
};

export default config;
```

> **Important:** The `serverExternalPackages` setting prevents Next.js from bundling native dependencies, which is required for `@resvg/resvg-js`.

## Usage

Create a route handler that returns an OG image:

```typescript
// app/api/og/route.tsx
import { ogxResponse } from "@ogxjs/next";

export async function GET() {
  return ogxResponse({
    preset: "minimal",
    title: "Hello from Next.js!",
    subtitle: "Dynamic OG images",
  });
}
```

The `ogxResponse` helper automatically:
- Sets correct `Content-Type: image/png`
- Returns a Next.js `Response` object
- Handles errors gracefully

## Dynamic OG Images

Use route parameters for dynamic content:

```typescript
// app/api/og/[slug]/route.tsx
import { ogxResponse } from "@ogxjs/next";

export async function GET(
  request: Request,
  { params }: { params: { slug: string } }
) {
  return ogxResponse({
    preset: "blog",
    title: params.slug.replace(/-/g, " "),
    description: "Read more about this topic",
  });
}
```

## Custom Builder

Use the builder API for custom layouts:

```typescript
import { ogxResponse } from "@ogxjs/next";
import { stack, div, span } from "@ogxjs/core";

export async function GET() {
  const element = stack("w-full h-full bg-blue-500 p-20", [
    div("text-white text-6xl font-bold", "Custom Layout"),
  ]);

  return ogxResponse({ element });
}
```

## Metadata

Link your OG image in page metadata:

```typescript
// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/api/og'],
  },
};
```

## Performance Tips

### Static Generation

For better performance, disable revalidation and use static params:

```typescript
// app/api/og/[slug]/route.tsx
export const revalidate = false; // Disable ISR

export function generateStaticParams() {
  return [
    { slug: 'hello' },
    { slug: 'world' },
  ];
}
```

### Caching

OGX includes built-in caching. Images with the same config will be cached:

```typescript
return ogxResponse({
  preset: "blog",
  title: "My Post",
  cache: true, // Enable caching (default)
});
```

## License

MIT
npm package: @ogxjs/react
Description: React adapter for OGX - Build OG images with JSX and Tailwind
Author: Carlos Eduardo
Latest version: 0.1.2

# @ogxjs/react

> React components for OGX - Build OG images with JSX

Create Open Graph images using familiar React components and JSX syntax.

## Installation

```bash
npm install @ogxjs/react @ogxjs/core
```

## Quick Start

```tsx
import { Stack, H1, P } from "@ogxjs/react";
import { render } from "@ogxjs/react/png";

const MyImage = () => (
  <Stack tw="w-full h-full bg-gradient-to-br from-purple-500 to-blue-600 p-20">
    <H1 tw="text-white">Hello, React!</H1>
    <P tw="text-white/80">Build OG images with JSX</P>
  </Stack>
);

const image = await render(<MyImage />);
```

## Components

Pre-built components with Tailwind support:

- `<Stack>` - Flex column layout
- `<Row>` - Flex row layout
- `<Box>` - Generic container
- `<H1>`, `<H2>` - Headings
- `<P>` - Paragraph
- `<Span>` - Inline text
- `<Card>` - Card with shadow
- `<Badge>` - Colored badge
- `<Absolute>` - Absolute positioned
- `<Grid>` - Grid layout
- `<Spacer>` - Flexible spacer

## Styling

Use the `tw` prop for Tailwind classes:

```tsx
import { Stack, H1, Badge } from "@ogxjs/react";

<Stack tw="w-full h-full bg-slate-900 p-20 items-center justify-center">
  <H1 tw="text-white mb-4">My Title</H1>
  <Badge color="blue">New</Badge>
</Stack>
```

## Browser-safe SVG

Render to SVG without Node.js dependencies:

```tsx
import { renderToSVG } from "@ogxjs/react/svg";

const svg = await renderToSVG(<MyImage />);
// Use in browser, no Node.js required
```

## PNG Rendering

Render to PNG (Node.js only):

```tsx
import { render } from "@ogxjs/react/png";
import { writeFile } from "node:fs/promises";

const image = await render(<MyImage />);
await writeFile("og.png", image);
```

## Exports

- `@ogxjs/react` - Components and utilities
- `@ogxjs/react/svg` - Browser-safe SVG rendering
- `@ogxjs/react/png` - Node.js PNG rendering
- `@ogxjs/react/jsx` - JSX type definitions

## License

MIT
npm package: @ogzhnaydn/extension-hashtag
Description: hashtag extension for tiptap
Author: Oğuzhan Aydın
Latest version: 1.0.0

# @ogzhnaydn/extension-hashtag
[![Version](https://img.shields.io/github/package-json/v/ogzhnaydn38/tiptap-extension-hashtag)](https://www.npmjs.com/package/@ogzhnaydn/extension-hashtag)
[![Downloads](https://img.shields.io/npm/dw/@ogzhnaydn/extension-hashtag)](https://npmcharts.com/compare/@ogzhnaydn/extension-hashtag?minimal=true)
[![License](https://img.shields.io/github/license/ogzhnaydn38/tiptap-extension-hashtag)](https://www.npmjs.com/package/@ogzhnaydn/extension-hashtag)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)

## Introduction
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.

## Official Documentation
Documentation can be found on the [tiptap website](https://tiptap.dev).

## License
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
npm package: @ogzhnaydn/react-native-grid-layout
Description: This is a component for IOS and Android css grid layout. Can be installed in both Expo managed, bare and react-native cli
Author: Oğuzhan Aydın
Latest version: 1.0.3

# React Native Grid Layout

<img src="https://i.ibb.co/nb9c5Ry/Whats-App-Image-2022-09-01-at-04-52-17.jpg" width="400" height="790">

This is a component for IOS and Android css grid layout. Can be installed in both Expo managed, bare and react-native cli


## Installation

```
yarn add @ogzhnaydn/react-native-grid-layout
```

```
npm install @ogzhnaydn/react-native-grid-layout
```

## Usage

### Props

| Props        | Required     | Description  |
| ------------- |:-------------:| -----:|
| bodyStyle     | false      | style the image container |
| numCols     | true      | the grid col count |
| numRows     | true      | the grid row count |


### Child Props

| Props        | Required     | Description  |
| ------------- |:-------------:| -----:|
| colStart     | true      | the component start column number |
| colEnd     | true      | the component end column number |
| rowStart     | true      | the component start row number |
| rowEnd     | true      | the component end row number |

### Show me the code - here it is below:

```js
import { StyleSheet, Text, View } from 'react-native';
import GridLayout from "@ogzhnaydn/react-native-grid-layout";

export default function App() {
  return (
    <View style={{flex:1}}>
        <GridLayout numCols={3} numRows={3}  bodyStyle={{ backgroundColor: "#1e232a",flex:1}}>
            <View colStart={1} colEnd={2} rowStart={1} rowEnd={1} style={{backgroundColor: "red",flex:1}}></View>
            <View colStart={3} colEnd={3} rowStart={1} rowEnd={1} style={{backgroundColor: "blue",flex:1}}></View>
            <View colStart={1} colEnd={2} rowStart={2} rowEnd={3} style={{backgroundColor: "black",flex:1}}></View>
            <View colStart={3} colEnd={3} rowStart={2} rowEnd={3} style={{backgroundColor: "white",flex:1}}></View>
        </GridLayout>
    </View>
  );
}

```

### Contributions are welcomed, we are ready to review and merge them ASAP

### Do leave a GitHub Star