-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #348 from colonial-heritage/new-homepage
New homepage and navigation
- Loading branch information
Showing
26 changed files
with
761 additions
and
512 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import {Background} from '@colonial-collections/ui/branding'; | ||
import CommunityCard from '../communities/community-card'; | ||
import {getCommunities} from '@/lib/community/actions'; | ||
import ErrorMessage from '@/components/error-message'; | ||
import {SortBy} from '@/lib/community/definitions'; | ||
import {useLocale} from 'next-intl'; | ||
import {getTranslator} from 'next-intl/server'; | ||
import {CommunitiesLink, Description} from './labels'; | ||
import {SearchFieldHome} from './search-field'; | ||
|
||
export default async function Home() { | ||
const locale = useLocale(); | ||
const t = await getTranslator(locale, 'Home'); | ||
|
||
let communities; | ||
try { | ||
communities = await getCommunities({ | ||
sortBy: SortBy.CreatedAtDesc, | ||
limit: 4, | ||
}); | ||
} catch (err) { | ||
return <ErrorMessage error={t('error')} />; | ||
} | ||
|
||
return ( | ||
<div className=" flex flex-col md:flex-row grow gap-4 md:gap-16 w-full mx-auto"> | ||
<main className="w-full flex flex-col text-white"> | ||
<div className="-mt-8 w-full bg-consortiumBlue-800 flex flex-col justify-center text-consortiumGreen-400 items-center min-h-[60vh] relative"> | ||
<div className="flex justify-center w-full max-w-6xl absolute bottom-0 opacity-20"> | ||
<Background /> | ||
</div> | ||
<div className="w-full max-w-4xl px-4 sm:px-10 flex flex-col gap-10 relative pb-16"> | ||
<h1 className="text-3xl lg:text-5xl mt-4">{t('title')}</h1> | ||
<p className="max-w-2xl text-lg"> | ||
<Description /> | ||
</p> | ||
<div className="flex flex-col gap-2 max-w-3xl"> | ||
<label htmlFor="s1"> | ||
<strong>{t('searchLabel')}</strong> | ||
</label> | ||
<SearchFieldHome /> | ||
</div> | ||
</div> | ||
</div> | ||
<div className="w-full flex flex-col items-center py-20 gap-6 text-consortiumBlue-800"> | ||
<div className="w-full max-w-4xl px-4 sm:px-10 flex flex-col gap-10 relative pb-10"> | ||
<h2 className="text-5xl">{t('communitiesTitle')}</h2> | ||
<p className="max-w-xl">{t('communitiesDescription')}</p> | ||
<p className="max-w-xl"> | ||
<CommunitiesLink /> | ||
</p> | ||
</div> | ||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 h-full grow content-stretch gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 pt-10"> | ||
{communities.map(community => ( | ||
<CommunityCard | ||
key={community.id} | ||
community={community} | ||
locale={locale} | ||
/> | ||
))} | ||
</div> | ||
</div> | ||
</main> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
'use client'; | ||
|
||
import {useTranslations} from 'next-intl'; | ||
import Link from 'next-intl/link'; | ||
|
||
// In the current version of `next-intl` (3.0.0-beta.*), the server components do not fully support rich text. | ||
// `t.rich()` only supports strings as response, not React components. | ||
// This is fixed in the next version of `next-intl` (3.1.*), so we can remove this file when we upgrade. | ||
// Add the `t.rich()` calls directly in the components. | ||
|
||
export function Description() { | ||
const t = useTranslations('Home'); | ||
|
||
return t.rich('description', { | ||
em: text => <em>{text}</em>, | ||
}); | ||
} | ||
|
||
export function CommunitiesLink() { | ||
const t = useTranslations('Home'); | ||
|
||
return t.rich('communitiesLink', { | ||
link: text => <Link href="/communities">{text}</Link>, | ||
}); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
fa0f6c1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
colonial-collections-dataset-browser – ./apps/dataset-browser
datasets.colonialcollections.nl
colonial-collections-dataset-browser-colonial-heritage.vercel.app
colonial-collections-dataset-browser-git-main-colonial-heritage.vercel.app
colonial-collections-dataset-browser.vercel.app
fa0f6c1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
colonial-collections-researcher – ./apps/researcher
colonial-collections-researcher.vercel.app
colonial-collections-researcher-colonial-heritage.vercel.app
colonial-collections-researcher-git-main-colonial-heritage.vercel.app
app.colonialcollections.nl