d9430335d5
Fix imports, remove unnecessary imports, and replace all single apostrophe to double apostrophes
57 lines
2.1 KiB
Plaintext
57 lines
2.1 KiB
Plaintext
---
|
|
import { getSettings } from "@/content/settings/settings";
|
|
import { getAllPaginatedProjects } from "@/content/projects/projects";
|
|
import { markdownToHtml } from "@/lib/markdown";
|
|
import { Image } from "astro:assets";
|
|
import { getProjectRoute } from "@/lib/routing";
|
|
import CalendarIcon from "@/icons/CalendarIcon.astro";
|
|
import { getImageSize, getImageUrl } from "@/lib/images";
|
|
|
|
interface Props {
|
|
page: ProjectIndex;
|
|
}
|
|
|
|
const { page } = Astro.props;
|
|
const { pageNumber } = page;
|
|
|
|
const settings = await getSettings();
|
|
const projects = await getAllPaginatedProjects(settings, pageNumber);
|
|
---
|
|
|
|
<div
|
|
id={`projectindex-${pageNumber}`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-col justify-center items-center gap-2.5">
|
|
<h1 class="text-5xl font-bold">{ settings.project.title }</h1>
|
|
{ settings.project.subtext !== null && (
|
|
<div set:html={markdownToHtml(settings.project.subtext)}></div>
|
|
) }
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
{ projects.map((project) => {
|
|
const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);
|
|
|
|
return (
|
|
<a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
|
|
<Image
|
|
src={getImageUrl(project.searchEngine.thumbnail.url)}
|
|
alt={project.title}
|
|
class="flex rounded-2xl shadow-md w-full"
|
|
width={imageSize.width}
|
|
height={imageSize.height}
|
|
/>
|
|
<div class="flex flex-col gap-1">
|
|
<h4 class="font-semibold text-[28px]">{project.title}</h4>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{project.date}</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}) }
|
|
</div>
|
|
</div>
|