Generating static paths for the projects and added layout for the pro…

…ject

src/components/Header.astro

@@ -1,7 +1,13 @@
 ---
-const current_time = new Date().toLocaleString("en-GB", { timeZone: 'Europe/Warsaw' })
+const current_time = new Date().toLocaleString("en-GB", {
+  timeZone: "Europe/Warsaw",
+});
 ---
+
 <header class="p-2">
-  <h1 class="font-bold text-4xl">Akai Apps</h1>
-  <p>Dane aktualizowane ostatni raz: <span class="font-mono" >{current_time}</span></p>
+  <h1 class="text-4xl font-bold"><a href="/">Akai Apps</a></h1>
+  <p>
+    Dane aktualizowane ostatni raz: <span class="font-mono"
+      >{current_time}</span>
+  </p>
 </header>

src/layouts/ProjectLayout.astro

@@ -0,0 +1,25 @@
+---
+import type { Project } from "@utilities/data";
+interface Props extends Project {}
+const { name, description, stargazerCount, languages, url } = Astro.props;
+---
+
+<section>
+  <div>
+    <h1>{name}</h1>
+    <div class="flex">
+      <p>Ilość gwiazdek: {stargazerCount}</p>
+      <a href={url} class="text-yellow-500">Sprawdź na githubie</a>
+    </div>
+    <ul class="flex gap-1">
+      {
+        languages.map((lang) => {
+          return <li>{lang}</li>;
+        })
+      }
+    </ul>
+  </div>
+  <article>
+    {description}
+  </article>
+</section>

src/pages/projects/[name].astro

@@ -1,7 +1,36 @@
 ---
-export  function getStaticPaths() {
-  return [
-    { params: { name: "placeholder"}},
-  ]
+import { getProjects } from "@utilities/data";
+import PageLayout from "@layouts/PageLayout.astro";
+import ProjectLayout from "@layouts/ProjectLayout.astro";
+import type { Project } from "@utilities/data";
+
+type Props = Omit<Project, "name">;
+
+export async function getStaticPaths() {
+  const projects = await getProjects();
+  const project_paths = projects.map((project) => {
+    return {
+      params: { name: project.name },
+      props: {
+        description: project.description,
+        stargazerCount: project.stargazerCount,
+        languages: project.languages,
+        url: project.url,
+      },
+    };
+  });
+  return project_paths;
 }
+const { name } = Astro.params;
+const { languages, url, stargazerCount, description } = Astro.props;
 ---
+
+<PageLayout title={name}>
+  <ProjectLayout
+    name={name}
+    languages={languages}
+    url={url}
+    stargazerCount={stargazerCount}
+    description={description}
+  />
+</PageLayout>