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.
256 lines
9.6 KiB
256 lines
9.6 KiB
import Head from 'next/head'
|
|
import styles from '../styles/Index.module.css'
|
|
import Header from '../components/indexheader';
|
|
import Footer from '../components/footer';
|
|
import Socials from '../components/socials';
|
|
import TwitchPopup from '../components/twitchpopup';
|
|
import Pages from '../components/pages';
|
|
import Button from '../components/button';
|
|
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
|
|
import { TwitchEmbed } from 'react-twitch-embed';
|
|
|
|
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
|
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
|
|
|
const d = new Date();
|
|
let day = d.getDate() + " " + d.getMonth();
|
|
|
|
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={styles.colorbg}>
|
|
|
|
<TwitchPopup show={twitch_online} />
|
|
|
|
{day == "06 11" &&
|
|
<div>
|
|
<h1 className={styles.officeBanner}>
|
|
HAPPY BIRTHDAY TRICK!
|
|
</h1>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
|
|
<script src="js/confetti.js"></script>
|
|
</div>
|
|
}
|
|
|
|
<article className={styles.pages}>
|
|
<section className={styles.top}>
|
|
<div></div>
|
|
|
|
<div className={styles.menu}>
|
|
<h4 style={{width: "100%", fontSize: "1.1em", color: "white", textAlign: "right", margin: "unset"}}>
|
|
📃 "{motto}"
|
|
</h4>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.contents}>
|
|
<div className={styles.info}>
|
|
<div className={styles.avatarField}>
|
|
<img src="/trickwow.png" className={styles.avatar} onClick={() => updateMeowCount()} id="clickMeow" />
|
|
<script src="js/meow.js"></script>
|
|
</div>
|
|
|
|
<div style={{display: "flex", flexDirection: "column"}}>
|
|
<h1 style={{fontSize: "3em", margin: "unset"}}>Hi, I'm Trick! 👋</h1>
|
|
<p>{about} 🦊</p>
|
|
</div>
|
|
|
|
<Pages />
|
|
</div>
|
|
|
|
<hr style={{margin: "3em 0"}}/>
|
|
|
|
<div className={styles.grid}>
|
|
<div className={styles.item + " " + styles.patreon}>
|
|
<h4 style={{textAlign: "center"}}>Become a Patron today and get cool things like:</h4>
|
|
<ul>
|
|
<li>Free monthly Icon commission</li>
|
|
<li>Free monthly Full Body commission</li>
|
|
<li>Free monthly Sketch commission</li>
|
|
<li>Access to exclusive Discord</li>
|
|
<li>First look at artworks 24 hours before anywhere else</li>
|
|
<li>20% discount on all art commissions</li>
|
|
<li>Custom Discord role</li>
|
|
</ul>
|
|
<Button href="https://patreon.com/trickthefox" target="_blank" rel="noreferrer" content="✨ Become a Patron ✨"/>
|
|
</div>
|
|
|
|
<div className={styles.item + " " + styles.art}>
|
|
<h2 style={{marginBottom: "1em"}}>🌟 Some of my artworks</h2>
|
|
|
|
<div className={styles.list}>
|
|
<img src="/2.jpeg" />
|
|
|
|
<img src="/3.jpeg" />
|
|
|
|
<img src="/1.jpeg" />
|
|
</div>
|
|
</div>
|
|
|
|
<a href="https://dubbelnull.com" target="_blank" rel="noreferrer" className={styles.item + " " + styles.credits}>
|
|
<h5 style={{textAlign: "center"}}>Website made by DubbelNull</h5>
|
|
</a>
|
|
|
|
<div className={styles.item + " " + styles.socials}>
|
|
<h4 style={{textAlign: "center", marginBottom: "1em"}}>#️⃣ My Socials #️⃣</h4>
|
|
<Socials/>
|
|
</div>
|
|
|
|
<div className={styles.item + " " + styles.tweets}>
|
|
<a class="twitter-timeline" data-height="600" data-dnt="true" data-theme="dark" href="https://twitter.com/Trick_the_fox?ref_src=twsrc%5Etfw">Tweets by Trick_the_fox</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
</div>
|
|
|
|
<div className={styles.item + " " + styles.twitch}>
|
|
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
|
|
</div>
|
|
|
|
<div className={styles.item}></div>
|
|
<div className={styles.item}></div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
|
|
</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()
|
|
}
|
|
};
|
|
}
|
|
|
|
async function updateMeowCount() {
|
|
const getMeow = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
|
method: "GET",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
|
}
|
|
});
|
|
|
|
let meowCount = await getMeow.json();
|
|
meowCount = parseInt(meowCount['records'][0]['fields']['count']);
|
|
meowCount++;
|
|
|
|
const updateMeow = {
|
|
"records": [
|
|
{
|
|
"id": "recR9RbScmJUPGQem",
|
|
"fields": {
|
|
"count": meowCount + ""
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Meows", {
|
|
method: "PATCH",
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
"Authorization": "Bearer " + process.env.AIRTABLE,
|
|
"accept": "application/json",
|
|
},
|
|
body: JSON.stringify(updateMeow)
|
|
});
|
|
} |