Skip to content

Commit 593d66d

Browse files
trueberrylesstrueberryless
authored
feature: credits + collaboration tag (#148)
1 parent e0ba34c commit 593d66d

34 files changed

+722
-105
lines changed

‎astro.config.mjs‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,11 @@ export default defineConfig({
114114
starlightImageZoom(),
115115
starlightThemeRapide(),
116116
starlightCoolerCredit({
117-
credit: "Starlight Blog",
117+
credit: {
118+
title: "Credits",
119+
description: "View all credits of this blog →",
120+
href: "https://blog.trueberryless.org/credits",
121+
},
118122
}),
119123
starlightBlog({
120124
title: "Deep Thoughts",
@@ -144,7 +148,7 @@ export default defineConfig({
144148
url: "https://hideoo.dev",
145149
},
146150
frostybee: {
147-
name: "Frostybee",
151+
name: "FrostyBee",
148152
picture: "/frostybee.png",
149153
url: "https://github.com/frostybee",
150154
},
@@ -174,7 +178,6 @@ export default defineConfig({
174178
],
175179
components: {
176180
MarkdownContent: "./src/components/MarkdownContent.astro",
177-
TableOfContents: "./src/components/TableOfContents.astro",
178181
Hero: "./src/components/Hero.astro",
179182
PageTitle: "./src/components/PageTitle.astro",
180183
},

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@expressive-code/plugin-line-numbers": "^0.41.3",
3030
"@fontsource-variable/atkinson-hyperlegible-next": "^5.2.6",
3131
"@fontsource-variable/jetbrains-mono": "^5.2.8",
32+
"@lucide/astro": "^0.545.0",
3233
"@lunariajs/core": "^0.1.1",
3334
"@lunariajs/starlight": "^0.1.1",
3435
"astro": "^5.14.1",

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/blog/authors/artificial-intelligence.jpg‎

957 KB
Loading

‎public/blog/tags/collaboration.jpg‎

275 KB
Loading

‎src/components/ImageCredit.astro‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
---
2+
import type { ImageMetadata } from "astro";
3+
import { Image } from "astro:assets";
4+
import { User, ExternalLink, FileText } from "@lucide/astro";
5+
6+
interface Props {
7+
image: string;
8+
title?: string;
9+
author: string;
10+
authorUrl?: string;
11+
source?: string;
12+
sourceUrl?: string;
13+
usedOn?: string;
14+
usedOnUrl?: string;
15+
alt?: string;
16+
}
17+
18+
const {
19+
image,
20+
title,
21+
author,
22+
authorUrl,
23+
source = "Unsplash",
24+
sourceUrl,
25+
usedOn,
26+
usedOnUrl,
27+
alt = `Photo by ${author}`,
28+
} = Astro.props;
29+
30+
const images = import.meta.glob<{ default: ImageMetadata }>(
31+
"/public/**/*.{jpeg,jpg,png,gif}"
32+
);
33+
if (!images[image])
34+
throw new Error(
35+
`"${image}" does not exist in glob: "public/**/*.{jpeg,jpg,png,gif}"`
36+
);
37+
---
38+
39+
<article class="image-credit-card">
40+
<div class="image-preview">
41+
<Image
42+
src={images[image]()}
43+
alt={alt}
44+
loading="lazy"
45+
width={1400}
46+
height={800}
47+
/>
48+
</div>
49+
50+
<div class="credit-info">
51+
{title && <div class="title">{title}</div>}
52+
53+
<div class="metadata">
54+
<div class="metadata-item">
55+
<User class="icon" size={14} />
56+
{
57+
authorUrl ? (
58+
<a href={authorUrl} target="_blank" rel="noopener noreferrer">
59+
{author}
60+
</a>
61+
) : (
62+
<span>{author}</span>
63+
)
64+
}
65+
</div>
66+
67+
<span class="separator">•</span>
68+
69+
<div class="metadata-item">
70+
<ExternalLink class="icon" size={14} />
71+
{
72+
sourceUrl ? (
73+
<a href={sourceUrl} target="_blank" rel="noopener noreferrer">
74+
{source}
75+
</a>
76+
) : (
77+
<span>{source}</span>
78+
)
79+
}
80+
</div>
81+
82+
{
83+
usedOn && (
84+
<>
85+
<span class="separator">•</span>
86+
<div class="metadata-item">
87+
<FileText class="icon" size={14} />
88+
{usedOnUrl ? (
89+
<a href={usedOnUrl}>{usedOn}</a>
90+
) : (
91+
<span>{usedOn}</span>
92+
)}
93+
</div>
94+
</>
95+
)
96+
}
97+
</div>
98+
</div>
99+
</article>
100+
101+
<style>
102+
.image-credit-card {
103+
display: flex;
104+
flex-direction: column;
105+
gap: 1.25rem;
106+
padding: 1rem;
107+
background: var(--sl-rapide-ui-bg-color);
108+
border: 1px solid var(--sl-rapide-ui-border-color);
109+
border-radius: 0.5rem;
110+
transition:
111+
border-color 0.3s ease,
112+
transform 0.2s ease;
113+
}
114+
115+
.image-credit-card:hover {
116+
border-color: var(--sl-color-accent);
117+
transform: translateY(-2px);
118+
}
119+
120+
@media (min-width: 568px) {
121+
.image-credit-card {
122+
flex-direction: row;
123+
min-height: 120px;
124+
}
125+
}
126+
127+
.image-preview {
128+
width: 100%;
129+
height: auto;
130+
border-radius: 0.375rem;
131+
overflow: hidden;
132+
background: var(--sl-color-gray-6);
133+
}
134+
135+
@media (min-width: 568px) {
136+
.image-preview {
137+
flex-shrink: 0;
138+
width: 150px;
139+
height: 86px;
140+
}
141+
}
142+
143+
.image-preview img {
144+
width: 100%;
145+
height: 100%;
146+
object-fit: cover;
147+
display: block;
148+
}
149+
150+
.credit-info {
151+
display: flex;
152+
flex-direction: column;
153+
justify-content: center;
154+
gap: 0.5rem;
155+
flex: 1;
156+
min-width: 0;
157+
}
158+
159+
.title {
160+
font-size: 1.05rem;
161+
font-weight: 500;
162+
line-height: 1.1;
163+
color: var(--sl-color-white);
164+
margin: 0;
165+
}
166+
167+
@media (min-width: 868px) {
168+
.title {
169+
font-size: 1.25rem;
170+
font-weight: 600;
171+
line-height: 1.3;
172+
}
173+
}
174+
175+
.metadata {
176+
display: flex;
177+
align-items: center;
178+
flex-wrap: wrap;
179+
column-gap: 0.75rem;
180+
font-size: 0.875rem;
181+
color: var(--sl-color-gray-3);
182+
}
183+
184+
.metadata-item {
185+
display: flex;
186+
align-items: center;
187+
gap: 0.375rem;
188+
color: var(--sl-color-gray-3);
189+
}
190+
191+
.metadata-item :global(.icon) {
192+
flex-shrink: 0;
193+
color: var(--sl-color-gray-3);
194+
transition: color 0.2s ease;
195+
}
196+
197+
.metadata-item a {
198+
color: var(--sl-color-gray-3);
199+
text-decoration: none;
200+
transition: color 0.2s ease;
201+
}
202+
203+
.metadata-item:has(a:hover) :global(.icon),
204+
.metadata-item a:hover {
205+
color: var(--sl-color-accent-high);
206+
}
207+
208+
.separator {
209+
color: var(--sl-color-gray-4);
210+
user-select: none;
211+
}
212+
213+
@media (max-width: 567px) {
214+
.image-credit-card {
215+
gap: 1rem;
216+
}
217+
218+
.title {
219+
font-size: 1.1rem;
220+
}
221+
222+
.metadata {
223+
font-size: 0.8125rem;
224+
gap: 0.5rem;
225+
}
226+
}
227+
</style>

‎src/components/ImageCreditsSection.astro‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
interface Props {
3+
class?: string;
4+
}
5+
6+
const { class: className } = Astro.props;
7+
---
8+
9+
<div class:list={["image-credits-section not-content", className]}>
10+
<slot />
11+
</div>
12+
13+
<style>
14+
.image-credits-section {
15+
display: grid;
16+
grid-template-columns: 1fr;
17+
gap: 1.5rem;
18+
width: 100%;
19+
max-width: 100%;
20+
}
21+
</style>

‎src/components/IndexPostList.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ const featuredPosts = starlightBlogData.posts.filter((post) => post.featured);
9898
.year-label {
9999
font-size: 16rem;
100100
top: -14rem;
101-
left: 0;
101+
left: -0.5rem;
102102
color: var(--sl-color-gray-7);
103103
font-weight: bold;
104104
position: absolute;

‎src/content/docs/blog/20th-birthday.mdx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,3 @@ import qrcode from '../../../assets/blog/20th-birthday/qrcode_horizontal.jpg';
133133
## Conclusion
134134

135135
It was a joy to turn this celebration into a personal challenge and to see friends and family try to solve the riddle. Whether you spotted five 20s or all seventy-three - thank you for playing along! 🎉
136-
137-
## Credits
138-
139-
Cover image creator: https://unsplash.com/@bilal_ayadi

‎src/content/docs/blog/accelerating-translations-with-continuous-integration.mdx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,3 @@ You have to know that this was a Friday evening - almost night in my timezone -
3232
Fast-forward three days and I am now an official contributor to the project, making it greater and greater almost daily, mainly focusing on docs and the support for my heart project: Starlight - as you might already have guessed from [my blogs](/blog/tags/starlight/).
3333

3434
Peli and I have our virtual productivity sessions between 4pm and 8pm UTC, extending longer on weekends. So if you want to join us as an early bird of the project or got interested in using it, feel free to check it out on [GitHub](https://github.com/github): https://github.com/pelikhan/action-continuous-translation
35-
36-
37-
## Credits
38-
39-
Cover image creator: https://unsplash.com/@towfiqu999999

0 commit comments

Comments
 (0)