lukeonline - commit eff0524

diff --git a/.prettierrc b/.prettierrc index 5b6701e..5ef784f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,5 @@ { - "plugins": [ - "prettier-plugin-astro", - "prettier-plugin-tailwindcss" - ], + "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"], "overrides": [ { "files": "*.astro", diff --git a/README.md b/README.md index 27f7698..1d7c27c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # lukeonline + Source code for my personal website diff --git a/src/assets/Favicon.astro b/src/assets/Favicon.astro index 8815d6f..200c3ed 100644 --- a/src/assets/Favicon.astro +++ b/src/assets/Favicon.astro @@ -1 +1 @@ -<link rel="icon" type="image/x-icon"> +<link rel="icon" type="image/x-icon" /> diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 1944d3b..4c41f61 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,3 +1,10 @@ <footer> - <span class="w-full text-center text-sm text-gray-500">&copy; 2024-2026 lukeonline.net - Licensed under <a class="text-blue-500" href="https://spdx.org/licenses/GPL-2.0-or-later.html" target="_blank" rel="noopener noreferrer">GPL-2.0-or-later</a></span> + <span class="w-full text-center text-sm text-gray-500" + >&copy; 2024-2026 lukeonline.net - Licensed under <a + class="text-blue-500" + href="https://spdx.org/licenses/GPL-2.0-or-later.html" + target="_blank" + rel="noopener noreferrer">GPL-2.0-or-later</a + ></span + > </footer> diff --git a/src/components/Head.astro b/src/components/Head.astro index 443f722..cae3d94 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,11 +1,11 @@ --- -import Favicon from "../assets/Favicon.astro"; +import Favicon from '../assets/Favicon.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props --- + <head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta charset="utf-8" /> <title>{props.title}</title> </head> - diff --git a/src/components/Header.astro b/src/components/Header.astro index c9381c1..72796df 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,15 +1,16 @@ --- -const { title } = Astro.props; - -const linkStyling = "border-solid border-1 border-gray-300" + - " bg-gray-50 p-1 pl-2 hover:text-blue-500 grow" + - " hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200" + - " items-center gap-3"; +const { title } = Astro.props +const linkStyling = + 'border-solid border-1 border-gray-300' + + ' bg-gray-50 p-1 pl-2 hover:text-blue-500 grow' + + ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' + + ' items-center gap-3' --- + <header class="flex flex-col gap-2"> <span class="text-xl font-bold">Luke Jones</span> - <nav class="flex flex-row justify-between gap-2 flex-wrap"> + <nav class="flex flex-row flex-wrap justify-between gap-2"> <a class={linkStyling} href="/">Home</a> <a class={linkStyling} href="/projects">Projects</a> <a class={linkStyling} href="/blog">Blog</a> diff --git a/src/components/Heading.astro b/src/components/Heading.astro index ef3bed2..8a13666 100644 --- a/src/components/Heading.astro +++ b/src/components/Heading.astro @@ -1,9 +1,46 @@ --- -const { level } = Astro.props; +const { level } = Astro.props --- -{level === 1 && <h1 class="text-2xl font-bold"><slot/></h1>} -{level === 2 && <h2 class="text-xl font-bold"><slot/></h2>} -{level === 3 && <h3><slot/></h3>} -{level === 4 && <h4><slot/></h4>} -{level === 5 && <h5><slot/></h5>} -{level === 6 && <h6><slot/></h6>} + +{ + level === 1 && ( + <h1 class="text-2xl font-bold"> + <slot /> + </h1> + ) +} +{ + level === 2 && ( + <h2 class="text-xl font-bold"> + <slot /> + </h2> + ) +} +{ + level === 3 && ( + <h3> + <slot /> + </h3> + ) +} +{ + level === 4 && ( + <h4> + <slot /> + </h4> + ) +} +{ + level === 5 && ( + <h5> + <slot /> + </h5> + ) +} +{ + level === 6 && ( + <h6> + <slot /> + </h6> + ) +} diff --git a/src/components/IconButton.astro b/src/components/IconButton.astro index 32308bf..7bdead9 100644 --- a/src/components/IconButton.astro +++ b/src/components/IconButton.astro @@ -1,16 +1,14 @@ --- -const { image, link } = Astro.props; +const { image, link } = Astro.props -const buttonStyling = "border-solid border-1 border-gray-300" + - " bg-gray-50 flex flex-row gap-1 p-2 hover:text-blue-500" + - " hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200" + - " items-center gap-3"; +const buttonStyling = + 'border-solid border-1 border-gray-300' + + ' bg-gray-50 flex flex-row gap-1 p-2 hover:text-blue-500' + + ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' + + ' items-center gap-3' --- + <a href={link} class={buttonStyling}> - <img src={image.link} - alt={image.alt} - class="w-8 h-8 object-cover" - /> + <img src={image.link} alt={image.alt} class="h-8 w-8 object-cover" /> <span>{image.alt}</span> </a> - diff --git a/src/components/IconButtonRow.astro b/src/components/IconButtonRow.astro index 8be1c80..d40a422 100644 --- a/src/components/IconButtonRow.astro +++ b/src/components/IconButtonRow.astro @@ -1,15 +1,11 @@ --- -import IconButton from "./IconButton.astro"; +import IconButton from './IconButton.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props -const entries = props.entries; +const entries = props.entries --- -<div class="flex gap-2 flex-row flex-wrap"> - {entries.map(entry => - <IconButton image={entry.image} - link={entry.link} - /> - )} -</div> +<div class="flex flex-row flex-wrap gap-2"> + {entries.map((entry) => <IconButton image={entry.image} link={entry.link} />)} +</div> diff --git a/src/components/LargeButton.astro b/src/components/LargeButton.astro index a29eded..cbbea04 100644 --- a/src/components/LargeButton.astro +++ b/src/components/LargeButton.astro @@ -1,15 +1,22 @@ --- -const { image, title, desc, link } = Astro.props; +const { image, title, desc, link } = 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"; +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={link} class={buttonStyling}> - {image && <img src={image.link} - alt={image.alt} - class="w-full aspect-4/5 object-cover" - />} + { + image && ( + <img + src={image.link} + alt={image.alt} + class="aspect-4/5 w-full object-cover" + /> + ) + } {title && <span class="font-bold">{title}</span>} {desc && <span>{desc}</span>} </a> diff --git a/src/components/LargeButtonCol.astro b/src/components/LargeButtonCol.astro index 70e2e59..558e8c1 100644 --- a/src/components/LargeButtonCol.astro +++ b/src/components/LargeButtonCol.astro @@ -1,15 +1,15 @@ --- -import LargeButton from "./LargeButton.astro"; +import LargeButton from './LargeButton.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props -const entries = props.entries; +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 class="grid grid-cols-1 gap-2"> + { + 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 index 09c5e42..0b90cc1 100644 --- a/src/components/LargeButtonRow.astro +++ b/src/components/LargeButtonRow.astro @@ -1,16 +1,20 @@ --- -import LargeButton from "./LargeButton.astro"; +import LargeButton from './LargeButton.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props -const entries = props.entries; +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} - image={entry.image} - /> - )} + +<div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3"> + { + entries.map((entry) => ( + <LargeButton + title={entry.title} + desc={entry.desc} + link={entry.link} + image={entry.image} + /> + )) + } </div> diff --git a/src/components/Table.astro b/src/components/Table.astro index 33b6ea0..b323ab4 100644 --- a/src/components/Table.astro +++ b/src/components/Table.astro @@ -1,20 +1,22 @@ --- -const { rows } = Astro.props; +const { rows } = Astro.props --- + <table class="w-full table-auto"> - {Object.entries(rows).map(([param, value]) => ( - <tr class="p-4 even:bg-gray-50 odd:bg-gray-100 w-full"> - <td class="p-2 pl-4 pr-4 italic">{param}</td> - <td class="flex flex-row gap-2 p-2 pl-4 pr-4 h-auto flex-wrap"> - { - Array.isArray(value) ? - value.map(item => - <span class="bg-gray-600 text-white p-1/2 pl-2 pr-2 rounded-sm"> - {item} - </span> - ) - : value ?? '-'} - </td> - </tr> - ))} + { + Object.entries(rows).map(([param, value]) => ( + <tr class="w-full p-4 odd:bg-gray-100 even:bg-gray-50"> + <td class="p-2 pr-4 pl-4 italic">{param}</td> + <td class="flex h-auto flex-row flex-wrap gap-2 p-2 pr-4 pl-4"> + {Array.isArray(value) + ? value.map((item) => ( + <span class="p-1/2 rounded-sm bg-gray-600 pr-2 pl-2 text-white"> + {item} + </span> + )) + : (value ?? '-')} + </td> + </tr> + )) + } </table> diff --git a/src/components/TextSection.astro b/src/components/TextSection.astro index 5582a8e..071e08a 100644 --- a/src/components/TextSection.astro +++ b/src/components/TextSection.astro @@ -1,3 +1,3 @@ <p> - <slot /> + <slot /> </p> diff --git a/src/components/Webring.astro b/src/components/Webring.astro index ceaa683..de3b4ab 100644 --- a/src/components/Webring.astro +++ b/src/components/Webring.astro @@ -1,10 +1,11 @@ --- -const buttonStyling = "border-solid border-1 border-gray-300" + - " bg-gray-50 flex flex-row gap-1 p-2 h-8 hover:text-blue-500" + - " hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200" + - " items-center gap-2"; - +const buttonStyling = + 'border-solid border-1 border-gray-300' + + ' bg-gray-50 flex flex-row gap-1 p-2 h-8 hover:text-blue-500' + + ' hover:underline focus:bg-blue-50 focus:rounded hover:bg-gray-200' + + ' items-center gap-2' --- + <div class="flex flex-row gap-2"> <a class={buttonStyling} href="https://aberwebr.ing/lukep/left">◀</a> <a class={buttonStyling} href="https://aberwebr.ing/">aberWebRing</a> diff --git a/src/consts.ts b/src/consts.ts index 421d544..3e2f55f 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1 +1 @@ -export const SITE_TITLE = 'lukeonline'; +export const SITE_TITLE = 'lukeonline' diff --git a/src/content.config.ts b/src/content.config.ts index a65b386..340b722 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -1,15 +1,15 @@ -import { defineCollection } from 'astro:content'; -import { glob, file } from 'astro/loaders'; +import { defineCollection } from 'astro:content' +import { glob, file } from 'astro/loaders' const blog = defineCollection({ loader: glob({ base: './src/content/blog', pattern: '**/*.md', }), -}); +}) const photos = defineCollection({ - loader: file('./src/content/photos/photos.json') -}); + loader: file('./src/content/photos/photos.json'), +}) -export const collections = { blog, photos }; +export const collections = { blog, photos } diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 392e075..5fe5c4d 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -1,19 +1,20 @@ --- -import "../styles/global.css"; +import '../styles/global.css' -import Head from "../components/Head.astro"; -import Header from "../components/Header.astro"; -import Footer from "../components/Footer.astro"; -import Heading from "../components/Heading.astro"; +import Head from '../components/Head.astro' +import Header from '../components/Header.astro' +import Footer from '../components/Footer.astro' +import Heading from '../components/Heading.astro' -import { SITE_TITLE } from "../consts.ts"; +import { SITE_TITLE } from '../consts.ts' -const { ...props } = Astro.props; +const { ...props } = Astro.props --- + <html> <Head title={`${SITE_TITLE} - ${props.title}`} /> - <body class="w-full md:w-192 md:m-auto text-base p-2 md:p-8"> - <div class="border-solid border-1 p-8 bg-white flex flex-col gap-5"> + <body class="w-full p-2 text-base md:m-auto md:w-192 md:p-8"> + <div class="flex flex-col gap-5 border-1 border-solid bg-white p-8"> <Header /> <main class="flex flex-col gap-4"> <Heading level={1}>{props.title}</Heading> diff --git a/src/layouts/ContentGrid.astro b/src/layouts/ContentGrid.astro index 13e9ac0..0ebe387 100644 --- a/src/layouts/ContentGrid.astro +++ b/src/layouts/ContentGrid.astro @@ -1,12 +1,14 @@ --- -import Base from "./Base.astro"; -import LargeButtonRow from "../components/LargeButtonRow.astro"; +import Base from './Base.astro' +import LargeButtonRow from '../components/LargeButtonRow.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props -const postStyling = "flex flex-col bg-gray-50 " + - "p-1 pl-3 pr-3 hover:bg-gray-200 focus:bg-blue-50 focus:rounded" +const postStyling = + 'flex flex-col bg-gray-50 ' + + 'p-1 pl-3 pr-3 hover:bg-gray-200 focus:bg-blue-50 focus:rounded' --- + <Base title={props.title}> <slot /> <LargeButtonRow entries={props.content} /> diff --git a/src/layouts/ContentList.astro b/src/layouts/ContentList.astro index fd6c110..de21a9a 100644 --- a/src/layouts/ContentList.astro +++ b/src/layouts/ContentList.astro @@ -1,12 +1,14 @@ --- -import Base from "./Base.astro"; -import LargeButtonCol from "../components/LargeButtonCol.astro"; +import Base from './Base.astro' +import LargeButtonCol from '../components/LargeButtonCol.astro' -const { ...props } = Astro.props; +const { ...props } = Astro.props -const postStyling = "flex flex-col bg-gray-50 " + - "p-1 pl-3 pr-3 hover:bg-gray-200 focus:bg-blue-50 focus:rounded" +const postStyling = + 'flex flex-col bg-gray-50 ' + + 'p-1 pl-3 pr-3 hover:bg-gray-200 focus:bg-blue-50 focus:rounded' --- + <Base title={props.title}> <slot /> <LargeButtonCol entries={props.content} /> diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro index bdc1696..ea025c1 100644 --- a/src/pages/about/index.astro +++ b/src/pages/about/index.astro @@ -1,37 +1,44 @@ --- -import Base from "../../layouts/Base.astro"; -import Heading from "../../components/Heading.astro"; -import LargeButtonCol from "../../components/LargeButtonCol.astro"; +import Base from '../../layouts/Base.astro' +import Heading from '../../components/Heading.astro' +import LargeButtonCol from '../../components/LargeButtonCol.astro' -const title = "About"; +const title = 'About' const contactMethods = [ { - title: "luke.jones.2567@gmail.com", - desc: "E-mail", - link: "mailto:luke.jones.2567@gmail.com" - } -]; + title: 'luke.jones.2567@gmail.com', + desc: 'E-mail', + link: 'mailto:luke.jones.2567@gmail.com', + }, +] --- + <Base title={title}> - <p>My name is Luke Jones. I'm a student at Aberystwyth University, - studying for a BSc in Computer Science with an Integrated Year in - Industry.</p> + <p> + My name is Luke Jones. I'm a student at Aberystwyth University, studying for + a BSc in Computer Science with an Integrated Year in Industry. + </p> - <p>I am currently on said industry year, doing a placement in Bath, - England.</p> + <p> + I am currently on said industry year, doing a placement in Bath, England. + </p> - <p>Outside of my degree I spend a fair amount of time playing around with - slightly-more gimmicky computers, as well some photography when I can - manage. I also have a pretty heavy interest in the history of British Road - infrastructure, though that's less relevant to my career aspirations...</p> + <p> + Outside of my degree I spend a fair amount of time playing around with + slightly-more gimmicky computers, as well some photography when I can + manage. I also have a pretty heavy interest in the history of British Road + infrastructure, though that's less relevant to my career aspirations... + </p> - <Heading level={2}>Contact</Heading> - <p>Right now I'd prefer e-mail as the first point-of-contact, but I'll open - up more methods in the future. I ask that this is used for serious - communications only. Anything else will be respectfully ignored.</p> + <Heading level={2}>Contact</Heading> + <p> + Right now I'd prefer e-mail as the first point-of-contact, but I'll open up + more methods in the future. I ask that this is used for serious + communications only. Anything else will be respectfully ignored. + </p> <LargeButtonCol entries={contactMethods} /> - <span class="italic text-gray-500">Last Updated August 2026</span> + <span class="text-gray-500 italic">Last Updated August 2026</span> </Base> diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro index 69f47d8..dbb6256 100644 --- a/src/pages/blog/[id].astro +++ b/src/pages/blog/[id].astro @@ -1,10 +1,10 @@ --- -import Base from "../../layouts/Base.astro"; +import Base from '../../layouts/Base.astro' -import { getCollection, render } from "astro:content"; +import { getCollection, render } from 'astro:content' export async function getStaticPaths() { - const posts = await getCollection("blog"); + const posts = await getCollection('blog') return posts.map((post) => ({ params: { @@ -13,18 +13,19 @@ export async function getStaticPaths() { props: { post, }, - })); + })) } -const { post } = Astro.props; -const { Content } = await render(post); +const { post } = Astro.props +const { Content } = await render(post) --- + <Base title={post.data.title}> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-2"> <span class="flex flex-col gap-1"> <span class="text-sm font-light">{post.data.date.toDateString()}</span> - <span class="italic text-gray-600">{post.data.desc}</span> + <span class="text-gray-600 italic">{post.data.desc}</span> </span> </div> <Content /> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 4275304..e6fd375 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -1,21 +1,22 @@ --- -import ContentList from "../../layouts/ContentList.astro"; -import TextSection from "../../components/TextSection.astro"; +import ContentList from '../../layouts/ContentList.astro' +import TextSection from '../../components/TextSection.astro' -import { getCollection, getEntry } from 'astro:content'; +import { getCollection, getEntry } from 'astro:content' -const title = "Blog"; +const title = 'Blog' -const posts = await getCollection('blog'); +const posts = await getCollection('blog') -posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()); +posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()) -const postViewUrl = "/blog/" +const postViewUrl = '/blog/' const contentData = posts.map((post) => ({ title: post.data.title, desc: `${post.data.desc} - ${post.data.date.toDateString()}`, - link: `${postViewUrl}${post.data.slug}` -})); + link: `${postViewUrl}${post.data.slug}`, +})) --- + <ContentList title={title} content={contentData} /> diff --git a/src/pages/index.astro b/src/pages/index.astro index 6d792b8..7ca00b1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,50 +1,53 @@ -u--- -import Base from "../layouts/Base.astro"; -import Heading from "../components/Heading.astro"; -import LargeButtonRow from "../components/LargeButtonRow.astro"; -import IconButtonRow from "../components/IconButtonRow.astro"; -import Webring from "../components/Webring.astro"; +--- +import Base from '../layouts/Base.astro' +import Heading from '../components/Heading.astro' +import LargeButtonRow from '../components/LargeButtonRow.astro' +import IconButtonRow from '../components/IconButtonRow.astro' +import Webring from '../components/Webring.astro' -const title = "Home"; +const title = 'Home' const mainButtonRow = [ { - "title": "Projects", - "desc": "A list of a few of my projects", - "link": "/projects" + 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: '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" - } -]; + title: 'Photos', + desc: 'A small gallery of photographs from my free time', + link: '/photos', + }, +] const iconButtonRow = [ { image: { - link: "/assets/github.svg", - alt: "GitHub" + link: '/assets/github.svg', + alt: 'GitHub', }, - link: "https://github.com/LukePJ25" + link: 'https://github.com/LukePJ25', }, { image: { - link: "/assets/linkedin.svg", - alt: "Linkedin" + link: '/assets/linkedin.svg', + alt: 'Linkedin', }, - link: "https://www.linkedin.com/in/lukepjones/" - } -]; + link: 'https://www.linkedin.com/in/lukepjones/', + }, +] --- + <Base title={title}> - <p>I'm Luke Jones. I'm studying Computer Science at Aberystwyth - University. Right now I'm on my industrial year.</p> + <p> + I'm Luke Jones. I'm studying Computer Science at Aberystwyth University. + Right now I'm on my industrial year. + </p> <div class="flex flex-col gap-2"> <LargeButtonRow entries={mainButtonRow} /> <div class="flex flex-row justify-between"> @@ -53,4 +56,3 @@ const iconButtonRow = [ </div> </div> </Base> - diff --git a/src/pages/photos/[id].astro b/src/pages/photos/[id].astro index 5b40902..f92144b 100644 --- a/src/pages/photos/[id].astro +++ b/src/pages/photos/[id].astro @@ -1,11 +1,11 @@ --- -import Base from "../../layouts/Base.astro"; -import Table from "../../components/Table.astro"; +import Base from '../../layouts/Base.astro' +import Table from '../../components/Table.astro' -import { getCollection, render } from "astro:content"; +import { getCollection, render } from 'astro:content' export async function getStaticPaths() { - const photos = await getCollection("photos"); + const photos = await getCollection('photos') return photos[0].data.map((photo) => ({ params: { @@ -14,28 +14,29 @@ export async function getStaticPaths() { props: { photo, }, - })); + })) } -const { photo } = Astro.props; +const { photo } = Astro.props -const photoSourceUrl = "/photos/source/"; -const photoExtension = ".jpg"; +const photoSourceUrl = '/photos/source/' +const photoExtension = '.jpg' -let coordString = 'None'; +let coordString = 'None' if (photo.coordinates) { coordString = `${photo.coordinates.x}, ${photo.coordinates.y}` } -const photoPath = `${photoSourceUrl}${photo.id}${photoExtension}`; +const photoPath = `${photoSourceUrl}${photo.id}${photoExtension}` const tableData = { - "Location": photo.location, - "Coordinates": coordString, - "Tags": photo.tags + Location: photo.location, + Coordinates: coordString, + Tags: photo.tags, } --- + <Base title={photo.date}> <div class="flex flex-col gap-4"> <a href={photoPath}> diff --git a/src/pages/photos/index.astro b/src/pages/photos/index.astro index 315325f..8e2d3d9 100644 --- a/src/pages/photos/index.astro +++ b/src/pages/photos/index.astro @@ -1,24 +1,25 @@ --- -import ContentGrid from "../../layouts/ContentGrid.astro"; -import TextSection from "../../components/TextSection.astro"; +import ContentGrid from '../../layouts/ContentGrid.astro' +import TextSection from '../../components/TextSection.astro' -import { getCollection, getEntry } from 'astro:content'; +import { getCollection, getEntry } from 'astro:content' -const title = "Photos"; +const title = 'Photos' -const photos = await getCollection('photos'); +const photos = await getCollection('photos') -const photoViewUrl = "/photos/"; -const photoThumbUrl = "/photos/thumb/"; -const photoExtension = ".jpg"; +const photoViewUrl = '/photos/' +const photoThumbUrl = '/photos/thumb/' +const photoExtension = '.jpg' const contentData = photos[0].data.map((photo) => ({ desc: `${photo.date}`, link: `${photoViewUrl}${photo.id}`, image: { link: `${photoThumbUrl}${photo.id}${photoExtension}`, - alt: `${photo.desc}` - } -})); + alt: `${photo.desc}`, + }, +})) --- + <ContentGrid title={title} content={contentData} /> diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro index 268b88b..7b86e89 100644 --- a/src/pages/projects/index.astro +++ b/src/pages/projects/index.astro @@ -1,37 +1,38 @@ --- -import ContentList from "../../layouts/ContentList.astro"; -import TextSection from "../../components/TextSection.astro"; +import ContentList from '../../layouts/ContentList.astro' +import TextSection from '../../components/TextSection.astro' -import { getCollection, getEntry } from 'astro:content'; +import { getCollection, getEntry } from 'astro:content' -const title = "Projects"; +const title = 'Projects' const contentData = [ { - title: "got", - desc: "Basic shell script for quickly storing, managing, and changing-to directories on your machine.", - link: "https://github.com/LukePJ25/got" + title: 'got', + desc: 'Basic shell script for quickly storing, managing, and changing-to directories on your machine.', + link: 'https://github.com/LukePJ25/got', }, { - title: "JSDiver", - desc: "A basic skydiving game implemented through use of the HTML5 Canvas.", - link: "/blog/141124" + title: 'JSDiver', + desc: 'A basic skydiving game implemented through use of the HTML5 Canvas.', + link: '/blog/141124', }, { - title: "Intervle", - desc: "Web-based event-ordering game written in PHP with Laravel 12", - link: "https://github.com/LukePJ25/Intervle" + title: 'Intervle', + desc: 'Web-based event-ordering game written in PHP with Laravel 12', + link: 'https://github.com/LukePJ25/Intervle', }, { - title: "lukeonline", - desc: "This website. Rewritten in Astro.", - link: "https://github.com/LukePJ25/lukeonline" + title: 'lukeonline', + desc: 'This website. Rewritten in Astro.', + link: 'https://github.com/LukePJ25/lukeonline', }, { - title: "ChickenBoard", - desc: "A basic canvas-based drawing program.", - link: "https://github.com/LukePJ25/ChickenBoard/" - } -]; + title: 'ChickenBoard', + desc: 'A basic canvas-based drawing program.', + link: 'https://github.com/LukePJ25/ChickenBoard/', + }, +] --- + <ContentList title={title} content={contentData} /> diff --git a/src/styles/global.css b/src/styles/global.css index e35fb0b..20b8f11 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,5 @@ -@import "tailwindcss"; +@import 'tailwindcss'; html { - background: #ccc; + background: #ccc; }