Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend updates and fixes #210

Merged
merged 3 commits into from
Oct 21, 2024
Merged

frontend updates and fixes #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a398e75
frontend updates and fixes
kalidiagne Oct 20, 2024
d427d1b
side navbar contents
kalidiagne Oct 21, 2024
fac0687
page heading update
kalidiagne Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
164 changes: 16 additions & 148 deletions app/[lang]/projects/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
import { Metadata, ResolvingMetadata } from "next"
import Link from "next/link"
import { projects } from "@/data/projects"
import { Metadata } from "next"

import { siteConfig } from "@/config/site"
import { ProjectInterface, ProjectStatus } from "@/lib/types"
import { AppContent } from "@/components/ui/app-content"
import { Markdown, createMarkdownElement } from "@/components/ui/markdown"
import { WikiCard } from "@/components/cards/wiki-card"
import { Divider } from "@/components/divider"
import { Icons } from "@/components/icons"
import DiscoverMoreProjects from "@/components/project/discover-more-projects"
import { ProjectTags } from "@/components/project/project-detail-tags"
import ProjectExtraLinks from "@/components/project/project-extra-links"
import { ProjectLinkIconMap } from "@/components/project/project-links"
import { WikiSideNavigation } from "@/components/wiki-side-navigation"
import { useTranslation } from "@/app/i18n"
import { getProjectById } from "@/lib/projectsUtils"
import { ProjectInterface } from "@/lib/types"
import { LocaleTypes } from "@/app/i18n/settings"

import { ProjectContent } from "../sections/ProjectContent"

type PageProps = {
params: { id: string; lang: string }
searchParams: { [key: string]: string | string[] | undefined }
Expand All @@ -27,21 +16,18 @@ export interface ProjectProps {
lang: LocaleTypes
}

export async function generateMetadata(
{ params }: PageProps,
parent: ResolvingMetadata
): Promise<Metadata> {
const currProject = projects.filter(
(project) => String(project.id) === params.id
)[0]

const imageUrl = currProject.image
? `/project-banners/${currProject.image}`
: "/og-image.png"
export async function generateMetadata({
params,
}: PageProps): Promise<Metadata> {
const { project, content } = getProjectById(params.id)
const imageUrl =
(project?.image ?? "")?.length > 0
? `/project-banners/${project?.image}`
: "/og-image.png"

return {
title: currProject.name,
description: currProject.tldr,
title: project?.name,
description: content?.tldr,
openGraph: {
images: [
{
Expand All @@ -55,125 +41,7 @@ export async function generateMetadata(
}

export default async function ProjectDetailPage({ params }: PageProps) {
const currProject: ProjectInterface = projects.filter(
(project) => String(project.id) === params.id
)[0]
const lang = params?.lang as LocaleTypes
const { t } = await useTranslation(lang, "common")
const { t: projectTranslation } = await useTranslation(
lang,
"projects/" + currProject.id
)

const hasSocialLinks = Object.keys(currProject?.links ?? {}).length > 0

const editPageURL = siteConfig?.editProjectPage(currProject.id, lang)

return (
<section className="bg-project-page-gradient">
<Divider.Section className="flex flex-col items-center">
<AppContent className="flex flex-col gap-12 py-16">
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[140px_1fr_290px] lg:items-start lg:gap-12">
<div className="sticky top-20">
<WikiSideNavigation
className="hidden md:block"
content={projectTranslation("description")}
/>
</div>

<div className="flex flex-col items-center justify-center w-full gap-5 ">
<div className="w-full ">
<div className="flex flex-col">
<div className="flex flex-col gap-6 text-left">
<Link
className="flex items-center gap-2 text-tuatara-950/80 hover:text-tuatara-950"
href={`/${lang}/projects`}
>
<Icons.arrowLeft />
<span className="font-sans text-base">
{t("projectLibrary")}
</span>
</Link>
<div className="flex flex-col gap-2">
<h1 className="py-2 text-3xl font-bold leading-[110%] md:text-5xl">
{currProject.name}
</h1>
<p className="py-2 leading-[150%] text-slate-600">
{projectTranslation("tldr")}
</p>
</div>
</div>
{hasSocialLinks && (
<div className="flex flex-wrap items-center justify-start gap-6 pt-4">
{Object?.entries(currProject.links ?? {})?.map(
([key, value]) => {
return (
<Link
key={key}
href={value ?? ""}
target="_blank"
rel="noreferrer"
className="group"
>
<div className="flex items-center gap-2">
{ProjectLinkIconMap?.[key]}
<p className="capitalize duration-200 text-slate-600 group-hover:text-orange">
{key}
</p>
</div>
</Link>
)
}
)}
</div>
)}
<div className="mt-10 hidden h-[1px] w-full bg-anakiwa-300 md:block"></div>
</div>

<div className="flex flex-col w-full gap-6 mt-6 md:mt-10">
<div className="flex flex-col w-full gap-4 text-base font-normal leading-relaxed">
<Markdown
components={{
p: ({ node, ...props }) =>
createMarkdownElement("p", {
className:
"text-tuatara-700 font-sans text-lg font-normal",
...props,
}),
}}
>
{projectTranslation("description")}
</Markdown>
<ProjectTags project={currProject} lang={lang} />
</div>
<ProjectExtraLinks project={currProject} lang={lang} />
</div>
</div>
</div>
<WikiCard
className="lg:sticky lg:top-20"
project={currProject}
lang={lang}
/>
<div className="lg:col-start-2">
<Link
href={editPageURL}
target="_blank"
rel="noreferrer"
passHref
className="inline-flex items-center self-start gap-2 px-4 py-2 duration-200 bg-white border-2 rounded-md group border-tuatara-950 hover:bg-tuatara-950 hover:text-white"
>
<Icons.edit />
<span className="text-sm duration-200 text-tuatara-950 group-hover:text-white">
{t("editThisPage")}
</span>
</Link>
</div>
</div>
</AppContent>

<DiscoverMoreProjects project={currProject} lang={lang} />
</Divider.Section>
</section>
)
return <ProjectContent lang={lang} id={params?.id} />
}
19 changes: 3 additions & 16 deletions app/[lang]/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Metadata } from "next"
import Image from "next/image"

import { Divider } from "@/components/divider"
import { PageHeader } from "@/components/page-header"
Expand All @@ -11,7 +10,7 @@ import { useTranslation } from "@/app/i18n"
export const metadata: Metadata = {
title: "Project Library",
description:
"PSE is home to many projects, from cryptography research to developer tools, protocols, and proof-of-concept applications.",
"PSE supports projects working on theoretical cryptography research, protocol development, open source tooling, experimental applications, and more.",
}

export default async function ProjectsPage({ params: { lang } }: any) {
Expand All @@ -22,26 +21,14 @@ export default async function ProjectsPage({ params: { lang } }: any) {
<PageHeader
title={t("title")}
subtitle={t("subtitle")}
image={
<div className="mx-auto lg:absolute lg:right-36">
<Image
width={280}
height={280}
className="mx-auto w-[160px] md:w-[180px] lg:ml-auto lg:w-[200px] xl:w-[260px]"
src="/icons/lens.webp"
alt="lens icon"
/>
</div>
}
showDivider={false}
>
<ProjectFiltersBar lang={lang} />
</PageHeader>

<div className="w-full bg-white pb-28">
<div className="container flex flex-col py-8 gap-14">
<div>
<ProjectResultBar lang={lang} />
</div>
<ProjectResultBar lang={lang} />
<ProjectList lang={lang} />
</div>
</div>
Expand Down
Loading