Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New community content section #6470

Merged
merged 31 commits into from
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
6ac1a28
basic structure of community resources section
sarah11918 Jan 18, 2024
21cc8ae
abuse landing page ListCards
sarah11918 Jan 19, 2024
2dc81c4
uncomment all the things for comparison
sarah11918 Jan 19, 2024
27f947f
basic structure in place for community content page
sarah11918 Jan 19, 2024
21bd1cb
added tip
sarah11918 Jan 19, 2024
3f65e19
committed some more content
sarah11918 Jan 19, 2024
261afd3
finish adding content and rework placeholder text
sarah11918 Jan 19, 2024
5a4fdf9
typo fix!
sarah11918 Jan 19, 2024
c33e762
capitalization
sarah11918 Jan 19, 2024
953d992
Merge branch 'main' into sarah-community-resources
sarah11918 Jan 19, 2024
d69ddf7
add link to community events calendar
sarah11918 Jan 19, 2024
bb96629
Merge branch 'main' into sarah-community-resources
sarah11918 Jan 23, 2024
204cb85
add new recipe, plus placeholder link for newsletter signup
sarah11918 Jan 23, 2024
353e284
focus on contributing recipes
sarah11918 Jan 23, 2024
23b96af
educational content
sarah11918 Jan 23, 2024
2b35002
removed unused imports
sarah11918 Jan 25, 2024
c26502f
final newsletter links!
sarah11918 Jan 25, 2024
77c0930
Merge branch 'main' into sarah-community-resources
sarah11918 Jan 25, 2024
8cd991d
update recipes link to more recipes page
sarah11918 Jan 25, 2024
33fbe96
update links based on feedback
sarah11918 Jan 26, 2024
93cb484
punctuation
sarah11918 Jan 26, 2024
635be1d
shorten lines
sarah11918 Jan 26, 2024
58286c0
formatting consistency
sarah11918 Jan 26, 2024
17756d3
consistency fix
sarah11918 Jan 26, 2024
1e828c0
remove blank line. Alex Nguyen would be proud!
sarah11918 Jan 26, 2024
f340347
remove bunch of blank lines
sarah11918 Jan 26, 2024
3065007
fix links
sarah11918 Jan 26, 2024
7a37a19
move one video to another page
sarah11918 Jan 26, 2024
3d4fa4d
no mercy for the translators!
sarah11918 Jan 26, 2024
8370218
Merge branch 'main' into sarah-community-resources
sarah11918 Jan 26, 2024
2267c74
Merge branch 'main' into sarah-community-resources
sarah11918 Jan 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions src/content/docs/en/community-resources/content.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
title: Community Content
description: Discover community-produced guides, articles and videos to help you learn and build with Astro!
i18nReady: false
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that while talks.mdx is i18nReady: true, this one is false, in case that's not on purpose.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, Yan, I'll change it!

sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
---

import Badge from '~/components/Badge.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';
import Card from '~/components/Landing/Card.astro'
import ListCard from '~/components/Landing/ListCard.astro'
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

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 that can help you learn and build with Astro.

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!

:::tip[Add your own!]
Have you produced educational content about Astro?
Open a PR adding a link to this page!
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
:::
## 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 on freeCodeCamp](https://www.youtube.com/watch?v=e-hTm5VmofI)
- [Learn Astro by Chris Pennington](https://learnastro.dev/)
- [Build Modern Websites with Astro by James Q Quick](https://astrocourse.dev/)
- [Understanding Astro by Ohans Emmanuel](https://www.ohansemmanuel.com/books/understanding-astro)
- [Astro Crash Course in 60 minutes by @developedbyed](https://www.youtube.com/watch?v=NniT0vKyn-E)
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

### Video Tutorials
- [Astro Crash Course in 20 minutes!](https://www.youtube.com/watch?v=zrPVTf761OI)
- [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=kwqlP6Pe0SI)
- [Everything You Need to Know about Astro](https://www.youtube.com/watch?v=rRxuVOutmFQ)
- [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)


sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
## Recipes and Guides

See guided examples of adding features to your Astro project, submitted by our community members!

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.

Explore community-produced recipes maintained by Astro users:


sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
### 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/)
### 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)
### Animation
- [Add animated page transitions with Swup](https://navillus.dev/blog/astro-plus-swup)
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
### 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/)
43 changes: 43 additions & 0 deletions src/content/docs/en/community-resources/talks.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
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 official Astro Blog](https://astro.build/blog/) where we recap the best community content of each month!
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

## 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
- [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
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

## 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=3eyedOP83) with Matthew Phillips on WebStorm Webinar
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
- [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


sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
## 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
28 changes: 4 additions & 24 deletions src/content/docs/en/recipes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,7 @@ 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'

sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

<ReadMore>See even more recipes written and maintained by the community in our [community recipes and guides](/en/community-resources/content/#recipes-and-guides)</ReadMore>
8 changes: 8 additions & 0 deletions src/i18n/en/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,4 +166,12 @@ 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;


sarah11918 marked this conversation as resolved.
Show resolved Hide resolved
Loading