You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.8 KiB
159 lines
4.8 KiB
import Head from 'next/head'
|
|
import styles from '../styles/Index.module.css'
|
|
import Header from '../components/header';
|
|
import Footer from '../components/footer';
|
|
import Socials from '../components/socials';
|
|
import TwitchPopup from '../components/twitchpopup';
|
|
|
|
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
|
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
|
|
|
export default function Index({ motto, twitch_online, about }) {
|
|
return (
|
|
<div className="page">
|
|
<Head>
|
|
<title>Trick - Homepage</title>
|
|
<meta name="description" content={about.toString()} />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://trickthefox.com/" />
|
|
<meta property="og:title" content="Trick - Homepage" />
|
|
<meta property="og:description" content={about.toString()} />
|
|
<meta property="og:image" content="/trick.jpg" />
|
|
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:url" content="https://trickthefox.com/" />
|
|
<meta property="twitter:title" content="Trick - Homepage" />
|
|
<meta property="twitter:description" content={about.toString()} />
|
|
<meta property="twitter:image" content="/trick.jpg" />
|
|
|
|
<meta name="theme-color" content="#4f4fff" />
|
|
</Head>
|
|
|
|
<Header />
|
|
|
|
<div className="container">
|
|
<article className="content">
|
|
|
|
<div>
|
|
<TwitchPopup show={twitch_online} />
|
|
|
|
<section className="card">
|
|
<div className={styles.avatar}>
|
|
<div>
|
|
<img src="/trickwow.png"></img>
|
|
</div>
|
|
<div>
|
|
<h1>Hi, I'm Trick!</h1>
|
|
<h4>{motto}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>About me</h3>
|
|
<div className="flex">
|
|
<p>
|
|
{about}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<Socials />
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function getAboutText() {
|
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Locale", {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
|
}
|
|
});
|
|
|
|
const data = await req.json();
|
|
for(const key in data['records']) {
|
|
if(data['records'][key]['fields']['field'] == "about") {
|
|
return data['records'][key]['fields']['value'];
|
|
}
|
|
};
|
|
|
|
return "";
|
|
}
|
|
|
|
async function getMottos() {
|
|
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Mottos", {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
|
}
|
|
});
|
|
|
|
const data = await req.json();
|
|
|
|
let mottoArray = [];
|
|
for(const key in data['records']) {
|
|
mottoArray.push(data['records'][key]['fields']['motto']);
|
|
}
|
|
|
|
return mottoArray;
|
|
}
|
|
|
|
async function getAccessToken() {
|
|
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
|
|
method: "POST",
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
const data = await req.json();
|
|
return data['access_token'];
|
|
}
|
|
|
|
async function getIsUserLive() {
|
|
const access_token = await getAccessToken();
|
|
let userId = 268280947; // trick_the_fox;
|
|
|
|
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + access_token,
|
|
"Client-ID": client_id,
|
|
}
|
|
});
|
|
const data = await req.json();
|
|
if(data['data'].length > 0) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
async function RandomMotto() {
|
|
const Mottos = await getMottos();
|
|
const randomNumber = Math.floor(Math.random() * Mottos.length);
|
|
return Mottos[randomNumber];
|
|
}
|
|
|
|
export async function getServerSideProps() {
|
|
return {
|
|
props: {
|
|
motto: await RandomMotto(),
|
|
twitch_online: await getIsUserLive(),
|
|
about: await getAboutText()
|
|
}
|
|
};
|
|
}
|
|
|