@limitless-angular/sanity demo

Text formatting#

Plain, emphasized, linked and strong text, that can also be combined. Obviously it also supports inline code, underlined text and strike-through.

But aside from that, it also supports completely custom annotations - be it structured references to book/movie charactersEddark StarkThe head of House Stark, the Lord of Winterfell, Lord Paramount and Warden of the North., term definitionsa statement of the exact meaning of a word, especially in a dictionary., speech synthesis controls (configurable) or some other fun and creative use case.

Blocks can also contain "inline objects", which contain user-defined data. Maybe you want to represent a price in a given currency, but be able to get a live exchange rate in the users local currency? In January 2022, a Whopper was about 5 USD (~ 4.40 EUR 🇪🇸) at your local Burger King restaurant in Miami.

Blocks#

"Blocks" in Portable Text are... well, block-level items.
By default, you will see things like blockquotes, headings and regular paragraphs.

Aside from that, you can drop in pretty much any data you want, as long as you define an Angular component to render it. Here is a code block, highlighted by prism, for instance:

import { Component, input } from '@angular/core';
import { PortableTextTypeComponent } from '@limitless-angular/sanity/portabletext';
import { LowlightComponent } from './lowlight.component';

interface CodeBlock {
  _type: 'code';
  code: string;
  language?: string;
}

@Component({
  selector: 'app-code',
  imports: [LowlightComponent],
  template: `
    <app-lowlight
      [language]="value().language || 'js'"
      [code]="value().code"
    ></app-lowlight>
  `,
})
export class CodeComponent extends PortableTextTypeComponent<CodeBlock> {}

But it can really be anything - like a map of annotated markers, for instance - all represented by structured JSON:

Sanity Image Awesomeness#

Alright, let's talk about some cool image stuff for your Angular apps with Sanity. We've cooked up not one, but two nifty features to make your life easier.

First up, we've got this sweet little thing called the Sanity Image Directive. It's like a magic wand for your images. You just slap a sanityImage attribute on your img tag, and bam! Your Sanity images are right there, looking all pretty and optimized. It's like telling your images, "Hey, you're a Sanity image now. Act cool."

Now, let's chat about its sidekick - the Image Loader Provider. This is the behind-the-scenes hero that makes sure everything runs smooth as butter. It's basically a neat way to make Sanity and Angular play nice together when it comes to loading images. You get all the cool stuff Sanity can do with images, but it works smoothly with Angular's fancy NgOptimizedImage directive.

Together, these two are like having a personal assistant for your images. You just point and say, "I want that image there," and our tools make sure it happens, all optimized and fancy-like. Pretty cool, right?

Lists#

Of course, you will want lists!

• They are fully supported
• They can be unordered or ordered
• Reasons why ordered lists might be better:
  1. Most lists have some priority
  2. Not conveying importance/priority is lazy

You can also go beyond ordered/unordered...

Here is a list of schnauzers, as indicated by the schnauzer list type and icon:

• Kokos
• Pippi