Winks

A NextJS component that automatically populates meta tags based on your API key. Perfect for SEO optimization and social media sharing.

Features

• 🚀 Easy Integration: Simple wrapper component for NextJS apps
• 🔑 API Key Based: Secure metadata management with unique API keys
• 📱 Social Media Ready: Automatic Open Graph and Twitter Card tags
• 🎯 SEO Optimized: Complete meta tag management
• ⚡ Lightweight: Minimal bundle size impact

Installation

npm install winksdotfun

Quick Start

1. Wrap your NextJS app with Winks

// pages/_app.js or app/layout.js
import { Winks } from 'winksdotfun';

export default function App({ Component, pageProps }) {
  return (
    <Winks apikey="your-api-key-here">
      <Component {...pageProps} />
    </Winks>
  );
}

2. Create an API key and set metadata

First, start the Winks server:

cd server
npm install
npm run build
npm start

Then create an API key:

curl -X POST http://localhost:3001/api/keys \
  -H "Content-Type: application/json" \
  -d '{"name": "My Website"}'

Set your metadata:

curl -X POST http://localhost:3001/api/meta/YOUR_API_KEY \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{
    "title": "My Awesome Website",
    "description": "The best website ever created",
    "keywords": "awesome, website, nextjs",
    "ogTitle": "My Awesome Website",
    "ogDescription": "The best website ever created",
    "ogImage": "https://example.com/og-image.jpg",
    "ogUrl": "https://example.com",
    "twitterCard": "summary_large_image",
    "twitterTitle": "My Awesome Website",
    "twitterDescription": "The best website ever created",
    "twitterImage": "https://example.com/twitter-image.jpg",
    "canonical": "https://example.com",
    "robots": "index, follow",
    "viewport": "width=device-width, initial-scale=1",
    "charset": "utf-8",
    "author": "Your Name"
  }'

API Reference

Winks Component Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apikey | string | Yes | Your unique API key | | children | ReactNode | Yes | Your NextJS app components | | fallback | MetaData | No | Fallback metadata if API fails |

MetaData Interface

interface MetaData {
  title?: string;
  description?: string;
  keywords?: string;
  ogTitle?: string;
  ogDescription?: string;
  ogImage?: string;
  ogUrl?: string;
  twitterCard?: string;
  twitterTitle?: string;
  twitterDescription?: string;
  twitterImage?: string;
  canonical?: string;
  robots?: string;
  viewport?: string;
  charset?: string;
  author?: string;
}

Server API Endpoints

Create API Key

POST /api/keys
Content-Type: application/json

{
  "name": "My Website"
}

Set Metadata

POST /api/meta/{apiKey}
X-API-Key: {apiKey}
Content-Type: application/json

{
  "metadata": {
    "title": "My Website",
    "description": "Description here"
  }
}

Get Metadata

GET /api/meta/{apiKey}

Examples

Basic Usage

import { Winks } from 'winks';

export default function Layout({ children }) {
  return (
    <Winks apikey="winks_abc123_def456">
      {children}
    </Winks>
  );
}

With Fallback Data

import { Winks } from 'winks';

export default function Layout({ children }) {
  const fallbackData = {
    title: "Default Title",
    description: "Default description",
    ogTitle: "Default OG Title"
  };

  return (
    <Winks 
      apikey="winks_abc123_def456"
      fallback={fallbackData}
    >
      {children}
    </Winks>
  );
}

Development

Building the Package

npm run build

Running Tests

npm test

Publishing

npm publish

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request