Package Exports

winksdotfun
winksdotfun/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (winksdotfun) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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