Nevertheless! Party Metaphorically
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@podlove/source-publisher

0.3.0 • Public • Published

@podlove/source-publisher

Gridsome Source for Podlove Publisher

Requirements

  • Podlove Publisher with in version 3.1 or later

Installation

  1. Install the package

npm i @podlove/source-publisher --save-dev

  1. Add the source to gridsome.config.js plugins
{
  use: '@podlove/source-publisher',
  options: {
    baseUrl: 'https://publisher.com', // required
    apiBase: 'wp-json', // optional
    typeName: 'Podlove', // optional
    imageCache: 'src/assets/images' // optional
  }
}

Usage

This source plugin is meant for a single Podcast show with multiple episodes.

Static Queries

The Show is provided as static metadata.

Example Usage:

<static-query>
query {
  metadata {
    PodloveShow {
      title,
      subtitle,
      summary,
      poster
    }
  }
}
</static-query>

Dynamic Queries

Core to this plugin is the Episode object that contains Audio files, a list of Chapter, Transcript, Contributor and a Timeline:

Example Usage:

<page-query>
query ($id: ID!) {
  podloveEpisode(id: $id) {
    id,
    path,
    title,
    summary,
    publicationDate,
    poster,
    duration,
    content,
    audio {
      url,
      size,
      title,
      mimeType
    },
    chapters {
      start,
      end,
      title,
      href,
      image
    },
    contributors {
      details {
        id,
        name
        avatar
      }
    },
    timeline {
      node,
      title,
      type,
      start,
      end,
      texts {
        start,
        end,
        text
      },
      speaker {
        avatar,
        name
      }
    }
  }
}
</page-query>

Image Caching

Beside fetching the show and episode data this plugin also copies source images from the publisher for better caching. Resolved images are relative to the provided imageCache path. To use the images in your application a custom webpack resolver in the gridsome.config is recommended:

  chainWebpack: config => {
    config.resolve.alias.set('@images', '@/assets/images')
  },

Finally in the component caching and resizing can be created with the asset-loader:

<g-image v-if="poster" :src="require(`!!assets-loader?width=180&height=180!@images/${poster}`)" />

Keywords

none

Install

npm i @podlove/source-publisher

DownloadsWeekly Downloads

8

Version

0.3.0

License

MIT

Unpacked Size

27.5 kB

Total Files

26

Last publish

Collaborators

  • avatar
  • avatar