Astro Framework and Static Site Generation
The website leverages Astro, a static site generator that allows developers to build fast, content-focused websites.
Astro’s ability to generate static HTML at build time ensures that the site is lightweight and performant. The site’s structure is organized into components, layouts, and pages.
For example, the BaseLayout.astro file defines the overall layout of the website, including the navigation bar and global styles.
This layout is reused across multiple pages, ensuring consistency (consistently bad is of course an option).
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="awsfrustrates/me"/>
<meta name="viewport" content="width=device-width"/>
<link rel="icon" type="image/svg+xml" href="/favicon.webp"/>
<meta name="generator" content={Astro.generator}/>
<title>{title}</title>
</head>
<body>
<div id="navbar">
<a href="/">Home</a>
<a href="/infrastructure">Infrastructure</a>
<a href="/llms">LLM Posts</a>
<a href="/dog-gallery">Doggo</a>
</div>
<main>
<slot/>
</main>
</body>
</html>Dynamic Content with AI-Generated Markdown
As shown in (the lllms code page)[../llms/code]
const PROMPT_SECTIONS = {
'Introduction': `Briefly introduce [Service Name], highlighting features and benefits.`,
'Uses and Benefits': `Explain the primary use cases and benefits of [Service Name] in Docker.`,
'Docker Setup': `Provide a quick setup guide for [Service Name] in Docker, including tips for common issues.`,
'Security Essentials': `Outline essential security measures for [Service Name] in Docker.`,
};The generated markdown files are then rendered on the website, providing questionable documentation for each service.
Component-Based Architecture
The website is built using reusable components, which are defined in the components/ directory.
For instance, the ServiceCard.astro component is used to display a card for each Docker service, complete with an icon, title, and links to the project and service URLs.
The component is modular and can be reused across different pages.
---
import { Image } from "astro:assets";
import { getServiceIcon } from "@utils/serviceIconFetcher";
import spaceDawg from "../images/space-dawg-40.webp";
interface props {
service: {
serviceUrl: string,
iconName: string,
iconAlt: string,
serviceName: string,
projectUrl: string,
},
};
const { service } = Astro.props;
let icon;
if (
service.iconName === null ||
service.iconName === "" ||
service.iconName === undefined ||
service.iconName === "default"
) {
icon = spaceDawg;
} else {
icon = getServiceIcon(service);
}
const serviceHref = `/services/${service.title.replace(" ", "-").toLowerCase()}`;
---
<div class="card">
<a href={serviceHref} class="card-link">
<div class="card-content">
<div class="card-icon">
<Image src={icon} alt={`${service.iconAlt} icon`} width="40" />
</div>
<h2>{service.title}</h2>
</div>
</a>
<hr class="card-divider" />
<div class="buttons">
{
service.projectUrl !== "N/A" && (
<a href={service.projectUrl} class="button">
Visit Original Project
</a>
)
}
{
service.serviceUrl !== "N/A" && (
<a href={service.serviceUrl} class="button">
Visit Service
</a>
)
}
</div>
</div>Dynamic Routing and Content Fetching
The website uses Astro’s dynamic routing to generate pages for each service and LLM post. For example, the [...slug].astro file in the pages/llms/ directory dynamically generates pages for each LLM post based on the slug parameter.
The content is fetched using Astro’s getEntry function, which retrieves the markdown files generated by the AI.
---
import Layout from "@layouts/BaseLayout.astro";
import {getCollection, render} from "astro:content";
import {getServiceIcon} from "@utils/serviceIconFetcher";
import {Image} from "astro:assets";
import dawg from "../../images/space-dawg.webp";
import {getEntry} from "astro:content";
export async function getStaticPaths() {
const services = await getCollection("services");
return services.map((service) => ({
params: {slug: service.slug},
}));
}
const slug = Astro.params.slug;
const service = await getEntry("services", slug);
if (!service) {
throw new Error(`Service not found for slug: ${slug}`);
}
const {Content} = await render(service);
---
<Layout title={service.data.title}>
<main>
<Image
src={getServiceIcon(service.data)}
alt={`${service.data.iconAlt} icon`}
width="100"
height="100"
/>
<h2>{service.data.title}</h2>
<div class="content">
<p>
<a href={`${service.data.projectUrl}`}>Original Project website</a>
</p>
{
service.body ?
(<Content/>) :
(<p>Not written anything for this yet, here's a dog instead:</p>
<Image src={dawg} alt="Dawg" width={300} height={300}/>)
}
</div>
</main>
</Layout>This approach allows the website to dynamically generate pages for new content without manual intervention, making it highly scalable.
Dynamic Routing and Content Fetching
The website uses Astro’s dynamic routing to generate pages for each service and LLM post.
For example, the [...slug].astro file in the pages/llms/ directory dynamically generates pages for each LLM post based on the slug parameter.
The content is fetched using Astro’s getEntry functions, which retrieve the markdown files generated by the AI.
---
import Layout from "../../layouts/BaseLayout.astro";
import LLMFrontMatterDisplay from "../../components/LLMFrontMatterDisplay.astro";
import { getCollection, getEntry } from "astro:content";
import { getServiceIcon } from "@utils/serviceIconFetcher";
import { Image } from "astro:assets";
import dawg from "@images/space-dawg.webp";
import spaceDawg from "@images/space-dawg-40.webp";
const slug = Astro.params.slug;
export async function getStaticPaths() {
const llms = await getCollection("llms");
return llms.map((llm) => ({
params: { slug: llm.slug },
}));
}
const llmPost = await getEntry("llms", slug);
const { Content } = await llmPost.render();
let icon;
if (
llmPost.data.iconName === null ||
llmPost.data.iconName === "" ||
llmPost.data.iconName === undefined ||
llmPost.data.iconName === "default"
) {
icon = spaceDawg;
} else {
icon = getServiceIcon(llmPost);
}
---
<Layout title={llmPost.data.title}>
<main>
<div >
<h2>
<Image src={getServiceIcon(llmPost.data)} alt={`${llmPost.data.iconAlt} icon`} width="50" height="50" />
{llmPost.data.title}
</h2>
</div>
<LLMFrontMatterDisplay
service={llmPost}
/>
<div class="content">
{llmPost.body ? (
<Content />
) : (
<>
<p class="fallback-text">Lol not written anything for this yet, here's a dog instead:</p>
<Image src={dawg} alt="Dawg" width={300} height={300} />
</>
)}
</div>
</main>
</Layout>This approach allows the website to dynamically generate pages for new content without manual intervention, making it highly scalable.
Dog Gallery
In addition to technical content, the website includes a Dog Gallery, showcasing Lola the greyhound.
The DogGallery.astro component contains DogGalleryComponent.astro which dynamically imports images from the assets/images/dawg/ directory. The images here, and throughout most of the site, make use of Astro’s image optimisation through their <Image> component.
---
import Layout from "../layouts/BaseLayout.astro";
import DogGalleryComponent from "src/components/DogGallery.astro";
---
<Layout title="Dog Gallery">
<main>
<h2>Dog Gallery</h2>
<DogGalleryComponent />
</main>
</Layout>---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
const images = import.meta.glob<{ default: ImageMetadata }>(
"/src/assets/images/dawg/*.webp",
);
const imageEntries = await Promise.all(
Object.entries(images).map(async ([path, resolver]) => {
const image = await resolver();
return { path, image: image.default };
}),
);
---
<div class="dog-gallery">
{
imageEntries.map(({ path, image }) => (
<div class="gallery-item" id={path}>
<Image src={image} alt={`Dog image from ${path}`} />
</div>
))
}
</div>