upgraded versions and fixed projects page

.github/workflows/ci.yml

@@ -1,26 +1,26 @@
 name: CI
 
 on:
-    pull_request:
-    push:
-        branches:
-            - main
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
-    check:
-        runs-on: ubuntu-22.04
-        name: ${{ matrix.cmd }}
-        strategy:
-            fail-fast: false
-            matrix:
-                cmd:
-                    - build
-                    - prettier
-        steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
-              with:
-                  node-version: 18
-                  cache: pnpm
-            - run: pnpm install --frozen-lockfile --no-color
-            - run: pnpm ${{ matrix.cmd }}
+  check:
+    runs-on: ubuntu-22.04
+    name: ${{ matrix.cmd }}
+    strategy:
+      fail-fast: false
+      matrix:
+        cmd:
+          - build
+          - prettier
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile --no-color
+      - run: pnpm ${{ matrix.cmd }}

.prettierrc.cjs

@@ -1,6 +1,44 @@
-const base = require("@lshay/prettier-config");
+const config = {
+	arrowParens: "always",
+	bracketSameLine: false,
+	bracketSpacing: true,
+	embeddedLanguageFormatting: "auto",
+	endOfLine: "lf",
+	htmlWhitespaceSensitivity: "css",
+	insertPragma: false,
+	jsxSingleQuote: false,
+	overrides: [
+		{
+			files: ["**/.{yml,yaml}"],
+			options: {
+				tabWidth: 4,
+			},
+		},
+		{
+			files: ["**/package.json"],
+			plugins: ["prettier-plugin-packagejson"],
+		},
+		{
+			files: ["**/*.astro"],
+			options: {
+				parser: "astro",
+			},
+		},
+	],
+	plugins: ["prettier-plugin-tailwindcss", "prettier-plugin-astro"],
+	printWidth: 80,
+	proseWrap: "preserve",
+	quoteProps: "as-needed",
+	rangeEnd: Number.POSITIVE_INFINITY,
+	rangeStart: 0,
+	requirePragma: false,
+	semi: false,
+	singleAttributePerLine: false,
+	singleQuote: false,
+	tabWidth: 2,
+	trailingComma: "all",
+	useTabs: true,
+	vueIndentScriptAndStyle: false,
+}
 
-module.exports = {
-	...base,
-	plugins: [...base.plugins, require.resolve("prettier-plugin-astro")],
-};
+module.exports = config

.tool-versions

@@ -0,0 +1 @@
+nodejs 18.18.0

astro.config.mjs

@@ -1,10 +1,10 @@
-import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
-import netlify from "@astrojs/netlify/functions";
+import { defineConfig } from "astro/config"
+import tailwind from "@astrojs/tailwind"
+import netlify from "@astrojs/netlify/functions"
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [tailwind()],
 	output: "server",
 	adapter: netlify(),
-});
+})

netlify/functions/jokes.ts

@@ -1,11 +1,11 @@
-import jokes from "./jokes.json";
+import jokes from "./jokes.json"
 
 export const handler = async () => {
-	const randomIndex = Math.floor(Math.random() * jokes.length);
-	const randomJoke = jokes[randomIndex];
+	const randomIndex = Math.floor(Math.random() * jokes.length)
+	const randomJoke = jokes[randomIndex]
 
 	return {
 		statusCode: 200,
 		body: randomJoke,
-	};
-};
+	}
+}

package.json

@@ -9,29 +9,28 @@
 		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro",
-		"prettier": "prettier --ignore-path .gitignore --check .",
-		"prettier:fix": "pnpm prettier --write"
+		"format": "prettier --check --write . src/**/*.astro"
 	},
 	"dependencies": {
-		"@fontsource/inter": "4.5.15",
-		"@fortawesome/fontawesome-free": "6.4.0",
-		"astro": "2.1.8",
-		"cache-parser": "1.2.4",
-		"clsx": "1.2.1"
+		"@fontsource/inter": "^5.0.8",
+		"@fortawesome/fontawesome-free": "^6.4.2",
+		"astro": "^3.1.4",
+		"cache-parser": "^1.2.4",
+		"prettier-plugin-astro": "^0.12.0",
+		"tailwind-merge": "^1.14.0"
 	},
 	"devDependencies": {
-		"@astrojs/cloudflare": "6.2.2",
-		"@astrojs/netlify": "2.2.0",
-		"@astrojs/sitemap": "1.2.1",
-		"@astrojs/tailwind": "3.1.1",
-		"@lshay/prettier-config": "0.5.5",
-		"@tailwindcss/forms": "0.5.3",
-		"prettier": "2.8.7",
-		"prettier-plugin-astro": "0.8.0",
-		"tailwindcss": "3.3.0"
+		"@astrojs/cloudflare": "^7.3.0",
+		"@astrojs/netlify": "^3.0.2",
+		"@astrojs/tailwind": "^5.0.0",
+		"@lshay/prettier-config": "^0.6.1",
+		"@tailwindcss/forms": "^0.5.6",
+		"prettier": "^3.0.3",
+		"prettier-plugin-packagejson": "^2.4.5",
+		"prettier-plugin-tailwindcss": "^0.5.4",
+		"tailwindcss": "^3.3.3"
 	},
 	"engines": {
-		"node": "16.x || 18.x",
-		"pnpm": "7.x"
+		"node": "18.x"
 	}
 }

public/forms/contact.html

@@ -1,7 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<body>
-		<form name="contact" netlify netlify-honeypot hidden method="POST" action="/success">
+		<form
+			name="contact"
+			netlify
+			netlify-honeypot
+			hidden
+			method="POST"
+			action="/success"
+		>
 			<input name="full-name" />
 			<input name="email" />
 			<input name="linkedin" />

src/components/Gravatar.astro

@@ -1,13 +1,9 @@
 ---
 export interface Props {
-  class?: string;
+	class?: string
 }
 
-const { class: className } = Astro.props;
+const { class: className } = Astro.props
 ---
 
-<img
-  src="/images/gravatar.webp"
-  alt="Gravatar"
-  class={className}
-/>
+<img src="/images/gravatar.webp" alt="Gravatar" class={className} />

src/components/Hero.astro

@@ -1,35 +1,37 @@
 ---
 export interface Props {
-  title: string;
-  subtitle?: string;
-  description?: string;
-  class?: string;
+	title: string
+	subtitle?: string
+	description?: string
+	class?: string
 }
 
-const { title, subtitle, description } = Astro.props;
+const { title, subtitle, description } = Astro.props
 
-const hasSubtitle = Astro.slots.has("subtitle") || subtitle;
-const hasDescription = Astro.slots.has("description") || description;
+const hasSubtitle = Astro.slots.has("subtitle") || subtitle
+const hasDescription = Astro.slots.has("description") || description
 ---
 
 <section title={title} class={Astro.props.class}>
-  <h1 class="pb-2 text-5xl font-extrabold text-black dark:text-slate-100">{title}</h1>
-  {
-    hasSubtitle && (
-      <h2 class="pb-4 text-black dark:text-slate-100">
-        {Astro.slots.has("subtitle") ? <slot name="subtitle" /> : subtitle}
-      </h2>
-    )
-  }
-  {
-    hasDescription && (
-      <h3 class="text-slate-700 dark:text-slate-400">
-        {Astro.slots.has("description") ? (
-          <slot name="description" />
-        ) : (
-          description
-        )}
-      </h3>
-    )
-  }
+	<h1 class="pb-2 text-5xl font-extrabold text-black dark:text-slate-100">
+		{title}
+	</h1>
+	{
+		hasSubtitle && (
+			<h2 class="pb-4 text-black dark:text-slate-100">
+				{Astro.slots.has("subtitle") ? <slot name="subtitle" /> : subtitle}
+			</h2>
+		)
+	}
+	{
+		hasDescription && (
+			<h3 class="text-slate-700 dark:text-slate-400">
+				{Astro.slots.has("description") ? (
+					<slot name="description" />
+				) : (
+					description
+				)}
+			</h3>
+		)
+	}
 </section>

src/components/List.astro

@@ -1,3 +1,3 @@
 <ul>
-  <slot />
+	<slot />
 </ul>