Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/limitless-angular/limitless-angular
Limitless Angular is a collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on Sanity.io integration.
https://github.com/limitless-angular/limitless-angular
angular image-loader portable-text portabletext sanity sanity-cms sanity-image-loader sanity-io ssr
Last synced: 2 months ago
JSON representation
Limitless Angular is a collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on Sanity.io integration.
- Host: GitHub
- URL: https://github.com/limitless-angular/limitless-angular
- Owner: limitless-angular
- License: mit
- Created: 2024-07-04T06:13:43.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T16:03:36.000Z (3 months ago)
- Last Synced: 2024-09-23T16:10:30.411Z (3 months ago)
- Topics: angular, image-loader, portable-text, portabletext, sanity, sanity-cms, sanity-image-loader, sanity-io, ssr
- Language: TypeScript
- Homepage:
- Size: 1.2 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - limitless-angular - A collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on [Sanity.io](https://www.sanity.io/) integration. (Table of contents / Angular)
- fucking-awesome-angular - limitless-angular - A collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on 🌎 [Sanity.io](www.sanity.io/) integration. (Table of contents / Angular)
README
# Limitless Angular
[](https://twitter.com/osnoser1)
Limitless Angular is a collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on Sanity.io integration.
## Demo
Check out our live demo of the Sanity example here: [Limitless Angular Sanity Example](https://limitless-angular-sanity-example.netlify.app/)
You can also see example project in the monorepo: [`apps/sanity-example`](/apps/sanity-example)
## Table of Contents
- [Libraries](#libraries)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Portable Text](#portable-text)
- [Image Loader](#image-loader)
- [Sanity Image Directive](#sanity-image-directive)
- [Contributing](#contributing)
- [License](#license)
- [Roadmap](#roadmap)
- [Credits](#credits)
- [Support](#support)
## Libraries
### @limitless-angular/sanity
[](https://www.npmjs.com/package/@limitless-angular/sanity)
[](https://www.npmjs.com/package/@limitless-angular/sanity)
This library provides three main features:
1. A complete Portable Text implementation for Angular
2. An image loader to optimize images using Sanity
3. A Sanity Image directive for easy image rendering
## Getting Started
### Installation
```bash
npm install --save @limitless-angular/sanity
```
**Which Version to use?**
| Angular version | @limitless-angular/sanity |
| --------------- | ------------------------- |
| \>=18.0.0 | 18.x |
### Usage
- For Portable Text: `import { ... } from '@limitless-angular/sanity/portabletext';`
- For Image Loader and Sanity Image Directive: `import { ... } from '@limitless-angular/sanity/image-loader';`
For more detailed information, refer to the specific feature documentation:
- [Portable Text README](packages/sanity/portabletext/README.md)
- [Image Loader README](packages/sanity/image-loader/README.md)
- [Sanity Library Overview](packages/sanity/README.md)
### Portable Text
Render [Portable Text](https://portabletext.org/) with Angular.
#### Basic Usage
```typescript
import { Component } from '@angular/core';
import { PortableTextComponent, PortableTextComponents } from '@limitless-angular/sanity/portabletext';
@Component({
selector: 'app-your-component',
template: `
`,
standalone: true,
imports: [PortableTextComponent],
})
export class YourComponent {
portableTextValue = [
/* array of portable text blocks */
];
customComponents: PortableTextComponents = {
// optional object of custom components to use
};
}
```
For more detailed information on using Portable Text, including styling, customizing components, and available components, please refer to the [Portable Text README](packages/sanity/portabletext/README.md).
### Image Loader
The image loader allows you to connect the NgOptimizedImage directive with Sanity to load images using the @sanity/image-url package.
#### Basic Usage
```typescript
import { NgOptimizedImage } from '@angular/common';
import { SanityImageLoader } from '@limitless-angular/sanity/image-loader';
@Component({
standalone: true,
template: '![]()
',
imports: [NgOptimizedImage],
providers: [
provideSanityLoader({
projectId: 'SANITY_PROJECT_ID',
dataset: 'SANITY_DATASET',
})
],
// ...
})
```
For more details on the Image Loader, check out the [Image Loader README](packages/sanity/image-loader/README.md).
### Sanity Image Directive
The `sanityImage` directive provides a convenient way to render Sanity images in your Angular components, especially when working with Portable Text content.
#### Basic Usage
```typescript
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { provideSanityLoader, SanityImage } from '@limitless-angular/sanity/image-loader';
import { PortableTextTypeComponent } from '@limitless-angular/sanity/portabletext';
@Component({
selector: 'app-image',
standalone: true,
template: `![]()
`,
imports: [SanityImage],
providers: [provideSanityLoader({ projectId: 'SANITY_PROJECT_ID', dataset: 'SANITY_DATASET' })],
})
export class ImageComponent extends PortableTextTypeComponent {}
```
This directive simplifies the process of rendering Sanity images in your components, handling the complexities of image optimization and URL generation.
## Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
## Roadmap
We're constantly working to improve Limitless Angular. Here are some features we're planning:
- **Performance Optimizations**:
- Enhance the efficiency and speed of the application to provide a smoother user experience.
- **Expanded Documentation and Examples**:
- Develop comprehensive documentation and add more practical examples to help users understand and implement features more effectively.
- **Comprehensive Testing**:
- Implement a full suite of tests to ensure code quality and reliability. This includes unit tests, integration tests, and end-to-end tests.
- **Lazy Loading of PortableText Components**:
- Implement dynamic import to allow lazy loading of portable-text components, improving initial load times and overall performance by loading components only when needed.
Stay tuned for updates!
## Support
If you encounter any issues or have questions, please [open an issue](https://github.com/limitless-angular/limitless-angular/issues) on our GitHub repository.
## Credits
This repository is adapted from [@portabletext/react](https://github.com/portabletext/react-portabletext) which provided the vast majority of node rendering logic.
## License
This project is licensed under the MIT License. See our [LICENSE](LICENSE) file for details.