Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions src/components/discovery/DiscoveryCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,22 @@ type Props = {
export default function DiscoveryCard({ post }: Props) {
return (
<article className="group h-full">
<Link href={`/discovery/${post.slug}`} className="project-card discovery-card block h-full flex flex-col">
<Link
href={`/discovery/${post.slug}`}
className="project-card discovery-card block h-full flex flex-col"
>
{/* Fixed-height image area so cards align evenly */}
<div className="w-full h-56 overflow-hidden rounded-t">
{post.image ? (
<SafeImage src={post.image} alt={post.title} className="w-full h-full object-cover" />
<SafeImage
src={post.image}
alt={post.title}
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full bg-gray-800 flex items-center justify-center text-gray-400">No Image</div>
<div className="w-full h-full bg-gray-800 flex items-center justify-center text-gray-400">
No Image
</div>
)}
</div>

Expand All @@ -25,10 +34,15 @@ export default function DiscoveryCard({ post }: Props) {
<span className="text-lg font-semibold">{post.title}</span>
</h3>
<h4 className="project-subtitle">{post.description}</h4>
<p className="discovery-description mt-2 flex-1">{post.description}</p>
<p className="discovery-description mt-2 flex-1">
{post.description}
</p>
<div className="mt-3 flex flex-wrap gap-2">
{post.tags?.map((t) => (
<span key={t} className="text-xs bg-gray-700 text-gray-200 px-2 py-1 rounded">
<span
key={t}
className="text-xs bg-gray-700 text-gray-200 px-2 py-1 rounded"
>
{t}
</span>
))}
Expand Down
6 changes: 5 additions & 1 deletion src/components/discovery/DiscoveryList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ type Props = {

export default function DiscoveryList({ posts }: Props) {
if (!posts.length)
return <p className="text-center text-gray-400">No posts yet, come back later?</p>;
return (
<p className="text-center text-gray-400">
No posts yet, come back later?
</p>
);
// Ensure posts are sorted by date (newest first). Some posts may omit dates.
const sorted = [...posts].sort((a, b) => {
const da = a.date ? new Date(a.date).getTime() : 0;
Expand Down
8 changes: 5 additions & 3 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ function Website({ Component, pageProps }: AppProps) {
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{
'Keyyard | Minecraft Addon Developer - Where Creativity Is Built Block by Block'
}</title>
<title>
{
"Keyyard | Minecraft Addon Developer - Where Creativity Is Built Block by Block"
}
</title>
</Head>
{/* Google Tag Manager */}
<Script
Expand Down
32 changes: 26 additions & 6 deletions src/pages/discovery/[slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function DiscoveryPost({ post }: any) {
return (
<>
<Head>
<title>{`${meta.title} — Discovery`}</title>
<title>{`${meta.title} — Discovery`}</title>
</Head>
<section className="section">
{/* Breadcrumb */}
Expand Down Expand Up @@ -94,8 +94,12 @@ export default function DiscoveryPost({ post }: any) {
{meta.downloads.map((d: any, i: number) => (
<div key={i} className="flex items-center gap-3">
<div className="flex-1">
<div className="font-medium">{d.label || `Version ${i + 1}`}</div>
{d.notes ? <div className="text-sm text-gray-400">{d.notes}</div> : null}
<div className="font-medium">
{d.label || `Version ${i + 1}`}
</div>
{d.notes ? (
<div className="text-sm text-gray-400">{d.notes}</div>
) : null}
</div>
<div>
<a
Expand All @@ -121,7 +125,14 @@ export default function DiscoveryPost({ post }: any) {
aria-label={`View ${meta.title} on GitHub`}
className="inline-flex items-center gap-2 px-4 py-2 rounded bg-purple-600 hover:bg-purple-800 text-white font-medium"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
View on GitHub
Expand All @@ -135,8 +146,17 @@ export default function DiscoveryPost({ post }: any) {
aria-label={`Join ${meta.title} Discord community`}
className="inline-flex items-center gap-2 px-4 py-2 rounded bg-[#5865F2] hover:bg-[#4752c4] text-white font-medium"
>
<svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
<svg
viewBox="0 0 640 512"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
aria-hidden="true"
>
<path
fill="currentColor"
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
/>
</svg>
Join our Discord
</a>
Expand Down
23 changes: 17 additions & 6 deletions src/pages/discovery/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,29 @@ export default function DiscoveryIndex({ posts }: { posts: any[] }) {

const filtered = posts.filter((p: any) => {
if (filter && !(p.tags || []).includes(filter)) return false;
if (q && !(p.title + p.description).toLowerCase().includes(q.toLowerCase())) return false;
if (q && !(p.title + p.description).toLowerCase().includes(q.toLowerCase()))
return false;
return true;
});

return (
<>
<Head>
<title>Keyyard Discovery</title>
<link rel="alternate" type="application/rss+xml" title="Discovery RSS" href="/discovery/rss.xml" />
<title>Keyyard Discovery</title>
<link
rel="alternate"
type="application/rss+xml"
title="Discovery RSS"
href="/discovery/rss.xml"
/>
</Head>
<section id="discovery" className="section">
<section id="discovery" className="section">
<div className="px-4 mx-auto w-full">
<div className="mb-4 p-4 flex items-center justify-between">
<nav aria-label="Breadcrumb" className="text-sm text-gray-400 flex items-center gap-3">
<nav
aria-label="Breadcrumb"
className="text-sm text-gray-400 flex items-center gap-3"
>
<Link href="/" className="hover:underline">
Home
</Link>
Expand All @@ -61,7 +70,9 @@ export default function DiscoveryIndex({ posts }: { posts: any[] }) {
className="flex-1 p-2 border rounded bg-[#111] text-gray-100"
/>
<div className="flex gap-2 items-center">
<label htmlFor="tag-select" className="sr-only">Filter by tag</label>
<label htmlFor="tag-select" className="sr-only">
Filter by tag
</label>
<select
id="tag-select"
value={filter || ""}
Expand Down