Mid
/
trickthefox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

using airtable for index and gallery now

Browse Source
main
Midnight 3 years ago
parent e451cf8219
commit e6d9951188
4 changed files with 79 additions and 51 deletions
Show Stats Download Patch File Download Diff File

3
next.config.js
Unescape View File

@ -8,4 +8,7 @@ module.exports = {
) )
return config return config
}, },
env: {
AIRTABLE: "keygkEz5Bp89HsIJt",
},
} }

92
pages/gallery.js
Unescape View File

@ -2,58 +2,64 @@ import Head from 'next/head'
import styles from '../styles/Gallery.module.css' import styles from '../styles/Gallery.module.css'
import Header from '../components/header'; import Header from '../components/header';
import Footer from '../components/footer'; import Footer from '../components/footer';
// import { google } from 'googleapis';
// import fs from 'fs';
// import readline from 'readline';
export default function Gallery() { export default function Gallery({ response }) {
return ( let images = [];
<div className="page"> for(const key in response) {
<Head> let item = response[key];
<title>Trick - Gallery</title> images.push(item['fields']);
</Head> }
<Header /> return (
<div className="page">
<Head>
<title>Trick - Gallery</title>
</Head>
<div className="container"> <Header />
<article className="content">
<section className="card"> <div className="container">
<h1 className="h-unset">Gallery</h1> <article className="content">
<p>Coming Soon...</p>
</section>
</article> <section className="card">
</div> <h1 className="h-unset">Gallery</h1>
<Footer />
</div>
)
}
// export async function getServerSideProps() {
// const auth = new google.auth.GoogleAuth({
// keyFile: process.env.GOOGLE_APPLICATION_CREDENTIALS,
// scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly']
// });
// const sheets = google.sheets({ version: 'v4', auth }); <div className={styles.gallery}>
{images.map((image) => (
<div>
<img src={image.link}></img>
<h4 style={{ textAlign: "center", margin: "unset" }}>{image.name}</h4>
</div>
))}
</div>
// const { id } = 2; </section>
// const range = `Gallery!A:${id}:B${id}`; </article>
</div>
// const response = sheets.spreadsheets.values.get({ <Footer />
// spreadsheetId: "13V7PXSJ6FSPZakBbYEpi1495T3nWxJ7Loi4EWwOZ7lE", </div>
// range, )
// }); }
// const data = await response.json(); async function getGallery() {
const req = await fetch("https://api.airtable.com/v0/appQnOyKBnBVQXLUM/Gallery", {
method: "GET",
headers: {
'Content-Type': 'application/json',
"Authorization": "Bearer " + process.env.AIRTABLE,
}
});
const data = await req.json();
return data['records'];
}
// return { export async function getServerSideProps() {
// props: { return {
// response: data props: {
// } response: await getGallery()
// } }
// } }
}

30
pages/index.js
Unescape View File

@ -59,6 +59,25 @@ export default function Index({ motto, twitch_online }) {
) )
} }
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() { 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", { const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
method: "POST", method: "POST",
@ -89,13 +108,8 @@ async function getIsUserLive() {
return false; return false;
} }
function RandomMotto() { async function RandomMotto() {
const Mottos = [ const Mottos = await getMottos();
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
"Just have fun!",
"Live and let go",
"Keep calm and carry on"
];
const randomNumber = Math.floor(Math.random() * Mottos.length); const randomNumber = Math.floor(Math.random() * Mottos.length);
return Mottos[randomNumber]; return Mottos[randomNumber];
} }
@ -103,7 +117,7 @@ function RandomMotto() {
export async function getServerSideProps() { export async function getServerSideProps() {
return { return {
props: { props: {
motto: RandomMotto(), motto: await RandomMotto(),
twitch_online: await getIsUserLive() twitch_online: await getIsUserLive()
} }
}; };

5
styles/Gallery.module.css
Unescape View File

@ -0,0 +1,5 @@
.gallery {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1em;
}
Write Preview
Loading…
Cancel
Save