Made card more consistent; Guestbook submits; Web analytics

6 files changed, 84 insertions, 77 deletions

diff --git a/astro.config.mjs b/astro.config.mjs
index b538d31..c17d797 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -9,7 +9,11 @@ export default defineConfig({
   site: 'https://alee14.me',
   integrations: [icon(), preact()],
   output: "server",
-  adapter: vercel(),
+  adapter: vercel({
+    webAnalytics: {
+      enabled: true,
+    },
+  }),
   image: {
     service: passthroughImageService()
   },
@@ -27,4 +31,4 @@ export default defineConfig({
       transformers: []
     }
   }
-});
\ No newline at end of file
+});
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index a6b6855..5e4c619 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -8,20 +8,21 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 ---
 <Page title="Blog" description="Where I post can be anything!">
    <main>
-      {allBlogPosts.map((post) => (
-         <article>
-            <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
-            <small>{formatDate(post.data.pubDate)}</small>
-            <p>{post.data.description}</p>
-            <div class="tags">
-               {post.data.tags.map((tag) => (
-                  <a href={`/blog/tags/${tag}`}>{tag}</a>
-               ))}
-            </div>
-         </article>
-       ))
-      }
-
+      <div class="grid">
+         {allBlogPosts.map((post) => (
+             <article class="card">
+                <h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
+                <small>{formatDate(post.data.pubDate)}</small>
+                <p>{post.data.description}</p>
+                <div class="tags">
+                   {post.data.tags.map((tag) => (
+                       <a href={`/blog/tags/${tag}`}>{tag}</a>
+                   ))}
+                </div>
+             </article>
+         ))
+         }
+      </div>
    </main>
 </Page>
 <style>
diff --git a/src/pages/blog/tags/[tag].astro b/src/pages/blog/tags/[tag].astro
index 9d4ff86..31d9b94 100644
--- a/src/pages/blog/tags/[tag].astro
+++ b/src/pages/blog/tags/[tag].astro
@@ -25,14 +25,16 @@ const { posts } = Astro.props;
 ---
 <Page title=`Posts with ${tag}`>
     <main>
-        {posts && posts.map((post) => {
-            return (
-                    <article>
-                        <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1>
-                        <small>{formatDate(post.frontmatter.pubDate)}</small>
-                        <p>{post.frontmatter.description}</p>
-                    </article>
-            )
-        })}
+        <div class="grid">
+            {posts && posts.map((post) => {
+                return (
+                        <article class="card">>
+                            <h1><a href=`/blog/${post.frontmatter.slug}`>{post.frontmatter.title}</a></h1>
+                            <small>{formatDate(post.frontmatter.pubDate)}</small>
+                            <p>{post.frontmatter.description}</p>
+                        </article>
+                )
+            })}
+        </div>
     </main>
 </Page>
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
index 0827802..0aebd9c 100644
--- a/src/pages/guestbook.astro
+++ b/src/pages/guestbook.astro
@@ -4,16 +4,41 @@ import "../styles/cards.css";
 ---
 <Page title="Guestbook" description="Use this page to send me a message">
     <main>
-        <article>
-            <h1>John Doe</h1>
-            <small>January 1, 2024</small>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Nam id orci non diam bibendum euismod quis sit amet purus.
-                Fusce fermentum facilisis placerat. Mauris varius ante elit, et
-                luctus enim blandit sit amet.
-                Pellentesque ullamcorper dapibus suscipit.
-            </p>
-            <a href="http://google.com">Website</a>
-        </article>
+        <form class="card">
+            <h2>Submit Message</h2>
+            <label>
+                Name<br>
+                <input type="text" name="name" placeholder="Name" required />
+            </label>
+            <br>
+            <label>
+                Email Address<br>
+                <input type="email" name="email" placeholder="Email Address (Optional)" />
+            </label>
+            <br>
+            <label>
+                Your Website<br>
+                <input type="url" name="link" placeholder="https://example.com" required />
+            </label>
+            <br>
+            <label>
+                Message<br>
+                <textarea name="message" placeholder="Message" required></textarea>
+            </label>
+            <button type="submit">Send</button>
+        </form>
+        <div class="grid">
+            <article class="card">
+                <h1>John Doe</h1>
+                <small>January 1, 2024</small>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Nam id orci non diam bibendum euismod quis sit amet purus.
+                    Fusce fermentum facilisis placerat. Mauris varius ante elit, et
+                    luctus enim blandit sit amet.
+                    Pellentesque ullamcorper dapibus suscipit.
+                </p>
+                <a href="https://google.com">Website</a>
+            </article>
+        </div>
     </main>
 </Page>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index d609211..37cec1a 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,13 +1,14 @@
 ---
 import Page from "../layouts/Page.astro";
 import projects from "../data/projects.json";
+import "../styles/cards.css";
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
-    <main>
+    <main class="grid">
         {
             projects.map((project) => {
                 return (
-                        <div class="cards">
+                        <article class="card">
                             <h1>{project.name}</h1>
                             <p>{project.description}</p>
                             <div class="row">
@@ -17,51 +18,16 @@ import projects from "../data/projects.json";
                                     )
                                 })}
                             </div>
-                        </div>
+                        </article>
                 )
             })
         }
     </main>
 </Page>
 <style>
-    main {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .cards {
-        display: flex;
-        flex-direction: column;
-        background-color: #3B513B;
-        padding: 1.2em;
-        border-radius: 20px;
-        gap: 0.5em;
-        margin: 0.5em;
-    }
-
-    .cards h1 {
-        padding: 0;
-        margin: 0;
-        font-size: 1.8em;
-    }
-
-    .cards p {
-        padding: 0;
-        margin: 0;
-    }
-
     .row {
-        margin-top: 0.3em;
         display: flex;
         flex-direction: row;
         gap: 1em;
     }
-
-    /* Mobile view */
-    @media (max-width: 992px) {
-        main {
-            grid-template-columns: 1fr;
-        }
-    }
-
 </style>
diff --git a/src/styles/cards.css b/src/styles/cards.css
index 192335d..67a618c 100644
--- a/src/styles/cards.css
+++ b/src/styles/cards.css
@@ -1,9 +1,18 @@
-h1 {
+.card h1 {
     margin-top: 2px;
     margin-bottom: 2px;
 }
 
-article {
+.card h2 {
+    margin-top: 2px;
+}
+
+.card p {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.card {
     background-color: #3B513B;
     padding: 1.2em;
     border-radius: 20px;
@@ -11,7 +20,7 @@ article {
     margin: 0.5em;
 }
 
-main {
+.grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }