Albums colors

.eslintrc.js

@@ -60,6 +60,7 @@ module.exports = {
 				'dt-edited',
 				'p-summary',
 				'u-url',
+				'u-uid',
 				'p-name',
 				'p-author',
 				'h-card',

additional.d.ts

@@ -1,7 +1,15 @@
 import 'react'
 
 declare module 'react' {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    rel?: string
-  }
+	interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+		rel?: string
+	}
+}
+
+declare global {
+	namespace NodeJS {
+		interface Global {
+			prisma: any
+		}
+	}
 }

assets/css/tailwind.css

@@ -43,10 +43,6 @@
 	height: 8px;
 }
 
-::-webkit-scrollbar-track {
-	@apply bg-nfh-accent-primary;
-}
-
 ::-webkit-scrollbar-thumb {
 	@apply rounded-full bg-nfh-accent-primary transition-colors hover:bg-nfh-accent-primary;
 }
@@ -65,34 +61,34 @@ kbd {
 }
 
 @layer base {
-	[data-theme='light'] #u-photo {
+	[data-theme='light'] #hero-photo {
 		background-image: url('/images/others/me-alt.png');
 	}
-	[data-theme='hackernews'] #u-photo {
+	[data-theme='hackernews'] #hero-photo {
 		background-image: url('/images/others/me-alt.png');
 	}
-	[data-theme='latte'] #u-photo {
+	[data-theme='latte'] #hero-photo {
 		background-image: url('/images/others/me-alt.png');
 	}
-	[data-theme='rosépinedawn'] #u-photo {
+	[data-theme='rosépinedawn'] #hero-photo {
 		background-image: url('/images/others/me-alt.png');
 	}
-	[data-theme='dark'] #u-photo {
+	[data-theme='dark'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
-	[data-theme='dracula'] #u-photo {
+	[data-theme='dracula'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
-	[data-theme='mocha'] #u-photo {
+	[data-theme='mocha'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
-	[data-theme='rosépine'] #u-photo {
+	[data-theme='rosépine'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
-	[data-theme='wildberries'] #u-photo {
+	[data-theme='wildberries'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
-	[data-theme='nord'] #u-photo {
+	[data-theme='nord'] #hero-photo {
 		background-image: url('/images/others/me.png');
 	}
 

components/Category.tsx

@@ -1,7 +1,7 @@
 import { Taxonomy } from 'lib/interfaces'
 
 import { default as Link } from '@/components/Link'
-import kebabCase from '@/utils/kebabCase'
+import kebabCase from '@/utils/kebab-case'
 
 const Category = ({ text }: Taxonomy): JSX.Element => {
 	return (

components/Image.tsx

@@ -1,6 +1,5 @@
 import NextImage, { ImageProps } from 'next/image'
 
-// eslint-disable-next-line jsx-a11y/alt-text
 const CustomImage = ({ ...rest }: ImageProps): JSX.Element => <NextImage {...rest} />
 
 export default CustomImage

components/Tag.tsx

@@ -1,7 +1,7 @@
 import { Taxonomy } from 'lib/interfaces'
 
 import { default as Link } from '@/components/Link'
-import kebabCase from '@/utils/kebabCase'
+import kebabCase from '@/utils/kebab-case'
 
 const TagsColorDictionary = {
 	netlify: 'text-netlify',

components/UI/BorderEffect.tsx

@@ -1,5 +1,32 @@
-export default function BorderEffect(): JSX.Element {
-	return (
+export default function BorderEffect({ bgColor }: { bgColor?: string }): JSX.Element {
+	return bgColor ? (
+		<>
+			<div
+				style={{
+					background: bgColor,
+				}}
+				className="absolute bottom-0 left-0 h-0.5 w-full origin-left scale-x-0 duration-300 group-hover:scale-x-100"
+			></div>
+			<div
+				style={{
+					background: bgColor,
+				}}
+				className="absolute bottom-0 left-0 h-full w-0.5 origin-bottom scale-y-0 duration-300 group-hover:scale-y-100"
+			></div>
+			<div
+				style={{
+					background: bgColor,
+				}}
+				className="absolute top-0 left-0 h-0.5 w-full origin-right scale-x-0 duration-300 group-hover:scale-x-100"
+			></div>
+			<div
+				style={{
+					background: bgColor,
+				}}
+				className="absolute bottom-0 right-0 h-full w-0.5 origin-top scale-y-0 duration-300 group-hover:scale-y-100"
+			></div>
+		</>
+	) : (
 		<>
 			<div className="absolute bottom-0 left-0 h-0.5 w-full origin-left scale-x-0 bg-nfh-accent-primary duration-300 group-hover:scale-x-100"></div>
 			<div className="absolute bottom-0 left-0 h-full w-0.5 origin-bottom scale-y-0 bg-nfh-accent-primary duration-300 group-hover:scale-y-100"></div>

components/UI/Footer.tsx

@@ -44,8 +44,6 @@ export default function Footer(): JSX.Element {
 				<div className="grid grid-cols-1">
 					<NowPlaying />
 					<NowWatching />
-				</div>
-				<div className="mt-4">
 					<HCard />
 				</div>
 				<div className="text-center">

components/UI/Nav.tsx

@@ -22,7 +22,7 @@ import AudioToggle from '@/components/toggles/AudioToggle'
 import siteMetadata from '@/data/siteMetadata'
 import { useClickOutside } from '@/hooks/useClickOutside'
 import { useSFX } from '@/hooks/useSFX'
-import { getGravatar } from '@/utils/getGravatar'
+import { getGravatar } from '@/utils/get-gravatar'
 
 const Nav = ({ pickerOpen, setPickerOpen }) => {
 	const [firstName, setFirstName] = useState<string | null>(null)
@@ -105,7 +105,11 @@ const Nav = ({ pickerOpen, setPickerOpen }) => {
 					</button>
 				</div>
 				<div className="m-auto items-center justify-center">
-					<Link href="/" aria-label={siteMetadata.headerTitle}>
+					<Link
+						href={siteMetadata.siteUrl}
+						className="u-url u-uid"
+						aria-label={siteMetadata.headerTitle}
+					>
 						<News47ell className="m-auto hidden h-10 w-auto lg:block" />
 						<Slash className="m-auto block h-10 w-auto lg:hidden" />
 					</Link>

components/UI/SectionContainer.tsx

@@ -1,5 +1,17 @@
-const SectionContainer = ({ children }) => {
-	return (
+const SectionContainer = ({
+	className,
+	children,
+}: {
+	className?: string
+	children: React.ReactNode
+}) => {
+	return className ? (
+		<section
+			className={`container mx-auto mb-8 flex max-w-5xl flex-1 flex-col gap-y-5 px-3 print:h-screen print:items-center print:justify-center ${className}`}
+		>
+			{children}
+		</section>
+	) : (
 		<section className="container mx-auto mb-8 flex max-w-5xl flex-1 flex-col gap-y-5 px-3 print:h-screen print:items-center print:justify-center">
 			{children}
 		</section>

components/blog/FeaturedArt.tsx

@@ -1,4 +1,4 @@
-import playSparkline from '@/utils/playSparkline'
+import playSparkline from '@/utils/play-sparkline'
 
 interface IProps {
 	text: string

components/blog/ScrollTop.tsx

@@ -25,7 +25,7 @@ const ScrollTop = () => {
 			<button
 				aria-label="Scroll To Top"
 				onClick={handleScrollTop}
-				className="rounded bg-nfh-background-secondary fill-nfh-accent-primary p-2 transition-all hover:bg-nfh-background-secondary/50 hover:fill-nfh-accent-secondary"
+				className="rounded border border-nfh-accent-primary bg-nfh-background-secondary fill-nfh-accent-primary p-2 transition-all hover:border-nfh-accent-secondary hover:bg-nfh-background-secondary/50 hover:fill-nfh-accent-secondary"
 			>
 				<ArrowUpIcon className="h-5 w-5" />
 			</button>

components/hCard.tsx

@@ -1,41 +1,29 @@
 import { Turkiye } from '@/components/icons'
+import { default as Image } from '@/components/Image'
 import { default as Link } from '@/components/Link'
 import siteMetadata from '@/data/siteMetadata'
 
 export default function HCard(): JSX.Element {
-	if (typeof window === 'object') {
-		const photo = document.querySelector('.u-photo')
-		if (photo) {
-			window.addEventListener('deviceorientation', (e) => {
-				const tiltLR = e.gamma
-				//@ts-ignore
-				photo.style.transform = `rotate(${tiltLR * -1}deg)`
-			})
-		}
-	}
-
 	return (
-		<div className="h-card user-profile mb-4 flex items-center rounded-lg border border-nfh-accent-primary p-2 text-sm text-nfh-text-primary">
-			<div id="u-photo" className="u-photo h-16 w-16 rounded-full bg-cover" />
-			<div className="mx-3 flex flex-col items-start justify-center">
-				<Link
-					className="p-name u-email w-48 truncate font-medium"
-					href={`mailto:${siteMetadata.email}`}
-				>
+		<div className="h-card user-profile relative my-4 mx-auto flex items-center rounded-md border border-nfh-accent-primary p-2 text-sm">
+			<Image
+				className="u-photo h-16 w-16 rounded-md"
+				src="/images/others/me.png"
+				alt={siteMetadata.author}
+				height={64}
+				width={64}
+				priority={true}
+			/>
+			<div className="ml-3 flex flex-col items-start justify-center text-ellipsis">
+				<Link className="p-name u-email w-48 font-medium" href={`mailto:${siteMetadata.email}`}>
 					{siteMetadata.author}
 				</Link>
-				<p className="p-nickname w-48 truncate font-medium">{siteMetadata.nickname}</p>
-				<p className="w-48 truncate font-medium">
-					<Link
-						className="p-note u-url w-48 space-y-0 truncate font-medium"
-						href={siteMetadata.siteUrl}
-					>
-						{siteMetadata.position}
-					</Link>
+				<p className="p-nickname text-sm font-medium">{siteMetadata.nickname}</p>
+				<p className="p-note text-sm font-medium">{siteMetadata.position}</p>
+				<p className="p-country-name text-sm font-medium">
+					{siteMetadata.location.country} <Turkiye className="p-country-flag inline h-6 w-6" />
 				</p>
-				<p className="p-country-name w-48 truncate">{siteMetadata.location}</p>
 			</div>
-			<Turkiye className="p-country-flag m-auto h-10 w-10" />
 		</div>
 	)
 }

components/home/HeroCard.tsx

@@ -2,9 +2,10 @@ import { default as Link } from '@/components/Link'
 import { BorderEffect } from '@/components/UI'
 import { Divider } from '@/components/UI/'
 import siteMetadata from '@/data/siteMetadata'
-function HeroCard() {
+
+export default function HeroCard() {
 	if (typeof window === 'object') {
-		const photo = document.querySelector('.u-photo')
+		const photo = document.querySelector('.hero-photo')
 		if (photo) {
 			window.addEventListener('deviceorientation', (e) => {
 				const tiltLR = e.gamma
@@ -30,7 +31,7 @@ function HeroCard() {
 					</div>
 				</div>
 				<div className="my-16 flex items-center justify-center">
-					<div id="u-photo" className="u-photo grid h-40 w-40 rounded-full bg-cover" />
+					<div id="hero-photo" className="grid h-40 w-40 rounded-full bg-cover" />
 				</div>
 			</header>
 			<Divider>/</Divider>
@@ -51,4 +52,3 @@ function HeroCard() {
 		</div>
 	)
 }
-export default HeroCard

components/metrics/Lastfm/LastfmCard.tsx

@@ -3,9 +3,18 @@ import { default as Link } from '@/components/Link'
 import { useLastfm } from '@/hooks/useLastfm'
 
 export default function LastfmCard(): JSX.Element {
-	const { playCount, averagePlayCount, registeredDate, url, name, isLoading } = useLastfm()
+	const {
+		playCount,
+		artistsCount,
+		tracksCount,
+		averagePlayCount,
+		registeredDate,
+		url,
+		name,
+		isLoading,
+	} = useLastfm()
 	return (
-		<div className="relative flex w-full flex-col rounded bg-nfh-background-secondary p-4 text-nfh-text-primary">
+		<div className="relative flex w-full flex-col rounded bg-nfh-background-secondary bg-skulls-pattern bg-fixed bg-center p-4 text-nfh-text-primary">
 			{isLoading ? (
 				<div className="flex justify-center">
 					<LoaderIcon className="h-10 w-10 animate-spin fill-nfh-accent-primary" />
@@ -45,6 +54,22 @@ export default function LastfmCard(): JSX.Element {
 							<div className="truncate">{averagePlayCount} per day</div>
 						</div>
 					</div>
+
+					<div className="flex items-center justify-between space-x-4">
+						<span className="shrink-0">Artists Count</span>
+
+						<div className="flex items-center space-x-2">
+							<div className="truncate">{artistsCount} Artists</div>
+						</div>
+					</div>
+
+					<div className="flex items-center justify-between space-x-4">
+						<span className="shrink-0">Tracks Count</span>
+
+						<div className="flex items-center space-x-2">
+							<div className="truncate">{tracksCount} Tracks</div>
+						</div>
+					</div>
 				</div>
 			)}
 		</div>

components/metrics/Raindrop/BookmarkCard.tsx

@@ -1,7 +1,7 @@
 import { RaindropCard } from 'lib/types'
 
 import { default as Link } from '@/components/Link'
-import formatDate from '@/utils/formatDate'
+import { displayDate } from '@/utils/format-date'
 
 export default function BookmarkCard(bookmark: RaindropCard): JSX.Element {
 	const title = bookmark.title
@@ -16,7 +16,7 @@ export default function BookmarkCard(bookmark: RaindropCard): JSX.Element {
 					<Link href={bookmark.link}>
 						<li className="cursor-pointer text-base hover:text-nfh-text-secondary">{title}</li>
 						<time className="cursor-pointer text-xs text-nfh-text-secondary">
-							{formatDate(bookmark.lastUpdate)}
+							{displayDate(bookmark.lastUpdate)}
 						</time>
 						<p className="cursor-pointer text-xs text-nfh-text-secondary">
 							{bookmark.tags.join(', ')}