From 1acedb5ce82edddc9c6d9a39717499d30cd82f49 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Fri, 19 Nov 2021 11:23:09 -0800 Subject: [PATCH] Improve www blog page layout (#1898) * wip * Update Shell.astro to not introduce additional newlines * fix recursive markdown in Note Co-authored-by: Jonathan Neal --- www/src/components/BlogPost.astro | 6 +- www/src/components/Shell.astro | 9 +- www/src/data/blog-posts/astro-018.md | 73 +++++++ www/src/data/blog-posts/astro-019.md | 161 +++++++++++++++ www/src/data/blog-posts/astro-021-preview.md | 95 +++++++++ www/src/data/blog-posts/astro-repl.md | 16 ++ www/src/data/blog-posts/demo-day-2021-09.md | 25 +++ www/src/pages/blog/[slug].astro | 31 +++ www/src/pages/blog/astro-018.astro | 104 ---------- www/src/pages/blog/astro-019.astro | 193 ------------------ www/src/pages/blog/astro-021-preview.astro | 119 ----------- www/src/pages/blog/astro-repl.astro | 34 --- www/src/pages/blog/demo-day-2021-09.astro | 43 ---- .../netlify-astro-hosting-sponsorship.astro | 1 + 14 files changed, 410 insertions(+), 500 deletions(-) create mode 100644 www/src/data/blog-posts/astro-018.md create mode 100644 www/src/data/blog-posts/astro-019.md create mode 100644 www/src/data/blog-posts/astro-021-preview.md create mode 100644 www/src/data/blog-posts/astro-repl.md create mode 100644 www/src/data/blog-posts/demo-day-2021-09.md create mode 100644 www/src/pages/blog/[slug].astro delete mode 100644 www/src/pages/blog/astro-018.astro delete mode 100644 www/src/pages/blog/astro-019.astro delete mode 100644 www/src/pages/blog/astro-021-preview.astro delete mode 100644 www/src/pages/blog/astro-repl.astro delete mode 100644 www/src/pages/blog/demo-day-2021-09.astro diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro index 0e358c0ca..4c73608a3 100644 --- a/www/src/components/BlogPost.astro +++ b/www/src/components/BlogPost.astro @@ -8,8 +8,8 @@ export interface Props { title: string; author?: string; publishDate: string; - heroImage: string; - heroImageAlt: string; + heroImage?: string; + heroImageAlt?: string; } const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props; @@ -18,7 +18,7 @@ const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
- {heroImage && {heroImageAlt}/} + {heroImageAlt

{publishDate}

{title}

{author && } diff --git a/www/src/components/Shell.astro b/www/src/components/Shell.astro index d2738329a..3147ba886 100644 --- a/www/src/components/Shell.astro +++ b/www/src/components/Shell.astro @@ -4,10 +4,11 @@ export interface Props { } const { code } = Astro.props; --- - -
{code.trim().split('\n').map(ln => 
-{ln.startsWith('#') ? {ln} : ln}
-)}
+
{String(code).trim().split('\n').map(
+  line => {
+    line.startsWith('#') ? {line} : line
+  })
+}
- - - - - - - A little over a month ago, the first public beta for Astro was released to the world. Since then, we have been fixing bugs and gathering your feedback on what to tackle next. Today, we are excited to announce the release of some of our most requested features. - - We are excited to introduce Astro v0.18, featuring: - - * __[Responsive partial hydration:](#responsive-component-hydration)__ Hydrate components with CSS media queries. - * __[Named slots:](#named-slots)__ Support multiple content entrypoints inside of Astro components. - * __[Solid.js support:](#solid-support)__ Use [Solid.js](https://www.solidjs.com/) components in Astro. - * __[Lit support:](#solid-support)__ Use [Lit SSR](https://lit.dev/) to get server-side rendering for web components. - * [` - - - - - - - We are excited to introduce Astro 0.19, featuring: - - * __[Next.js-inspired routing:](#file-based-routing-inspired-by-nextjs)__ Define new dynamic URL params. - * __[`client:only` directive:](#clientonly-loading-directive)__ Opt-out of SSR for individual components. - * __[`Astro.resolve()`:](#astroresolve)__ Resolve relative URLs to assets in `src/`. - * __[Community translations:](#docs-translations)__ Read our docs in 10 different languages. - * __[Astro Open Collective:](#open-collective)__ Now accepting donations & sponsorship! - - ## File-based routing, inspired by Next.js - - Astro has always supported basic file-based routing, where every file in your `pages/` directory becomes a new page at that same URL. Astro 0.19 takes this one step further with support for dynamic URL params in your filename. - - Inspired by [Next.js](https://nextjs.org/docs/routing/dynamic-routes) and [SvelteKit](https://kit.svelte.dev/docs#routing-pages), you can now add brackets to your page filename (ex: `src/pages/[slug].astro`) to create a dynamic page that matches many different URLs. `[...slug].astro` catch-all syntax is also supported. - - With this new feature you can add support for URL params, slugs, pretty URLs, pagination and more to your website. - - To create a dynamic route, create a file in your pages directory like `pages/posts/[slug].astro`. Create a [`getStaticPaths()`](https://docs.astro.build/reference/api-reference#getstaticpaths) function in your page frontmatter script and tell Astro exactly what paths to build for that route: - - ```astro - --- - // src/pages/posts/[slug].astro - // Tell Astro what pages to build for your route "/pages/:slug" - export async function getStaticPaths() { - return [ - // Generates: /pages/hello-world - { params: { slug: 'hello-world' } }, - // Generates: /pages/my-first-blog-post - { params: { slug: 'my-first-blog-post' } }, - // Generates: /pages/astro-ftw - { params: { slug: 'astro-ftw' } }, - // ... - ]; - } - --- - - My Page - URL Param is {Astro.request.params.slug} - - ``` - - Astro is a static site builder, so you need to tell Astro what pages to build for every dynamic route. Defining your paths manually might feel like boilerplate, but ahead-of-time page building is exactly what makes static websites so fast for your users. - - `getStaticPaths()` is an async function, so you can -- and should! -- use it to load external data into your website. We normally love to use the [Pokemon API](https://pokeapi.co/) in our examples, but you'll probably want to use your favorite headless CMS: - - ```js - // src/pages/posts/[id].astro - // Tell Astro what pages to build for your route "/pages/:id" - export async function getStaticPaths() { - // Lets fetch posts from CSS Tricks' Headless CMS: - const CSS_TRICKS_CMS = 'https://css-tricks.com/wp-json/wp/v2/posts'; - const allPosts = await fetch(CSS_TRICKS_CMS).then(r => r.json()); - // Then, create a new page from every post: - return allPosts.map((post) => ({ - // Set the URL param ":id" in the page URL - params: {id: post.id}, - // Pass the post object as a prop to the page - props: {post}, - })); - } - ``` - - To learn more, check out our new documentation on [Routing](https://docs.astro.build/core-concepts/routing) and the new [`getStaticPaths()` API.](https://docs.astro.build/reference/api-reference#getstaticpaths) Or, if you prefer to learn by example, check out this great [Wordpress Headless CMS project](https://github.com/chriscoyier/astro-css-trickzz) from Chris Coyier and this [Shopify Ecommerce example](https://github.com/cassidoo/shopify-react-astro) by Cassidy Williams of Netlify. - - If you were a previous user of our original Collections API, this new file-based routing system completely replaces Collections with plenty of friendly warning messages to help you upgrade. We hope that this new API removes all common frustrations that users had reported with the Collections API. - - ## `client:only` loading directive - - Sometimes, a UI component can't render on the server. Maybe it's because you've hit a bug in one of your dependencies, or maybe you're just using a library like D3 that can't run without the browser's `window` object. - - You can attempt to wrap browser-only code with your own static server-side fallback UI. However, most users wanted a way to render a browser-only component without the extra boilerplate. Enter, `client:only`. - - Astro 0.19 ships with the new `client:only` loading directive to hydrate your component in the browser without server-side rendering. This provides a simple, straightforward fallback for any browser-only components. - - ```html - - - ``` - - `client:only` is now our fifth directive to let you completely control you component loading behavior. Visit our docs site to [check out the entire set](https://docs.astro.build/core-concepts/component-hydration#hydrate-interactive-components) and learn more about [Partial Hydration](https://docs.astro.build/core-concepts/component-hydration). - - 🎉 This awesome feature was contributed by [Tony Sull](https://github.com/tony-sull) of [Navillus](https://navillus.dev/). Thanks, Tony! - - ## `Astro.resolve()` - - Astro 0.19 includes a new [`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) helper function to resolve relative file references in your templates. With this new feature, you can reference relative assets (like images) inside of your components and Astro will return the correct URL for the browser. - - Previously, you always had to place files in the `public/` directory and reference them by absolute URL path. Relative paths within the `src/` directory didn't work because they'd be shipped directly to the browser, as-is. Different pages would end up creating different URLs: - - ```html - - - - - ``` - - Starting in Astro 0.19, you can now use the new `Astro.resolve()` helper function to create an absolute URL reference from any relative path: - - ```html - - - - - ``` - - If it helps, you can think of `Astro.resolve()` as a simplified alternative to doing `new URL(yourRelativePath, import.meta.url).pathname` in the browser. - - [`Astro.resolve()`](https://docs.astro.build/reference/api-reference#astroresolve) gives you more options and more control over how you structure your project. In the future, this will also unlock our ability to serve optimized images right out of your `src/` directory. - - 🎉 This awesome feature was contributed by [Jonathan Neal](https://github.com/jonathantneal) & [Matthew Phillips!](https://github.com/matthewp) - - ## Docs Translations - - Not all developers speak English. In fact, most don't. Luckily, some amazing contributors in our community came together to translate the Astro docs site for a global audience. We are currently working on translations in 10 different languages, including: - - - [简体中文](https://docs.astro.build/zh-CN/getting-started) - - [正體中文](https://docs.astro.build/zh-TW/getting-started) - - [Български](https://docs.astro.build/bg/getting-started) - - [Deutsch](https://docs.astro.build/de/getting-started) - - [English](https://docs.astro.build/getting-started) - - [Español](https://docs.astro.build/es/getting-started) - - [Français](https://docs.astro.build/fr/getting-started) - - [Nederlands](https://docs.astro.build/nl/getting-started) - - [Português](https://docs.astro.build/pt-br/getting-started) - - [Suomi](https://docs.astro.build/fi/getting-started) - - [Русский](https://docs.astro.build/ru/getting-started) - - These are still a work in progress, and we'll keep working towards 100% translation as we creep closer to a v1.0 release. If you know a few languages and are able to contribute, [we could really use your help!](https://github.com/snowpackjs/astro/blob/main/CONTRIBUTING.md#translations) - - ## Open Collective - - It's been a little over two months since [the first release](https://astro.build/blog/introducing-astro) of Astro. In that release, we outlined our commitment to both **a free, open source Astro** and **long-term financial sustainability** for the project. Today, we're announcing our first experiment towards long-term sustainability: - - **Companies and individuals can now sponsor Astro's development with Open Collective. [Visit our Open Collective →](https://opencollective.com/astrodotbuild)** - - We created an Open Collective because corporate sponsorship is one of the few proven paths towards financial sustainability in open source. However, [it's far from a perfect model.](https://stackoverflow.blog/2021/01/07/open-source-has-a-funding-problem/) Most contributions only go to a handful of popular projects, and the rest never see any meaningful support. The odds are against us but we believe in Astro, our community, and the excitement that keep growing around this project. - - Chances are, your company benefits from open source software. Invest in the technologies that power your business by sponsoring Astro and any other open source projects that you use. **Bonus:** thousands of developers will see your logo on our README and the [astro.build homepage](https://astro.build), every day. - - 100% of funds raised are invested directly back into the project and our community. You can read more about how funds are distributed by reading our [FUNDING.md](https://github.com/snowpackjs/astro/blob/main/FUNDING.md) doc on GitHub. - - We'll be tweeting out personal "thank you" messages to every person and company who hits the ["Sponsor"](https://opencollective.com/astrodotbuild) button in the next 48 hours. Our first, very special THANK YOU goes out to [Chris Jennings](https://twitter.com/ckj), CCO and co-founder of [Sentry](https://sentry.io/), for being our first official sponsor! 🎉 - - ## ICYMI (In case you missed it) - - [Github added official support](https://twitter.com/astrodotbuild/status/1423001137905651714?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1423001137905651714%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fastro.build%2Fblog%2Fastro-019%2F) for `.astro` files and ```` ```astro```` syntax highlighting across their entire platform. Not to be outdone, CodeSandbox [quickly followed up](https://twitter.com/codesandbox/status/1425438635357257728) with support of their own! - - This is such a huge milestone for Astro, especially considering how young the project is! Thank you to everyone who used Astro, created projects, and showed these platforms how valuable Astro really is. - - - - ## 👋 - - Thank you for reading! [Follow us on Twitter](https://twitter.com/astrodotbuild) to stay up to date as we move closer to a v1.0 release. Also, you can check out [our previous release post](https://astro.build/blog/astro-018) for even more updates on Astro. - - And, if you've read this far, you should definitely [join us on Discord.](https://astro.build/chat) ;) - - - - - - diff --git a/www/src/pages/blog/astro-021-preview.astro b/www/src/pages/blog/astro-021-preview.astro deleted file mode 100644 index a1da0d847..000000000 --- a/www/src/pages/blog/astro-021-preview.astro +++ /dev/null @@ -1,119 +0,0 @@ ---- -import { Markdown, Code } from 'astro/components'; -import BaseHead from '../../components/BaseHead.astro'; -import BlogHeader from '../../components/BlogHeader.astro'; -import BlogPost from '../../components/BlogPost.astro'; -import GoogleAnalytics from '../../components/GoogleAnalytics.astro'; - -let title = 'Astro 0.21 Preview: Vite + WASM = ⚡️'; -let description = `Get a sneak preview of what's next for Astro, including our new Vite build engine and WASM-powered Go compiler.`; -let publishDate = 'October 6, 2021'; -let permalink = 'https://astro.build/blog/astro-021-preview'; -let lang = 'en'; ---- - - - - - - - - - - - - - Astro v0.21.0 will be our biggest release yet. At a high-level, it includes: - - - [A new build engine, powered by Vite](#hello-vite) - - [A new WASM compiler, written in Go](#hello-wasm) - - [Brand new features, like Components-in-Markdown](#components-in-markdown) - - [A new system for HTML live-updating via HMR](#hmr-meet-html) - - You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory on your machine. - - Astro is quickly becoming the production-ready framework for building faster, content-focused websites. To celebrate this milestone, here are some highlights and details on what you can expect in Astro v0.21.0 and beyond. - - ## Hello, Vite! - - Astro 0.21 is getting an internal build engine upgrade, replacing Snowpack with [Vite](https://vitejs.dev) going forward. - - We ran some early experiments with Vite and came away extremely impressed. Vite is well-maintained, well-documented, a bit faster, has great error messages, and has been building clear community buy-in across multiple frameworks. SSR handling can be a bit flakey, but the Vite team is aware of this and actively working on it. - - So now, when Evan You tweets about [some great performance optimization](https://twitter.com/youyuxi/status/1440718351802646550) that they're making in Vite you can be certain that the same speed is coming to Astro as well. - - The reverse is also true: we can now contribute fixes and improvements back to the larger Vite community. Now, when we fix an SSR bug in Astro (like [adding support for ESM-only npm packages](https://github.com/vitejs/vite/pull/5197)) we're also fixing it for every other Vite user, including [SvelteKit](https://kit.svelte.dev/docs#routing-endpoints). - - There's one other huge benefit to choosing Vite: Rollup plugins. Starting in v0.21.0, you'll be able to connect the entire ecosystem of Rollup plugins to Astro. Enable new features like [image optimizations](https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite) and [icon loading](https://github.com/antfu/unplugin-icons) with just a few simple plugins. Magic! - - This switch from Snowpack to Vite might come as a surprise to some: Both Drew and myself are maintainers on both projects. This was [a hard decision](https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9) for us to make. But ultimately, after working with both tools I can confidently say that Vite will be a great choice for Astro's future. - - - ## Hello, WASM! - - Astro 0.21 features another huge low-level improvement: the brand new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next). Astro's new compiler is written in Go and distributed as WASM. You can run it right in your browser, or on the server in Node.js and Deno. - - The new [@astrojs/compiler](https://github.com/snowpackjs/astro-compiler-next) unlocks: - - - **Flexibility:** Run the compiler anywhere with WASM. - - **Speed:** Build sites faster with Go's compiled-language performance. - - **Stability:** Writing our own compiler allowed us to fix some long-standing bugs. - - You can play with the new compiler today right in your browser at https://astro.build/play. This REPL is just one example of what is now possible when you have a fast, runs-anywhere compiler. - - Shout out to [Nate Moore](https://twitter.com/n_moore) who did an incredible job with this project. - - - ## Components in Markdown - - Our most requested feature ***by far*** has been the ability to use components directly in Markdown. After months of work, we're excited to announce that this feature is finally coming to Astro. - - Starting in v0.21.0, you can import components inside of your Markdown frontmatter via an optional `setup` script. Once imported, your components can be used anywhere on the page: - - - -- Back to markdown here. -- Supports static Astro components. -- Supports dynamic React/Vue/Svelte components! - - -`} lang="astro" /> - - This new `setup` script was designed for maximum flexibility. We'll keep improving this API going forward with planned support for default components, default layouts, and markdown component overrides. - - - ## HMR, meet HTML - - Starting in v0.21.0, Astro will support full HMR for Astro components and pages. Change any `.astro` file in your codebase, and watch the dev server update the page without a full refresh and without losing any client state. - - Astro has always supported powerful HMR updates for client-side JavaScript components like React, Preact, Svelte, Vue, and Solid.js. But adding this for Astro was a fun challenge because Astro components are just static HTML. Our "Zero JavaScript" approach meant that there was no "Astro runtime" to hook into for updates. We had to get creative. - - Now, Astro's dev server sends HTML updates to the browser and then runs a small script to diff those updates against the current page. This creates a more granular, component-level HMR update that won't impact the rest of the page. - - - ## Try it today - - If you've read this far, we'd love your help trying out the latest release before launch. You can try out our latest release today [in the browser](https://gitpod.io#snapshot/5e7cf2f1-8108-4fa5-99d3-ed8de70d8c23) or by running `npm install astro@next--compiler` in a new project directory. You can follow our progress and leave feedback in the `next` PR on GitHub: https://github.com/snowpackjs/astro/pull/1406 - - Leave feedback, report bugs, and get involved with Astro's development in our [Discord server](https://astro.build/chat). You can also [follow along](https://twitter.com/astrodotbuild) on Twitter. - - Keep your eyes on the sky, 👩‍🚀 Astronaut! - - - - - - diff --git a/www/src/pages/blog/astro-repl.astro b/www/src/pages/blog/astro-repl.astro deleted file mode 100644 index eb518b5e5..000000000 --- a/www/src/pages/blog/astro-repl.astro +++ /dev/null @@ -1,34 +0,0 @@ ---- -import { Markdown } from 'astro/components'; -import BaseHead from '../../components/BaseHead.astro'; -import BlogHeader from '../../components/BlogHeader.astro'; -import BlogPost from '../../components/BlogPost.astro'; - -let title = 'Introducing the Astro REPL'; -let description = 'The power of Astro, right in your browser.'; -let publishDate = 'September 17, 2021'; -let permalink = 'https://astro.build/blog/astro-repl/astro-repl.png'; -let lang = 'en'; ---- - - - - - - - - - - - - The Astro team proudly presents the new [Astro REPL:](https://astro.build/play) compile Astro right in your browser. Use it to explore Astro's HTML-based component language, debug issues, or even prototype an entire webpage. It's powered by Astro’s **new WASM compiler** (written in Go) that runs anywhere and can rebuild files in an instant. - - ![astro](/assets/blog/astro-repl/astro-repl-screenshot.jpg) - - Try it today at [astro.build/play →](https://astro.build/play) - - To learn more about our new compiler, [join us on Discord](https://astro.build/chat) and tune in to [Astro Demo Days](https://www.youtube.com/watch?v=-ExcBJrXOd8) next Monday, September 20, 2021 at 11am PST. - - - - diff --git a/www/src/pages/blog/demo-day-2021-09.astro b/www/src/pages/blog/demo-day-2021-09.astro deleted file mode 100644 index 031833946..000000000 --- a/www/src/pages/blog/demo-day-2021-09.astro +++ /dev/null @@ -1,43 +0,0 @@ ---- -import { Markdown } from 'astro/components'; -import BaseHead from '../../components/BaseHead.astro'; -import BlogHeader from '../../components/BlogHeader.astro'; -import BlogPost from '../../components/BlogPost.astro'; - -let title = 'Astro Demo Day September Edition'; -let description = 'Astro September Demo Day was today and we had 4 amazing talks, including one with big announcements on the future direction of Astro.'; -let publishDate = 'September 20, 2021'; -let permalink = 'https://astro.build/blog/demo-day-2021-09'; -let lang = 'en'; ---- - - - - - - - - - - - - **Astro Demo Day** was today! We had **4** amazing talks, including one big announcement on the future direction of Astro. If you missed the livestream, fear not! You can see the full event [on YouTube](https://www.youtube.com/watch?v=-ExcBJrXOd8) or watch the talks in any order by visiting the links below. Subscribe to the [Astro YouTube channel](https://www.youtube.com/channel/UCeFjmvZEK-MoefuYXptnX6A) to make sure you don't miss our next demo day. Today's demos were: - - * [Developing the Astro VSCode extension](https://youtu.be/-ExcBJrXOd8?t=109) 🧑‍💻 from [Matthew Phillips](https://twitter.com/matthewcp) - * [Integrating a CMS - Astro+Forestry+Netlify](https://youtu.be/-ExcBJrXOd8?t=763) 🌳 from [Tony Sullivan](https://twitter.com/navillus_dev) - * [The Astro SEO component](https://youtu.be/-ExcBJrXOd8?t=1384) 🗃 from [Jonas Schumacher](https://twitter.com/jonasmerlin1) - * [Astro's v2 Compiler and a Surprise](https://youtu.be/-ExcBJrXOd8?t=2070) 🪄 from [Drew Powers](https://twitter.com/drwpow) and [Nate Moore](https://twitter.com/n_moore) - - As always, our Discord community brought the hype: - - Messages from the Demo Day chat room on Discord - - ## The next Astro release - - Astro's next release will be our biggest ever, featuring a new WASM-powered compiler plus a new Vite-powered runtime. You can expect a preview release on [npm](https://www.npmjs.com/package/astro) later today or tomorrow. Over the next few weeks, we will continue to polish the new code as we prepare for its official release! - - If you haven't already, follow [@astrodotbuild](https://twitter.com/astrodotbuild) on Twitter for more news and announcements, and [join our Discord](https://astro.build/chat) to learn how you can try out the new previous release. - - - - diff --git a/www/src/pages/blog/netlify-astro-hosting-sponsorship.astro b/www/src/pages/blog/netlify-astro-hosting-sponsorship.astro index 7f060abf5..a88a5a533 100644 --- a/www/src/pages/blog/netlify-astro-hosting-sponsorship.astro +++ b/www/src/pages/blog/netlify-astro-hosting-sponsorship.astro @@ -39,6 +39,7 @@ let lang = 'en'; Here's what Jason told us about Astro: + "Astro is tackling an extremely hard problem: **how do we keep the advantages of powerful frameworks but stop making end users pay the cost of developer experience?** Shipping only HTML and CSS for the vast majority of web content that doesn't need to be dynamic and only including JavaScript when it's actually necessary is a huge win for developers and users alike."
-- [Jason Lengstorf](https://twitter.com/jlengstorf), VP of Developer Experience, Netlify