Skip to content

Commit 0bdced4

Browse files
TheAlbertDevTheAlbertDev
committed
improve border color and secondary text opacitiy
1 parent e7d776d commit 0bdced4

File tree

5 files changed

+75
-34
lines changed

5 files changed

+75
-34
lines changed

‎src/components/PostCard.astro‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import { getEntry } from "astro:content";
33
import { Image } from "astro:assets";
4-
import type { ImageMetadata } from 'astro';
4+
import type { ImageMetadata } from "astro";
55
import { getLangFromUrl, useTranslatedPath } from "../i18n/utils";
66
import type { CollectionEntry } from "astro:content";
77
import GradientTag from "./GradientTag.astro";
@@ -17,9 +17,17 @@ const authors = await Promise.all(
1717
),
1818
);
1919
20-
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/imgs/*.{jpeg,jpg,png,gif}')
21-
if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
22-
if (!images[authors[0].data.image!]) throw new Error(`"${authors[0].data.image!}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
20+
const images = import.meta.glob<{ default: ImageMetadata }>(
21+
"/src/assets/imgs/*.{jpeg,jpg,png,gif}",
22+
);
23+
if (!images[post.data.image!])
24+
throw new Error(
25+
`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
26+
);
27+
if (!images[authors[0].data.image!])
28+
throw new Error(
29+
`"${authors[0].data.image!}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
30+
);
2331
---
2432

2533
<article
@@ -45,14 +53,18 @@ if (!images[authors[0].data.image!]) throw new Error(`"${authors[0].data.image!}
4553
>{post.data.title}</a
4654
>
4755
</h3>
48-
<p class="text-base-content text-opacity-65 my-4">{post.data.description}</p>
56+
<p class="text-base-content opacity-65 my-4">{post.data.description}</p>
4957
<footer class="text-sm flex justify-start items-center">
5058
{
5159
authors.map(async (author) => (
5260
<>
5361
<span class="avatar mr-4">
5462
<div class="w-10 rounded-full">
55-
<Image src={images[authors[0].data.image!]()} alt={author.data.name} width="40" />
63+
<Image
64+
src={images[authors[0].data.image!]()}
65+
alt={author.data.name}
66+
width="40"
67+
/>
5668
</div>
5769
</span>
5870
<span>{author.data.name}</span>

‎src/components/PostCardSmall.astro‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { Image } from "astro:assets";
3-
import type { ImageMetadata } from 'astro';
3+
import type { ImageMetadata } from "astro";
44
import { getEntry } from "astro:content";
55
import { getLangFromUrl, useTranslatedPath } from "../i18n/utils";
66
import type { CollectionEntry } from "astro:content";
@@ -16,8 +16,13 @@ const authors = await Promise.all(
1616
async (authorEntry) => await getEntry(authorEntry.author),
1717
),
1818
);
19-
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/imgs/*.{jpeg,jpg,png,gif}')
20-
if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
19+
const images = import.meta.glob<{ default: ImageMetadata }>(
20+
"/src/assets/imgs/*.{jpeg,jpg,png,gif}",
21+
);
22+
if (!images[post.data.image!])
23+
throw new Error(
24+
`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
25+
);
2126
---
2227

2328
<article
@@ -43,7 +48,7 @@ if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not ex
4348
>{post.data.title}</a
4449
>
4550
</h3>
46-
<p class="text-base-content text-opacity-65 my-4">{post.data.description}</p>
51+
<p class="text-base-content opacity-65 my-4">{post.data.description}</p>
4752
<footer class="text-sm flex justify-start items-center">
4853
{
4954
authors.map(async (author) => (

‎src/components/PostListItem.astro‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getLangFromUrl, useTranslatedPath } from "../i18n/utils";
44
import type { CollectionEntry } from "astro:content";
55
import GradientTag from "./GradientTag.astro";
66
import { Image } from "astro:assets";
7-
import type { ImageMetadata } from 'astro';
7+
import type { ImageMetadata } from "astro";
88
99
const lang = getLangFromUrl(Astro.url);
1010
const translatePath = useTranslatedPath(lang);
@@ -15,9 +15,17 @@ const authors = await Promise.all(
1515
post.data.authors.map((authorEntry) => getEntry(authorEntry.author)),
1616
);
1717
18-
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/imgs/*.{jpeg,jpg,png,gif}')
19-
if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
20-
if (!images[authors[0].data.image!]) throw new Error(`"${authors[0].data.image!}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
18+
const images = import.meta.glob<{ default: ImageMetadata }>(
19+
"/src/assets/imgs/*.{jpeg,jpg,png,gif}",
20+
);
21+
if (!images[post.data.image!])
22+
throw new Error(
23+
`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
24+
);
25+
if (!images[authors[0].data.image!])
26+
throw new Error(
27+
`"${authors[0].data.image!}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
28+
);
2129
---
2230

2331
<li>
@@ -45,7 +53,7 @@ if (!images[authors[0].data.image!]) throw new Error(`"${authors[0].data.image!}
4553
>{post.data.title}</a
4654
>
4755
</h3>
48-
<p class="text-base-content text-opacity-65 my-4">
56+
<p class="text-base-content opacity-65 my-4">
4957
{post.data.description}
5058
</p>
5159
<footer class="text-sm flex justify-start items-center">
@@ -54,7 +62,11 @@ if (!images[authors[0].data.image!]) throw new Error(`"${authors[0].data.image!}
5462
<>
5563
<span class="avatar mr-4">
5664
<div class="w-10 rounded-full">
57-
<Image src={images[authors[0].data.image!]()} alt={author.data.name} width="40"/>
65+
<Image
66+
src={images[authors[0].data.image!]()}
67+
alt={author.data.name}
68+
width="40"
69+
/>
5870
</div>
5971
</span>
6072
<span>{author.data.name}</span>

‎src/pages/[...lang]/posts/[...page].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const t = useTranslations((lang ?? defaultLang) as keyof typeof languages);
4949
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-12 gap-y-6 mb-12">
5050
{
5151
page.data.map((post) => (
52-
<div class="border-b-[0.125rem] border-base-content border-opacity-10 pb-6 mt-6">
52+
<div class="border-b-[1px] border-[color-mix(in_oklab,var(--color-base-content)_15%,transparent)] border-base-content pb-6 mt-6">
5353
<PostCardSmall post={post} />
5454
</div>
5555
))

‎src/pages/[...lang]/posts/[...slug].astro‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Code } from "astro-expressive-code/components";
1414
import InfoNote from "../../../components/InfoNote.astro";
1515
import AuthorNote from "../../../components/AuthorNote.astro";
1616
import { Image } from "astro:assets";
17-
import type { ImageMetadata } from 'astro';
17+
import type { ImageMetadata } from "astro";
1818
import { getImage } from "astro:assets";
1919
2020
export async function getStaticPaths() {
@@ -45,40 +45,48 @@ const authors = await Promise.all(
4545
const { Content, headings } = await post.render();
4646
const readingMinutes = Math.ceil(readingTime(post.body).minutes);
4747
48-
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/imgs/*.{jpeg,jpg,png,gif}')
49-
if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`);
48+
const images = import.meta.glob<{ default: ImageMetadata }>(
49+
"/src/assets/imgs/*.{jpeg,jpg,png,gif}",
50+
);
51+
if (!images[post.data.image!])
52+
throw new Error(
53+
`"${post.data.image}" does not exist in glob: "src/assets/imgs/*.{jpeg,jpg,png,gif}"`,
54+
);
5055
---
5156

52-
<Layout title={post.data.title} seo={{
57+
<Layout
58+
title={post.data.title}
59+
seo={{
5360
extend: {
5461
meta: [
5562
{
5663
name: "twitter:card",
57-
content: "summary"
64+
content: "summary",
5865
},
5966
{
6067
name: "twitter:site",
61-
content: "@thealbertdev"
68+
content: "@thealbertdev",
6269
},
6370
{
6471
name: "twitter:creator",
65-
content: "@thealbertdev"
72+
content: "@thealbertdev",
6673
},
6774
{
6875
name: "twitter:description",
69-
content: post.data.description
76+
content: post.data.description,
7077
},
7178
{
7279
name: "twitter:title",
73-
content: post.data.title
80+
content: post.data.title,
7481
},
7582
{
7683
name: "twitter:image",
77-
content: `${Astro.site!.toString().replace(/\/+$/, "")}${(await getImage( {src: (await images[post.data.image!]()).default})).src}`,
78-
}
79-
]
80-
}
81-
}}>
84+
content: `${Astro.site!.toString().replace(/\/+$/, "")}${(await getImage({ src: (await images[post.data.image!]()).default })).src}`,
85+
},
86+
],
87+
},
88+
}}
89+
>
8290
<article class="container mx-auto max-w-screen-lg">
8391
<header>
8492
<div class="my-14">
@@ -88,7 +96,7 @@ if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not ex
8896
<h1 class="text-4xl font-bold mb-4">
8997
{post.data.title}
9098
</h1>
91-
<p>{post.data.description}</p>
99+
<p class="opacity-65">{post.data.description}</p>
92100
</div>
93101
<Image
94102
src={images[post.data.image!]()}
@@ -117,7 +125,9 @@ if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not ex
117125
<SharePost post={post} />
118126
</section>
119127
<div class="divider"></div>
120-
<div class="grid grid-row-2 md:gap-x-12 grid-cols-1 md:grid-cols-12 lg:grid-cols-10">
128+
<div
129+
class="grid grid-row-2 md:gap-x-12 grid-cols-1 md:grid-cols-12 lg:grid-cols-10"
130+
>
121131
<section
122132
class="article-content mb-8 prose-pre:max-w-[85vw] md:prose-pre:max-w-none prose prose-p:mb-6 prose-h2:mb-5 prose-h2:mt-10 prose-h3:mb-3 prose-h3:mt-5 col-span-1 md:col-span-8 lg:col-span-7 text-lg
123133
[&_p]:my-[24px] [&_p>code]:whitespace-pre-wrap [&_p>code]:break-all [&_p>code]:break-words"
@@ -126,7 +136,9 @@ if (!images[post.data.image!]) throw new Error(`"${post.data.image}" does not ex
126136
<BottomTags tags={post.data.tags} />
127137
</section>
128138
<aside class="col-span-1 md:col-span-4 lg:col-span-3">
129-
<section class="hidden md:block"><Tags tags={post.data.tags} /></section>
139+
<section class="hidden md:block">
140+
<Tags tags={post.data.tags} />
141+
</section>
130142
<section class="hidden md:block sticky top-20">
131143
<TableofContents headings={headings} />
132144
</section>

0 commit comments

Comments
 (0)