vyuh_extension_content 1.16.3 copy "vyuh_extension_content: ^1.16.3" to clipboard
vyuh_extension_content: ^1.16.3 copied to clipboard

An extension for the Vyuh framework for creating CMS integrations

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:

  1. 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
  2. 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
  3. 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
  4. 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 #

Register content types and layouts in your feature:

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

Learn More 📚 #

License 📄 #

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