add "What's new in Astro - December 2023" (#937)

Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Chris Swithinbank <[email protected]> Co-authored-by: Elian <[email protected]>
withastro · Dec 31, 2023 · 7289246 · 7289246
1 parent 64cdfe4
commit 7289246
Show file tree

Hide file tree

Showing 7 changed files with 372 additions and 86 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -28,6 +28,9 @@ export default defineConfig({
 			theme: JSON.parse(fs.readFileSync("./houston.theme.json", { encoding: "utf-8" })),
 		},
 	},
+	image: {
+		domains: ["v1.screenshot.11ty.dev"],
+	},
 	vite: {
 		ssr: {
 			noExternal: ["smartypants"],

diff --git a/src/content/blog/_images/whats-new-december-2023/og.webp b/src/content/blog/_images/whats-new-december-2023/og.webp
diff --git a/src/content/blog/_whats-new-components/ShowcaseCard.astro b/src/content/blog/_whats-new-components/ShowcaseCard.astro
@@ -0,0 +1,39 @@
+---
+import { Image } from "astro:assets"
+import ExternalLinkIcon from "~/icons/ExternalLinkIcon"
+
+export interface Props {
+	url: string
+	title: string
+}
+
+const { url, title } = Astro.props
+---
+
+<li
+	class:list={[
+		"group relative flex aspect-[1200/630] h-full w-full cursor-pointer flex-col overflow-hidden bg-astro-gray-600",
+		// Override default Markdown content styles
+		"!m-0 before:!hidden",
+	]}
+>
+	<a href={url} class="h-full w-full text-astro-gray-100">
+		<Image
+			src={`https://v1.screenshot.11ty.dev/${encodeURIComponent(url)}/opengraph/_wait:3`}
+			width={450}
+			height={236}
+			alt=""
+			class="h-full w-full object-cover object-top"
+		/>
+
+		<span
+			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"
+		>
+			<span class="heading-5">{title}</span>
+			<span class="body flex flex-row items-center gap-2">
+				<span>{url}</span>
+				<ExternalLinkIcon />
+			</span>
+		</span>
+	</a>
+</li>
diff --git a/src/content/blog/_whats-new-components/ShowcaseGrid.astro b/src/content/blog/_whats-new-components/ShowcaseGrid.astro
@@ -0,0 +1,15 @@
+---
+import ShowcaseCard, { type Props as CardProps } from "./ShowcaseCard.astro"
+
+interface Props {
+	items: CardProps[]
+}
+
+const { items } = Astro.props
+---
+
+<ul
+	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"
+>
+	{items.map(({ url, title }) => <ShowcaseCard {url} {title} />)}
+</ul>
diff --git a/src/content/blog/whats-new-december-2023.mdx b/src/content/blog/whats-new-december-2023.mdx
@@ -0,0 +1,216 @@
+---
+title: "What's new in Astro - December 2023"
+description: "December: last month of the year, a time to reflect on all the amazing things we've shipped, including Astro 4.0!"
+publishDate: "December 31, 2023"
+authors:
+  - elian
+coverImage: "/src/content/blog/_images/whats-new-shared.webp"
+socialImage: "/src/content/blog/_images/whats-new-december-2023/og.webp"
+lang: "en"
+---
+
+From all of us at Astro, we'd like to thank you for spending 2023 with us!
+
+We can't wait to start the new year with you! But before we do, here's what happened around the Astroverse this month...
+
+## News
+
+- We launched a [$100,000 Astro Ecosystem Fund](https://astro.build/blog/astro-ecosystem-fund/) and have already awarded $10,000 each to three recipients!
+- Sentry is now Astro’s [Official Monitoring Partner](https://astro.build/blog/sentry-official-monitoring-partner/).
+- Astro came top in user satisfaction in [Netlify’s State of Web Development](<https://www.netlify.com/resources/ebooks/the-state-of-web-development-2023/>) report — thanks everyone!
+- [Astro Studio is coming soon…](https://twitter.com/astrodotbuild/status/1733199595231199584)
+
+## Releases
+
+Just in time for the end of the year, we released Astro 4.0!
+
+- [Astro 4.0](/blog/astro-4/)
+- [Starlight 0.15](https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.15.0)
+
+## Docs
+
+The [Astro Documentation](https://docs.astro.build) is now running on Starlight!
+
+We have also officially launched [Astro Docs Docs (AD²)](https://contribute.docs.astro.build) to help you contribute to docs! You'll find all kinds of helpful information whether you're making your first open-source PR or are already a seasoned member of Team Docs.
+
+Our weekly Discord call “Talking and Doc’ing” is a chance for you to watch Team Docs work in public, jump in a codespace, and contribute to the docs. This month’s topics included:
+
+- Building a new header component for our integrations pages
+- Establishing a community Glossary project
+- Discussing best practices for writing helpful Changelog messages
+- Adding a mini-showcase with links to related themes on our CMS guide pages
+- Updating our integration docs to include MDX components and Expressive Code
+
+## Community
+
+### Community Awards November
+
+- 🌟 $250 awarded to [Atharva](https://astro.badg.es/contributor/at-the-vr/) for significant contributions to Astro Docs and active community involvement.
+- 🥳 $250 awarded to [McFlyPartages](https://astro.badg.es/contributor/McFlyPartages/) for translating a significant portion of the Astro Docs into French.
+- 🎉 $250 awarded to [Hippo](https://astro.badg.es/contributor/hippotastic/) for exceptional work releasing, maintaining, and providing support for Expressive Code.
+- 🍾 $250 awarded to [Eva Decker](https://astro.badg.es/contributor/evadecker/) for actively supporting the Astro Community on Discord.
+- 🎊 $250 awarded to [Jumper](https://astro.badg.es/contributor/jdtjenkins/) for being a super positive, welcoming and supportive presence in the Astro Discord.
+- 🎁 $250 awarded to [Happydev](https://astro.badg.es/contributor/MoustaphaDev/) for significant work on the Astro Core code base.
+
+Check out [current and past winners of our Community Awards] and claim your own [Astro Badge](https://astro.badg.es/contributors/)!
+
+## Showcase
+
+### Content
+
+📺 Learn why [Jason Lengstorf will choose Astro (almost) every time in 2024](https://youtu.be/kssIEqSJeMI?si=g9Yg6MVpT2kB4Gqf)
+
+🚉  See how a full site migration went in [Nuxt 2 to Astro 3 Replatforming – from Setup to Production](https://stevenwoodson.com/blog/replatforming-from-nuxtjs-2-to-astro/) by @stevenwoodson
+
+🧑‍🍳 Follow the recipe for [Quick-and-useful: A DIY, self-hosted Linktree and Linkinbio clone with Astro and TinaCMS](https://darko.io/posts/linktree-and-linkinbio-clone-with-astro-and-tinacms/) by @\_seiryuu\_
+
+⚠️ Get some tips, because maybe [You are using Astro wrong](https://arshx.substack.com/p/you-are-using-astro-wrong-a-survival) by @arshxcx
+
+🚀 Welcoming a new astronaut to the spaceship! A great article to send to your Astro-curious friends: [Launching a blog with Astro](https://goulven-clech.dev/2023/launching-blog-astro) by @goulvenclech
+
+📧 Learn how to use [using RESEND (email API) with Astro](https://www.youtube.com/watch?v=HyDwVN1AFwY&t=2s) in a new video by @chrispennington
+
+🎉 Read all about [A year working with HTML Web Components](https://hawkticehurst.com/writing/a-year-working-with-html-web-components/) by @hawkticehurst
+
+👀 Astro's 6-hour Launch Week Community Call Deluxe is on [YouTube](https://www.youtube.com/watch?v=VqfzAkI4AkY) hosted by @sarah11918 
+
+🛠️ Want to move [from Jekyll to Astro](https://jackcarey.co.uk/posts/astro-rewrite/)? Read this post by @jack_jack_jack
+
+🤿 Take a [Deep dive on View Transitions blog post series](https://fryuni.dev/deep-dive/astro-view-transitions/) by @Fryuni
+
+🏎️ New to Astro? Check out this updated [Astro Crash Course](https://www.youtube.com/watch?v=XoIHKO6AkoM) by Brad Traversy
+
+🏁 Define the controlled rollout of your next feature by following [Adding feature flags in Astro with Xata (showcasing View Transitions Forms)](https://xata.io/blog/feature-flags-tutorial) by @rishirajjain
+
+🔢 See how to implement [versioned docs with Starlight and Vercel](https://www.webpro.nl/scraps/versioned-docs-with-starlight-and-vercel) by Lars Kappert
+
+ 📄 [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
+
+🧑‍🎓 Get early access to [Chris Pennington’s project-based Astro course](https://learnastro.dev/)
+
+### Themes
+
+New Astro themes released this month. Try them out!
+
+- [Docbox](https://docbox-astro.vercel.app/) by @tffarhad
+- [ltree theme for Astro](https://github.com/DBozhinovski/astro-theme-ltree)
+- [Dusk](https://lexingtonthemes.com/info/dusk/) by @michael-andreuzza
+- [Indie Astro SSR starter](https://petitpois.gumroad.com/l/indie-astro/6n6943w) by @petitpois
+- [Brutal](https://brutal.elian.codes) has reached over 150 stars by @eliancodes
+- [The Void](https://cosmicthemes.com/themes/demo/the-void/) by @CosmicThemes
+
+### Tools & tips
+
+With the release of the Astro Dev Toolbar, we also have Dev Toolbar apps to showcase now!
+
+- [Astro Dev Toolbar app for cloudflare](https://github.com/alexanderniebuhr/astro-cf-dev-toolbar-app-demo)
+- [Astro Tunnel app for Dev Toolbar](https://www.npmjs.com/package/astro-tunnel)
+- [Lighthouse app for Dev Toolbar](https://github.com/buk0vec/astro-lighthouse/tree/main)
+- [Cloudflare Dev Toolbar App (demo/WIP)](https://github.com/alexanderniebuhr/astro-cf-dev-toolbar-app-demo) by @alex
+- [Astro Font Picker devtoolbar app](https://github.com/randombits-dev/astro-font-picker) by @randombits.dev
+- [Astro Tunnel devtoolbar app](https://www.npmjs.com/package/astro-tunnel) by @shf0811
+- [astro-font](https://github.com/rishi-raj-jain/astro-font) by @rishirajjain
+- [Clerk + Astro demo](https://github.com/vin-e/clerk-astro-demo) by @vinny_code
+- [astro-heroicons](https://github.com/SeanMcP/astro-heroicons) updated by @seanmcp
+
+### Websites
+
+Websites submitted to our Discord `#showcase` channel and featured on community calls this month.
+
+import ShowcaseGrid from './_whats-new-components/ShowcaseGrid.astro';
+
+export const sites = [
+  { url: 'https://idx.dev/blog', title: 'IDX by Google'},
+  { url: 'https://playstormgate.com/', title: '@robbietron' },
+  { url: 'https://monicaandandy.com/', title: '@joshuaiz' },
+  { url: 'https://flowsstudio.com/', title: '@marvinkr' },
+  { url: 'https://lucasjouin.com/', title: '@itshaunt' },
+  { url: 'https://ngc.pages.dev/', title: '@erkan59' },
+  { url: 'https://eldenlord.cskl.pl/', title: '@konrad_32301' },
+  { url: 'https://cskl.pl/', title: '@konrad_32301' },
+  { url: 'https://salam.app/', title: '@golam71' },
+  { url: 'https://ltree.darko.io/', title: '@_seiryuu_' },
+  { url: 'https://birksovskiy.vercel.app/', title: '@birksovskiy' },
+  { url: 'https://tomgraafmans.com/', title: '@varvino' },
+  { url: 'https://www.erfianugrah.com/', title: '@stoicopa' },
+  { url: 'https://hamza127.vercel.app/', title: '@hamza12700' },
+  { url: 'https://app.malachidaily.com/', title: '@cameronpak' },
+  { url: 'https://sayings.cc/', title: '@k16e.co' },
+  { url: 'https://florian-lefebvre.dev/', title: '@florian_lefebvre' },
+  { url: 'https://www.potatodeveloper.online/', title: '@badh_rush#0730' },
+  { url: 'https://kreativan.dev/', title: '@kreativan.' },
+  { url: 'https://astratechz.com/', title: '@engagepy' },
+  { url: 'https://hookdeck.com/', title: '@ernie9316' },
+  { url: 'https://sannajammeh.com/', title: '@chiefkoshi' },
+  { url: 'https://events-3bg.pages.dev/demos/', title: '@martrapp' },
+  { url: 'https://greendream21.github.io/', title: '@lovebee_' },
+  { url: 'https://pagepanda.vercel.app/', title: '@varvino' },
+  { url: 'https://hideoo.dev/notes', title: '@hideoo' },
+  { url: 'https://www.amigosdelretiro.com/', title: '@suhaylmv' },
+  { url: 'https://caoutchou.vercel.app/', title: '@karel5743' },
+  { url: 'https://agency-git-new-flurium.vercel.app/', title: '@koshchei.' },
+  { url: 'https://sahaja.bad.al/', title: '@theblapse' },
+  { url: 'https://calaisrespire.com/', title: '@.kamalito' },
+  { url: 'https://johnzanussi.com/', title: '@johnzanussi' },
+  { url: 'https://minirampfoundation.org/', title: '@johnzanussi' },
+  { url: 'https://switchcase.xyz/', title: '@hellohithisme' },
+  { url: 'https://mmbu2023.vercel.app/', title: '@heunha' },
+  { url: 'https://blog.memos.land/en/', title: '@oscarbustos' },
+  { url: 'https://trailbuddy-astro-view-transition-demo.netlify.app/', title: '@ekfuhrmann' },
+  { url: 'https://xn--berlandpost-shb.ch/', title: '@meintest_26190' },
+  { url: 'https://www.caiodeveloper.ca/', title: '@caiomarcellus' },
+  { url: 'https://offeringinspiration.com/Crafts/', title: '@randombits.dev' },
+  { url: 'https://lalospirits.com/', title: '@bigskillet0521' },
+  { url: 'https://github.com/vin-e/clerk-astro-demo', title: '@vinny_code' },
+  { url: 'https://belief.gg/', title: '@t1c.dev' },
+  { url: 'https://grafoma.se/', title: '@.hydde' },
+  { url: 'https://astratechz.com/', title: '@engagepy'},
+  { url: 'https://lloyd-christmas-quiz-2023.netlify.app/', title:' @lloyd1000'},
+  { url: 'https://aidantomcy.github.io/', title: '@.aidant'},
+  { url: 'https://devshorts.vercel.app/', title: '@floyare'},
+  { url: 'https://smashing.tools/', title: '@needim'},
+  { url: 'https://www.sweenystudio.com/', title: '@mac.dev'},
+  { url: 'https://www.poopals.app/', title: '@guillemc23'},
+  { url: 'https://yuhang.dev/', title: '@yuhang1106'},
+  { url: 'https://latest.cat/', title: '@patrick.py'},
+  { url: 'https://www.oscartorres.io/', title: '@oscartorres10'},
+  { url: 'https://www.gdm-pixel.fr/', title: '@gdm_pixel'},
+  { url: 'https://terrateam.io/', title: '@joshpollara'},
+  { url: 'https://headshed.dev/', title: '@marshyon'},
+  { url: 'https://anfrydev.com/', title: '@christopheanfry'},
+  { url: 'https://orlandoguevara.dev/', title: '@Tomate Malicioso'},
+  { url: 'https://creativelegazpi.ph/', title: '@Heunha'},
+  { url: 'https://gruppoedoardo.it/', title: '@Proibito04'},
+];
+
+<ShowcaseGrid items={sites} />
+
+### Starlight in the wild
+
+Take a peek at the new Starlight sites that we discovered this month.
+
+export const starlightSites = [
+  { url: 'https://kitschpatrol.com/svelte-tweakpane-ui', title: 'Svelte Tweakpane UI' },
+  { url: 'https://nh.outerwildsmods.com/', title: 'New Horizons' },
+  { url: 'https://spotlightjs.com/', title: 'Spotlight' },
+  { url: 'https://secco.lekoarts.de/', title: 'secco' },
+  { url: 'https://docs.astro.build/', title: 'Astro Docs' },
+  { url: 'https://ratatui.rs/', title: 'Ratatui' },
+  { url: 'https://chamaeleon-docs.vercel.app', title: 'Chamaeleon' },
+  { url: 'https://rainsberger.ca/', title: 'Sarah\'s Starlight Blog' },
+  { url: 'https://rodydavis.github.io/signals.dart/', title: 'Signals.dart' },
+  { url: 'https://dusa.rocks/docs/', title: 'Dusa' },
+  { url: 'https://csmos.space/', title: 'csmos' },
+  { url: 'https://crawler.siteone.io/', title: 'SiteOne' },
+  { url: 'https://docs.mrrobot.app/', title: 'Mr. Robøt' },
+  { url: 'https://progressively.app/', title: 'Progressively' },
+  { url: 'https://taco-api.netlify.app/about/', title: 'TACO project' },
+  { url: 'https://origami-for-everyone.ft.com/', title: 'Origami for Everyone' },
+  { url: 'https://www.astroicon.dev/', title: '@nmoodev' },
+  { url: 'https://www.conceptoai.app/', title: '@leowilkin' },
+  { url: 'https://docs.ghostfam.com/', title: '@cuongtqtran' },
+  { url: 'https://distributor.leanflutter.dev/', title: '@LeanFlutter' },
+  { url: 'https://contribute.docs.astro.build/', title: 'Astro Docs Docs (AD²)'},
+];
+
+<ShowcaseGrid items={starlightSites} />