diff --git a/docs/public/index.css b/docs/public/index.css index 2b41accada..7fd76509cc 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -23,7 +23,7 @@ body { font-size: clamp( 0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), - 1.125rem + 1.0rem ); line-height: 1.625; } @@ -58,12 +58,12 @@ h1 { } h2 { - font-size: 32px; + font-size: 34px; font-weight: bold; } h3 { - font-size: 24px; + font-size: 22px; font-weight: bold; } diff --git a/docs/src/config.ts b/docs/src/config.ts index bb96ac4e92..d972fb366e 100644 --- a/docs/src/config.ts +++ b/docs/src/config.ts @@ -3,6 +3,7 @@ export const sidebar = [ text: 'Setup', link: '', children: [ + { text: 'Getting Started', link: 'getting-started' }, { text: 'Installation', link: 'installation' }, { text: 'Quickstart', link: 'quick-start' }, { text: 'Examples', link: 'examples' }, diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md new file mode 100644 index 0000000000..71b5434ef1 --- /dev/null +++ b/docs/src/pages/getting-started.md @@ -0,0 +1,60 @@ +--- +layout: ~/layouts/Main.astro +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. + +## 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. + +Read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro. + +### 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). + +*Note: some features (ex: Fast Refresh) are currently limited on CodeSandbox.* + + +## 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. + +* 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). + +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 + +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. + +### API Reference + +This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/reference/builtin-components) lists all available core components, like `` and ``. + +### 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 + +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. + +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). + +## Something Missing? + +If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation](https://github.com/snowpackjs/astro/issues/new/choose) with your suggestions for improvement, or tweet at the [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter account. We love hearing from you! + +## Credit + +This getting started guide was originally based off of [React's](https://reactjs.org/) getting started guide. \ No newline at end of file diff --git a/docs/src/pages/guides/deploy.md b/docs/src/pages/guides/deploy.md index 39518fc782..ca8365e5ef 100644 --- a/docs/src/pages/guides/deploy.md +++ b/docs/src/pages/guides/deploy.md @@ -3,8 +3,6 @@ layout: ~/layouts/Main.astro title: Deploy a Website --- -> This page is based off of [Vite's](https://vitejs.dev/) well-documented [static deploy instructions](https://vitejs.dev/guide/static-deploy.html). - The following guides are based on some shared assumptions: - You are using the default build output location (`dist/`). This location [can be changed using the `dist` configuration option](/reference/configuration-reference). @@ -253,3 +251,7 @@ Install the extension in VS Code and navigate to your app root. Open the Static Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location `/dist`. The wizard will run and will create a GitHub action in your repo in a `.github` folder. The action will work to deploy your app (watch its progress in your repo's Actions tab) and, when successfully completed, you can view your app in the address provided in the extension's progress window by clicking the 'Browse Website' button that appears when the GitHub action has run. + +## Credits + +This guide was originally based off of [Vite's](https://vitejs.dev/) well-documented static deploy guide. \ No newline at end of file diff --git a/docs/src/pages/integrations/data-sources-cms.md b/docs/src/pages/integrations/data-sources-cms.md deleted file mode 100644 index d5af468d9c..0000000000 --- a/docs/src/pages/integrations/data-sources-cms.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: ~/layouts/Main.astro -title: Data Sources / CMS ---- diff --git a/docs/src/pages/integrations/deploy-astro.md b/docs/src/pages/integrations/deploy-astro.md deleted file mode 100644 index 5cec38a50c..0000000000 --- a/docs/src/pages/integrations/deploy-astro.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: ~/layouts/Main.astro -title: Deploy Astro ---- diff --git a/docs/src/pages/integrations/developer-tools.md b/docs/src/pages/integrations/developer-tools.md deleted file mode 100644 index 1f719306dd..0000000000 --- a/docs/src/pages/integrations/developer-tools.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: ~/layouts/Main.astro -title: Developer Tools ---- diff --git a/docs/src/pages/integrations/state-management.md b/docs/src/pages/integrations/state-management.md deleted file mode 100644 index 4a65c3eb04..0000000000 --- a/docs/src/pages/integrations/state-management.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: ~/layouts/Main.astro -title: State Management ---- diff --git a/docs/src/pages/integrations/styles-and-css-libraries.md b/docs/src/pages/integrations/styles-and-css-libraries.md deleted file mode 100644 index 2107e8947f..0000000000 --- a/docs/src/pages/integrations/styles-and-css-libraries.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -layout: ~/layouts/Main.astro -title: Styles & CSS Libraries ---- diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000000..557736ab23 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,22 @@ +# Astro Examples Library + + +The easiest way to check out one of these examples on your machine is by running this command in an empty directory: + +``` +npm init astro --template [EXAMPLE_NAME] +``` + +## Community Examples + +Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any community examples: + +``` +npm init astro --template [GITHUB_USER]/[REPO_NAME] +``` + +Paths to examples nested inside of a repo are also supported: + +``` +npm init astro --template [GITHUB_USER]/[REPO_NAME]/path/to/example +```