diff --git a/.changeset/old-actors-learn.md b/.changeset/old-actors-learn.md new file mode 100644 index 000000000000..0691a7a5b890 --- /dev/null +++ b/.changeset/old-actors-learn.md @@ -0,0 +1,10 @@ +--- +'create-astro': minor +--- + +Reworks the experience of creating a new Astro project using the `create astro` CLI command. + +- Updates the list of templates to include Starlight and combines the "minimal" and "basics" templates into a new, refreshed "Basics" template to serve as the single, minimal Astro project starter. +- Removes the TypeScript question. Astro is TypeScript-only, so this question was often misleading. The "Strict" preset is now the default, but it can still be changed manually in `tsconfig.json`. +- `astro check` is no longer automatically added to the build script. +- Added a new `--add` flag to install additional integrations after creating a project. For example, `pnpm create astro --add react` will create a new Astro project and install the React integration. diff --git a/examples/basics/README.md b/examples/basics/README.md index 1db3fb3991a8..ff19a3e7ece8 100644 --- a/examples/basics/README.md +++ b/examples/basics/README.md @@ -21,8 +21,6 @@ Inside of your Astro project, you'll see the following folders and files: ├── public/ │ └── favicon.svg ├── src/ -│ ├── components/ -│ │ └── Card.astro │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ @@ -30,11 +28,7 @@ Inside of your Astro project, you'll see the following folders and files: └── package.json ``` -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. - -There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. - -Any static assets, like images, can be placed in the `public/` directory. +To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/). ## 🧞 Commands diff --git a/examples/basics/astro.config.mjs b/examples/basics/astro.config.mjs index 882e6515a67e..e762ba5cf616 100644 --- a/examples/basics/astro.config.mjs +++ b/examples/basics/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro deleted file mode 100644 index bd6d5971ebf3..000000000000 --- a/examples/basics/src/components/Card.astro +++ /dev/null @@ -1,61 +0,0 @@ ---- -interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; ---- - - - diff --git a/examples/basics/src/layouts/Layout.astro b/examples/basics/src/layouts/Layout.astro index 181097125d82..a25b9e69d5e5 100644 --- a/examples/basics/src/layouts/Layout.astro +++ b/examples/basics/src/layouts/Layout.astro @@ -1,50 +1,13 @@ ---- -interface Props { - title: string; -} - -const { title } = Astro.props; ---- - - - {title} + Astro Basics - diff --git a/examples/basics/src/pages/index.astro b/examples/basics/src/pages/index.astro index fb6262872d0e..a2bf4ee37b63 100644 --- a/examples/basics/src/pages/index.astro +++ b/examples/basics/src/pages/index.astro @@ -1,123 +1,8 @@ --- +import { Welcome } from 'astro:components'; import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; --- - -
- -

Welcome to Astro

-

- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above. -

- -
+ + - - diff --git a/examples/basics/tsconfig.json b/examples/basics/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/basics/tsconfig.json +++ b/examples/basics/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 3b2f75c840d3..d45f3951e1b2 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -1,6 +1,6 @@ +// @ts-check import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; - import sitemap from '@astrojs/sitemap'; // https://astro.build/config diff --git a/examples/blog/tsconfig.json b/examples/blog/tsconfig.json index 676d1945a177..0dc098dd7eaa 100644 --- a/examples/blog/tsconfig.json +++ b/examples/blog/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/component/tsconfig.json b/examples/component/tsconfig.json index e2bdd98c6fd7..f85ec795bf88 100644 --- a/examples/component/tsconfig.json +++ b/examples/component/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/container-with-vitest/tsconfig.json b/examples/container-with-vitest/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/container-with-vitest/tsconfig.json +++ b/examples/container-with-vitest/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/framework-alpine/astro.config.mjs b/examples/framework-alpine/astro.config.mjs index 60bfc7d45d92..5fddf771766c 100644 --- a/examples/framework-alpine/astro.config.mjs +++ b/examples/framework-alpine/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import alpine from '@astrojs/alpinejs'; diff --git a/examples/framework-alpine/tsconfig.json b/examples/framework-alpine/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/framework-alpine/tsconfig.json +++ b/examples/framework-alpine/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index 36f75aec2610..7609d3fc6f5c 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; import react from '@astrojs/react'; diff --git a/examples/framework-multiple/tsconfig.json b/examples/framework-multiple/tsconfig.json index 1d2def77194d..a19c58a62c30 100644 --- a/examples/framework-multiple/tsconfig.json +++ b/examples/framework-multiple/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/framework-preact/astro.config.mjs b/examples/framework-preact/astro.config.mjs index b1c8d1150ee7..1d726f9fe133 100644 --- a/examples/framework-preact/astro.config.mjs +++ b/examples/framework-preact/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; diff --git a/examples/framework-preact/tsconfig.json b/examples/framework-preact/tsconfig.json index 50ad34429bdb..c8983c2ef0a2 100644 --- a/examples/framework-preact/tsconfig.json +++ b/examples/framework-preact/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/framework-react/astro.config.mjs b/examples/framework-react/astro.config.mjs index 4b5a68ec00b8..36ed34a5e0d0 100644 --- a/examples/framework-react/astro.config.mjs +++ b/examples/framework-react/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; diff --git a/examples/framework-react/tsconfig.json b/examples/framework-react/tsconfig.json index 866156f0784c..92a18df9052f 100644 --- a/examples/framework-react/tsconfig.json +++ b/examples/framework-react/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs index 623fb8ea5e31..8bdaa267967d 100644 --- a/examples/framework-solid/astro.config.mjs +++ b/examples/framework-solid/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import solid from '@astrojs/solid-js'; diff --git a/examples/framework-solid/tsconfig.json b/examples/framework-solid/tsconfig.json index 7db18fbb3c12..76e1efdbaed8 100644 --- a/examples/framework-solid/tsconfig.json +++ b/examples/framework-solid/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/framework-svelte/astro.config.mjs b/examples/framework-svelte/astro.config.mjs index 194e4591765f..5eeedb56ec6e 100644 --- a/examples/framework-svelte/astro.config.mjs +++ b/examples/framework-svelte/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import svelte from '@astrojs/svelte'; diff --git a/examples/framework-svelte/tsconfig.json b/examples/framework-svelte/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/framework-svelte/tsconfig.json +++ b/examples/framework-svelte/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs index f30130a95318..5afe92269a73 100644 --- a/examples/framework-vue/astro.config.mjs +++ b/examples/framework-vue/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; diff --git a/examples/framework-vue/tsconfig.json b/examples/framework-vue/tsconfig.json index 1d2def77194d..a19c58a62c30 100644 --- a/examples/framework-vue/tsconfig.json +++ b/examples/framework-vue/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/hackernews/astro.config.mjs b/examples/hackernews/astro.config.mjs index 68ba7fac5876..bf6f1a022825 100644 --- a/examples/hackernews/astro.config.mjs +++ b/examples/hackernews/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import node from '@astrojs/node'; diff --git a/examples/hackernews/tsconfig.json b/examples/hackernews/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/hackernews/tsconfig.json +++ b/examples/hackernews/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/integration/tsconfig.json b/examples/integration/tsconfig.json index d78f81ec4e8e..bcbf8b50906a 100644 --- a/examples/integration/tsconfig.json +++ b/examples/integration/tsconfig.json @@ -1,3 +1,3 @@ { - "extends": "astro/tsconfigs/base" + "extends": "astro/tsconfigs/strict" } diff --git a/examples/minimal/astro.config.mjs b/examples/minimal/astro.config.mjs index 882e6515a67e..e762ba5cf616 100644 --- a/examples/minimal/astro.config.mjs +++ b/examples/minimal/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/examples/minimal/tsconfig.json b/examples/minimal/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/minimal/tsconfig.json +++ b/examples/minimal/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index 882e6515a67e..e762ba5cf616 100644 --- a/examples/portfolio/astro.config.mjs +++ b/examples/portfolio/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/examples/portfolio/tsconfig.json b/examples/portfolio/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/portfolio/tsconfig.json +++ b/examples/portfolio/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/server-islands/tsconfig.json b/examples/server-islands/tsconfig.json new file mode 100644 index 000000000000..8bf91d3bb997 --- /dev/null +++ b/examples/server-islands/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/examples/ssr/astro.config.mjs b/examples/ssr/astro.config.mjs index b79949397d94..78d88cb1aa06 100644 --- a/examples/ssr/astro.config.mjs +++ b/examples/ssr/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import svelte from '@astrojs/svelte'; import node from '@astrojs/node'; diff --git a/examples/ssr/tsconfig.json b/examples/ssr/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/ssr/tsconfig.json +++ b/examples/ssr/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/starlog/astro.config.mjs b/examples/starlog/astro.config.mjs index b093ec0e02bc..759bb082c3fd 100644 --- a/examples/starlog/astro.config.mjs +++ b/examples/starlog/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/examples/toolbar-app/tsconfig.json b/examples/toolbar-app/tsconfig.json index b3e754ea04d9..281fb7f925fa 100644 --- a/examples/toolbar-app/tsconfig.json +++ b/examples/toolbar-app/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "compilerOptions": { "outDir": "dist", "rootDir": "src" diff --git a/examples/with-markdoc/astro.config.mjs b/examples/with-markdoc/astro.config.mjs index 29d846359bb2..517f5a62e872 100644 --- a/examples/with-markdoc/astro.config.mjs +++ b/examples/with-markdoc/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import markdoc from '@astrojs/markdoc'; diff --git a/examples/with-markdoc/tsconfig.json b/examples/with-markdoc/tsconfig.json index 676d1945a177..0dc098dd7eaa 100644 --- a/examples/with-markdoc/tsconfig.json +++ b/examples/with-markdoc/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/with-mdx/astro.config.mjs b/examples/with-mdx/astro.config.mjs index d797941ec2cb..93aeffbc5417 100644 --- a/examples/with-mdx/astro.config.mjs +++ b/examples/with-mdx/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; import preact from '@astrojs/preact'; diff --git a/examples/with-mdx/tsconfig.json b/examples/with-mdx/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/with-mdx/tsconfig.json +++ b/examples/with-mdx/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs index 3e161041b59d..9f7dbd219cf5 100644 --- a/examples/with-nanostores/astro.config.mjs +++ b/examples/with-nanostores/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; diff --git a/examples/with-nanostores/tsconfig.json b/examples/with-nanostores/tsconfig.json index 50ad34429bdb..c8983c2ef0a2 100644 --- a/examples/with-nanostores/tsconfig.json +++ b/examples/with-nanostores/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index 4ad396807723..7c7ad346f1ae 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; diff --git a/examples/with-tailwindcss/tsconfig.json b/examples/with-tailwindcss/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/with-tailwindcss/tsconfig.json +++ b/examples/with-tailwindcss/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/examples/with-vitest/astro.config.ts b/examples/with-vitest/astro.config.ts index 882e6515a67e..e762ba5cf616 100644 --- a/examples/with-vitest/astro.config.ts +++ b/examples/with-vitest/astro.config.ts @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/examples/with-vitest/tsconfig.json b/examples/with-vitest/tsconfig.json index f11a46c8e5fb..8bf91d3bb997 100644 --- a/examples/with-vitest/tsconfig.json +++ b/examples/with-vitest/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "astro/tsconfigs/base", + "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"] } diff --git a/packages/astro/components/Welcome.astro b/packages/astro/components/Welcome.astro new file mode 100644 index 000000000000..2f91eb5ddd27 --- /dev/null +++ b/packages/astro/components/Welcome.astro @@ -0,0 +1,172 @@ +--- +interface Props { + title?: string; +} + +const cards = [ + { + href: 'https://docs.astro.build/', + title: 'Documentation', + body: 'Learn how Astro works and explore the official API docs.', + }, + { + href: 'https://astro.build/integrations/', + title: 'Integrations', + body: 'Supercharge your project with new frameworks and libraries.', + }, + { + href: 'https://astro.build/themes/', + title: 'Themes', + body: 'Explore a galaxy of community-built starter themes.', + }, + { + href: 'https://astro.build/chat/', + title: 'Community', + body: 'Come say hi to our amazing Discord community. ❤️', + }, +]; + +const { title = 'Welcome to Astro' } = Astro.props; +--- + +
+ +

{title}

+

+ To get started, open the directory src/pages in your project.
+ Code Challenge: Tweak the "Welcome to Astro" message above. +

+ +
+ + diff --git a/packages/astro/components/index.ts b/packages/astro/components/index.ts index e5ac0251d0f1..fb553b489f3c 100644 --- a/packages/astro/components/index.ts +++ b/packages/astro/components/index.ts @@ -1,6 +1,8 @@ // The `ts-ignore` comments here are necessary because we're importing this file inside the `astro:components` -// virtual module's types, which means that `tsc` will try to resolve these imports. Don't mind the editor errors. +// virtual module's types, which means that `tsc` will try to resolve these imports. // @ts-ignore -export { default as Code } from './Code.astro'; +export { default as Code } from "./Code.astro"; // @ts-ignore -export { default as Debug } from './Debug.astro'; +export { default as Debug } from "./Debug.astro"; +// @ts-ignore +export { default as Welcome } from "./Welcome.astro"; diff --git a/packages/astro/test/fixtures/legacy-data-collections/astro.config.mjs b/packages/astro/test/fixtures/legacy-data-collections/astro.config.mjs index c342649f77fb..3f4722ff1bb4 100644 --- a/packages/astro/test/fixtures/legacy-data-collections/astro.config.mjs +++ b/packages/astro/test/fixtures/legacy-data-collections/astro.config.mjs @@ -1,3 +1,4 @@ +// @ts-check import { defineConfig } from 'astro/config'; // https://astro.build/config diff --git a/packages/create-astro/README.md b/packages/create-astro/README.md index bfdfb13e3967..260922b0acd4 100644 --- a/packages/create-astro/README.md +++ b/packages/create-astro/README.md @@ -45,19 +45,19 @@ npm create astro@latest my-astro-project -- --template cassidoo/shopify-react-as May be provided in place of prompts -| Name | Description | -| :--------------------------- | :----------------------------------------------------- | -| `--help` (`-h`) | Display available flags. | -| `--template ` | Specify your template. | -| `--install` / `--no-install` | Install dependencies (or not). | -| `--git` / `--no-git` | Initialize git repo (or not). | -| `--yes` (`-y`) | Skip all prompts by accepting defaults. | -| `--no` (`-n`) | Skip all prompts by declining defaults. | -| `--dry-run` | Walk through steps without executing. | -| `--skip-houston` | Skip Houston animation. | -| `--ref` | Specify an Astro branch (default: latest). | -| `--fancy` | Enable full Unicode support for Windows. | -| `--typescript