Skip to content

Commit

Permalink
Merge pull request #14 from Hkaar/project-page
Browse files Browse the repository at this point in the history 
Updated stuff
  • Loading branch information
@Hkaar
Hkaar authored Nov 6, 2024
2 parents 46b73af + 4c961e3 commit 80368dc
Show file tree
Hide file tree
Showing 40 changed files with 511 additions and 334 deletions.
3 changes: 1 addition & 2 deletions .env.example
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# APP CONFIG
APP_VERSION="1.0"
APP_HOST="localhost:3000"

# SANITY CONFIG
SANITY_PROJECT_TITLE = "";
SANITY_PROJECT_ID = "";
SANITY_API_TOKEN = "";
Expand Down
3 changes: 3 additions & 0 deletions __tests__/E2E/navigate.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ test("Should navigate to the projects page", async ({ page }) => {
await page.goto("/");

await page.click("text=Projects");
await page.waitForURL("**/projects");

await expect(page).toHaveURL("/projects");
await expect(page.locator("h1")).toContainText("My Projects");
Expand All @@ -13,6 +14,7 @@ test("Should navigate to blog page", async ({ page }) => {
await page.goto("/");

await page.click("text=Blog");
await page.waitForURL("**/blog");

await expect(page).toHaveURL("/blog");
await expect(page.locator("h1")).toContainText("My Blog");
Expand All @@ -22,6 +24,7 @@ test("Should navigate to contact page", async ({ page }) => {
await page.goto("/");

await page.click("text=Contact");
await page.waitForURL("**/contact");

await expect(page).toHaveURL("/contact");
await expect(page.locator("h3")).toContainText(
Expand Down
274 changes: 99 additions & 175 deletions app/(dynamic)/projects/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import Table from "@/components/Table";
import TableRow from "@/components/Table/TableRow";
import TableCell from "@/components/Table/TableCell";
import ProjectHeader from "@/components/ProjectHeader";
import ProgressBar from "@/components/ProgressBar";
import ProgressItem from "@/components/ProgressBar/ProgressItem";

async function getProject(slug: string) {
const response: Project = await sanityClient.fetch(
`*[_type == "project" && slug.current == "${slug}"][0] {
title,
slug,
body,
summary,
repo,
preview,
publishedAt,
Expand All @@ -28,6 +28,18 @@ async function getProject(slug: string) {
"images": images[].asset->url,
"categories": categories[]->title,
"icons": categories[]->icon->icon,
"languages": languages[]{
"name": language->name,
"color": language->color,
percentage
},
"platforms": platforms[]{
"name": platform->name,
"icon": platform->icon->icon,
"status": status->name,
"statusIcon": status->icon->icon,
"statusColor": status->color
}
}`,
);

Expand All @@ -45,6 +57,8 @@ export default async function ProjectPage(props: ProjectPageProps) {
const params = await props.params;
const project = await getProject(params.slug);

const host = process.env.APP_HOST || "localhost:3000";

if (!project) {
notFound();
}
Expand All @@ -53,15 +67,15 @@ export default async function ProjectPage(props: ProjectPageProps) {
<>
<div className="container py-4 space-y-4 lg:space-y-6">
<ArticleHeader>
<ProjectHeader project={project} />
<ProjectHeader project={project} host={host} />

<div className="p-6 rounded-lg shadow-lg bg-secondary dark:bg-secondary-dark space-y-5">
<div className="space-y-5">
<ImagePreview src={project.images} />
</div>
</ArticleHeader>

<div className="flex w-full gap-12">
<div className="w-4/6 flex-1 flex flex-col gap-3 md:gap-6 min-h-screen py-4">
<div className="grid grid-cols-6 gap-12">
<div className="col-span-4 flex flex-col gap-3 md:gap-6 min-h-screen py-4">
<div className="flex flex-col gap-3">
<h3 className="text-3xl font-semibold">
About this project
Expand All @@ -72,186 +86,48 @@ export default async function ProjectPage(props: ProjectPageProps) {
</div>
</div>

<div className="flex flex-col gap-3">
<h3 className="text-3xl font-semibold">
Categories
</h3>

<div className="text-neutral-400 w-4/5">
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
{project.categories.map((category, i) => (
<Badge
key={category}
icon={project.icons[i] || "material-symbols-light:tag"}
className="px-3 py-2"
>
<span className="text-sm text-gray-500">{category}</span>
</Badge>
))}
</div>
</div>
</div>

<div className="flex flex-col gap-3">
<h3 className="text-3xl font-semibold">
Supported platforms
</h3>

<Table headings={[{ name: "Platforms" }, { name: "Status" }]}>
<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="devicon:windows11"
fontSize={24}
fontWeight={400}
/>
Windows
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-success">
<Icon
icon="material-symbols:check"
fontSize={24}
fontWeight={400}
/>
Supported
</div>
</TableCell>
</TableRow>

<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="devicon:apple"
fontSize={24}
fontWeight={400}
/>
Mac OS
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-warning">
<Icon
icon="material-symbols:warning"
fontSize={24}
fontWeight={400}
/>
Untested
</div>
</TableCell>
</TableRow>

<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="devicon:linux"
fontSize={24}
fontWeight={400}
/>
Linux
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-warning">
<Icon
icon="material-symbols:warning"
fontSize={24}
fontWeight={400}
/>
Partial Support
</div>
</TableCell>
</TableRow>

<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="material-symbols:globe"
fontSize={24}
fontWeight={400}
/>
Web
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-success">
<Icon
icon="material-symbols:check"
fontSize={24}
fontWeight={400}
/>
Supported
</div>
</TableCell>
</TableRow>

<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="devicon:android"
fontSize={24}
fontWeight={400}
/>
Android
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-danger">
<Icon
icon="material-symbols:error"
fontSize={24}
fontWeight={400}
/>
Not Supported
</div>
</TableCell>
</TableRow>

<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon="devicon:apple"
fontSize={24}
fontWeight={400}
/>
IOS
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2 text-danger">
<Icon
icon="material-symbols:error"
fontSize={24}
fontWeight={400}
/>
Not Supported
</div>
</TableCell>
</TableRow>
{project.platforms?.map((platform) => (
<TableRow key={platform.name}>
<TableCell>
<div className="flex items-center gap-2">
<Icon
icon={platform.icon}
fontSize={24}
fontWeight={400}
/>
{platform.name}
</div>
</TableCell>

<TableCell>
<div className="flex items-center gap-2" style={{color: platform.statusColor || "#a1a1aa"}}>
<Icon
icon={platform.statusIcon || "mdi:close"}
fontSize={24}
fontWeight={400}
/>
{platform.status || "Unknown"}
</div>
</TableCell>
</TableRow>
))}
</Table>
</div>
</div>

<div className="lg:flex flex-col gap-6 h-fit w-2/6 hidden ">
<div className="flex flex-col gap-3">
<h3 className="text-3xl font-semibold">
<div className="lg:flex flex-col gap-6 h-fit col-span-2 hidden">
<div className="space-y-3">
<h5 className="text-xl font-semibold">
More info
</h3>
</h5>

<div className="flex flex-col gap-4 leading-relaxed flex-1 px-6 py-2">
<div className="space-y-3 leading-relaxed">
<span className="flex items-center gap-3">
<Icon
icon="mdi:calendar-month-outline"
Expand All @@ -272,13 +148,61 @@ export default async function ProjectPage(props: ProjectPageProps) {
<Icon
icon="pajamas:status-health"
fontSize={24}
fontWeight={400}
fontWeight={400}
/>

{project.status}
</span>
</div>
</div>

<div className="space-y-3">
<h5 className="text-xl font-semibold">
Categories
</h5>

<div className="text-neutral-400">
<div className="flex flex-wrap items-center gap-2">
{project.categories.map((category, i) => (
<Badge
key={category}
icon={project.icons[i] || "material-symbols-light:tag"}
className="px-3 py-2"
>
<span className="text-sm text-gray-500">{category}</span>
</Badge>
))}
</div>
</div>
</div>

<div className="space-y-3">
<h5 className="text-xl font-semibold">
Languages
</h5>

<ProgressBar className="p-0">
{project.languages?.map((language, i) => (
<ProgressItem
style={{ backgroundColor: language.color }}
key={`${language}${i}`}
value={language.percentage || 0}
className="p-1"
/>
))}
</ProgressBar>

<ul className="grid grid-cols-2 list-disc list-d px-4">
{project.languages?.map((language, i) => (
<li
style={{ color: language.color }}
key={`text-${language}${i}`}
>
{language.name} {language.percentage}%
</li>
))}
</ul>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 80368dc

Please sign in to comment.