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: about 2 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-02T14:46:49.000Z (almost 2 years ago)
• Last Synced: 2024-06-08T19:34:39.164Z (4 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.