Merge pull request #11 from thepurplebubble/netlify-astro-migration

chore: convert to astro

.gitignore

@@ -36,3 +36,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Local Netlify folder
+.netlify

.prettierrc

@@ -1,7 +1,4 @@
 {
-    "endOfLine": "lf",
-    "trailingComma": "none",
-    "plugins": [""],
-    "pluginSearchDirs": ["."],
-    "overrides": []
-  }
+  "tabWidth": 2,
+  "useTabs": false
+}

README.md

@@ -1,3 +1,4 @@
+
 # site
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/405c64d7-3e5c-41c6-8577-13298a2edcf7/deploy-status?branch=main)](https://app.netlify.com/sites/chimerical-fox-6d9845/deploys)

astro.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+  command = "npm run build"
+  publish = "dist"

package.json

@@ -1,13 +1,19 @@
 {
   "name": "thepurplebubble-site",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@lottiefiles/lottie-player": "1.5.7",
-    "parcel": "^2.10.3"
+    "parcel": "^2.10.3",
+    "astro": "^4.0.4"
   },
   "scripts": {
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "devDependencies": {
     "eslint": "^8.55.0",
@@ -20,4 +26,4 @@
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   }
-}
+}

src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />