mirror of
https://github.com/withastro/astro.git
synced 2025-01-06 22:10:10 -05:00
parent
c2176bfc83
commit
94fdd0db1b
3 changed files with 18 additions and 15 deletions
|
@ -11,7 +11,7 @@ let threshold = 32;
|
||||||
function onScroll() {
|
function onScroll() {
|
||||||
const curr = window.scrollY;
|
const curr = window.scrollY;
|
||||||
const dir = curr > prev ? 1 : -1;
|
const dir = curr > prev ? 1 : -1;
|
||||||
|
|
||||||
if (curr < threshold) {
|
if (curr < threshold) {
|
||||||
show();
|
show();
|
||||||
document.documentElement.classList.add('initial');
|
document.documentElement.classList.add('initial');
|
||||||
|
@ -22,16 +22,16 @@ function onScroll() {
|
||||||
show();
|
show();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
prev = curr;
|
prev = curr;
|
||||||
}
|
}
|
||||||
|
|
||||||
const hide = () => {
|
const hide = () => {
|
||||||
nav.classList.add('hidden');
|
nav.classList.add('hidden')
|
||||||
document.documentElement.classList.add('scrolled');
|
document.documentElement.classList.add('scrolled');
|
||||||
document.documentElement.classList.remove('initial');
|
document.documentElement.classList.remove('initial');
|
||||||
};
|
};
|
||||||
const show = () => {
|
const show = () => {
|
||||||
nav.classList.remove('hidden');
|
nav.classList.remove('hidden');
|
||||||
document.documentElement.classList.remove('scrolled');
|
document.documentElement.classList.remove('scrolled');
|
||||||
};
|
}
|
||||||
|
|
|
@ -3,32 +3,34 @@ layout: ~/layouts/Main.astro
|
||||||
title: Getting Started
|
title: Getting Started
|
||||||
---
|
---
|
||||||
|
|
||||||
Astro is modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources.
|
|
||||||
|
Astro is modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources.
|
||||||
|
|
||||||
## Try Astro
|
## Try Astro
|
||||||
|
|
||||||
The easiest way to try Astro is to run `npm init astro` in a new directory on your machine. This CLI command will walk you through starting a new Astro project.
|
The easiest way to try Astro is to run `npm init astro` in a new directory on your machine. This CLI command will walk you through starting a new Astro project.
|
||||||
|
|
||||||
Read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
|
Read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
|
||||||
|
|
||||||
### Online Playgrounds
|
### Online Playgrounds
|
||||||
|
|
||||||
If you're interested in playing around with Astro in the browser, you can use an online code playground. Try a Hello World template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
|
If you're interested in playing around with Astro in the browser, you can use an online code playground. Try a Hello World template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
|
||||||
|
|
||||||
|
*Note: some features (ex: Fast Refresh) are currently limited on CodeSandbox.*
|
||||||
|
|
||||||
_Note: some features (ex: Fast Refresh) are currently limited on CodeSandbox._
|
|
||||||
|
|
||||||
## Learn Astro
|
## Learn Astro
|
||||||
|
|
||||||
People come to Astro from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
|
People come to Astro from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
|
||||||
|
|
||||||
- If you prefer to **learn by doing**, start with our [examples library](https://github.com/snowpackjs/astro/tree/main/examples).
|
* If you prefer to **learn by doing**, start with our [examples library](https://github.com/snowpackjs/astro/tree/main/examples).
|
||||||
- If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/core-concepts/project-structure).
|
* If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/core-concepts/project-structure).
|
||||||
|
|
||||||
Like any unfamiliar technology, Astro does have a learning curve. With practice and some patience, you _will_ get the hang of it.
|
Like any unfamiliar technology, Astro does have a learning curve. With practice and some patience, you *will* get the hang of it.
|
||||||
|
|
||||||
### Learn `.astro` Syntax
|
### Learn `.astro` Syntax
|
||||||
|
|
||||||
When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is the **Astro component syntax**: a special HTML-like file format that Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience.
|
When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is the **Astro component syntax**: a special HTML-like file format that Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience.
|
||||||
|
|
||||||
Our guide on [Astro components](/core-concepts/astro-components) walks you through the new syntax, and is best way to learn.
|
Our guide on [Astro components](/core-concepts/astro-components) walks you through the new syntax, and is best way to learn.
|
||||||
|
|
||||||
|
@ -40,11 +42,12 @@ This documentation section is useful when you want to learn more details about a
|
||||||
|
|
||||||
This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation.
|
This documentation always reflects the latest stable version of Astro. Once we hit the v1.0 milestone, we will add the ability to view versioned documentation.
|
||||||
|
|
||||||
|
|
||||||
## Staying Informed
|
## Staying Informed
|
||||||
|
|
||||||
The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team.
|
The [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account is the official source for the updates from the Astro team.
|
||||||
|
|
||||||
We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel.
|
We also post release announcements to our [Discord community](https://astro.build/chat) in the #announcements channel.
|
||||||
|
|
||||||
Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md).
|
Not every Astro release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md` file in the Astro repository](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md).
|
||||||
|
|
||||||
|
@ -54,4 +57,4 @@ If something is missing in the documentation or if you found some part confusing
|
||||||
|
|
||||||
## Credit
|
## Credit
|
||||||
|
|
||||||
This getting started guide was originally based off of [React's](https://reactjs.org/) getting started guide.
|
This getting started guide was originally based off of [React's](https://reactjs.org/) getting started guide.
|
|
@ -254,4 +254,4 @@ The action will work to deploy your app (watch its progress in your repo's Actio
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
|
|
||||||
This guide was originally based off of [Vite's](https://vitejs.dev/) well-documented static deploy guide.
|
This guide was originally based off of [Vite's](https://vitejs.dev/) well-documented static deploy guide.
|
Loading…
Reference in a new issue