slight fixes; updated dependencies

.caddy/Caddyfile.dev

@@ -1,5 +1,5 @@
-dev.timmypidashev.dev {
+timmypidashev.local {
   tls internal
 
-	reverse_proxy web:3000
+	reverse_proxy web:4321
 }

.caddy/Caddyfile.release

@@ -1,5 +1,5 @@
 timmypidashev.dev {
   tls pidashev.tim@gmail.com
 
-	reverse_proxy web:3000
+	reverse_proxy web:4321
 }

compose.dev.yml

@@ -16,8 +16,10 @@ services:
     container_name: web
     image: web:dev
     volumes:
-      - ./src/astro.config.mjs:/app/astro.config.mjs
+      - ./src/node_modules:/app/node_modules
       - ./src/sandbox.config.json:/app/sandbox.config.json
+      - ./src/.stackblitzrc:/app/.stackblitzrc
+      - ./src/astro.config.mjs:/app/astro.config.mjs
       - ./src/tailwind.config.cjs:/app/tailwind.config.cjs
       - ./src/tsconfig.json:/app/tsconfig.json
       - ./src/pnpm-lock.yaml:/app/pnpm-lock.yaml

package.json

@@ -0,0 +1,8 @@
+{
+	"dependencies": {
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1"
+	}
+}

pnpm-lock.yaml

@@ -0,0 +1,90 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@types/react':
+        specifier: ^18.3.12
+        version: 18.3.12
+      '@types/react-dom':
+        specifier: ^18.3.1
+        version: 18.3.1
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+
+packages:
+
+  '@types/prop-types@15.7.13':
+    resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
+
+  '@types/react-dom@18.3.1':
+    resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==}
+
+  '@types/react@18.3.12':
+    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
+snapshots:
+
+  '@types/prop-types@15.7.13': {}
+
+  '@types/react-dom@18.3.1':
+    dependencies:
+      '@types/react': 18.3.12
+
+  '@types/react@18.3.12':
+    dependencies:
+      '@types/prop-types': 15.7.13
+      csstype: 3.1.3
+
+  csstype@3.1.3: {}
+
+  js-tokens@4.0.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0

src/astro.config.mjs

@@ -1,7 +1,11 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
-import tailwind from '@astrojs/tailwind';
+import tailwind from "@astrojs/tailwind";
+import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind()],
+	integrations: [
+    tailwind(), 
+    react()
+  ],
 });

src/package.json

@@ -8,11 +8,14 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "3.1.1",
+    "@astrojs/react": "^2.3.2",
-    "astro": "2.1.3",
+    "@astrojs/tailwind": "^5.1.2",
-    "autoprefixer": "10.4.14",
+    "@types/react": "^18.3.12",
-    "canvas-confetti": "1.6.0",
+    "@types/react-dom": "^18.3.1",
-    "postcss": "8.4.21",
+    "astro": "^4.16.7"
-    "tailwindcss": "3.2.7"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

src/src/components/footer/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function Footer() {
+  return (
+    <h1>Footer</h1>
+  );
+}

src/src/components/footer/links.ts

@@ -0,0 +1,14 @@
+interface FooterLink {
+  id: number;
+  href: string;
+  label: string;
+  color: string;
+}
+
+export const Links: FooterLink[] = [
+  { id: 0, href: "https://add-later", label: "Contact", color: "green" },
+  { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "yellow" },
+  { id: 3, href: "https://linkedin.com/in/timothy-pidashev-9055922a7", label: "Linkedin", color: "blue" },
+  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "purple" },
+  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "aqua" },
+];

src/src/components/header/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+export default function Header() {
+  return (
+    <h1>Header</h1>
+  );
+}

src/src/components/header/links.ts

@@ -0,0 +1,14 @@
+interface HeaderLink {
+  id: number;
+  href: string;
+  label: string;
+  color: string;
+}
+
+export const Links: HeaderLink[] = [
+  { id: 0, href: "/", label: "Home", color: "green" },
+  { id: 1, href: "projects", label: "Projects", color: "yellow" },
+  { id: 2, href: "resume", label: "Resume", color: "blue" },
+  { id: 3, href: "blog", label: "Blog", color: "purple" },
+  { id: 4, href: "shop", label: "Shop", color: "aqua" }
+];

src/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/src/layouts/main.astro

@@ -1,5 +1,10 @@
 ---
 const { content } = Astro.props;
+
+import "@/style/globals.css";
+
+import Header from "@/components/header";
+import Footer from "@/components/footer";
 ---
 
 <html lang="en">
@@ -9,7 +14,11 @@ const { content } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>{content.title}</title>
 	</head>
-	<body>
+  <body class="bg-background text-foreground">
-		<slot />
+    <Header client:load />
+    <main>
+      <slot />
+    </main>
+    <Footer client:load />
 	</body>
 </html>

src/src/pages/index.astro

@@ -1,20 +1,11 @@
 ---
 import "@/style/globals.css"
 
+import MainLayout from "@/layouts/main.astro";
 ---
 
-<html lang="en">
+<MainLayout content={{ title: "Timothy Pidashev"}}>
-	<head>
+  <div class="flex items-center justify-center h-screen w-full">
-		<meta charset="utf-8" />
+    <h1 class="text-4xl text-aqua font-bold">Coming Soon</h1>
-		<meta name="viewport" content="width=device-width" />
+  </div>
-    <!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
+</MainLayout>
-		<meta name="generator" content={Astro.generator} />
-		<title>Timothy Pidashev</title>
-	</head>
-
-  <body class="bg-background text-foreground">
-    <div class="flex items-center justify-center h-screen w-full">
-      <h1 class="text-4xl text-aqua font-bold">Coming Soon</h1>
-    </div>
-	</body>
-</html>

src/src/style/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   display: none;

src/tsconfig.json

@@ -5,5 +5,7 @@
     "paths": {
       "@/*": ["src/*"]
     }
-  }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
 }