Kitchen sink!

This blurb contains ✨markdown✨ 🥳

This article aims to feature every block type, annotation and decorator currently available in the main portable text config. Here's some normal sized code.

The previous sentence was normal, this one is title 🤷‍♂️ – visually distinct in presentation but not in PTE. //fixed

Configurable callout

Set a title and a tone. Don't like the tone? Set a custom color. Pick a cool icon.

Robert is your mother's brother. 🤘

These are the headings

Testing icon default size

The author of the icon picker plugin very graciously included an option to set a custom default size for icons at my personal request (well, he fixed my github issue which is pretty much the same thing) 🙏❤️🫡

In order of biggitudes

Bling 💅

These tone alternatives for callouts suck. IWBN to add the simpler-color-picker plugin to that particular field. //fixed

Only three levels atm

Quoth the raven: Nevermore

A paragraph is a distinct section of writing that typically deals with a single theme or idea, composed of many word multiple sentences.

  • It begins with a topic sentence that introduces the main idea
  • followed by supporting sentences that elaborate on the topic,
    • providing details
    • examples
    • explanations
  1. A well-constructed paragraph ensures coherence and unity, leading to a concluding sentence that sums up or transitions to the next point.
  2. Effective paragraphs contribute to the overall structure and clarity of a written work, making it easier for readers to understand and follow the author's thoughts.
1import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
2import { getInitials, urlFor } from '@/lib/utils';
3
4import type {Image} from 'sanity'
5
6function AuthorAvatar({
7  image,
8  name,
9  size,
10}: {
11  image: Image
12  name: string
13  size: number
14}): JSX.Element {
15  const initials = getInitials(name)
16  const imgsrc = urlFor(image).width(size).height(size).quality(70).url()
17  return (
18    <Avatar style={{height: size, width: size}}>
19      <a href="/about">
20        <AvatarImage alt={name || 'Author'} src={imgsrc} />
21      </a>
22      <AvatarFallback>{initials}</AvatarFallback>
23    </Avatar>
24  )
25}
26
27export default AuthorAvatar
28

Bigly yuge heading

Need some text in here to break things up!

a deer with antlers is standing in the water .

The image above should have unsplash attribution attached. Will have to fix.

Screenshots

Specialized image field with option for dark mode variant ++

Seems like we might want to frame these somehow?

Seems like we might want to frame these somehow?