Skip to content

Commit dba3750

Browse files
coreybruyerecoreybruyere
committed
feat: More playful fonts and cards
1 parent 2fb1a79 commit dba3750

File tree

13 files changed

+148
-109
lines changed

13 files changed

+148
-109
lines changed

‎src/components/BlobCard.astro‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
interface Props {
3+
title: string;
4+
date?: string;
5+
slug?: string;
6+
href?: string;
7+
class?: string;
8+
}
9+
10+
const { title, date, slug, href, class: className } = Astro.props;
11+
---
12+
13+
<div class:list={["blob-card", "card", className]}>
14+
{href ? (
15+
<a href={href} class="card-link">
16+
<div class="card-content">
17+
<h3 class="card-title">{title}</h3>
18+
{date && <time class="card-date">{date}</time>}
19+
{slug && <span class="card-slug">{slug}</span>}
20+
</div>
21+
</a>
22+
) : (
23+
<div class="card-content">
24+
<h3 class="card-title">{title}</h3>
25+
{date && <time class="card-date">{date}</time>}
26+
{slug && <span class="card-slug">{slug}</span>}
27+
</div>
28+
)}
29+
</div>
30+
31+
<style>
32+
.blob-card {
33+
clip-path: ellipse(70% 60% at 50% 50%);
34+
border-radius: 0; /* Override card border-radius for blob shape */
35+
}
36+
</style>

‎src/components/ContentfulPostsList.astro‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import { POSTS_PER_PAGE_MAX } from "../consts";
3+
import BlobCard from "./BlobCard.astro";
34
45
import {
56
contentfulClient,
@@ -40,16 +41,33 @@ const {
4041
}: ContentfulPostsListProps = Astro.props;
4142
---
4243

43-
<ul class="list-none p-0">
44+
<div class="grid-cards">
4445
{
4546
posts
4647
.slice((pageParam - 1) * postsPerPage, pageParam * postsPerPage)
4748
.map((post: any) => (
48-
<li class="mb-4 text-primary">
49-
<a href={`/blog/${post.slug}`}>
50-
Title:{post.title}, Date: {post.publishDate}, Slug: {post.slug}
51-
</a>
52-
</li>
49+
<BlobCard
50+
title={post.title}
51+
date={post.publishDate}
52+
slug={post.slug}
53+
href={`/blog/${post.slug}`}
54+
/>
5355
))
5456
}
55-
</ul>
57+
</div>
58+
59+
<style>
60+
.blob-cards-grid {
61+
display: grid;
62+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
63+
gap: var(--space-lg);
64+
padding: var(--space-md) 0;
65+
}
66+
67+
@media (max-width: 768px) {
68+
.blob-cards-grid {
69+
grid-template-columns: 1fr;
70+
gap: var(--space-md);
71+
}
72+
}
73+
</style>

‎src/consts.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
export const SITE_TITLE = "CB";
55
export const SITE_DESCRIPTION =
66
"Corey Bruyere's Portolio and Personal Website!";
7-
export const POSTS_PER_PAGE_MIN = 3;
7+
export const POSTS_PER_PAGE_MIN = 4;
88
export const POSTS_PER_PAGE_MAX = 10;

‎src/layouts/BaseLayout.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ const { title, description } = Astro.props;
1616
<head>
1717
<BaseHead title={title} description={description} />
1818
<ViewTransitions />
19+
1920
</head>
2021

2122
<body>
2223
<Header />
23-
<main>
24+
<main class="pt-5">
2425
<Container>
2526
<slot />
2627
</Container>

‎src/layouts/Page.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
import BaseLayout from "./BaseLayout.astro";
33
4-
const { title, heroImage } = Astro.props;
4+
const { title, description, heroImage } = Astro.props;
55
---
66

7-
<BaseLayout>
8-
<article>
7+
<BaseLayout title={title} description={description}>
8+
<section>
99
<div class="hero-image">
1010
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
1111
</div>
@@ -16,5 +16,5 @@ const { title, heroImage } = Astro.props;
1616
</div>
1717
<slot />
1818
</div>
19-
</article>
19+
</section>
2020
</BaseLayout>

‎src/pages/[slug].astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@ if (!pageData) {
1717
}
1818
1919
const htmlContent = marked.parse(pageData.body as any);
20+
21+
22+
const metaDescription = pageData.metaDescription;
2023
---
2124

22-
<Page>
25+
<Page title={pageData.title} description={metaDescription} heroImage={pageData.heroImage}>
2326
<article set:html={htmlContent} />
2427
</Page>

‎src/pages/aboutsdfads.astro‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎src/pages/blog/index.astro‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import Posts from "../partials/posts.astro";
55
66
---
77

8-
<Layout>
9-
<h2>Contentful Posts:</h2>
10-
8+
<Layout title="Blog">
119
<Posts />
1210
<!-- {
1311
postsContentful && (

‎src/pages/contact.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Layout from "../layouts/Page.astro";
66
title="Contact"
77
description="Lorem ipsum dolor sit amet"
88
pubDate={new Date("August 08 2021")}
9-
heroImage="/blog-placeholder-about.jpg"
109
>
1110
<form method="POST" id="form" class="max-w-md mx-auto space-y-4">
1211
<input

‎src/pages/index.astro‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,15 @@ const calculatePagination = (
1818
1919
---
2020

21-
<BaseLayout>
21+
<BaseLayout title="Home" description="Home">
2222
<h1>🧑‍🚀 Hello, Astronaut!</h1>
23-
2423
<hr class="my-10" />
2524

26-
{/* HTMX Testing */}
27-
<h2 class="text-3xl w-full">
28-
HTMX Testing Section
29-
</h2>
30-
3125
<div id="post-contents" class="mt-3 p-3 border-2 rounded-xl">
3226
<Posts />
3327
</div>
3428
<Pagination
3529
totalPages={calculatePagination(contentfulPostsLength)}
3630
currentPage={currentPage}
3731
/>
38-
39-
<hr class="my-10" />
40-
4132
</BaseLayout>

0 commit comments

Comments
 (0)