2020-05-13 17:25:42 +01:00
import React from 'react' ;
import classnames from 'classnames' ;
import Layout from '@theme/Layout' ;
2020-05-19 16:33:29 +01:00
import CodeBlock from '@theme/CodeBlock'
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
2020-05-13 17:25:42 +01:00
import Link from '@docusaurus/Link' ;
import useDocusaurusContext from '@docusaurus/useDocusaurusContext' ;
import useBaseUrl from '@docusaurus/useBaseUrl' ;
import styles from './styles.module.css' ;
import GitHubButton from 'react-github-btn'
2020-05-19 16:33:29 +01:00
const exampleCode =
` var spotify = new SpotifyClient("YourAccessToken");
var me = await spotify . UserProfile . Current ( ) ;
Console . WriteLine ( $ "Hello there {me.DisplayName}" ) ;
var playlists = await spotify . Paginate ( ( ) => spotify . Playlists . CurrentUsers ( ) ) ;
Console . WriteLine ( $ "You got {playlists.Count} playlists 🚀" ) ;
` ;
const installCodeNuget =
` # Core Package
Install - Package SpotifyAPI . Web
` ;
const installCodeCLI =
` # Core Package
dotnet add package SpotifyAPI . Web
` ;
2020-05-13 17:25:42 +01:00
const features = [
{
2020-05-19 16:33:29 +01:00
title : < > Sane Defaults - Easy To Configure < / > ,
imageUrl : 'img/undraw_preferences_uuo2.svg' ,
description : ( ) => (
< >
< code > SpotifyAPI - NET < / c o d e > a l l o w s y o u t o q u i c k l y i n t e g r a t e w i t h S p o t i f y ' s W e b A P I b y s u p p l y i n g s a n e c o n f i g u r a t i o n d e f a u l t s f r o m t h e s t a r t . L a t e r o n , b e h a v i o u r c a n b e c u s t o m i z e d e a s i l y w i t h t h e h e l p o f i n t e r f a c e s .
< / >
) ,
} ,
{
title : < > All API Calls Integrated < / > ,
imageUrl : 'img/undraw_project_completed_w0oq.svg' ,
description : ( ) => (
2020-05-13 17:25:42 +01:00
< >
2020-05-19 16:33:29 +01:00
The Spotify Web API consists of over 74 API calls . < code > SpotifyAPI - NET < / c o d e > p r o v i d e s f u l l y t y p e d r e q u e s t s / r e s p o n s e s f o r a l l o f t h e m .
2020-05-13 17:25:42 +01:00
< / >
) ,
} ,
{
2020-05-19 16:33:29 +01:00
title : < > . NET Standard 2. X < / > ,
imageUrl : 'img/undraw_Devices_e67q.svg' ,
description : ( ) => (
2020-05-13 17:25:42 +01:00
< >
2020-05-19 16:33:29 +01:00
With the support of . NET Standard 2. X , < code > SpotifyAPI - NET < / c o d e > c a n r u n o n m a n y p l a t f o r m s , i n c l u d i n g . N E T C o r e , U W P a n d X a m a r i n . F o r m s ( W i n d o w s , A n d r o i d , i O S a n d M a c )
2020-05-13 17:25:42 +01:00
< / >
) ,
} ,
{
2020-05-19 16:33:29 +01:00
title : < > Testable < / > ,
imageUrl : 'img/undraw_QA_engineers_dg5p.svg' ,
description : ( ) => (
2020-05-13 17:25:42 +01:00
< >
2020-05-19 16:33:29 +01:00
< code > SpotifyAPI - NET < / c o d e > i s b u i l t o n a m o d u l a r s t r u c t u r e , w h i c h a l l o w s e a s y t e s t i n g t h r o u g h m o c k s a n d s t u b s . L e a r n m o r e b y v i s i t i n g t h e < L i n k t o = { u s e B a s e U r l ( ' d o c s / n e x t / t e s t i n g ' ) } > T e s t i n g G u i d e < / L i n k >
2020-05-13 17:25:42 +01:00
< / >
) ,
} ,
] ;
function Feature ( { imageUrl , title , description } ) {
const imgUrl = useBaseUrl ( imageUrl ) ;
return (
< div className = { classnames ( 'col col--4' , styles . feature ) } >
{ imgUrl && (
< div className = "text--center" >
< img className = { styles . featureImage } src = { imgUrl } alt = { title } / >
< / d i v >
) }
< h3 > { title } < / h 3 >
2020-05-19 16:33:29 +01:00
< p > { description ( ) } < / p >
2020-05-13 17:25:42 +01:00
< / d i v >
) ;
}
function Home ( ) {
const context = useDocusaurusContext ( ) ;
const { siteConfig = { } } = context ;
return (
< Layout
title = { ` Hello from ${ siteConfig . title } ` }
description = "Description will go into a meta tag in <head />" >
< header className = { classnames ( 'hero hero--primary' , styles . heroBanner ) } >
< div className = "container" >
2020-05-19 16:33:29 +01:00
< div className = "row" >
< div className = "col col--5" >
< img src = "img/logo.svg" width = "120" height = "120" / >
< h1 className = "hero__title" >
{ siteConfig . title }
< span style = { { marginLeft : '50px' } } / >
< GitHubButton href = "https://github.com/JohnnyCrazy/SpotifyAPI-NET" data - icon = "octicon-star" data - size = "large" data - show - count = "true" aria - label = "Star JohnnyCrazy/SpotifyAPI-NET on GitHub" > Star < / G i t H u b B u t t o n >
< / h 1 >
< p className = "hero__subtitle" > { siteConfig . tagline } < / p >
< div className = { styles . buttons } >
< Link
className = { classnames (
'button button--outline button--secondary button--lg' ,
styles . getStarted ,
) }
to = { useBaseUrl ( 'docs/next/home' ) } >
Get Started
< / L i n k >
< / d i v >
< / d i v >
< div className = { classnames ( 'col col--7' , styles . exampleCode ) } >
< CodeBlock metastring = "csharp" className = "csharp" >
{ exampleCode }
< / C o d e B l o c k >
< / d i v >
2020-05-13 17:25:42 +01:00
< / d i v >
< / d i v >
< / h e a d e r >
< main >
{ features && features . length && (
< section className = { styles . features } >
< div className = "container" >
< div className = "row" >
{ features . map ( ( props , idx ) => (
< Feature key = { idx } { ... props } / >
) ) }
< / d i v >
< / d i v >
< / s e c t i o n >
) }
2020-05-19 16:33:29 +01:00
< h2 style = { { textAlign : 'center' } } > Try it out now < / h 2 >
< div style = { { padding : '50px' } } >
< Tabs
defaultValue = "cli"
values = { [
{ label : 'dotnet CLI' , value : 'cli' } ,
{ label : 'NuGET Console' , value : 'nuget' } ,
] } >
< TabItem value = "cli" >
< CodeBlock metastring = "csharp" className = "bash" >
{ installCodeCLI }
< / C o d e B l o c k >
< / T a b I t e m >
< TabItem value = "nuget" >
< CodeBlock metastring = "csharp" className = "bash" >
{ installCodeNuget }
< / C o d e B l o c k >
< / T a b I t e m >
< / T a b s >
< / d i v >
2020-05-13 17:25:42 +01:00
< / m a i n >
< / L a y o u t >
) ;
}
export default Home ;
