Spotify.NET/SpotifyAPI.Docs/src/pages/index.js

163 lines
5.5 KiB
JavaScript
Raw Normal View History

2020-05-13 17:25:42 +01:00
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
2020-08-19 13:12:11 +01:00
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import CodeBlock from '@theme/CodeBlock';
import Layout from '@theme/Layout';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';
import classnames from 'classnames';
import React from 'react';
import GitHubButton from 'react-github-btn';
2020-06-03 16:44:13 +01:00
import InstallInstructions from '../install_instructions';
2020-08-19 13:12:11 +01:00
import styles from './styles.module.css';
2020-05-13 17:25:42 +01:00
2020-08-19 13:12:11 +01:00
const exampleCode = `var spotify = new SpotifyClient("YourAccessToken");
2020-05-19 16:33:29 +01:00
var me = await spotify.UserProfile.Current();
Console.WriteLine($"Hello there {me.DisplayName}");
2020-05-31 16:21:17 +01:00
await foreach(
var playlist in spotify.Paginate(spotify.Playlists.CurrentUsers())
)
{
Console.WriteLine(playlist.Name);
}`;
2020-05-19 16:33:29 +01:00
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: () => (
<>
2020-08-19 13:12:11 +01:00
<code>SpotifyAPI-NET</code> allows you to quickly integrate with Spotify's Web API by supplying sane
configuration defaults from the start. Later on, behaviour can be customized using extensive configuration
possibilities.
2020-05-19 16:33:29 +01:00
</>
),
},
{
title: <>All API Calls Integrated</>,
imageUrl: 'img/undraw_project_completed_w0oq.svg',
description: () => (
2020-05-13 17:25:42 +01:00
<>
2020-08-19 13:12:11 +01:00
The Spotify Web API consists of over 74 API calls. <code>SpotifyAPI-NET</code> provides fully typed
requests/responses for all of them.
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-08-19 13:12:11 +01:00
With the support of .NET Standard 2.X, <code>SpotifyAPI-NET</code> runs on many platforms, including .NET Core,
UWP and Xamarin.Forms (Windows, Android, iOS and Mac)
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-08-19 13:12:11 +01:00
<code>SpotifyAPI-NET</code> is built on a modular structure, which allows easy testing through mocks and stubs.
Learn more by visiting the <Link to={useBaseUrl('docs/next/testing')}>Testing Guide</Link>
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} />
</div>
)}
<h3>{title}</h3>
2020-05-19 16:33:29 +01:00
<p>{description()}</p>
2020-05-13 17:25:42 +01:00
</div>
);
}
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
2020-08-19 13:12:11 +01:00
<Layout title={`${siteConfig.title}`} description="Documentation for the C# .NET SpotifyAPI-NET Library">
2020-05-13 17:25:42 +01:00
<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' }} />
2020-06-03 18:12:12 +01:00
<GitHubButton
href="https://github.com/JohnnyCrazy/SpotifyAPI-NET"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
2020-08-19 13:12:11 +01:00
aria-label="Star JohnnyCrazy/SpotifyAPI-NET on GitHub"
>
Star
</GitHubButton>
2020-06-03 18:12:12 +01:00
<br />
<a href="https://www.nuget.org/packages/SpotifyAPI.Web/" rel="noopener noreferrer">
<img
alt="Nuget"
2020-08-19 13:12:11 +01:00
src="https://img.shields.io/nuget/vpre/SpotifyAPI.Web?label=SpotifyAPI.Web&style=flat-square"
></img>
{' '}
2020-06-03 18:12:12 +01:00
</a>
<a href="https://www.nuget.org/packages/SpotifyAPI.Web.Auth/" rel="noopener noreferrer">
<img
alt="Nuget"
2020-08-19 13:12:11 +01:00
src="https://img.shields.io/nuget/vpre/SpotifyAPI.Web.Auth?label=SpotifyAPI.Web.Auth&style=flat-square"
></img>
2020-06-03 18:12:12 +01:00
</a>
2020-05-19 16:33:29 +01:00
</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
2020-08-19 13:12:11 +01:00
className={classnames('button button--outline button--secondary button--lg', styles.getStarted)}
to={useBaseUrl('docs/next/introduction')}
>
2020-05-19 16:33:29 +01:00
Get Started
</Link>
</div>
</div>
<div className={classnames('col col--7', styles.exampleCode)}>
<CodeBlock metastring="csharp" className="csharp">
{exampleCode}
</CodeBlock>
</div>
2020-05-13 17:25:42 +01:00
</div>
</div>
</header>
<main>
2020-06-03 16:44:13 +01:00
<div className="container">
<h2 style={{ textAlign: 'center', marginTop: '30px' }}>Try it out now</h2>
<InstallInstructions />
</div>
2020-05-13 17:25:42 +01:00
{features && features.length && (
<section className={styles.features}>
<div className="container">
<div className="row">
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
)}
</main>
</Layout>
);
}
export default Home;