Revamp author page
This commit is contained in:
Ananth Venkatesh
parent
88cb531eb0
commit
0ad477bc36
3 changed files with 74 additions and 12 deletions
36
package-lock.json
generated
36
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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<boolean>(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 (
|
||||
<>
|
||||
<Konami action={handleKonami} />
|
||||
{snowfallActivated &&
|
||||
<Snowfall
|
||||
snowflakeCount={500}
|
||||
color="white"
|
||||
images={images}
|
||||
radius={[20, 60]}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: -1,
|
||||
pointerEvents: 'none',
|
||||
height: `${document.documentElement.scrollHeight}px`,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
<span>{mainPosition} at </span>
|
||||
<Link href={`/affiliation/${mainAffiliationShort}`}>
|
||||
{mainAffiliation.name}
|
||||
|
|
@ -40,17 +73,17 @@ export default function AuthorDisplay({
|
|||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
<div className='my-4 max-h-12 flex flex-wrap gap-2'>
|
||||
<div className='my-4 max-h-16 flex flex-wrap gap-2'>
|
||||
{affiliation.map((a: string) => (
|
||||
<Link
|
||||
key={a}
|
||||
href={`/affiliation/${a.split('@')[1]}`}
|
||||
className={cardEffects['card-small']}
|
||||
className={`${cardEffects['card-small']} rounded-md`}
|
||||
>
|
||||
<img
|
||||
src={affiliations[a.split('@')[1]].image}
|
||||
alt={affiliations[a.split('@')[1]].name}
|
||||
className='h-12 rounded-md'
|
||||
className='h-16 rounded-md p-2'
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
|
|
@ -133,8 +166,8 @@ export default function AuthorDisplay({
|
|||
|
||||
return (
|
||||
<>
|
||||
<h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>Bio:</h1>
|
||||
<p>{bio}</p>
|
||||
<h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>Bio</h1>
|
||||
<p className='mb-2'>{bio}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -181,9 +214,8 @@ export default function AuthorDisplay({
|
|||
{authorsDocuments.length > 0 && (
|
||||
<>
|
||||
<hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
|
||||
<br />
|
||||
<h1 className='text-3xl md:my-6 my-4 font-serif'>
|
||||
Published documents
|
||||
Published documents {`(${authorsDocuments.length})`}
|
||||
</h1>
|
||||
{authorsDocuments.map((d) => (
|
||||
<Fragment key={d.slug}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue