ContentStack Custom Fields Collection

A collection of custom field extensions for ContentStack that enhance content editing capabilities. This repository contains various custom field types designed to improve the content creation experience.

Technology Stack

• Framework: Nuxt 3
• UI Library: Nuxt UI
• ContentStack SDK: @contentstack/app-sdk
• Styling: Sass
• Validation: Zod
• Drag & Drop: SortableJS

Setup

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Building for Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

ContentStack Integration

These custom field extensions integrate with ContentStack's App SDK to provide:

• Field Configuration: Supports configuration files for each custom field type
• Data Validation: Uses Zod schemas to validate field data
• Auto-resizing: Automatically adjusts the iframe size based on content
• Real-time Saving: Changes are automatically saved to ContentStack

Check out the ContentStack App SDK documentation for information on deploying custom field extensions.

Custom Fields

🎨 Gradient Generator

The first custom field in this collection - a powerful gradient editor that allows content editors to create and customize CSS gradients with an intuitive visual interface.

Features:

• Add Colors: Click "Add Color" to add new color stops to your gradient
• Adjust Colors: Use the color picker or hex input to set colors
• Control Opacity: Use the slider to adjust color opacity
• Set Direction: Choose the gradient angle from the dropdown
• Reorder Colors: Drag the handle to reorder color stops
• Load Presets: Select from predefined gradient presets
• Preview: See your gradient in real-time in the preview area

Gradient Generator Data Structure

interface GradientModel {
  name: string;
  colors: Array<{
    hex: string;
    opacity: number;
  }>;
  angle: number;
  css?: string;
  gradient?: string;
}

Roadmap

This collection will continue to grow with additional custom field types. Planned additions include:

• Geolocation
• Slug Generator