Adding a Vimeo schema to the Sanity blog template for Sveltekit integration

// studio/schemas/bodyPortableText.js

export default {
  name: 'bodyPortableText',
  type: 'array',
  title: 'Post body',
  of: [
    {
      type: 'block',
      title: 'Block',
      // Styles let you set what your user can mark up blocks with. These
      // corrensponds with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' },
      ],
      lists: [
        { title: 'Bullet', value: 'bullet' },
        { title: 'Number', value: 'number' },
      ],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            name: 'link',
            type: 'object',
            title: 'URL',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
                validation: (Rule) =>
                  Rule.uri({
                    scheme: ['http', 'https', 'mailto', 'tel'],
                  }),
              },
            ],
          },
        ],
      },
      of: [{ type: 'authorReference' }],
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: 'mainImage',
      options: { hotspot: true },
    },
    {
      type: 'vimeo',
    },
  ],
}

import sanity from '@sanity/client';
import blocksToHTML from '@sanity/block-content-to-html';
import imageUrlBuilder from '@sanity/image-url';

/* … projectId, token, etc. here for sanityConfig */
 
export const client = sanity(sanityConfig);

export const imageUrlFor = (source) =>
  imageUrlBuilder(sanityConfig).image(source);

const h = blocksToHTML.h;
const serializers = {
  types: {
    code: ({ node }) => h('pre', h('code', { lang: node.language }, node.code)),
    mainImage: ({ node }) =>
      h('img', {
        src: imageUrlFor(node.asset).url()
      }),
    authorReference: ({ node }) => h('p', 'Author: ' + node.author.name)
  }
};

export const renderBlocks = (blocks) => {
  return blocksToHTML({
    blocks,
    serializers
  });
};

import React from 'react'
import ReactPlayer from 'react-player/vimeo'

const vimeoPreview = ({ value }) => {
  const url = value.url
  const wrapperStyle = {
    position: 'relative',
    paddingTop: '56.25%',
  }
  const playerStyle = {
    position: 'absolute',
    top: '0',
    left: '0',
  }
  return (
    <div style={wrapperStyle}>
      <ReactPlayer url={url} controls="true" width="100%" height="100%" style={playerStyle} />
    </div>
  )
}

export default {
  name: 'vimeo',
  type: 'object',
  title: 'Vimeo Embed',
  fields: [
    {
      name: 'url',
      type: 'url',
      title: 'Vimeo video URL',
    },
  ],
  preview: {
    select: {
      url: 'url',
    },
    component: vimeoPreview,
  },
}