Vyuh Extension for Content

An extension for integrating CMS. This package provides the core building blocks that can be leveraged by specific CMS integrations. Works in conjunction with the ContentPlugin from the vyuh_core package to enable content management features in your application.

Overview ✨

The content extension provides a flexible architecture for managing CMS-driven content in your application:

Content Types 📝 define the structure of your content using Dart classes that extend ContentItem. Each type has:
- A unique schema name matching your CMS schema
- A type descriptor for registration and serialization
- A content builder for creating instances with layouts
Content Builders 🏗️ handle the creation and configuration of content instances:
- Map CMS data to Dart objects
- Configure default and custom layouts
- Handle content validation and transformation
Layout System 🎨 manages how content is rendered:
- Layouts are configured per content type
- Default layouts handle common use cases
- Custom layouts provide full control over rendering
Content Descriptors 📋 allow extending the content system:
- Add custom layouts for some Content Items

This architecture enables you to seamlessly integrate CMS content into your application while maintaining type safety and clean separation of concerns.

Features 🚀

Content Types 📝

ContentItem: Base class for all content types
- Schema type identification
- JSON serialization support
- Content builder registration
ImageReference: Reference to CMS-managed images
- URL and dimensions
- Asset metadata
- Hot spot and crop information
PortableText: Rich text content format
- Custom mark definitions
- Block styling
- Embedded content

Content Building

ContentBuilder: Factory for creating content instances
- Type-safe content creation
- Layout configuration
- Content validation
ContentDescriptor: Content type registration
- Schema type definitions
- Content builders
- Layout descriptors

Layout System

LayoutConfiguration: Base class for content layouts
- Custom layout implementations
- Content-specific rendering
- Layout type descriptors

Content Extensions

ContentExtension: Framework for extending content functionality
- Custom content types
- Layout registration
- Content modifiers
ContentModifier: Transform content before rendering
- Theme-based modifications
- Platform-specific changes
- Conditional content

Installation 📦

Add this to your package's pubspec.yaml file:

dependencies:
  vyuh_extension_content: any

Usage

Defining Content Types

Create a content type that extends ContentItem:

@JsonSerializable()
final class Article extends ContentItem {
  static const schemaName = 'article';
  static final typeDescriptor = TypeDescriptor(
    schemaType: schemaName,
    title: 'Article',
    fromJson: Article.fromJson,
  );

  static final contentBuilder = ContentBuilder(
    content: typeDescriptor,
    defaultLayout: ArticleLayout(),
    defaultLayoutDescriptor: ArticleLayout.typeDescriptor,
  );

  final String title;
  final String body;
  final ImageReference? image;

  Article({
    required super.id,
    required this.title,
    required this.body,
    this.image,
  }) : super(schemaType: schemaName);

  factory Article.fromJson(Map<String, dynamic> json) => 
    _$ArticleFromJson(json);
}

Implementing Layouts

Create custom layouts by extending LayoutConfiguration:

final class ArticleLayout extends LayoutConfiguration<Article> {
  static const schemaName = '${Article.schemaName}.layout.default';
  static final typeDescriptor = TypeDescriptor(
    schemaType: schemaName,
    title: 'Default Article Layout',
  );

  @override
  Widget build(BuildContext context, Article content) {
    return Column(
      children: [
        if (content.image != null)
          ContentImage(ref: content.image!),
        Text(content.title),
        PortableTextWidget(content.body),
      ],
    );
  }
}

Registering Content Extensions

final feature = FeatureDescriptor(
  name: 'blog',
  extensions: [
    ContentExtensionDescriptor(
      contents: [
        Article.typeDescriptor,
      ],
      contentBuilders: [
        Article.contentBuilder,
      ],
    ),
  ],
);

Learn More 📚

Visit docs.vyuh.tech for detailed documentation
Check out the GitHub repository for source code
Report issues on the issue tracker

License 📄

This project is licensed under the terms specified in the LICENSE file.