1.2.13 ā¢ Published 4 years ago
gatsby-source-transistorfm v1.2.13
gatsby-source-transistorfm
š Gatsby source plugin for fetching show and episode data from Transistor.
Install
yarn add gatsby-source-transistorfm
How to use
// 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
// 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 (
<React.Fragment>
<h1>{show.title}</h1>
<p>{show.description}</p>
<Img
fluid={show.image.childImageSharp.fluid}
style={{ width: '260px' }}
/>
<hr />
{show.episodes.map(episode => (
<article key={episode.id}>
<h2>{episode.title}</h2>
<p>{episode.content}</p>
<ReactAudioPlayer
src={episode.enclosure.url}
controls
preload="none"
/>
</article>
))}
</React.Fragment>
);
};
export default IndexPage;
1.2.13
4 years ago
1.2.12
4 years ago
1.2.11
4 years ago
1.2.10
4 years ago
1.2.9
4 years ago
1.2.8
4 years ago
1.2.7
4 years ago
1.2.6
4 years ago
1.2.5
4 years ago
1.2.4
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago