lukeonline - commit 5e454d8

diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro new file mode 100644 index 0000000..d5f5c2e --- /dev/null +++ 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 new file mode 100644 index 0000000..7515aee --- /dev/null +++ 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 new file mode 100644 index 0000000..ac976fe --- /dev/null +++ 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 index e7341fe..fd6c110 100644 --- 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 index 4d22237..c585eee 100644 --- 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 index b979d9f..a63e29e 100644 --- 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>