https://github.com/notrab/gatsby-source-transistorfm
🎙 Gatsby source plugin for fetching show and episode data from Transistor
https://github.com/notrab/gatsby-source-transistorfm
Last synced: 7 months ago
JSON representation
🎙 Gatsby source plugin for fetching show and episode data from Transistor
- Host: GitHub
- URL: https://github.com/notrab/gatsby-source-transistorfm
- Owner: notrab
- License: mit
- Created: 2020-03-04T16:47:58.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-29T16:33:34.000Z (about 1 year ago)
- Last Synced: 2024-05-30T06:38:24.460Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://gatsby-source-transistorfm.netlify.com/
- Size: 1.26 MB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-source-transistorfm
🎙 Gatsby source plugin for fetching show and episode data from [Transistor](https://transistor.fm).
## Install
```bash
yarn add gatsby-source-transistorfm
```
## How to use
```js
// In your gatsby-config.js
plugins: [
{
resolve: 'gatsby-source-transistorfm',
options: {
url: '...',
},
},
];
```
To use multiple Transistor feeds, just add another instance of the plugin configuration to `gatsby-config.js`.
### Example
```js
// In your pages/*.js
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import ReactAudioPlayer from 'react-audio-player';
const pageQuery = graphql`
{
show: transistorShow {
id
title
description
episodes {
id
title
content
enclosure {
url
}
image {
childImageSharp {
fluid(maxWidth: 560) {
...GatsbyImageSharpFluid
}
}
}
}
image {
childImageSharp {
fluid(maxWidth: 560) {
...GatsbyImageSharpFluid
}
}
}
}
}
`;
const IndexPage = () => {
const { show } = useStaticQuery(pageQuery);
return (
{show.title}
{show.description}
![]()
{show.episodes.map(episode => (
{episode.title}
{episode.content}
))}
);
};
export default IndexPage;
```