diff --git a/src/content/docs/en/community-resources/content.mdx b/src/content/docs/en/community-resources/content.mdx new file mode 100644 index 0000000000000..33e9bb780a02e --- /dev/null +++ b/src/content/docs/en/community-resources/content.mdx @@ -0,0 +1,80 @@ +--- +title: Community Educational Content +description: Discover community-produced tutorials, guides, articles and videos to help you learn and build with Astro! +i18nReady: true +--- + +import Badge from '~/components/Badge.astro'; + +There is so much more out there that can help you learn and build with Astro! Here is some educational content produced and maintained by the Astro community. + +All links are external, and may be based on earlier versions of Astro. Be sure to check the date on any community content, and adapt to your project accordingly. + +For more Astro educational content, check out [the Astro Blog](https://astro.build/blog/) or sign up for [the official Astro newsletter](https://astro.build/newsletter/signup) where we recap the best community content of each month. + +## Courses and Tutorials + +Courses and tutorials are focused on teaching you new concepts, often with exercises or sample projects to build. These are a great way to learn new concepts and give you the tools you need for working on your own Astro project. + +Check out the following courses and tutorials to learn more about Astro. + +### Introductory Tutorials + - [Astro Web Framework Crash Course](https://www.youtube.com/watch?v=e-hTm5VmofI) by freeCodeCamp + - [Astro Crash Course in 20 minutes](https://www.youtube.com/watch?v=zrPVTf761OI) by Chris Pennington (full paid course: [Learn Astro](https://learnastro.dev/)) + - [Astro 3.0 Crash Course](https://www.youtube.com/watch?v=qBOz6TpYAOg) by James Q Quick (full paid course: [Build Modern Websites with Astro](https://astrocourse.dev/)) + - [Astro Crash Course in 60 minutes](https://www.youtube.com/watch?v=NniT0vKyn-E) by @developedbyed + - [Understanding Astro (ebook)](https://www.ohansemmanuel.com/books/understanding-astro) by Ohans Emmanuel + + ### Video Tutorials + - [Astro Quick Start Course: Build an SSR Blog](https://www.youtube.com/watch?v=XoIHKO6AkoM) + - [How I created a movie application with Astro 3.x](https://www.youtube.com/watch?v=Gvr4WhgfP0w) + - [You may not ACTUALLY understand Content Collections…](https://www.youtube.com/watch?v=Fcw4c3wzm7I) + - [Build a custom blog platform with Astro and Apprwrite](https://www.youtube.com/watch?v=OERqwLy_reA) + - [Astro JS Portfolio Crash Course](https://www.youtube.com/watch?v=TwWvNK0yHjI) + - [Build a full stack blog with Astro](https://egghead.io/courses/build-a-full-stack-blog-with-astro-7ffcf9ec) + +## Recipes and Guides + +See guided examples of adding features to your Astro project, submitted by our community members! + +[Astro recipes](/en/recipes/) are typically short, focused how-to guides that walk a reader through completing a working example of a specific task. Recipes are a great way to add new features or behavior to your Astro project by following step-by-step instructions! + +Other guides might explain concepts related to an area of content, such as using images or working with MDX. + +:::tip[Add your own!] +Have you written a recipe for Astro? [Edit this page](https://github.com/withastro/docs/edit/main/src/content/docs/en/community-resources/content.mdx) and add your link in the appropriate section! +::: + +### CSS +- [Use UnoCSS in Astro](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro/) +- [Add dark mode to Astro with Tailwind CSS](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/) +### Authentication +- [Add Github OAuth with Lucia](https://lucia-auth.com/guidebook/github-oauth/astro) +- [Add username and password authentication with Lucia](https://lucia-auth.com/guidebook/sign-in-with-username-and-password/astro) +### RSS +- [Use a dynamic filename when importing images](https://vaihe.com/blog/astro/astro-dynamic-image-prop/) +- [Add an RSS feed to Astro using Storyblok's stories](https://straffesites.com/en/blog/rss-feed-astro-storyblok) +- [How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) +### Images +- [Add blog post images to your Astro RSS Feed](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/) +- [Generate Open Graph images for an Astro blog](https://techsquidtv.com/blog/generating-open-graph-images-for-astro/) +### Editor Tooling +- [Get VSCode, ESLint & Prettier working with Astro](https://patheticgeek.dev/blog/astro-prettier-eslint-vscode) +- [Integrate Prettier with Astro and Tailwind CSS](https://straffesites.com/en/blog/integrate-prettier-astro-tailwindcss) +### Markdown +- [Build a table of contents from Astro's Markdown headings](https://kld.dev/building-table-of-contents/) +- [Create a Remark plugin to remove runts from your Markdown files](https://eatmon.co/blog/remove-runts-markdown/) +- [Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring](https://akashrajpurohit.com/blog/set-up-draft-pages-effectively-in-astro-with-configdriven-content-authoring/) +### Performance +- [Enhance your Astro builds: modify HTML files post-build](https://straffesites.com/en/blog/optimize-astro-html-post-build) +- [Setting up micro-frontends with Astro](https://medium.com/@sergio.a.soria/setting-up-micro-frontends-with-astro-and-ecma-script-modules-137340d2c520) +### Utilities +- [Using tRPC in Astro](https://www.thomasledoux.be/blog/using-trpc-astro-islands-react) +- [Integrating Sentry with Astro](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/) +- [Generate localized sitemaps for your Astro and Storyblok project](https://straffesites.com/en/blog/localized-sitemap-astro-storyblok) +- [Add searching to your site with Pagefind](https://blog.otterlord.dev/posts/astro-search/) +- [Add searching to your site with Fuse.js](https://www.youtube.com/watch?v=XnV_2MWqAhQ) +- [Add a comments section to your Astro blog using Giscus](https://elazizi.com/posts/add-comments-section-to-your-astro-blog/) +### Internationalization and Localization +- [How to make your Astro website multilingual with Crowdin: Astro localization guide](https://crowdin.com/blog/2023/06/21/astro-localization-and-i18n) +- [Translate routes in Astro for content collections and subpages](https://www.webdesign-sopelnik.de/en/blog/translate-routes-for-astro-content-collections-or-subpages-with-trailingslash-and-base-support/) diff --git a/src/content/docs/en/community-resources/talks.mdx b/src/content/docs/en/community-resources/talks.mdx new file mode 100644 index 0000000000000..b8be383607fad --- /dev/null +++ b/src/content/docs/en/community-resources/talks.mdx @@ -0,0 +1,47 @@ +--- +title: Talks, Interviews, and Streams +description: Watch conference talks, interviews, and live streams about Astro! +i18nReady: true +--- + +import Badge from '~/components/Badge.astro'; + +Here are some of our favourite community videos to introduce you to Astro! + +For more Astro content, check out [the Astro Blog](https://astro.build/blog/) or sign up for [the official Astro newsletter](https://astro.build/newsletter/signup) where we recap the best community content of each month. + +:::tip +Subscribe to [the Astro Community Events Google Calendar](https://calendar.google.com/calendar/embed?src=c_g6re3u5gkl0mug3ktn1dibqhfk%40group.calendar.google.com) and never miss a live event! +::: + +## About Astro + +- [Astro in 100 Seconds](https://www.youtube.com/watch?v=dsTXcSeAZq8) by Fireship +- [Why I'll choose Astro (almost) every time in 2024](https://www.youtube.com/watch?v=kssIEqSJeMI) by Jason Lengstorf +- [I tried Astro and I LOVE IT - 5 reasons you will too!](https://www.youtube.com/watch?v=wND4lSml31A) by James Q Quick +- [What is Astro?](https://www.youtube.com/watch?v=oQDErNNzdwU) by Kodaps Academy +- [Everything You Need to Know about Astro](https://www.youtube.com/watch?v=rRxuVOutmFQ) by @awesome +- [Islands Architecture | Astro Islands Simply Explained](https://www.youtube.com/watch?v=kwqlP6Pe0SI) by ExcaliBear Codes +- [Is Astro A Game Changer For Nuxt and Vue Developers?](https://www.youtube.com/watch?v=Sq7eKxPqfSo) by Program with Erik +- [How Astro made my site 100x faster](https://www.youtube.com/watch?v=cOxA3kMYtkM) by James Perkins + +## Conference talks + +- [View Transitions: Fact vs. Fiction](https://www.youtube.com/watch?v=iT-3amHK7tA&list=PLqGQbXn_GDmkOsHI7-Wrbv1GgAA4tJZhg&index=29) by Fred Schott at ViteConf 2023 +- [Bringing React into your content sites with Astro](https://www.youtube.com/watch?v=Fouws8iKPKQ) by Matthew Phillips at Future Frontend 2023 +- [All Things Astro](https://www.youtube.com/watch?v=WKXHFIulZ9g) by Elian Van Cutsem, React Day Berlin 2023 + +## Interviews and podcasts + +- [Does Astro make heavy JS frameworks obsolete?](https://www.youtube.com/watch?v=4Ohi9G-RCcE) with Fred K. Schott on Learn with Jason +- [Coffee Chat about all things Astro](https://www.youtube.com/watch?v=3eyedOP83fw) with Matthew Phillips on WebStorm Webinar +- [Snowpack, Astro](https://www.devtools.fm/episode/14) with Fred K. Schott on devtools.fm +- [Astro and MDX for digital gardening](https://podrocket.logrocket.com/astro-mdx-kathleen-mcmahon) with Kathleen McMahon on PodRocket +- [Decoding the Astro Web Framework](https://www.youtube.com/watch?v=4PKT8x78yOQ) with Chris Pennington on Code Ryan + +## Livestream coding sessions + +- [Building faster websites with Astro](https://www.youtube.com/watch?v=0eka27P4Pr4) with Cassidy Williams +- [Astro SSR and building a Hackernews demo](https://www.youtube.com/watch?v=2ZEMb_H-LYE) with Fred K. Schott and Ryan Carnito +- [Astro site rebuild](https://www.youtube.com/watch?v=VDGEpachpwc) with Chris Pennington +- [Building Astro 3](https://www.youtube.com/watch?v=2zhYwg_nBqQ) with Matthew Phillips and Ryan Carnito \ No newline at end of file diff --git a/src/content/docs/en/recipes.mdx b/src/content/docs/en/recipes.mdx index 31b4d03e4f0d6..830f914041dcd 100644 --- a/src/content/docs/en/recipes.mdx +++ b/src/content/docs/en/recipes.mdx @@ -15,27 +15,6 @@ See guided examples of adding features to your Astro project. ## Community Resources -Add your own here! See our [recipes contributing guide](https://contribute.docs.astro.build/guides/recipe-writing/) for more info. - -- [Use a dynamic filename when importing images](https://vaihe.com/blog/astro/astro-dynamic-image-prop/) -- [Add animated page transitions with Swup](https://navillus.dev/blog/astro-plus-swup) -- [Use UnoCSS in Astro](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro/) -- [Build a table of contents from Astro's Markdown headings](https://kld.dev/building-table-of-contents/) -- [Create a Remark plugin to remove runts from your Markdown files](https://eatmon.co/blog/remove-runts-markdown/) -- [Add searching to your site with Pagefind](https://blog.otterlord.dev/posts/astro-search/) -- [Add searching to your site with Fuse.js](https://www.youtube.com/watch?v=XnV_2MWqAhQ) -- [Get VSCode, ESLint & Prettier working with Astro](https://patheticgeek.dev/blog/astro-prettier-eslint-vscode) -- [Enhance your Astro builds: modify HTML files post-build](https://straffesites.com/en/blog/optimize-astro-html-post-build) -- [Add dark mode to Astro with Tailwind CSS](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/) -- [Generate localized sitemaps for your Astro and Storyblok project](https://straffesites.com/en/blog/localized-sitemap-astro-storyblok) -- [Integrate Prettier with Astro and Tailwind CSS](https://straffesites.com/en/blog/integrate-prettier-astro-tailwindcss) -- [Add an RSS feed to Astro using Storyblok's stories](https://straffesites.com/en/blog/rss-feed-astro-storyblok) -- [Using tRPC in Astro](https://www.thomasledoux.be/blog/using-trpc-astro-islands-react) -- [How to make your Astro website multilingual with Crowdin: Astro localization guide](https://crowdin.com/blog/2023/06/21/astro-localization-and-i18n) -- [Add blog post images to your Astro RSS Feed](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/) -- [Setting up micro-frontends with Astro](https://medium.com/@sergio.a.soria/setting-up-micro-frontends-with-astro-and-ecma-script-modules-137340d2c520) -- [Add username and password authentication with Lucia](https://lucia-auth.com/guidebook/sign-in-with-username-and-password/astro) -- [Add Github OAuth with Lucia](https://lucia-auth.com/guidebook/github-oauth/astro) -- [Integrating Sentry with Astro](https://akashrajpurohit.com/blog/seamless-error-tracking-integrating-sentry-with-astro/) -- [Set Up Draft Pages Effectively in Astro with Config-Driven Content Authoring](https://akashrajpurohit.com/blog/set-up-draft-pages-effectively-in-astro-with-configdriven-content-authoring/) -- [How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) +import ReadMore from '~/components/ReadMore.astro' + +See even more recipes written and maintained by the community in our [community recipes and guides](/en/community-resources/content/#recipes-and-guides) diff --git a/src/i18n/en/nav.ts b/src/i18n/en/nav.ts index 022a1fc6807bb..d0170bb391251 100644 --- a/src/i18n/en/nav.ts +++ b/src/i18n/en/nav.ts @@ -166,4 +166,10 @@ export default [ key: 'reference/error-reference', }, { text: 'NPM Package Format', slug: 'reference/publish-to-npm', key: 'guides/publish-to-npm' }, + + { text: 'Community Resources', header: true, type: 'learn', key: 'communityResources' }, + { text: 'Courses, Guides, and Recipes', slug: 'community-resources/content', key: 'community-resources/content' }, + { text: 'Talks, Interviews, and Streams', slug: 'community-resources/talks', key: 'community-resources/talks' }, + + ] as const;