https://github.com/iamhectorsosa/astrofordocs
Is it possible to ship ZERO JavaScript and still deliver a functional website?
https://github.com/iamhectorsosa/astrofordocs
astro javascript typescript
Last synced: 5 months ago
JSON representation
Is it possible to ship ZERO JavaScript and still deliver a functional website?
- Host: GitHub
- URL: https://github.com/iamhectorsosa/astrofordocs
- Owner: iamhectorsosa
- Created: 2022-10-21T10:50:54.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-02T14:46:49.000Z (over 2 years ago)
- Last Synced: 2024-11-05T07:35:12.054Z (6 months ago)
- Topics: astro, javascript, typescript
- Language: Astro
- Homepage: https://astrofordocs.vercel.app
- Size: 1.28 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro for Docs
## Shipping Zero JavaScript with Astro
Astro is an **all-in-one web framework** designed for building **content-focused** websites. With this approach in mind, it delivers an incredible developer experience to build server-first, intuitive to use, flexible and fully-featured websites. Anyone who knows a little bit of HTML and CSS all the way up to seasoned developers can leverage Astro's _opt-in complexity_ framework to build for the web.
## Astro's biggest perks
Let's see what are the basics that Astro brings to the table, **Astro is...**
- ...**easy to use** and by design less complex than any other UI framework or language (any valid HTML is a valid Astro component, see [Why Astro - Easy to Use](https://docs.astro.build/en/concepts/why-astro/#easy-to-use)),
- ...**fast by default** shipping ZERO Javascript out of the box, it takes an MPA approach loading on average 90% less JavaScript (see [MPAs vs SPAs](https://docs.astro.build/en/concepts/mpa-vs-spa/)),
- ...**incredibly featured, flexible and UI-agnostic** supporting several frameworks (supporting React, Preact, Svelte, Vue and more), an easier JSX, scoped CSS, file-based routing, data-fetching, and a lot more (see [Integrations](https://astro.build/integrations/)).
We've built a sample project called [Astro for Docs](https://astrofordocs.vercel.app/) (see source code: [GH: Astro for Docs](https://github.com/ekqt/astrofordocs)) to showcase how straight-forward and flexible it is to use Astro for Beginners.
## What's in the menu for today?
After playing around with this project, it turns out you CAN REALLY build a content-focused website with ZERO JavaScript using Astro. Based on what we've learned, here's what we'd like to show you:
1. Writing in "Astro" as a language to write [Astro Components](https://docs.astro.build/en/core-concepts/astro-components/)
2. Use Markdown files as pages with Astro's [MDX](https://docs.astro.build/en/guides/integrations-guide/mdx/) and [TailwindCSS](https://docs.astro.build/en/guides/integrations-guide/tailwind/) integrations.
3. Design [nested layouts](https://docs.astro.build/en/core-concepts/layouts/) for better developer experience.
4. Leverage Astro's [Runtime APIs](https://docs.astro.build/en/reference/api-reference/) to build components.
We ran `npm create astro@latest` with TypeScript and a blank, empty project.