From 0ad477bc366e535bf1fff72af90aa4ecf54575f9 Mon Sep 17 00:00:00 2001 From: Ananth Venkatesh <46249765+quantum9Innovation@users.noreply.github.com> Date: Thu, 15 Feb 2024 19:45:46 +0000 Subject: [PATCH] Revamp author page --- package-lock.json | 36 +++++++++++++++-- package.json | 2 + src/app/author/[author]/AuthorDisplay.tsx | 48 +++++++++++++++++++---- 3 files changed, 74 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 290fbb7..2fa252a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,8 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", + "react-konami-code": "^2.3.0", + "react-snowfall": "^2.1.0", "react-toastify": "^10.0.4", "zustand": "^4.5.0" }, @@ -3866,7 +3868,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -4324,7 +4325,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -4383,6 +4383,11 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-icons": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", @@ -4394,8 +4399,31 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-konami-code": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-konami-code/-/react-konami-code-2.3.0.tgz", + "integrity": "sha512-9x90HnzstiMXs2kFS9cYsb5a+ojKEB/iC24uzNKCoE9znorLJwUcy98tjsiW2i5AHB05GuqIMTzV5RaDpVSThw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/react-snowfall": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.1.0.tgz", + "integrity": "sha512-5nYWmBTJi/rrRRTmE62QLhxSp3sfX9niPP1Ysrd4dkVZLr0fxHTkcqCLQx7BAkclCEq5MWZ7kgIHrqk5Ugq1PA==", + "dependencies": { + "react-fast-compare": "^3.2.2" + }, + "peerDependencies": { + "react": "^16.8 || 17.x || 18.x", + "react-dom": "^16.8 || 17.x || 18.x" + } }, "node_modules/react-toastify": { "version": "10.0.4", diff --git a/package.json b/package.json index 9e210a6..e7ddcd5 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.0.1", + "react-konami-code": "^2.3.0", + "react-snowfall": "^2.1.0", "react-toastify": "^10.0.4", "zustand": "^4.5.0" }, diff --git a/src/app/author/[author]/AuthorDisplay.tsx b/src/app/author/[author]/AuthorDisplay.tsx index d1206cf..1492bf0 100644 --- a/src/app/author/[author]/AuthorDisplay.tsx +++ b/src/app/author/[author]/AuthorDisplay.tsx @@ -1,11 +1,14 @@ +'use client' import Link from 'next/link' -import { Fragment } from 'react' +import { Fragment, useState } from 'react' import { affiliations, nationalities, authors } from '../../db/data' import { Zilla_Slab } from 'next/font/google' import { notFound } from 'next/navigation' import DocumentCard from '@/app/components/DocumentCard' import findDocumentsByAuthor from './findDocumentsByAuthor' import cardEffects from '@/app/styles/cardEffects.module.css' +import Konami from 'react-konami-code' +import Snowfall from 'react-snowfall' const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] }) @@ -17,17 +20,47 @@ export default function AuthorDisplay({ notFound() } + const [snowfallActivated, setSnowfallActivated] = useState(false) const { name, affiliation, image, nationality, formerAffiliations } = data const authorsDocuments = findDocumentsByAuthor(author) + const handleKonami = () => { + setSnowfallActivated(!snowfallActivated) + } const MainPosition = () => { const mainAffiliationShort = affiliation[0].split('@')[1] const mainPosition = affiliation[0].split('@')[0] const mainAffiliation = affiliations[mainAffiliationShort] const { website } = data + + const images: HTMLImageElement[] = [] + nationality.forEach(n => { + const { flag } = nationalities[n] + const image = new Image() + image.src = flag + images.push(image) + }) + return ( <> + + {snowfallActivated && + + } {mainPosition} at {mainAffiliation.name} @@ -40,17 +73,17 @@ export default function AuthorDisplay({ ) : null} -
+
{affiliation.map((a: string) => ( {affiliations[a.split('@')[1]].name} ))} @@ -133,8 +166,8 @@ export default function AuthorDisplay({ return ( <> -

Bio:

-

{bio}

+

Bio

+

{bio}

) } @@ -181,9 +214,8 @@ export default function AuthorDisplay({ {authorsDocuments.length > 0 && ( <>
-

- Published documents + Published documents {`(${authorsDocuments.length})`}

{authorsDocuments.map((d) => (