Skip to content

Commit 404e389

Browse files
ElianCodesdelucissarah11918
authored
add monthly blogpost - January 24 (#976)
 Co-authored-by: ElianCodes <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
1 parent bd6d79d commit 404e389

File tree

5 files changed

+297
-1
lines changed

5 files changed

+297
-1
lines changed

‎src/content/blog/_images/whats-new-january-2024/og.webp

24.1 KB
Binary file not shown.

‎src/content/blog/_whats-new-components/ThemeCard.astro

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
import { getEntry, type CollectionEntry } from "astro:content"
3+
import { resolveImage } from "~/content/themes/_resolveImage.js"
4+
5+
export interface Props {
6+
slug: CollectionEntry<"themes">["slug"]
7+
}
8+
9+
const { slug } = Astro.props
10+
const entry = await getEntry("themes", slug)
11+
if (!entry) throw new Error(`Could not find theme with slug "${slug}"`)
12+
13+
const { author, title } = entry.data
14+
const resolvedImage = await resolveImage(entry)
15+
---
16+
17+
<li
18+
class:list={[
19+
"group relative flex aspect-[1200/630] h-full w-full cursor-pointer flex-col overflow-hidden bg-astro-gray-600",
20+
// Override default Markdown content styles
21+
"!m-0 before:!hidden",
22+
]}
23+
>
24+
<a href={`/themes/details/${slug}/`} class="h-full w-full text-astro-gray-100">
25+
<img
26+
src={resolvedImage.src}
27+
width={450}
28+
height={236}
29+
alt=""
30+
class="h-full w-full object-cover object-top"
31+
/>
32+
33+
<span
34+
class="pointer-events-none absolute bottom-0 z-10 flex w-full flex-col gap-2 bg-astro-gray-500/95 p-4 opacity-0 transition-opacity duration-300 ease-out group-focus-within:opacity-100 group-hover:opacity-100"
35+
>
36+
<span class="heading-5">{title}</span>
37+
<span class="body flex flex-row items-center gap-2">
38+
by {author.name}
39+
</span>
40+
</span>
41+
</a>
42+
</li>

‎src/content/blog/_whats-new-components/ThemeGrid.astro

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
import type { CollectionEntry } from "astro:content"
3+
import ThemeCard from "./ThemeCard.astro"
4+
5+
interface Props {
6+
themes: CollectionEntry<"themes">["slug"][]
7+
}
8+
---
9+
10+
<ul
11+
class="grid gap-5 !p-0 md:grid-flow-row-dense md:grid-cols-2 lg:-mx-16 lg:!mb-16 lg:!mt-8 lg:grid-cols-3 xl:-mx-32"
12+
>
13+
{Astro.props.themes.map((theme) => <ThemeCard slug={theme} />)}
14+
</ul>

‎src/content/blog/whats-new-december-2023.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Check out [current and past winners of our Community Awards](https://community.a
8484

8585
🔢 See how to implement [versioned docs with Starlight and Vercel](https://www.webpro.nl/scraps/versioned-docs-with-starlight-and-vercel) by Lars Kappert
8686

87-
📄 [Publier une documentation avec Astro Starlight](https://thomasbnt.dev/blog/publier-une-documentation-avec-astro-starlight) (also includes a link to English version) by @thomasbnt
87+
📄 [Publier une documentation avec Astro Starlight](https://thomasbnt.dev/blog/publier-une-documentation-avec-astro-starlight) (also includes a link to English version) by @thomasbnt
8888

8989
🧑‍🎓 Get early access to [Chris Pennington’s project-based Astro course](https://learnastro.dev/)
9090

‎src/content/blog/whats-new-january-2024.mdx

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
---
2+
title: "What's new in Astro - January 2024"
3+
description: "2023 was a huge year for Astro, and 2024 is already shaping up to be even bigger. Let's dive into the updates!"
4+
publishDate: "January 31, 2024"
5+
authors:
6+
- elian
7+
coverImage: "/src/content/blog/_images/whats-new-shared.webp"
8+
socialImage: "/src/content/blog/_images/whats-new-january-2024/og.webp"
9+
lang: "en"
10+
---
11+
import ShowcaseGrid from './_whats-new-components/ShowcaseGrid.astro';
12+
import ThemeGrid from './_whats-new-components/ThemeGrid.astro';
13+
14+
2023 was a huge year for Astro, and 2024 is already shaping up to be even bigger. Let's dive into the updates!
15+
16+
## Updates from Mission Control
17+
18+
- We have a [new channel on Discord](/chat) `#dev-integrations`, a new home for anyone building their own Astro integrations.
19+
- Starlight was nominated for a Product Hunt [open-source Golden Kitty Award](https://www.producthunt.com/golden-kitty-awards/hall-of-fame?year=2023#open-source).
20+
- We launched [The Official Astro Newsletter](/newsletter/signup). Sign up if you want to stay updated on all things happening in the Astrosphere!
21+
- Never want to miss an Astro event? [Subscribe to our Astro Community Calendar](https://calendar.google.com/calendar/embed?src=c_g6re3u5gkl0mug3ktn1dibqhfk%40group.calendar.google.com).
22+
23+
## Releases
24+
25+
The first month of the year has already started strong with minor releases from both Astro and Starlight 💪!
26+
27+
- [Astro 4.1](https://astro.build/blog/astro-4/)
28+
- [Astro 4.2](https://astro.build/blog/astro-420/)
29+
- [Starlight 0.16](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.16.0)
30+
- [Starlight 0.17](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.17.0)
31+
32+
## Docs
33+
34+
New this month in both Astro and Starlight docs: dedicated community resource pages. Check out the [community-produced educational content about Astro](https://docs.astro.build/en/community-resources/content/), and the growing list of [Starlight content](https://starlight.astro.build/resources/community-content/). Catch up on some of the classic [talks, interviews, and streams](https://docs.astro.build/en/community-resources/talks/) you might have missed.
35+
36+
Our weekly Discord call "Talking and Doc'ing" is a chance for you to watch Team Docs work in public, jump in a shared Codespace or Gitpod Workspace, and contribute to the docs live, together. This month's topics included:
37+
38+
- **Building a new `<ReadMore />` component.** After watching Chris build, everyone on the call then jumped in the code base to help find and replace all occurrences of our old "emoji + See more at this link" pattern.
39+
- **Taking [Lunaria](https://lunaria.dev/), and its documentation, for a test drive.** We started with a new Starlight project, and finished with a site with full translation status tracking!
40+
- **File/URL structure organization.** Soon, the URLs for all our pages will actually correspond to their sidebar section! How did we not break anything with 12 people in the codebase, moving files around and updating links all at once? 🫣
41+
42+
## Community
43+
44+
### HiDeoo joins Astro Core!
45+
46+
For anyone following the development of [Starlight](https://starlight.astro.build/), HiDeoo should be no stranger! HiDeoo has been working on Starlight for quite a while and introduced some amazing features, plugins and the [`starlight-blog` theme](https://github.com/HiDeoo/starlight-blog).
47+
48+
Welcome HiDeoo 🥳 !
49+
50+
### Community Awards December
51+
52+
- 🌟 $500 to @fryuni for outstanding contributions to Astro core and participating in all areas of the community.
53+
- 🍾 $250 to @100gle for their active involvement in translating the Astro Docs into Chinese.
54+
- 🎈 $250 to @thomasbnt for their active involvement in translating the Astro Docs into French.
55+
- 🎊 $250 to @vxoblope for helpful contributions to Astro Docs and active community involvement.
56+
- 🎉 $250 to @rishirajjain for contributing to the Astro ecosystem.
57+
58+
Check them out and learn more about the Astro Community Awards on [our community website](https://community.astro.build).
59+
60+
## Showcase
61+
62+
### Content
63+
64+
Because you can never get tired of watching and reading Astro Content.
65+
66+
- 📄 [Astro Year in Review](https://zenn.dev/morinokami/articles/astro-2023-2024) by @shf0811
67+
- 📄 [How to Implement Feature Flags in Astro using Unleash](https://dev.to/reeshee/how-to-implement-feature-flags-in-astro-using-unleash-2fg5) by @rishirajjain
68+
- 📄 [Auto-generated Last Modified Date in Astro](https://scottwillsey.com/astro-last-modified/) by @scottwillsey
69+
- 📄 [How to achieve server islands using Astro Partials, custom elements, and Edge middleware](https://www.mayank.co/blog/server-islands) by @mayank
70+
- 📺 [From Canva to Astro: Create a Fitness Website in Astro](https://www.youtube.com/watch?v=0MIDLdnz8Bk) by @petitpois
71+
- 📄 [Migrating to Astro (from Next.js)](https://www.raygesualdo.com/posts/migrating-to-astro-the-beginning/) by @raygesualdo
72+
- 📄 [Adding reading time to Astro without the hassle](https://jahir.dev/blog/astro-reading-time) by @jahir
73+
- 📄 [Tutorial: Ghost CMS and Astro](https://matthiesen.xyz/blog/tutorial-ghost-cms-astro) by @adamm2047
74+
- 📄 [Build Your own image gallery CMS](https://xata.io/blog/build-image-gallery-astro-cloudflare) by @rishirajjain
75+
- 📄 [Add sponsors to your Starlight site](https://blog.otterlord.dev/posts/starlight-sponsors/) by @otterlord.dev
76+
- 📺 [A lazy man's Obsidian + Astro workflow integration](https://www.youtube.com/watch?v=dz3GOp4hN50) by @nikolovlazar
77+
- 📄 [Building a Single Page Application with Astro](https://logsnag.com/blog/react-spa-with-astro) by @Sh4yy
78+
- 📄 [Adding comments to your Astro blog with Disqus](https://www.webdesign-sopelnik.de/en/blog/adding-comments-to-your-astro-blog-with-disqus/) by @konigartus
79+
- 📄 [Adding workflows to an Astro app with Inngest](https://dev.to/sylwiavargas/adding-workflows-to-an-astro-app-with-inngest-4577) by @sylwiavargas
80+
- 📄 [Basic event handling in Astro, not so straightforward!](https://www.cpr.name/blog/astro-event-handling) by @Chris | Gada Dev Team#5891
81+
- 📺 [How to upload images with Astro and Xata](https://www.youtube.com/watch?v=e7UciRSdwYs) by @rishirajjain
82+
- 📄 [Dark Modes](https://www.xypnox.com/blag/posts/dark-modes/) by @xypnox
83+
- 📄 [Basic analytics with Vercel Postgres - Drizzle - Astro](https://www.thomasledoux.be/blog/basic-analytics-vercel-postgres-astro) by @tledoux
84+
- 📺 [Page Components - better than React Server Components](https://youtu.be/XA_rS_SWQZs) by @koshchei.
85+
- 📄 [The future of SSR is RSC](https://www.jseverywhere.dev/the-future-of-ssr-is-rsc/) by @colby.white
86+
- 📄 [Astro + Svelte on the Internet Computer](https://blog.icacademy.at/blog/astro-svelte-ic-starter) by @rbole
87+
- 📺 [Astro Icon just hit 1.0](https://www.youtube.com/watch?v=Tm4XMd_CL3o) by @chrispennington
88+
- 📄 [Using HTMX with Astro Partials](https://blog.trevfox.dev/posts/htmx-and-astro-partials/) by @vxoblope
89+
- 📄 [Sending mails with Astro and Nodemailer](https://oliverspeir.dev/garden/nodemailer/) by @oliverspeir
90+
- 📄 [Create a web application with Astro and Drupal](https://www.linkedin.com/posts/gambinovincenzo_create-a-web-application-with-the-astrojs-activity-7156645583347236865-YLDR/) by @vincenzogambino
91+
- 📄 [Astro API tutorial](https://www.ceos3c.com/astro/astro-api-tutorial/) by @stefanrows
92+
- 📄 [Astro Kwesforms with Rive](https://www.sitepoint.com/astro-kwesforms-rive/) by @pauliescanlon
93+
- 📄 [Take a Qwik break from React with Astro](https://thenewstack.io/take-a-qwik-break-from-react-with-astro/) by @pauliescanlon
94+
95+
### Tips & Tools
96+
97+
The latest community-built utilities and integrations to help you build with Astro.
98+
99+
Don't miss [The Bag of Tricks for View Transitions](https://events-3bg.pages.dev/) 👜✨ built by Astro maintainer @martrapp for an amazing showcase of view transitions demos and patterns. Find new animations and transitions to add to your project, and submit your own ideas!
100+
101+
Want to build your own Astro integration? Take a look at [The Astro Integration Kit](https://github.com/florian-lefebvre/astro-integration-kit) 🛠️ built by Astro maintainer @florian_lefebvre. It provides you with an easy-to-setup template, complete with documentation, to bootstrap your new integration. Get building, and join the fun in `#dev-integrations`.
102+
103+
More tools we discovered this month include:
104+
105+
- [imgit.dev](https://imgit.dev/) a tool to optimize images, video and YouTube embeds with a dedicated Astro integration
106+
- [npmc.dev](https://npmc.dev/) an alternative front-end for NPM by @athebigbot
107+
- [patrick91/astro-meta-tags](https://github.com/patrick91/astro-meta-tags) by @patrick.py
108+
- [Getting started with my Astro Snipcart addon](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon) by @adamm2047
109+
- [astro-server-only-modules](https://www.npmjs.com/package/astro-server-only-modules) by @arshsx
110+
- [remark-imgattr](https://github.com/OliverSpeir/remark-imgattr) by @oliverspeir
111+
- [Astro blog integration](https://github.com/futurethemes/astro-blog) by @Jumper#8174
112+
- [Ghost Content API JS library](https://www.npmjs.com/package/@adammatthiesen/astro-ghostcms) by @adamm2047
113+
- [florian-lefebvre/astro-env](https://github.com/florian-lefebvre/astro-env) by @florian_lefebvre
114+
- [astro-integration-template](https://github.com/florian-lefebvre/astro-integration-template) by @florian_lefebvre
115+
- [MatthiesenXYZ/astro-ghostcms](https://github.com/MatthiesenXYZ/astro-ghostcms) by @adamm2047
116+
- [Unpic: Astro image service](https://unpic.pics/blog/unpic-astro-image-service/) by @ascorbic.
117+
- [Lucia 3.0](https://github.com/lucia-auth/lucia) by @pilcrowonpaper
118+
- [igloczek/astro-electron](https://github.com/Igloczek/astro-electron) by @igloczek.
119+
- [astro-devtoolbar-tailwind](https://github.com/futurethemes/astro-devtoolbar-tailwind/tree/main) by @Jumper#8174
120+
121+
### Themes & Templates
122+
123+
Several new Astro themes were added & released this month. Try them out!
124+
125+
<ThemeGrid themes={['indie-astro', 'astrofy', 'starlog', 'dante', 'verve']} />
126+
127+
Even more templates:
128+
129+
- [chartley-template.vercel.app](https://chartley-template.vercel.app/) by @chartley
130+
- [cosmicthemes.com/themes/demo/the-void](https://cosmicthemes.com/themes/demo/the-void/) by @lastchaos.
131+
- [Astro i18n blog starter](https://github.com/kslstn/astro-i18n-blog-starter) by @Koos
132+
- [Astrodev](https://github.com/alamguardin/astrodev) by @alamguardin
133+
- [Futurethemes: Blog - Galaxy](https://galaxy.futurethemes.io/blog) by @Jumper#8174
134+
- [biztrox-astro.vercel.app](https://biztrox-astro.vercel.app/) by @tffahim
135+
- [Starter kit for Astro / Lucia Auth / Neon (Postgres)](https://github.com/siegerts/astro-lucia-auth-neon) by @siegerts_
136+
- [astro-minimal.netlify.app](https://astro-minimal.netlify.app/) by @prerad
137+
- [Astro spotlight theme (WIP)](https://github.com/ak0r/astro-spotlight) by @androidak0r
138+
- [Mallen](https://github.com/hyddeos/Mallen) by @.hydde
139+
- [CaribeSky](https://github.com/AlejandroMar/CaribeSky) by @alejostereo
140+
- [drab](https://github.com/rossrobino/drab) by @rossrobino
141+
142+
### Websites
143+
144+
All the community member websites submitted to our Discord `#showcase` channel and featured on community calls this month.
145+
146+
export const sites = [
147+
{ url: 'https://migueljm.vercel.app/', title: '@koe4202' },
148+
{ url: 'https://kreativan.dev/', title: '@kreativan.' },
149+
{ url: 'https://www.namchee.dev/', title: '@namchee' },
150+
{ url: 'https://starry-lens-test-space.vercel.app/)' },
151+
{ url: 'https://orlandoguevara.dev/', title: '@veryeviltomato' },
152+
{ url: 'https://658ef00fb4d60cc9fa2e6696--prismatic-pegasus-60e1c1.netlify.app/', title: '@elvaquilla4308' },
153+
{ url: 'https://creativelegazpi.ph/', title: '@heunha' },
154+
{ url: 'https://gruppoedoardo.it/', title: '@proibito04' },
155+
{ url: 'https://hellohumans.agency', title: '@sijad' },
156+
{ url: 'https://senpaiapp.com/', title: '@kjeih' },
157+
{ url: 'https://www.stevenleabo.com/', title: 'Steven Leabo' },
158+
{ url: 'https://klasnasman-wedding.netlify.app/', title: '@klas._.' },
159+
{ url: 'https://www.kevinzunigacuellar.com/', title: '@kevin ' },
160+
{ url: 'https://rng-lorypelli.vercel.app/', title: '@lory2007_' },
161+
{ url: 'https://gamers-hub-anav.netlify.app/', title: '@partiallyunblind' },
162+
{ url: 'https://www.pmcf.xyz/', title: '@freenandes' },
163+
{ url: 'https://www.davina-devs.com/', title: '@davinaleong' },
164+
{ url: 'https://www.matthiesenphotography.com/', title: '@adamm2047' },
165+
{ url: 'https://aayushbtw.pages.dev/', title: '@aayushbtw' },
166+
{ url: 'https://time.fyi/', title: '@kamranahmedse' },
167+
{ url: 'https://decentparadox.vercel.app/', title: '@sasankreddy_' },
168+
{ url: 'https://fusionauth.io/docs/' },
169+
{ url: 'https://www.gin-cruise.com/staterooms', title: '@preetam_nl' },
170+
{ url: 'https://sahillangoo.com/', title: '@sahillangoo' },
171+
{ url: 'https://somosaria.com/', title: '@coderdiaz' },
172+
{ url: 'https://sheldon.is-a.dev/', title: '@rootdebian' },
173+
{ url: 'https://ibratfarzandlari.uz/', title: '@zhondori' },
174+
{ url: 'https://cassidysmith.dev/photos', title: '@prounk' },
175+
{ url: 'https://aay7ush.netlify.app/', title: '@iaay7ush' },
176+
{ url: 'https://revenzmind.vercel.app/', title: '@revenzmind' },
177+
{ url: 'https://www.drettihub.com/', title: '@thatchr1s' },
178+
{ url: 'https://playlist-ed.netlify.app/', title: '@z.o.rro' },
179+
{ url: 'https://jongander.com/', title: '@living_mice' },
180+
{ url: 'https://www.baalgirisimcilik.com/', title: '@akif6464' },
181+
{ url: 'https://www.found.social/', title: '@skrrr_skrrr' },
182+
{ url: 'https://vivalaselva.org/', title: '@alejostereo' },
183+
{ url: 'https://portfolio.lostis-world.com/', title: '@_losti' },
184+
{ url: 'https://loige.co/', title: '@loige.co' },
185+
{ url: 'https://master--delicate-babka-8c6a53.netlify.app/', title: '@novaiustus' },
186+
{ url: 'https://12steps.vercel.app/', title: '@ilnur4715' },
187+
{ url: 'https://time-bar.pages.dev/', title: '@aayushbtw' },
188+
{ url: 'https://blog.trevfox.dev/', title: '@vxoblope' },
189+
{ url: 'https://www.manveerbhullar.com/', title: '@._no.name_.' },
190+
{ url: 'https://komponents-v2.netlify.app/', title: '@k16e.co' },
191+
{ url: 'https://astro-ghostcms.xyz/', title: '@adamm2047' },
192+
{ url: 'https://medito-fundraising.pages.dev/', title: '@jeromeabel' },
193+
{ url: 'https://thesobercoder.in/', title: '@thesobercoder' },
194+
{ url: 'https://foxdenwebblog.netlify.app/', title: '@triptych1313' },
195+
{ url: 'https://risingstars.js.org/2023/en', title: '@michaelrambeau' },
196+
{ url: 'https://anishshobithps.com/', title: '@anishshobithps' },
197+
{ url: 'https://jaws-streaming.com/en/', title: '@getninjan' },
198+
{ url: 'https://oezguerisbert.com/', title: '@oetzi.dev' },
199+
{ url: 'https://vighnesh153.dev/', title: '@vighnesh153' },
200+
{ url: 'https://www.netlify.com/' },
201+
{ url: 'https://corvu.dev/docs/', title: '@giyomoon' },
202+
{ url: 'https://fig.moinulmoin.com/', title: '@moinulmoin' },
203+
{ url: 'https://candost.blog/', title: '@_candost' },
204+
{ url: 'https://www.flurium.com/', title: '@koshchei.' },
205+
{ url: 'https://www.v-mokhun.com/', title: '@v.mokhun' },
206+
{ url: 'https://2024.lincolnhack.org/', title: '@bobson6345' },
207+
{ url: 'https://xstatebyexample.com/', title: '@devessier' },
208+
{ url: 'https://openstove.org/', title: '@soslan117' },
209+
{ url: 'https://ktym4a.me/', title: '@ktym4a_01942' },
210+
{ url: 'https://lorefrog.com/', title: '@evanfuture' },
211+
{ url: 'https://bloombacker.com/', title: '@jumpingback' },
212+
];
213+
214+
<ShowcaseGrid items={sites} />
215+
216+
### Starlight in the wild
217+
218+
Take a peek at the new Starlight sites that we discovered this month.
219+
220+
export const starlightSites = [
221+
{ url: 'https://flystorage.dev/' },
222+
{ url: 'https://crawler.siteone.io/', title: '@ag3nttcz' },
223+
{ url: 'https://vpnwide.com/', title: '@stark0913' },
224+
{ url: 'https://sanabel-al-firdaws.github.io/en/', title: '@raygesualdo' },
225+
{ url: 'https://sonar-team.github.io/doc/', title: '@akmot' },
226+
{ url: 'https://ahastack.dev/', title: '@flaviocopes' },
227+
{ url: 'https://docs.dgm.sh/guides/introduction/', title: 'Minkyu Lee' },
228+
{ url: 'https://gql-tada.0no.co/', title: 'Ohno Co' },
229+
{ url: 'https://crecto.dev/' },
230+
{ url: 'https://astro-integration-kit.netlify.app/', title: '@florian_lefebvre' },
231+
{ url: 'https://minecraft-essentials.github.io/', title: '@eveeifyeve' },
232+
{ url: 'https://space307.github.io/pure-index/', title: '@viktor_07827' },
233+
{ url: 'https://dotenv.run/', title: 'chihab' },
234+
{ url: 'https://nacos.io/docs/latest/what-is-nacos/', title: 'Alibaba Open Source' },
235+
{ url: 'https://gibbok.github.io/typescript-book/', title: 'gibbok' },
236+
];
237+
238+
<ShowcaseGrid items={starlightSites} />
239+
240+
*Want to be on this list next month? Post your Astro websites, projects, apps, tools, blog posts, demos, and videos in our `#showcase` channel in [our Discord](https://astro.build/chat)!*

0 commit comments

Comments
 (0)