Skip to content

Commit

Permalink
Merge pull request #210 from privacy-scaling-explorations/frontend-fi…
Browse files Browse the repository at this point in the history 
…xes-and-refactor

frontend updates and fixes
  • Loading branch information
@kalidiagne
kalidiagne authored Oct 21, 2024
2 parents 0e69a9d + fac0687 commit a1698ba
Show file tree
Hide file tree
Showing 453 changed files with 1,028 additions and 2,019 deletions.
164 changes: 16 additions & 148 deletions app/[lang]/projects/[id]/page.tsx
View file
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
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

0 comments on commit a1698ba

Please sign in to comment.