diff --git a/package.json b/package.json
index 3deaa3d..1cb905b 100644
--- a/package.json
+++ b/package.json
@@ -6,20 +6,21 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "next lint",
- "lint:fix": "next lint --fix",
+ "lint": "eslint .",
+ "lint:fix": "eslint . --fix",
"format": "prettier --cache --write .",
"type-check": "tsc --noEmit",
"style-check": "prettier . --check",
"setup-checkers": "husky"
},
"dependencies": {
+ "@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
- "@next/third-parties": "^14.2.4",
+ "@next/third-parties": "^16.1.6",
"date-fns": "^3.2.0",
"lodash": "^4.17.23",
- "next": "^14.2.35",
+ "next": "^16.1.5",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.0.1",
diff --git a/src/app/EmotionRegistry.tsx b/src/app/EmotionRegistry.tsx
new file mode 100644
index 0000000..4086f01
--- /dev/null
+++ b/src/app/EmotionRegistry.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import React, { useState } from 'react'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import { useServerInsertedHTML } from 'next/navigation'
+
+type Props = {
+ children: React.ReactNode
+}
+
+export default function EmotionRegistry({ children }: Props) {
+ const [cache] = useState(() => {
+ const cache = createCache({ key: 'css', prepend: true })
+ cache.compat = true
+ return cache
+ })
+
+ useServerInsertedHTML(() => {
+ const entries = Object.entries(cache.inserted)
+ const names = entries.map(([name]) => name).join(' ')
+ let styles = ''
+
+ for (const [, value] of entries) {
+ if (typeof value === 'string') {
+ styles += value
+ }
+ }
+
+ return
+ })
+
+ return {children}
+}
diff --git a/src/app/homepage/MediaSection.tsx b/src/app/homepage/MediaSection.tsx
index a166ffa..51fd73f 100644
--- a/src/app/homepage/MediaSection.tsx
+++ b/src/app/homepage/MediaSection.tsx
@@ -2,6 +2,7 @@
import { FontSize, FontWeight } from '@/app/theme'
import styled from '@emotion/styled'
import React from 'react'
+import Image from 'next/image'
import { Section, SectionHeader, FullWidthContainer } from './Styles'
import { VIDEOS } from '@/data/videos'
import { LinkButton } from '@/components/LinkButton'
@@ -28,6 +29,8 @@ const VideoContainer = styled.div`
min-width: 300px;
aspect-ratio: 16 / 9;
margin-bottom: 8px;
+ position: relative;
+ overflow: hidden;
`
const VideoTitle = styled.h3`
@@ -62,7 +65,14 @@ export const MediaSection = () => {
) : (
-
+
)}
diff --git a/src/app/homepage/ResearchThemesSection.tsx b/src/app/homepage/ResearchThemesSection.tsx
index e70fef7..3cb16ab 100644
--- a/src/app/homepage/ResearchThemesSection.tsx
+++ b/src/app/homepage/ResearchThemesSection.tsx
@@ -1,4 +1,5 @@
'use client'
+import React, { useEffect, useState } from 'react'
import { Color, FontVariant } from '@/app/theme'
import { Member } from '@/data/members'
import { PUBLICATIONS, Publication, ResearchTopics, type ResearchTopicType } from '@/data/publications'
@@ -60,9 +61,7 @@ const GatherStatsByResearchTopic = () => {
)
const filteredAuthors = topicAuthors.filter(entry => entry instanceof Object && entry.isAlumni !== true) as Member[]
- const shuffledAuthors = shuffle(filteredAuthors)
-
- statsByResearchTopic[researchTopicKey] = { numPublications, authors: shuffledAuthors }
+ statsByResearchTopic[researchTopicKey] = { numPublications, authors: filteredAuthors }
})
return statsByResearchTopic
}
@@ -71,13 +70,25 @@ const RESEARCH_TOPICS = Object.entries(GatherStatsByResearchTopic()).sort(
([, a], [, b]) => b.numPublications - a.numPublications
)
const NUM_VISIBLE = 5
+type ResearchTopicsEntry = (typeof RESEARCH_TOPICS)[number]
export const ResearchThemesSection = () => {
+ const [displayTopics, setDisplayTopics] = useState(RESEARCH_TOPICS)
+
+ useEffect(() => {
+ setDisplayTopics(
+ RESEARCH_TOPICS.map(([topic, stats]) => [
+ topic,
+ { ...stats, authors: shuffle(stats.authors) },
+ ]) as ResearchTopicsEntry[]
+ )
+ }, [])
+
return (
- {RESEARCH_TOPICS.map(([topic, stats]) => {
+ {displayTopics.map(([topic, stats]) => {
return (
-
-
- {children}
-
+
+
+
+ {children}
+
+