This commit is contained in:
skidoodle 2022-08-14 19:59:03 +02:00
parent 3a92d65900
commit 7dedfba1f9
31 changed files with 2971 additions and 1859 deletions

View file

@ -1,8 +1,21 @@
import { AppProps } from 'next/app'
import 'styles/globals.scss'
import Head from 'next/head'
const MyApp = ({ Component, pageProps }: AppProps) => {
return <Component {...pageProps} />
}
import { AppProps } from 'next/app'
export default MyApp
export default function({ Component, pageProps }: AppProps) {
return(
<>
<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>
<Component {...pageProps} />
</>
)
}

View file

@ -1,24 +0,0 @@
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => {
return (
<>
<Html lang='zxx'>
<Head>
<link rel='preconnect' href='https://vitals.vercel-insights.com' />
<link rel='preconnect' href='https://ws.audioscrobbler.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>
<Main />
<NextScript />
</Html>
</>
)
}
export default Document

41
pages/_error.tsx Normal file
View file

@ -0,0 +1,41 @@
import { GetServerSideProps } from 'next'
import FadeIn from 'react-fade-in'
type ErrorPage = {
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 const getServerSideProps: GetServerSideProps = async(props) => {
const { res, err }: any = props
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]
return {
props: {
statusCode,
message
}
}
}

View file

@ -41,4 +41,4 @@ export default async function(req: NextApiRequest, res: NextApiResponse) {
}
res.setHeader('Cache-Control', 'public, s-maxage=10, stale-while-revalidate=59');
res.json({ object: objects, size: Number(size.toFixed(2)) })
}
}

26
pages/api/spotify.ts Normal file
View file

@ -0,0 +1,26 @@
import { NextApiRequest, NextApiResponse } from 'next'
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 { track } = response
const { artist, name, url, image } = track[0]
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'],
}
})
}
return res.status(200).json({ nowplaying })
}

View file

@ -1,52 +1,62 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
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 Body from 'components/Body'
import Icon from 'components/Icon'
import IconLayout from 'components/IconLayout'
import MainLayout from 'components/MainLayout'
import Spotify from 'components/Spotify'
import Weather from 'components/Weather'
import { FaSteam, FaGithub, FaEnvelope } from 'react-icons/fa'
import { RiInstagramFill } from 'react-icons/ri'
import { SiDiscord } from 'react-icons/si'
import dynamic from 'next/dynamic'
const Time = dynamic(() => import('components/Time'), {
ssr: false,
})
const Home = ({data}: any) => {
import { socials } from 'components/data/socials'
import { Icon } from 'components/Icon'
import profilePic from '../public/profile.webp'
import { Toaster } from 'react-hot-toast'
import { FaSpotify } from 'react-icons/fa'
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 (
<>
<Head>
<title>albert</title>
</Head>
<Body>
<FadeIn>
<MainLayout />
<IconLayout>
<Icon icon={<FaGithub />} reference={'https://github.com/skidoodle'} copy={false} />
<Icon icon={<FaSteam />} reference={'https://steamcommunity.com/id/_albert'} copy={false} />
<Icon icon={<FaEnvelope />} reference={'contact@albert.lol'} copy={true} />
<Icon icon={<RiInstagramFill />} reference={'https://instagram.com/albertadam_'} copy={false} />
<Icon icon={<SiDiscord />} reference={'albert#8838'} copy={true} />
</IconLayout>
<Time />
<Weather data={data} />
<Spotify />
</FadeIn>
</Body>
<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-32 md:mt-56'>
<Image src={profilePic} className="rounded-full text-center" height={150} width={150}/>
<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>
<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]' />&nbsp;
<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>
<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>\
</>
)
}
export const getServerSideProps: GetServerSideProps = async () => {
const response = await fetch('https://api.openweathermap.org/data/2.5/weather?lat=47.51&lon=19.04&appid=1b3c10c18e894eaf1fd63eedde53fa54&units=metric')
const data = await response.json()
return {
props: { data }
}
}
export default Home
}