mirror of
https://github.com/skidoodle/albert.lol.git
synced 2025-02-15 06:09:15 +01:00
Prettier and a new readme
This commit is contained in:
skidoodle
parent
146b35d1d3
commit
f21d8f8086
16 changed files with 352 additions and 2594 deletions
|
|
@ -1,15 +1,15 @@
|
|||
import 'styles/globals.scss'
|
||||
import Head from 'next/head'
|
||||
import "styles/globals.scss";
|
||||
import Head from "next/head";
|
||||
|
||||
import { AppProps } from 'next/app'
|
||||
import { AppProps } from "next/app";
|
||||
|
||||
export default function({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>albert</title>
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default function ({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>albert</title>
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import Document, { Html, Head, Main, NextScript } from 'next/document'
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
class AppDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html lang='en'>
|
||||
<Head>
|
||||
<link rel='preconnect' href='https://vitals.vercel-insights.com' />
|
||||
<meta name='title' content='albert' />
|
||||
<meta name='og:title' content='albert' />
|
||||
<meta name='description' content='system administrator' />
|
||||
<meta name='og:description' content='system administrator' />
|
||||
<meta name='theme-color' content='#000000' />
|
||||
<meta property='og:image' content='/favicon.ico' />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<link rel="preconnect" href="https://vitals.vercel-insights.com" />
|
||||
<meta name="title" content="albert" />
|
||||
<meta name="og:title" content="albert" />
|
||||
<meta name="description" content="system administrator" />
|
||||
<meta name="og:description" content="system administrator" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta property="og:image" content="/favicon.ico" />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AppDocument
|
||||
export default AppDocument;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,43 @@
|
|||
import { GetServerSideProps } from 'next'
|
||||
import FadeIn from 'react-fade-in'
|
||||
import { GetServerSideProps } from "next";
|
||||
import FadeIn from "react-fade-in";
|
||||
type ErrorPage = {
|
||||
statusCode: number,
|
||||
message: string
|
||||
statusCode: number;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export default function ({ statusCode, message }: ErrorPage) {
|
||||
return (
|
||||
<FadeIn>
|
||||
<div className="flex flex-col justify-center items-center h-[90vh]">
|
||||
<div>
|
||||
<h1 className="font-semibold text-2xl inline-block mr-[1.7rem] pr-[1.5rem] border-r-[1px] border-white">
|
||||
{statusCode}
|
||||
</h1>
|
||||
<div className="inline-block text-left">
|
||||
<h2 className="text-lg font-extralight">{message}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
||||
export default function({ statusCode, message }: ErrorPage) {
|
||||
return (
|
||||
<FadeIn>
|
||||
<div className='flex flex-col justify-center items-center h-[90vh]'>
|
||||
<div>
|
||||
<h1 className='font-semibold text-2xl inline-block mr-[1.7rem] pr-[1.5rem] border-r-[1px] border-white'>{ statusCode }</h1>
|
||||
<div className='inline-block text-left'>
|
||||
<h2 className='text-lg font-extralight'>{ message }</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
)
|
||||
}
|
||||
export const getServerSideProps: GetServerSideProps = async (props) => {
|
||||
const { res, err }: any = props;
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async(props) => {
|
||||
const { res, err }: any = props
|
||||
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
|
||||
|
||||
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
|
||||
let entries: any = {
|
||||
404: "Az oldal nem található",
|
||||
400: "Érvénytelen kérelem",
|
||||
500: "Szerveroldali hiba",
|
||||
};
|
||||
const message = entries[statusCode];
|
||||
|
||||
let entries: any = {
|
||||
404: 'Az oldal nem található',
|
||||
400: 'Érvénytelen kérelem',
|
||||
500: 'Szerveroldali hiba'
|
||||
}
|
||||
const message = entries[statusCode]
|
||||
|
||||
return {
|
||||
props: {
|
||||
statusCode,
|
||||
message
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
props: {
|
||||
statusCode,
|
||||
message,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,44 +1,47 @@
|
|||
import { NextApiRequest, NextApiResponse } from 'next'
|
||||
import { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
import aws from 'aws-sdk'
|
||||
import aws from "aws-sdk";
|
||||
|
||||
const { BUCKET, ACCESS_KEY, SECRET_KEY, ENDPOINT, REGION } = process.env
|
||||
const { BUCKET, ACCESS_KEY, SECRET_KEY, ENDPOINT, REGION } = process.env;
|
||||
|
||||
export default async function(req: NextApiRequest, res: NextApiResponse) {
|
||||
aws.config.s3 = ({
|
||||
accessKeyId: ACCESS_KEY,
|
||||
secretAccessKey: SECRET_KEY,
|
||||
region: REGION,
|
||||
endpoint: ENDPOINT,
|
||||
signatureVersion: 'v4'
|
||||
})
|
||||
export default async function (req: NextApiRequest, res: NextApiResponse) {
|
||||
aws.config.s3 = {
|
||||
accessKeyId: ACCESS_KEY,
|
||||
secretAccessKey: SECRET_KEY,
|
||||
region: REGION,
|
||||
endpoint: ENDPOINT,
|
||||
signatureVersion: "v4",
|
||||
};
|
||||
|
||||
let isTruncated: boolean | undefined = true
|
||||
let startAfter
|
||||
let isTruncated: boolean | undefined = true;
|
||||
let startAfter;
|
||||
|
||||
let objects = 0
|
||||
let size = 0
|
||||
let objects = 0;
|
||||
let size = 0;
|
||||
|
||||
const s3 = new aws.S3()
|
||||
const s3 = new aws.S3();
|
||||
|
||||
while(isTruncated) {
|
||||
let params: any = { Bucket: BUCKET }
|
||||
|
||||
if(startAfter) {
|
||||
params.StartAfter = startAfter
|
||||
}
|
||||
const data = await s3.listObjectsV2(params).promise()
|
||||
while (isTruncated) {
|
||||
let params: any = { Bucket: BUCKET };
|
||||
|
||||
data.Contents?.forEach((object: any) => {
|
||||
objects++
|
||||
size += object.Size! / 1024 / 1024 / 1024
|
||||
})
|
||||
|
||||
isTruncated = data.IsTruncated
|
||||
if (isTruncated) {
|
||||
startAfter = data.Contents!.slice(-1)[0].Key;
|
||||
}
|
||||
if (startAfter) {
|
||||
params.StartAfter = startAfter;
|
||||
}
|
||||
res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');
|
||||
res.json({ object: objects, size: Number(size.toFixed(2)) })
|
||||
}
|
||||
const data = await s3.listObjectsV2(params).promise();
|
||||
|
||||
data.Contents?.forEach((object: any) => {
|
||||
objects++;
|
||||
size += object.Size! / 1024 / 1024 / 1024;
|
||||
});
|
||||
|
||||
isTruncated = data.IsTruncated;
|
||||
if (isTruncated) {
|
||||
startAfter = data.Contents!.slice(-1)[0].Key;
|
||||
}
|
||||
}
|
||||
res.setHeader(
|
||||
"Cache-Control",
|
||||
"public, s-maxage=10, stale-while-revalidate=59"
|
||||
);
|
||||
res.json({ object: objects, size: Number(size.toFixed(2)) });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
import { NextApiRequest, NextApiResponse } from 'next'
|
||||
import { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
export default async function(req: NextApiRequest, res: NextApiResponse) {
|
||||
const { LASTFM_USERNAME, LASTFM_API } = process.env
|
||||
export default async function (req: NextApiRequest, res: NextApiResponse) {
|
||||
const { LASTFM_USERNAME, LASTFM_API } = process.env;
|
||||
|
||||
const { recenttracks: response } = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${LASTFM_USERNAME}&api_key=${LASTFM_API}&format=json&limit=1`).then((res) => res.json())
|
||||
const { recenttracks: response } = await fetch(
|
||||
`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${LASTFM_USERNAME}&api_key=${LASTFM_API}&format=json&limit=1`
|
||||
).then((res) => res.json());
|
||||
|
||||
const { track } = response
|
||||
const { artist, name, url, image } = track[0]
|
||||
const { track } = response;
|
||||
const { artist, name, url, image } = track[0];
|
||||
|
||||
let nowplaying = Boolean(track[0]['@attr']?.nowplaying)
|
||||
let nowplaying = Boolean(track[0]["@attr"]?.nowplaying);
|
||||
|
||||
if(nowplaying) {
|
||||
return res.status(200).json({
|
||||
nowplaying,
|
||||
song: {
|
||||
artist: artist['#text'],
|
||||
title: name,
|
||||
url: url,
|
||||
image: image[2]['#text'],
|
||||
}
|
||||
})
|
||||
}
|
||||
if (nowplaying) {
|
||||
return res.status(200).json({
|
||||
nowplaying,
|
||||
song: {
|
||||
artist: artist["#text"],
|
||||
title: name,
|
||||
url: url,
|
||||
image: image[2]["#text"],
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return res.status(200).json({ nowplaying })
|
||||
}
|
||||
return res.status(200).json({ nowplaying });
|
||||
}
|
||||
|
|
|
|||
125
pages/index.tsx
125
pages/index.tsx
|
|
@ -1,66 +1,81 @@
|
|||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import useSWR from 'swr'
|
||||
import FadeIn from 'react-fade-in'
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import useSWR from "swr";
|
||||
import FadeIn from "react-fade-in";
|
||||
|
||||
import { socials } from 'components/data/socials'
|
||||
import { Icon } from 'components/Icon'
|
||||
import { Toaster } from 'react-hot-toast'
|
||||
import { FaSpotify } from 'react-icons/fa'
|
||||
import { socials } from "components/data/socials";
|
||||
import { Icon } from "components/Icon";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { FaSpotify } from "react-icons/fa";
|
||||
|
||||
import profilePic from '../public/profile.webp'
|
||||
import profilePic from "../public/profile.webp";
|
||||
|
||||
const fetcher = (url: RequestInfo) => fetch(url).then(r => r.json())
|
||||
const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
|
||||
|
||||
export default function() {
|
||||
const { data: spotify } = useSWR('/api/spotify', fetcher, { refreshInterval: 1000 })
|
||||
if(!spotify) return
|
||||
return (
|
||||
<FadeIn>
|
||||
<div className='px-8 w-11/12 m-auto rounded-lg max-w-4xl'>
|
||||
<div className='flex flex-col justify-center items-center mt-40 md:mt-48 lg:mt-64'>
|
||||
<Image src={profilePic} alt='Profile Picture' className="rounded-full text-center" height={150} width={150}/>
|
||||
export default function () {
|
||||
const { data: spotify } = useSWR("/api/spotify", fetcher, {
|
||||
refreshInterval: 1000,
|
||||
});
|
||||
if (!spotify) return;
|
||||
return (
|
||||
<FadeIn>
|
||||
<div className="px-8 w-11/12 m-auto rounded-lg max-w-4xl">
|
||||
<div className="flex flex-col justify-center items-center mt-40 md:mt-48 lg:mt-64">
|
||||
<Image
|
||||
src={profilePic}
|
||||
alt="Profile Picture"
|
||||
className="rounded-full text-center"
|
||||
height={150}
|
||||
width={150}
|
||||
/>
|
||||
|
||||
<h1 className='text-4xl font-bold mt-1'>albert</h1>
|
||||
<h1 className="text-4xl font-bold mt-1">albert</h1>
|
||||
|
||||
<p className='text-[#9ca3af] text-xl flex flex-wrap items-center justify-center whitespace-pre-wrap'>
|
||||
{ Math.floor((new Date().getTime() - new Date('2004-07-22').getTime()) / (1000 * 60 * 60 * 24 * 365.25)) }
|
||||
yrs old <b className='font-semibold'>system administrator</b> and student from Hungary
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-[#9ca3af] text-xl flex flex-wrap items-center justify-center whitespace-pre-wrap">
|
||||
{Math.floor(
|
||||
(new Date().getTime() - new Date("2004-07-22").getTime()) /
|
||||
(1000 * 60 * 60 * 24 * 365.25)
|
||||
)}
|
||||
yrs old <b className="font-semibold">system administrator</b> and
|
||||
student from Hungary
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr className='border-t-[#727277] w-4/5 md:w-2/5 m-auto mt-5 md:mt-8'/>
|
||||
<hr className="border-t-[#727277] w-4/5 md:w-2/5 m-auto mt-5 md:mt-8" />
|
||||
|
||||
<div className='mt-3 flex justify-center items-center'>
|
||||
<FaSpotify className='text-[#32a866]' />
|
||||
<div className="mt-3 flex justify-center items-center">
|
||||
<FaSpotify className="text-[#32a866]" />
|
||||
|
||||
<p className="font-semibold">
|
||||
Listening to
|
||||
{spotify.song ? (
|
||||
<Link href={`${spotify.song.url}`}>
|
||||
<a target="_blank" className="text-[#32a866]">
|
||||
{" "}
|
||||
{spotify.song.title || "nothing"}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<a className="text-[#32a866]"> nothing</a>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className='font-semibold'>Listening to
|
||||
{
|
||||
spotify.song
|
||||
? <Link href={`${spotify.song.url}`}>
|
||||
<a target='_blank' className='text-[#32a866]'> { spotify.song.title || 'nothing' }</a>
|
||||
</Link>
|
||||
<div className="flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto">
|
||||
{socials.map((social) => (
|
||||
<Icon
|
||||
key={social.id}
|
||||
reference={social.ref}
|
||||
copyValue={social.copyValue}
|
||||
>
|
||||
{React.createElement(social.icon)}
|
||||
</Icon>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
: <a className='text-[#32a866]'> nothing</a>
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between items-center text-3xl mt-11 md:mt-16 max-w-sm m-auto'>
|
||||
{ socials.map(social => (
|
||||
<Icon
|
||||
key={ social.id }
|
||||
reference={ social.ref }
|
||||
copyValue={ social.copyValue }
|
||||
>
|
||||
{ React.createElement(social.icon) }
|
||||
</Icon>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Toaster />
|
||||
</FadeIn>
|
||||
)
|
||||
<Toaster />
|
||||
</FadeIn>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue