vyuh_extension_content 1.16.3 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:
-
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 #
Register content types and layouts in your feature:
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.