Providers

Providers pull additional data from the CMS to populate blocks. Here, you can pull things like article titles, social share links, and logos.

Article Provider

The Article Provider (Article) populates a DeskSection with articles. Use flex order or css grid to reorder the articles for RWD.
DO NOT create a duplicate Article and control its visibility on viewport size. This will not work.

Example:

<template>
  <HeroBlock :block="block">
    <SpacingProvider>
      <!-- content -->
    </SpacingProvider>
    <!-- content -->
    <Spacing>
      <!-- content -->
    </Spacing>
  </HeroBlock>
</template>
slotsDescription
Default 
interface {
  /// the article info
  article: Article
}
interface Article {
  /// the headline image url of the article
  headline: string
  /// the title of the article
  title: string
  /// the blurb of the article
  blurb: string
  /// the desk name of the article
  desk: string
   /// the desk url of the article
  deskUrl: string
  /// the link to the article
  url: string
  /// the author's names
  authors: Author[]
  /// the publish time of the article
  time: Date
}
interface Author {
  name: string
  url: string
}

Desk List Provider

This provider returns a list of all desks within a publication — useful for menus or navbars. Unlike DeskSection or Article , this component will return the same result every time it is used.

Example

<template>
  <HeroBlock :block="block">
    <DeskList v-slot="{ desks }">
      <!-- content... -->
    </DeskList>
  </HeroBlock>
</template>
slotsDescription
Default 
interface {
  /// the desks
  desks: Desk[]
}
interface Desk {
  id: string
  name: string
  url: string
}

PageList Provider

This provider returns a list of all static pages within a publication — useful for menus or navbars. Unlike DeskSection or Article , this component will return the same result every time it is used.

Example

<template>
  <HeroBlock :block="block">
    <PageList v-slot="{ pages }">
      <!-- content... -->
    </PageList>
  </HeroBlock>
</template>
slotsDescription
Default 
interface {
  /// the pages
  pages: Page[]
}
interface Page {
  name: string
  url: string
}

Logo Provider

This provider returns a publication's logo. Use CSS to style the outer div .

Basic Example

<template>
  <HeroBlock :block="block">
    <Logo />
  </HeroBlock>
</template>

Example with usage of kind

<template>
  <HeroBlock :block="block">
    <Logo />
    <!-- add a unique value for `kind` if you have multiple logo in same block -->
    <Logo kind="logo-2" />
  </HeroBlock>
</template>

Example of styling the logo component using CSS in HTML

<div class="relative">
  <img class="w-full h-full" src="path/to/logo" />
</div>
PropsTypeMandatory?Description
kindstring❌Same as kind for other stylable components, but it has a default value logo. You'll only need this if you have multiple logos in a block

The Logo component does not have any slots.

Site Provider

This provider returns the name of your publication and its associated profile information (e.g. URLs for social media links). Unlike DeskSection or Article , this component will return the same result every time it is used.

Basic Example

interface Site { name: string facebook?: string twitter?: string }

Using site.facebook + site.name for social links and TextInput default text.

<template>
  <HeroBlock :block="block">
    <Site v-slot="{ site }">
      <TextInput kind="site-title" component="h1" :defaultValue="site.name" />
      <LinkElement v-if="site.facebook" :href="site.facebook">
        <TextInput kind="social-link" defaultValue="Facebook" />
      </LinkElement>
    </Site>
  </HeroBlock>
</template>
slotsDescription
Default 
interface {
  /// the desks
  site: Site
}
interface Site {
  name: string
  facebook?: string
  twitter?: string
}
Edit this page on GitHub Updated at Sun, Nov 20, 2022
Components Introduction