ob248.com/src/components/ProjectPage.astro

---
import Layout from "../layouts/Layout.astro";

export interface Props {
    metadata: {
        title: string;
        description: string;
        date: string;
        slug: string;
        image?: string | null;
        url?: string;
        github?: string;
        hidden: boolean;
        tags?: string[];
    };
}

const { metadata } = Astro.props;

metadata.tags?.sort();
---

<style>
    a {
        text-decoration: none;
        border-bottom: 1px solid var(--ayu-blue-500);
        color: var(--ayu-blue-500);
        transition:
            color 0.1s,
            border-color 0.1s;
        margin-bottom: 16px;
    }
    a:hover {
        color: var(--ayu-blue-600);
        border-color: var(--ayu-blue-600);
    }

    .github {
        color: var(--ayu-green-500);
        border: none;
    }
    .github:hover {
        color: var(--ayu-green-500);
        text-decoration: underline;
    }
</style>

<Layout
    currentPage={{
        title: `${metadata.title}`,
        path: `projects/${metadata.slug}`,
    }}
>
    <div class="text-md">
        <h1 class="text-2xl text-ayu-accent mb-2">
            {metadata.title}
        </h1>

        {
            metadata.image ? (
                <img
                    src={metadata.image}
                    alt={`${metadata.title} project icon`}
                    class="w-24 h-24 mb-4 rounded"
                />
            ) : (
                <div class="w-24 h-24 mb-4 border border-ayu-gutter rounded" />
            )
        }

        <p class="text-sm text-ayu-gutter mb-2">
            {metadata.date}
            {
                metadata.github && (
                    <>
                        {" "}
                        -{" "}
                        <a
                            href={metadata.github}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="github"
                        >
                            Source Code
                        </a>
                    </>
                )
            }
        </p>

        {
            metadata.tags && metadata.tags.length > 0 && (
                <div class="flex gap-1.5 text-sm flex-wrap leading-3 items-center mb-2 no-select">
                    {metadata.tags.map((tag: string, idx: number) => (
                        <span class="flex items-center text-ayu-gutter font-500 rounded-md border border-ayu-gutter px-1.5 py-1">
                            {tag}
                        </span>
                    ))}
                </div>
            )
        }

        {
            metadata.url ? (
                <a
                    href={metadata.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-block text-sm"
                >
                    Try {metadata.title}
                </a>
            ) : null
        }

        <slot />

        <p class="text-center text-md text-ayu-gutter mt-8 mb-4">
            Oliver Bryan - {metadata.date}
            {
                metadata.github && (
                    <>
                        {" "}
                        -{" "}
                        <a
                            href={metadata.github}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="github"
                        >
                            Source Code
                        </a>
                    </>
                )
            }
        </p>
    </div>
</Layout>