Fix @ alias.

Fix margins on mobile for projects.

Moved html code to common component for projects

Updated image of me to a far superior one.

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/Greeting.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from "astro:assets"
-import me from "../images/me.jpg"
+import me from "@/images/polite-cat.jpg"
-import * as m from "../paraglide/messages.js"
+import * as m from "@/paraglide/messages.js"
-import "../styles/global.css"
+import "@/styles/global.css"
 ---
 
 <div class="flex items-center justify-around flex-wrap">

src/components/projects/MyProjectsPage.astro

@@ -0,0 +1,33 @@
+---
+import ProjectCard from "./ProjectCard.astro"
+import * as m from "@/paraglide/messages"
+
+interface Props {
+  projects: any[] // TODO Type this
+}
+
+const { projects } = Astro.props
+---
+
+<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
+<div class="flex flex-wrap justify-around">
+  {
+    projects.map(
+      ({
+         data: { title, description, tags, heroImage, heroImageAlt },
+         slug
+       }) => (
+        <div class="my-5 px-2">
+          <ProjectCard
+            title={title}
+            linkTo={`/project/${slug}`}
+            description={description}
+            tags={tags}
+            image={heroImage}
+            imageAlt={heroImageAlt}
+          />
+        </div>
+      )
+    )
+  }
+</div>

src/components/projects/ProjectCard.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets"
 import { type ImageMetadata } from "astro"
-import BadgeList from "./badge/BadgeList.astro"
+import BadgeList from "../badge/BadgeList.astro"
 
 interface Props {
   title: string
@@ -17,7 +17,7 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props
 
 <a
   href={linkTo}
-  class="card bg-base-100 w-96 shadow-xl hover:scale-105 transition"
+  class="card bg-base-100 max-w-96 shadow-xl hover:scale-105 transition"
 >
   <figure>
     <Image src={image} alt={imageAlt} />

src/components/projects/ProjectPage.astro

@@ -1,14 +1,12 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Layout from "@/layouts/Layout.astro"
 import { Image } from "astro:assets"
 import { getEntry } from "astro:content"
-import BadgeList from "./badge/BadgeList.astro"
+import BadgeList from "../badge/BadgeList.astro"
-import ExternalLink from "./links/ExternalLink.astro"
+import * as m from "@/paraglide/messages"
-import * as m from "../paraglide/messages"
+import { languageTag } from "@/paraglide/runtime"
-import { languageTag } from "../paraglide/runtime"
+import GiteaLink from "../links/GiteaLink.astro"
-import Gitea from "../icons/Gitea.astro"
+import "@/styles/global.css"
-import "../styles/global.css"
-import GiteaLink from "./links/GiteaLink.astro"
 
 interface Props {
   project: string // TODO typeof project slug
@@ -26,7 +24,7 @@ const {
   heroImageAlt,
   source,
   createdAt,
-  updatedAt,
+  updatedAt
 } = entry!.data
 ---
 

src/pages/en/project/[project].astro

@@ -1,11 +1,11 @@
 ---
-import ProjectPage from "../../../components/ProjectPage.astro"
+import ProjectPage from "../../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
+    { params: { project: "homepage" } }
   ]
 }
 

src/pages/en/project/index.astro

@@ -1,5 +1,11 @@
 ---
+import { getCollection } from "astro:content"
+import Layout from "@/layouts/Layout.astro"
+import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+
+const projects = await getCollection("projects")
+---
 
----
+<Layout title="Projects">
-
+  <MyProjectsPage projects={projects} />
-<p>These are all my projects</p>
+</Layout>

src/pages/project/[project].astro

@@ -1,11 +1,11 @@
 ---
-import ProjectPage from "../../components/ProjectPage.astro"
+import ProjectPage from "../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
+    { params: { project: "homepage" } }
   ]
 }
 

src/pages/project/index.astro

@@ -1,32 +1,11 @@
 ---
 import { getCollection } from "astro:content"
-import ProjectCard from "../../components/ProjectCard.astro"
+import Layout from "@/layouts/Layout.astro"
-import Layout from "../../layouts/Layout.astro"
+import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
 
 const projects = await getCollection("projects")
 ---
 
-<Layout title="Projects">
+<Layout title="Prosjekter">
-  <h1 class="text-4xl font-bold text-center my-10">Projects</h1>
+  <MyProjectsPage projects={projects} />
-  <div class="flex flex-wrap justify-around">
-    {
-      projects.map(
-        ({
-          data: { title, description, tags, heroImage, heroImageAlt },
-          slug,
-        }) => (
-          <div class="my-5">
-            <ProjectCard
-              title={title}
-              linkTo={`/project/${slug}`}
-              description={description}
-              tags={tags}
-              image={heroImage}
-              imageAlt={heroImageAlt}
-            />
-          </div>
-        ),
-      )
-    }
-  </div>
 </Layout>

tsconfig.json

@@ -1,11 +1,18 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "include": ["src/**/*.ts", "src/**/*.astro", "src/**/*.svelte"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.astro",
+    "src/**/*.svelte"
+  ],
   "compilerOptions": {
     "strictNullChecks": true,
     "allowJs": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   }
 }