lukeonline

commit 5e454d86a6dac409d1618430339d26f2029edc1b
parent 87e22a54d365caf486b1d640aa80dea30fef44ae
Author: Luke Jones <luke.jones.2567@gmail.com>
Date:   Mon, 20 Jul 2026 22:01:06 +0100

feat: create button rendering and sorting logic for use across site

Diffstat:
A
src/components/LargeButton.astro
 | 
11
+++++++++++
A
src/components/LargeButtonCol.astro
 | 
15
+++++++++++++++
A
src/components/LargeButtonRow.astro
 | 
15
+++++++++++++++
M
src/layouts/ContentList.astro
 | 
10
++--------
M
src/pages/blog/index.astro
 | 
1
-
M
src/pages/index.astro
 | 
23
++++++++++++++++++++++-

6 files changed, 65 insertions(+), 10 deletions(-)
diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro
@@ -0,0 +1,11 @@
+---
+const { ...props } = Astro.props;
+
+const buttonStyling = "border-solid border-1 border-gray-300" +
+  " bg-gray-50 flex flex-col gap-1 p-2 hover:text-blue-500" +
+  " hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200";
+---
+<a href={props.link} class={buttonStyling}>
+  {props.title && <span class="font-bold">{props.title}</span>}
+  {props.desc && <span>{props.desc}</span>}
+</a>
diff --git a/src/components/LargeButtonCol.astro b/src/components/LargeButtonCol.astro
@@ -0,0 +1,15 @@
+---
+import LargeButton from "./LargeButton.astro";
+
+const { ...props } = Astro.props;
+
+const entries = props.entries;
+---
+<div class="grid gap-2 grid-cols-1">
+  {entries.map(entry =>   
+      <LargeButton title={entry.title}
+                   desc={entry.desc}
+                   link={entry.link}
+        />
+  )}
+</div>
diff --git a/src/components/LargeButtonRow.astro b/src/components/LargeButtonRow.astro
@@ -0,0 +1,15 @@
+---
+import LargeButton from "./LargeButton.astro";
+
+const { ...props } = Astro.props;
+
+const entries = props.entries;
+---
+<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+  {entries.map(entry => 
+      <LargeButton title={entry.title}
+                   desc={entry.desc}
+                   link={entry.link}
+        />
+  )}
+</div>
diff --git a/src/layouts/ContentList.astro b/src/layouts/ContentList.astro
@@ -1,5 +1,6 @@
 ---
 import Base from "./Base.astro";
+import LargeButtonCol from "../components/LargeButtonCol.astro";
 
 const { ...props } = Astro.props;
 
@@ -8,12 +9,5 @@ const postStyling = "flex flex-col bg-gray-50 " +
 ---
 <Base title={props.title}>
   <slot />
-  <div class="flex flex-col gap-3">
-    {props.content.map(post => (
-      <a class={postStyling} href={post.link}>
-        <span>{post.title}</span>
-        <span class="text-sm font-light">{post.desc}</span>
-      </a>
-    ))}
-  </div>
+  <LargeButtonCol entries={props.content} />
 </Base>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,7 +1,6 @@
 ---
 import ContentList from "../../layouts/ContentList.astro";
 import TextSection from "../../components/TextSection.astro";
-import Heading from "../../components/Heading.astro";
 
 import { getCollection, getEntry } from 'astro:content';
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,9 +1,30 @@
 ---
 import Base from "../layouts/Base.astro";
 import Heading from "../components/Heading.astro";
+import LargeButtonRow from "../components/LargeButtonRow.astro";
 
 const title = "Home";
+
+const mainButtonRow = [
+  {
+    "title": "Projects",
+    "desc": "A list of a few of my projects",
+    "link": "/projects"
+  },
+  {
+    "title": "Blog",
+    "desc": "A small blog for occasionally discussing what I'm working on",
+    "link": "/blog"
+  },
+  {
+    "title": "Photos",
+    "desc": "A small gallery of photographs from my free time",
+    "link": "/photos"
+  }
+];
 ---
 <Base title={title}>
-  <p>hello world</p>
+  <p>I'm Luke Jones. I'm studying Computer Science at Aberystwyth
+     University. Right now I'm on my industrial year.</p>
+  <LargeButtonRow entries={mainButtonRow} />
 </Base>