Astro 3.0 Crash Course (View Transitions, Image, Content Collections, and More!)
HTML-код
- Опубликовано: 4 авг 2024
- Astro 3.0 is HERE! Here's what you'll learn
- Astro components and page based routing
- installing and working with Tailwind
- Content Collections with Markdown and MDX
- dynamic routes
- image optimization
Astro 3.0 Blog Post - astro.build/blog/astro-3/
Learn Astro 3.0 - astrocourse.dev/
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
*STAY IN TOUCH 👋*
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
00:00 - Intro
00:30 - Introduction to Astro
02:10 - Creating a New Astro Project and Code Overview
09:00 - What You'll Build
11:00 - Setting Up Tailwind
12:00 - Astro Components (Layout, Header, and Footer)
17:00 - Page Based Routing
18:00 - View Transitions
20:30 - Content Collections
24:30 - Querying and Displaying Content
27:30 - Image Optimization
31:00 - Get Static Paths for Dynamic Routes
36:00 - Tailwind Typography Plugin
37:40 - Working with MDX
40:00 - Recap and Wrapup
Awesome content here, thanks James Q Quick, you did good thing clearing up my mind on what to use on my current test project - Astro it is!
I stop everything I am doing now - and start this course. Thanks James!
Great Course, thanks James.
Nice work! I've been wanting to play around with Astro for a while now.
Great video, the content still applies as is for astro 4.0. I followed your instructions with no issues. Great explanation!
Great tutorial! Astro shows nice exceptions! :-) Great dev expirience
Great idea to go with ts and tw, great video!
Thank you, James.
I´m a NextJS fan but you make me see Astro as a great great choice, thanks for sharing
Great crash course James, very well explain about the new features on this 3.0 release. Quality content as usual
Svelte Yes sir! 🙋♂️
huge thanks
Hey James, this helped me tremendously to get going with astro! Thx!
So glad to hear that!
Another excellent tutorial James and Astro looks really good. Can Astro support a micro-frontend methodology or Module Federation?
That was really quick, to launch a crash course for V3, big thanks for your efforts, and I do not really like TS😅,Svelte yes !!!
Nice tutorial James
Thank you! Hope you're enjoying Astro :)
Astro could be for me the next big framework. Compared to other solution such a Qwik, the adoption of astro is really easy whatever your previous prefered language might be !
Oh snap you did *THE OFFICIAL* course! Nice work James 💪💪💪
Svelte yes!
svelte yes 🙌
When Astro home page was updated on the same day as 3.0 released, I tested it's 100/100 PageSpeed score!
Great video! Would love to see the Svelte-stuff!
yes typescript 😊
you are amazing
Thank you!
I am totally PHP!
Sveltekit yes!
Will you make a small project video on Astro with Svelte framework? It will be helpful for me and also for those who're interested in astro.
I have this question. How to configure astro to pull posts dynamically instead of storing the content in webapp and this will lead pushing the website everytime we write a new post. In that case, how content collection will work?
you will need to buy the full course for that 😂
you'll need a CMS integration for that. Astro does support a number of them
So would these image optimizations work with images that are hosted somewhere else?
SVELTE YES!!!!!!!!!!!!!!!!!
When are you releasing your Astro Course?
Typescript for the win
Yeahhh!!
svelte yes
how to shorter path when changes file? my terminal showing full path C:/..
I knew astro is good for SEO. But....
I have confuse between using gofiber html + HTMX or using astro+gofiber (API)
Do you have suggestion what best solution for an e-commerce website ?
Thanks
Svelte Yes
Svelte yes
Hi James, when would the course be released? I am in the waiting list excitedly awaiting 😅
according to his site it is this summer so just two weeks left therefore
@@demetrycode you mean two long weeks! 😅
@@Nevalkar_ true 😆
how do i create the page for the category, im getting a 404 when i click the category link in the post
Regarding Typescript. Not sure yet. Would’ve been nice to see the crash course without dependencies of having to know Typescript, Tailwind, etc. It allows beginners to focus on one technology at a time. Some people just want to learn Astro.
Fair enough. That's great feedback!
Being an typesafe language TS gives edge over js
where is the repo link for the code?
What is the terminal plugin that you recommend? I cannot find it without knowing the spelling. Thanks.
Fig.io Go check it out :)
My head is spinning. Any thought on how this compares to Remix?
remix, astro, next, vue... ugh to much
What theme is this? I love it!
did you find it?
no : / ..... could you tell me?@@ramimhossainantor3747
any luck with theme? I'd like know theme name as well. Thx
@@ondrejhavazik4124 James Q Quick theme
@@ondrejhavazik4124 noo = /
I want to deploy site to sub folder. does astro support that ?
I'm not sure what you mean. can you help clarify that?
@@JamesQQuick
I want to site run on temporarily sub folders like
://Hostname/test/version1
Is there any configuration available ?
Yes, TypeScript please
I prefer coding instead of wasting my time making typescript happy.
astro supabase?
i like javascript more than typescript, it less code
No Typescript, thank you.
You prefer to not use typescript?
@@JamesQQuick exactly.
Loose typing is a strength when used properly. Other than that, "warning" you about types should be part of code assist/intellisense in either case. With that out of the way, why add another layer on top? Typescript is hands holding for those coming from other languages, but it limits you greatly in using JS to its potential.
At first glance content data flow looks pretty messy.
This tutorial is impossible to follow. I get "TypeError: posts.map is not a function"
Good video, but saying "way too many javascript frameworks" at the start is a really negative take. We're spoiled for choice; that's a good problem to have. They all do different things too; Astro (static site generator) and Vue (reactive MVVM) are basically unrelated in terms of their use cases. The only downside is having to do some research when deciding which is the best fit, which is a lot better than having to compromise on fewer options.
I hate typescript.
Fun times. Prefere regular JavaScript?
did u just delete my comment? wow, open mindedness not a thing here?
Don't think I've deleted any comments here. What did you say?
No you should not - Astro is not fit for purpose - i repeat it’s not UNTIL it stops asking you to turn off Content Security Policies that prevent javascript eval - i love the framework feature but it will create a security vulnerability - James should point out the trade offs that Astro requires you to implement - I have 24 years as CTO , Chief Architect etc and i am telling you these frameworks are taking us back to PHP days -or reinventing the wheel
Could you share where did you get this information?
had to stop after you chose typescript :(
Why? He barely used it in this tutorial and it really isn't that hard
Anything I could do to help with that?
svelte yes
Svelte yes