michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/main'

Browse source
This commit is contained in:
Chris 2023-09-12 14:47:49 +02:00
commit f34dcc9d16
192 changed files with 1712 additions and 799 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/calm-houses-carry.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
fix(astro): add support for `src/content/config.mts` files

5
.changeset/chatty-walls-happen.md
View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fixed a case where dynamic imports tried to preload inlined stylesheets.

5
.changeset/empty-rings-bow.md
View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fixes remote assets caching logic to not use expired assets

5
.changeset/fair-countries-admire.md
View file

@ -1,5 +0,0 @@
---
'@astrojs/svelte': patch
---
Removed vite warnings.

6
.changeset/friendly-clocks-act.md
View file

@ -1,6 +0,0 @@
---
'create-astro': patch
'astro': patch
---
Support detecting Bun when logging messages with package manager information.

5
.changeset/gold-weeks-hammer.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Minify the HTML of the redicts emitted during the build.

5
.changeset/gorgeous-dancers-divide.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Do not add type="text/css" to inline style tag

5
.changeset/grumpy-hotels-heal.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Prevent client:only styles from being removed in dev (View Transitions)

5
.changeset/hip-cats-jump.md
View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fix missing type for `imageConfig` export from `astro:assets`

5
.changeset/itchy-clouds-design.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
chore: correct description of `attribute` option in `scopedStyleStrategy`

5
.changeset/modern-guests-float.md
View file

@ -1,5 +0,0 @@
---
'@astrojs/vercel': patch
---
Fix serverless function naming conflicts for routes with identical filenames but different directory structures

5
.changeset/poor-pears-wash.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix lang unspecified code blocks (markdownlint MD040)

5
.changeset/smart-dragons-taste.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/cloudflare': minor
---
Add support for Cloudflare Runtime (env vars, caches and req object), using `astro dev`

5
.changeset/spotty-glasses-grin.md
View file

@ -1,5 +0,0 @@
---
'@astrojs/mdx': patch
---
Add location data to MDX compile errors

5
.changeset/spotty-tools-rhyme.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
fix(types): make `image.service` optional

5
.changeset/twelve-cars-tell.md
View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fix markdown page HMR

5
.changeset/weak-kids-roll.md
View file

@ -1,5 +0,0 @@
---
'astro': patch
---
Fix scroll position when navigating back from page w/o ViewTransitions

5
.changeset/witty-readers-behave.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Bugfixes for back navigation in the view transition client-side router

2
.github/workflows/ci.yml vendored
View file

@ -108,7 +108,7 @@ jobs:
strategy: strategy:
matrix: matrix:
OS: [ubuntu-latest] OS: [ubuntu-latest]
NODE_VERSION: [18, 20] NODE_VERSION: [18, 20.5.1]
include: include:
- os: macos-latest - os: macos-latest
NODE_VERSION: 18 NODE_VERSION: 18

13
.github/workflows/cleanup-cache.yml vendored
View file

@ -1,11 +1,12 @@
name: Cleanup cache name: Cleanup cache
on: on:
schedule:
- cron: "0 11 * * *"
pull_request: pull_request:
types: types:
- closed - closed
# Workflow copied from https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
jobs: jobs:
cleanup: cleanup:
runs-on: ubuntu-latest runs-on: ubuntu-latest
@ -13,7 +14,15 @@ jobs:
- name: Check out code - name: Check out code
uses: actions/checkout@v3 uses: actions/checkout@v3
- name: Cleanup - name: Cleanup caches older than 5 days
if: github.event_name == 'schedule'
uses: MyAlbum/purge-cache@v2
with:
max-age: 432000
# https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
- name: Cleanup on PR close
if: github.event_name == 'pull_request'
run: | run: |
gh extension install actions/gh-actions-cache gh extension install actions/gh-actions-cache

7
.prettierignore
View file

@ -1,10 +1,3 @@
# Ignoring these files for now due to https://github.com/withastro/compiler/issues/585
examples/basics/src/layouts
examples/with-nanostores/src/layouts
# Ignoring this file for now due to https://github.com/withastro/compiler/issues/485
packages/markdown/component/Markdown.astro
# Benchmark artifacts # Benchmark artifacts
benchmark/projects/ benchmark/projects/
benchmark/results/ benchmark/results/

24
.prettierrc.cjs
View file

@ -1,24 +0,0 @@
// Heads up: This file should be renamed to `.cjs`, however if we did that, changesets wouldn't be able to load it
module.exports = {
printWidth: 100,
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
useTabs: true,
plugins: ['prettier-plugin-astro'],
overrides: [
{
files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
options: {
useTabs: false,
},
},
{
files: ['**/*.astro'],
options: {
parser: 'astro',
},
},
],
};

4
README.md
View file

@ -83,7 +83,7 @@ Several official projects are maintained outside of this repo:
## Sponsors ## Sponsors
Astro is generously supported by Netlify, Storyblok, and several other amazing organizations. Astro is free, open source software made possible by these wonderful sponsors.
[❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md) [❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
@ -91,7 +91,7 @@ Astro is generously supported by Netlify, Storyblok, and several other amazing o
<a target="_blank" href="https://github.com/sponsors/withastro"> <a target="_blank" href="https://github.com/sponsors/withastro">
[![Astro's sponsors.](https://astro.build/sponsors.png "Astro's sponsors. [![Astro's sponsors.](https://astro.build/sponsors.png "Astro's sponsors.
Platinum sponsors: Netlify, storyblok, Vercel, Ship Shape, Google Chrome Platinum sponsors: Vercel, storyblok, Netlify, Ship Shape, Google Chrome
Gold sponsors: ‹div›RIOTS, DEEPGRAM, Transloadit, CloudCannon Gold sponsors: ‹div›RIOTS, DEEPGRAM, Transloadit, CloudCannon
Sponsors: Monogram, Qoddi, Dimension")](https://github.com/sponsors/withastro) Sponsors: Monogram, Qoddi, Dimension")](https://github.com/sponsors/withastro)

6
examples/README.md
View file

@ -2,7 +2,7 @@
The easiest way to check out one of these examples on your machine is by running this command in an empty directory: The easiest way to check out one of these examples on your machine is by running this command in an empty directory:
``` ```sh
npm create astro@latest -- --template [EXAMPLE_NAME] npm create astro@latest -- --template [EXAMPLE_NAME]
``` ```
@ -10,12 +10,12 @@ npm create astro@latest -- --template [EXAMPLE_NAME]
Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm create astro@latest` to check out any community examples: Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm create astro@latest` to check out any community examples:
``` ```sh
npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME] npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]
``` ```
Paths to examples nested inside of a repo are also supported: Paths to examples nested inside of a repo are also supported:
``` ```sh
npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
``` ```

4
examples/basics/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Basics # Astro Starter Kit: Basics
``` ```sh
npm create astro@latest -- --template basics npm create astro@latest -- --template basics
``` ```
@ -16,7 +16,7 @@ npm create astro@latest -- --template basics
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
│ └── favicon.svg │ └── favicon.svg

2
examples/basics/package.json
View file

@ -11,6 +11,6 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

24
examples/basics/src/layouts/Layout.astro
View file

@ -6,11 +6,11 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description"> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
@ -25,15 +25,27 @@ const { title } = Astro.props;
--accent: 136, 58, 234; --accent: 136, 58, 234;
--accent-light: 224, 204, 250; --accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101; --accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%); --accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
} }
html { html {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
background: #13151A; background: #13151a;
background-size: 224px; background-size: 224px;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>

4
examples/blog/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Blog # Astro Starter Kit: Blog
``` ```sh
npm create astro@latest -- --template blog npm create astro@latest -- --template blog
``` ```
@ -25,7 +25,7 @@ Features:
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
├── public/ ├── public/
├── src/ ├── src/
│   ├── components/ │   ├── components/

4
examples/blog/package.json
View file

@ -11,9 +11,9 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^1.0.0", "@astrojs/mdx": "^1.0.3",
"@astrojs/rss": "^3.0.0", "@astrojs/rss": "^3.0.0",
"@astrojs/sitemap": "^3.0.0", "@astrojs/sitemap": "^3.0.0",
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

2
examples/blog/src/pages/blog/index.astro
View file

@ -11,7 +11,7 @@ const posts = (await getCollection('blog')).sort(
); );
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />

10
examples/blog/src/pages/index.astro
View file

@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
@ -16,14 +16,14 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<h1>🧑‍🚀 Hello, Astronaut!</h1> <h1>🧑‍🚀 Hello, Astronaut!</h1>
<p> <p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build template serves as a lightweight, minimally-styled starting point for anyone looking to
a personal website, blog, or portfolio with Astro. build a personal website, blog, or portfolio with Astro.
</p> </p>
<p> <p>
This template comes with a few integrations already configured in your This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with <code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
React, or Vue to your project. Tailwind, React, or Vue to your project.
</p> </p>
<p>Here are a few ideas on how to get started with the template:</p> <p>Here are a few ideas on how to get started with the template:</p>
<ul> <ul>

4
examples/component/README.md
View file

@ -2,7 +2,7 @@
This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM. This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
``` ```sh
npm create astro@latest -- --template component npm create astro@latest -- --template component
``` ```
@ -14,7 +14,7 @@ npm create astro@latest -- --template component
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── index.ts ├── index.ts
├── src ├── src

2
examples/component/package.json
View file

@ -15,7 +15,7 @@
], ],
"scripts": {}, "scripts": {},
"devDependencies": { "devDependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
}, },
"peerDependencies": { "peerDependencies": {
"astro": "^2.0.0-beta.0" "astro": "^2.0.0-beta.0"

4
examples/deno/README.md
View file

@ -4,7 +4,7 @@
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/deno) [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/deno)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/deno/devcontainer.json) [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/deno/devcontainer.json)
``` ```sh
npm create astro@latest -- --template deno npm create astro@latest -- --template deno
``` ```
@ -16,7 +16,7 @@ npm create astro@latest -- --template deno
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
│ └── favicon.svg │ └── favicon.svg

2
examples/deno/package.json
View file

@ -10,7 +10,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/deno": "^5.0.0" "@astrojs/deno": "^5.0.0"

13
examples/deno/src/components/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props as Props; const { title } = Astro.props as Props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -46,8 +46,15 @@ const { title } = Astro.props as Props;
} }
:global(code) { :global(code) {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>
</body> </body>

2
examples/framework-alpine/README.md
View file

@ -1,6 +1,6 @@
# Astro + AlpineJS Example # Astro + AlpineJS Example
``` ```sh
npm create astro@latest -- --template framework-alpine npm create astro@latest -- --template framework-alpine
``` ```

2
examples/framework-alpine/package.json
View file

@ -14,6 +14,6 @@
"@astrojs/alpinejs": "^0.3.0", "@astrojs/alpinejs": "^0.3.0",
"@types/alpinejs": "^3.7.2", "@types/alpinejs": "^3.7.2",
"alpinejs": "^3.12.3", "alpinejs": "^3.12.3",
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

2
examples/framework-lit/README.md
View file

@ -1,6 +1,6 @@
# Astro + Lit Example # Astro + Lit Example
``` ```sh
npm create astro@latest -- --template framework-lit npm create astro@latest -- --template framework-lit
``` ```

2
examples/framework-lit/package.json
View file

@ -13,7 +13,7 @@
"dependencies": { "dependencies": {
"@astrojs/lit": "^3.0.0", "@astrojs/lit": "^3.0.0",
"@webcomponents/template-shadowroot": "^0.2.1", "@webcomponents/template-shadowroot": "^0.2.1",
"astro": "^3.0.8", "astro": "^3.0.12",
"lit": "^2.8.0" "lit": "^2.8.0"
} }
} }

2
examples/framework-lit/src/pages/index.astro
View file

@ -7,7 +7,7 @@ import { MyCounter } from '../components/my-counter.js';
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

2
examples/framework-multiple/README.md
View file

@ -1,6 +1,6 @@
# Kitchen Sink: Microfrontends with Astro # Kitchen Sink: Microfrontends with Astro
``` ```sh
npm create astro@latest -- --template framework-multiple npm create astro@latest -- --template framework-multiple
``` ```

8
examples/framework-multiple/package.json
View file

@ -12,11 +12,11 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/preact": "^3.0.0", "@astrojs/preact": "^3.0.0",
"@astrojs/react": "^3.0.0", "@astrojs/react": "^3.0.2",
"@astrojs/solid-js": "^3.0.0", "@astrojs/solid-js": "^3.0.1",
"@astrojs/svelte": "^4.0.0", "@astrojs/svelte": "^4.0.2",
"@astrojs/vue": "^3.0.0", "@astrojs/vue": "^3.0.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"preact": "^10.17.1", "preact": "^10.17.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

2
examples/framework-preact/README.md
View file

@ -1,6 +1,6 @@
# Astro + Preact Example # Astro + Preact Example
``` ```sh
npm create astro@latest -- --template framework-preact npm create astro@latest -- --template framework-preact
``` ```

2
examples/framework-preact/package.json
View file

@ -13,7 +13,7 @@
"dependencies": { "dependencies": {
"@astrojs/preact": "^3.0.0", "@astrojs/preact": "^3.0.0",
"@preact/signals": "^1.2.1", "@preact/signals": "^1.2.1",
"astro": "^3.0.8", "astro": "^3.0.12",
"preact": "^10.17.1" "preact": "^10.17.1"
} }
} }

2
examples/framework-react/README.md
View file

@ -1,6 +1,6 @@
# Astro + React Example # Astro + React Example
``` ```sh
npm create astro@latest -- --template framework-react npm create astro@latest -- --template framework-react
``` ```

4
examples/framework-react/package.json
View file

@ -11,10 +11,10 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/react": "^3.0.0", "@astrojs/react": "^3.0.2",
"@types/react": "^18.2.21", "@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7", "@types/react-dom": "^18.2.7",
"astro": "^3.0.8", "astro": "^3.0.12",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
} }

2
examples/framework-solid/README.md
View file

@ -1,6 +1,6 @@
# Astro + Solid.js Example # Astro + Solid.js Example
``` ```sh
npm create astro@latest -- --template framework-solid npm create astro@latest -- --template framework-solid
``` ```

4
examples/framework-solid/package.json
View file

@ -11,8 +11,8 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/solid-js": "^3.0.0", "@astrojs/solid-js": "^3.0.1",
"astro": "^3.0.8", "astro": "^3.0.12",
"solid-js": "^1.7.11" "solid-js": "^1.7.11"
} }
} }

2
examples/framework-svelte/README.md
View file

@ -1,6 +1,6 @@
# Astro + Svelte Example # Astro + Svelte Example
``` ```sh
npm create astro@latest -- --template framework-svelte npm create astro@latest -- --template framework-svelte
``` ```

4
examples/framework-svelte/package.json
View file

@ -11,8 +11,8 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/svelte": "^4.0.0", "@astrojs/svelte": "^4.0.2",
"astro": "^3.0.8", "astro": "^3.0.12",
"svelte": "^4.2.0" "svelte": "^4.2.0"
} }
} }

2
examples/framework-vue/README.md
View file

@ -1,6 +1,6 @@
# Astro + Vue Example # Astro + Vue Example
``` ```sh
npm create astro@latest -- --template framework-vue npm create astro@latest -- --template framework-vue
``` ```

2
examples/framework-vue/package.json
View file

@ -12,7 +12,7 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/vue": "^3.0.0", "@astrojs/vue": "^3.0.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"vue": "^3.3.4" "vue": "^3.3.4"
} }
} }

4
examples/hackernews/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Hackernews # Astro Starter Kit: Hackernews
``` ```sh
npm create astro@latest -- --template hackernews npm create astro@latest -- --template hackernews
``` ```
@ -14,7 +14,7 @@ npm create astro@latest -- --template hackernews
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
│ └── favicon.svg │ └── favicon.svg

2
examples/hackernews/package.json
View file

@ -12,6 +12,6 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^6.0.0", "@astrojs/node": "^6.0.0",
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

2
examples/hackernews/src/pages/stories/[id].astro
View file

@ -25,7 +25,7 @@ const story = (await fetchAPI(`item/${id}`)) as IStory;
<a href={`/users/${story.user}`}> <a href={`/users/${story.user}`}>
{story.user} {story.user}
</a> </a>
&nbsp;{story.time_ago} &nbsp;{story.time_ago}
</p> </p>
</header> </header>
<main> <main>

4
examples/integration/README.md
View file

@ -2,7 +2,7 @@
This is a template for an Astro integration. Use this template for writing integrations to use in multiple projects or publish to NPM. This is a template for an Astro integration. Use this template for writing integrations to use in multiple projects or publish to NPM.
``` ```sh
npm create astro@latest -- --template integration npm create astro@latest -- --template integration
``` ```
@ -14,7 +14,7 @@ npm create astro@latest -- --template integration
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── index.ts ├── index.ts
├── tsconfig.json ├── tsconfig.json

2
examples/integration/package.json
View file

@ -15,7 +15,7 @@
], ],
"scripts": {}, "scripts": {},
"devDependencies": { "devDependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
}, },
"peerDependencies": { "peerDependencies": {
"astro": "^2.0.0-beta.0" "astro": "^2.0.0-beta.0"

2
examples/middleware/package.json
View file

@ -13,7 +13,7 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^6.0.0", "@astrojs/node": "^6.0.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"html-minifier": "^4.0.0" "html-minifier": "^4.0.0"
} }
} }

4
examples/middleware/src/components/Card.astro
View file

@ -30,7 +30,9 @@ const { href, title, body } = Astro.props;
border-radius: 0.6rem; border-radius: 0.6rem;
background-position: 100%; background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
.link-card > a { .link-card > a {

13
examples/middleware/src/layouts/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -29,7 +29,14 @@ const { title } = Astro.props;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>

4
examples/minimal/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Minimal # Astro Starter Kit: Minimal
``` ```sh
npm create astro@latest -- --template minimal npm create astro@latest -- --template minimal
``` ```
@ -14,7 +14,7 @@ npm create astro@latest -- --template minimal
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
├── src/ ├── src/

2
examples/minimal/package.json
View file

@ -11,6 +11,6 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

1
examples/minimal/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

4
examples/non-html-pages/README.md
View file

@ -4,7 +4,7 @@ Documentation for "Non-HTML Pages":
https://docs.astro.build/en/core-concepts/endpoints/#static-file-endpoints https://docs.astro.build/en/core-concepts/endpoints/#static-file-endpoints
``` ```sh
npm create astro@latest -- --template non-html-pages npm create astro@latest -- --template non-html-pages
``` ```
@ -18,7 +18,7 @@ npm create astro@latest -- --template non-html-pages
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
├── src/ ├── src/

2
examples/non-html-pages/package.json
View file

@ -11,6 +11,6 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

2
examples/portfolio/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Portfolio # Astro Starter Kit: Portfolio
``` ```sh
npm create astro@latest -- --template portfolio npm create astro@latest -- --template portfolio
``` ```

2
examples/portfolio/package.json
View file

@ -11,6 +11,6 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

6
examples/portfolio/src/components/Nav.astro
View file

@ -25,7 +25,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
<div class="menu-header"> <div class="menu-header">
<a href="/" class="site-title"> <a href="/" class="site-title">
<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient /> <Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
Jeanine White Jeanine White
</a> </a>
<menu-button> <menu-button>
<template> <template>
@ -321,7 +321,9 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
.link { .link {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 999rem; border-radius: 999rem;
transition: color var(--theme-transition), background-color var(--theme-transition); transition:
color var(--theme-transition),
background-color var(--theme-transition);
} }
.link:hover, .link:hover,

4
examples/portfolio/src/components/ThemeToggle.astro
View file

@ -54,7 +54,9 @@ import Icon from './Icon.astro';
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.icon, .icon,
.icon.light::before { .icon.light::before {
transition: transform var(--theme-transition), color var(--theme-transition); transition:
transform var(--theme-transition),
color var(--theme-transition);
} }
} }

11
examples/portfolio/src/layouts/BaseLayout.astro
View file

@ -92,13 +92,18 @@ const { title, description } = Astro.props;
min-height: 100%; min-height: 100%;
isolation: isolate; isolation: isolate;
background: background:
/*noise*/ url('/assets/backgrounds/noise.png') top center/220px repeat, /*noise*/
url('/assets/backgrounds/noise.png') top center/220px repeat,
/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat, /*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat, /*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat, /*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
/*base*/ var(--gray-999); /*base*/ var(--gray-999);
background-blend-mode: /*noise*/ overlay, /*footer*/ var(--bg-blend-mode), background-blend-mode: /*noise*/
/*header1*/ var(--bg-svg-blend-mode), /*header2*/ normal, /*base*/ normal; overlay,
/*footer*/ var(--bg-blend-mode),
/*header1*/ var(--bg-svg-blend-mode),
/*header2*/ normal,
/*base*/ normal;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
/* Deactivate custom backgrounds for high contrast users. */ /* Deactivate custom backgrounds for high contrast users. */

7
examples/portfolio/src/pages/about.astro
View file

@ -25,9 +25,10 @@ import Hero from '../components/Hero.astro';
<div class="content"> <div class="content">
<p> <p>
Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy. Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl
id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla condimentum id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu
pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. odio ut sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum
dui faucibus in ornare.
</p> </p>
<p> <p>
Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis

6
examples/portfolio/src/pages/index.astro
View file

@ -169,8 +169,10 @@ const projects = (await getCollection('work'))
aspect-ratio: calc(2.25 / var(--bg-scale)); aspect-ratio: calc(2.25 / var(--bg-scale));
top: 0; top: 0;
transform: translateY(-75%) translateX(-50%); transform: translateY(-75%) translateX(-50%);
background: url('/assets/backgrounds/noise.png') top center/220px repeat, background:
var(--hero-bg) center center / var(--bg-gradient-size) no-repeat, var(--gray-999); url('/assets/backgrounds/noise.png') top center/220px repeat,
var(--hero-bg) center center / var(--bg-gradient-size) no-repeat,
var(--gray-999);
background-blend-mode: overlay, normal, normal, normal; background-blend-mode: overlay, normal, normal, normal;
mix-blend-mode: var(--bg-blend-mode); mix-blend-mode: var(--bg-blend-mode);
z-index: -1; z-index: -1;

4
examples/ssr/package.json
View file

@ -13,8 +13,8 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/node": "^6.0.0", "@astrojs/node": "^6.0.0",
"@astrojs/svelte": "^4.0.0", "@astrojs/svelte": "^4.0.2",
"astro": "^3.0.8", "astro": "^3.0.12",
"svelte": "^4.2.0" "svelte": "^4.2.0"
} }
} }

4
examples/with-markdoc/README.md
View file

@ -2,7 +2,7 @@
This starter showcases the experimental Markdoc integration. This starter showcases the experimental Markdoc integration.
``` ```sh
npm create astro@latest -- --template with-markdoc npm create astro@latest -- --template with-markdoc
``` ```
@ -15,7 +15,7 @@ npm create astro@latest -- --template with-markdoc
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
├── src/ ├── src/

2
examples/with-markdoc/package.json
View file

@ -12,6 +12,6 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/markdoc": "^0.5.0", "@astrojs/markdoc": "^0.5.0",
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

13
examples/with-markdoc/src/layouts/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -25,8 +25,15 @@ const { title } = Astro.props;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
main { main {
margin: auto; margin: auto;

2
examples/with-markdown-plugins/README.md
View file

@ -1,6 +1,6 @@
# Astro Example: Markdown with Plugins # Astro Example: Markdown with Plugins
``` ```sh
npm create astro@latest -- --template with-markdown-plugins npm create astro@latest -- --template with-markdown-plugins
``` ```

4
examples/with-markdown-plugins/package.json
View file

@ -11,8 +11,8 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/markdown-remark": "^3.0.0", "@astrojs/markdown-remark": "^3.1.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"hast-util-select": "^5.0.5", "hast-util-select": "^5.0.5",
"rehype-autolink-headings": "^6.1.1", "rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0", "rehype-slug": "^5.1.0",

2
examples/with-markdown-shiki/README.md
View file

@ -1,6 +1,6 @@
# Astro Example: Markdown with Shiki # Astro Example: Markdown with Shiki
``` ```sh
npm create astro@latest -- --template with-markdown-shiki npm create astro@latest -- --template with-markdown-shiki
``` ```

2
examples/with-markdown-shiki/package.json
View file

@ -11,6 +11,6 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8" "astro": "^3.0.12"
} }
} }

2
examples/with-mdx/README.md
View file

@ -1,6 +1,6 @@
# Astro Example: MDX # Astro Example: MDX
``` ```sh
npm create astro@latest -- --template with-mdx npm create astro@latest -- --template with-mdx
``` ```

4
examples/with-mdx/package.json
View file

@ -11,9 +11,9 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^1.0.0", "@astrojs/mdx": "^1.0.3",
"@astrojs/preact": "^3.0.0", "@astrojs/preact": "^3.0.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"preact": "^10.17.1" "preact": "^10.17.1"
} }
} }

2
examples/with-nanostores/README.md
View file

@ -1,6 +1,6 @@
# Astro Example: Nanostores # Astro Example: Nanostores
``` ```sh
npm create astro@latest -- --template with-nanostores npm create astro@latest -- --template with-nanostores
``` ```

2
examples/with-nanostores/package.json
View file

@ -13,7 +13,7 @@
"dependencies": { "dependencies": {
"@astrojs/preact": "^3.0.0", "@astrojs/preact": "^3.0.0",
"@nanostores/preact": "^0.5.0", "@nanostores/preact": "^0.5.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"nanostores": "^0.9.3", "nanostores": "^0.9.3",
"preact": "^10.17.1" "preact": "^10.17.1"
} }

51
examples/with-nanostores/src/layouts/Layout.astro
View file

@ -9,25 +9,27 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="/" class="nav-header"><span style="color: var(--astro-blue)">Astro</span> storefront</a> <a href="/" class="nav-header"
<CartFlyoutToggle client:load /> ><span style="color: var(--astro-blue)">Astro</span> storefront</a
</nav> >
</header> <CartFlyoutToggle client:load />
<slot /> </nav>
<CartFlyout client:load /> </header>
</body> <slot />
<CartFlyout client:load />
</body>
</html> </html>
<style is:global> <style is:global>
@ -35,14 +37,14 @@ const { title } = Astro.props;
--font-family: system-ui, sans-serif; --font-family: system-ui, sans-serif;
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.0rem, 1.75vw + 1.35rem, 2.75rem); --font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--color-text: hsl(12, 5%, 4%); --color-text: hsl(12, 5%, 4%);
--color-bg: hsl(17, 20%, 97%); --color-bg: hsl(17, 20%, 97%);
--color-bg-2: hsl(17, 20%, 94%); --color-bg-2: hsl(17, 20%, 94%);
--color-bg-3: hsl(17, 20%, 88%); --color-bg-3: hsl(17, 20%, 88%);
--astro-blue: #4F39FA; --astro-blue: #4f39fa;
--astro-pink: #DA62C4; --astro-pink: #da62c4;
--content-max-width: 90ch; --content-max-width: 90ch;
--nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@ -56,7 +58,9 @@ const { title } = Astro.props;
border: none; border: none;
color: var(--astro-blue); color: var(--astro-blue);
border: 2px solid var(--astro-blue); border: 2px solid var(--astro-blue);
transition: color 0.2s, background-color 0.2s; transition:
color 0.2s,
background-color 0.2s;
background-color: transparent; background-color: transparent;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 0.4rem; border-radius: 0.4rem;
@ -98,7 +102,8 @@ const { title } = Astro.props;
align-items: center; align-items: center;
} }
.nav-header, .nav-header:visited { .nav-header,
.nav-header:visited {
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: bold; font-weight: bold;
color: inherit; color: inherit;

2
examples/with-tailwindcss/README.md
View file

@ -1,6 +1,6 @@
# Astro with Tailwind # Astro with Tailwind
``` ```sh
npm create astro@latest -- --template with-tailwindcss npm create astro@latest -- --template with-tailwindcss
``` ```

4
examples/with-tailwindcss/package.json
View file

@ -11,10 +11,10 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^1.0.0", "@astrojs/mdx": "^1.0.3",
"@astrojs/tailwind": "^5.0.0", "@astrojs/tailwind": "^5.0.0",
"@types/canvas-confetti": "^1.6.0", "@types/canvas-confetti": "^1.6.0",
"astro": "^3.0.8", "astro": "^3.0.12",
"autoprefixer": "^10.4.15", "autoprefixer": "^10.4.15",
"canvas-confetti": "^1.6.0", "canvas-confetti": "^1.6.0",
"postcss": "^8.4.28", "postcss": "^8.4.28",

4
examples/with-vite-plugin-pwa/README.md
View file

@ -1,6 +1,6 @@
# Astro Starter Kit: Vite PWA # Astro Starter Kit: Vite PWA
``` ```sh
npm create astro@latest -- --template with-vite-plugin-pwa npm create astro@latest -- --template with-vite-plugin-pwa
``` ```
@ -14,7 +14,7 @@ npm create astro@latest -- --template with-vite-plugin-pwa
Inside of your Astro project, you'll see the following folders and files: Inside of your Astro project, you'll see the following folders and files:
``` ```text
/ /
├── public/ ├── public/
├── src/ ├── src/

2
examples/with-vite-plugin-pwa/package.json
View file

@ -11,7 +11,7 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8", "astro": "^3.0.12",
"vite-plugin-pwa": "0.16.4", "vite-plugin-pwa": "0.16.4",
"workbox-window": "^7.0.0" "workbox-window": "^7.0.0"
} }

1
examples/with-vite-plugin-pwa/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

2
examples/with-vitest/README.md
View file

@ -1,6 +1,6 @@
# Astro + [Vitest](https://vitest.dev/) Example # Astro + [Vitest](https://vitest.dev/) Example
``` ```sh
npm create astro@latest -- --template with-vitest npm create astro@latest -- --template with-vitest
``` ```

2
examples/with-vitest/package.json
View file

@ -12,7 +12,7 @@
"test": "vitest" "test": "vitest"
}, },
"dependencies": { "dependencies": {
"astro": "^3.0.8", "astro": "^3.0.12",
"vitest": "^0.34.2" "vitest": "^0.34.2"
} }
} }

1
examples/with-vitest/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

5
package.json
View file

@ -1,5 +1,6 @@
{ {
"name": "root", "name": "root",
"type": "module",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"repository": { "repository": {
@ -14,7 +15,7 @@
"dev": "turbo run dev --concurrency=40 --parallel --filter=astro --filter=create-astro --filter=\"@astrojs/*\" --filter=\"@benchmark/*\"", "dev": "turbo run dev --concurrency=40 --parallel --filter=astro --filter=create-astro --filter=\"@astrojs/*\" --filter=\"@benchmark/*\"",
"format": "pnpm run format:code", "format": "pnpm run format:code",
"format:ci": "pnpm run format:imports && pnpm run format:code", "format:ci": "pnpm run format:imports && pnpm run format:code",
"format:code": "prettier -w . --cache", "format:code": "prettier -w \"**/*\" --ignore-unknown --cache",
"format:imports": "organize-imports-cli ./packages/*/tsconfig.json ./packages/*/*/tsconfig.json", "format:imports": "organize-imports-cli ./packages/*/tsconfig.json ./packages/*/*/tsconfig.json",
"test": "turbo run test --concurrency=1 --filter=astro --filter=create-astro --filter=\"@astrojs/*\"", "test": "turbo run test --concurrency=1 --filter=astro --filter=create-astro --filter=\"@astrojs/*\"",
"test:match": "cd packages/astro && pnpm run test:match", "test:match": "cd packages/astro && pnpm run test:match",
@ -89,7 +90,7 @@
"eslint-plugin-prettier": "^5.0.0", "eslint-plugin-prettier": "^5.0.0",
"only-allow": "^1.1.1", "only-allow": "^1.1.1",
"organize-imports-cli": "^0.10.0", "organize-imports-cli": "^0.10.0",
"prettier": "^3.0.2", "prettier": "^3.0.3",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.12.0",
"tiny-glob": "^0.2.9", "tiny-glob": "^0.2.9",
"turbo": "^1.10.12", "turbo": "^1.10.12",

52
packages/astro/CHANGELOG.md
View file

@ -1,5 +1,57 @@
# astro # astro
## 3.0.12
### Patch Changes
- [#8449](https://github.com/withastro/astro/pull/8449) [`7eea37a07`](https://github.com/withastro/astro/commit/7eea37a075c6abb1de715de76d1911ff41e8ab13) Thanks [@matthewp](https://github.com/matthewp)! - Fix multi-layout head injection
## 3.0.11
### Patch Changes
- [#8441](https://github.com/withastro/astro/pull/8441) [`f66053a1e`](https://github.com/withastro/astro/commit/f66053a1ea0a4e3bdb0b0df12bb1bf56e1ea2618) Thanks [@martrapp](https://github.com/martrapp)! - Only transition between pages where both have ViewTransitions enabled
- [#8443](https://github.com/withastro/astro/pull/8443) [`0fa483283`](https://github.com/withastro/astro/commit/0fa483283e54c94f173838cd558dc0dbdd11e699) Thanks [@the-dijkstra](https://github.com/the-dijkstra)! - Fix "Cannot read properties of null" error in CLI code
- Updated dependencies [[`f3f62a5a2`](https://github.com/withastro/astro/commit/f3f62a5a20f4881bb04f65f192df8e1ccf7fb601)]:
- @astrojs/markdown-remark@3.1.0
## 3.0.10
### Patch Changes
- [#8437](https://github.com/withastro/astro/pull/8437) [`b3cf1b327`](https://github.com/withastro/astro/commit/b3cf1b32765c76cfc90e497a68280ad52f02cb1f) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix imports of images with uppercased file extensions not working
- [#8440](https://github.com/withastro/astro/pull/8440) [`b92d066b7`](https://github.com/withastro/astro/commit/b92d066b737f64f08a9cf293bd07c9263ef8f32d) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fix issue where `renderToFinalDestination` would throw in internal Astro code
## 3.0.9
### Patch Changes
- [#8351](https://github.com/withastro/astro/pull/8351) [`7d95bd9ba`](https://github.com/withastro/astro/commit/7d95bd9baaf755239fd7d35e4813861b2dbccf42) Thanks [@lilnasy](https://github.com/lilnasy)! - Fixed a case where dynamic imports tried to preload inlined stylesheets.
- [#8353](https://github.com/withastro/astro/pull/8353) [`1947ef7a9`](https://github.com/withastro/astro/commit/1947ef7a99ce3d1d6ea797842edd31d5edffa5de) Thanks [@elevatebart](https://github.com/elevatebart)! - Astro will now skip asset optimization when there is a query in the import. Instead, it will let vite deal with it using plugins.
```vue
<script>
// This will not return an optimized asset
import Component from './Component.vue?component';
</script>
```
- [#8424](https://github.com/withastro/astro/pull/8424) [`61ad70fdc`](https://github.com/withastro/astro/commit/61ad70fdc52035964c43ecdb4cf7468f6c2b61e7) Thanks [@itsmatteomanf](https://github.com/itsmatteomanf)! - Fixes remote assets caching logic to not use expired assets
- [#8306](https://github.com/withastro/astro/pull/8306) [`d2f2a11cd`](https://github.com/withastro/astro/commit/d2f2a11cdb42b0de79be21c798eda8e7e7b2a277) Thanks [@jacobthesheep](https://github.com/jacobthesheep)! - Support detecting Bun when logging messages with package manager information.
- [#8414](https://github.com/withastro/astro/pull/8414) [`5126c6a40`](https://github.com/withastro/astro/commit/5126c6a40f88bff66ee5d3c3a21eea8c4a44ce7a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix missing type for `imageConfig` export from `astro:assets`
- [#8416](https://github.com/withastro/astro/pull/8416) [`48ff7855b`](https://github.com/withastro/astro/commit/48ff7855b238536a3df17cb29335c90029fc41a4) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Installing will no longer fail when Sharp can't be installed
- [#8418](https://github.com/withastro/astro/pull/8418) [`923a443cb`](https://github.com/withastro/astro/commit/923a443cb060a0e936a0e1cc87c0360232f77914) Thanks [@bluwy](https://github.com/bluwy)! - Fix markdown page HMR
- [#8332](https://github.com/withastro/astro/pull/8332) [`8935b3b46`](https://github.com/withastro/astro/commit/8935b3b4672d6c54c7b79e6c4575298f75eeb9f4) Thanks [@martrapp](https://github.com/martrapp)! - Fix scroll position when navigating back from page w/o ViewTransitions
## 3.0.8 ## 3.0.8
### Patch Changes ### Patch Changes

8
packages/astro/client.d.ts vendored
View file

@ -57,17 +57,15 @@ declare module 'astro:assets' {
Image: typeof import('./components/Image.astro').default; Image: typeof import('./components/Image.astro').default;
}; };
type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }; type ImgAttributes = import('./dist/type-utils.js').WithRequired<
type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
type ImgAttributes = WithRequired<
Omit<import('./types').HTMLAttributes<'img'>, 'src' | 'width' | 'height'>, Omit<import('./types').HTMLAttributes<'img'>, 'src' | 'width' | 'height'>,
'alt' 'alt'
>; >;
export type LocalImageProps = Simplify< export type LocalImageProps = import('./dist/type-utils.js').Simplify<
import('./dist/assets/types.js').LocalImageProps<ImgAttributes> import('./dist/assets/types.js').LocalImageProps<ImgAttributes>
>; >;
export type RemoteImageProps = Simplify< export type RemoteImageProps = import('./dist/type-utils.js').Simplify<
import('./dist/assets/types.js').RemoteImageProps<ImgAttributes> import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
>; >;
export const { getImage, getConfiguredImageService, imageConfig, Image }: AstroAssets; export const { getImage, getConfiguredImageService, imageConfig, Image }: AstroAssets;

126
packages/astro/components/ViewTransitions.astro
View file

@ -19,7 +19,9 @@ const { fallback = 'animate' } = Astro.props as Props;
}; };
type Events = 'astro:page-load' | 'astro:after-swap'; type Events = 'astro:page-load' | 'astro:after-swap';
const persistState = (state: State) => history.replaceState(state, ''); // only update history entries that are managed by us
// leave other entries alone and do not accidently add state.
const persistState = (state: State) => history.state && history.replaceState(state, '');
const supportsViewTransitions = !!document.startViewTransition; const supportsViewTransitions = !!document.startViewTransition;
const transitionEnabledOnThisPage = () => const transitionEnabledOnThisPage = () =>
!!document.querySelector('[name="astro-view-transitions-enabled"]'); !!document.querySelector('[name="astro-view-transitions-enabled"]');
@ -32,11 +34,13 @@ const { fallback = 'animate' } = Astro.props as Props;
// can use that to determine popstate if going forward or back. // can use that to determine popstate if going forward or back.
let currentHistoryIndex = 0; let currentHistoryIndex = 0;
if (history.state) { if (history.state) {
// we reloaded a page with history state (e.g. back button or browser reload) // we reloaded a page with history state
// (e.g. history navigation from non-transition page or browser reload)
currentHistoryIndex = history.state.index; currentHistoryIndex = history.state.index;
scrollTo({ left: 0, top: history.state.scrollY }); scrollTo({ left: 0, top: history.state.scrollY });
} else if (transitionEnabledOnThisPage()) {
history.replaceState({ index: currentHistoryIndex, scrollY }, '');
} }
const throttle = (cb: (...args: any[]) => any, delay: number) => { const throttle = (cb: (...args: any[]) => any, delay: number) => {
let wait = false; let wait = false;
// During the waiting time additional events are lost. // During the waiting time additional events are lost.
@ -102,20 +106,19 @@ const { fallback = 'animate' } = Astro.props as Props;
function isInfinite(animation: Animation) { function isInfinite(animation: Animation) {
const effect = animation.effect; const effect = animation.effect;
if( if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
!effect || const style = window.getComputedStyle(effect.target, effect.pseudoElement);
!(effect instanceof KeyframeEffect) || return style.animationIterationCount === 'infinite';
!effect.target }
) return false;
const style = window.getComputedStyle(effect.target, effect.pseudoElement);
return style.animationIterationCount === "infinite";
}
const parser = new DOMParser(); const parser = new DOMParser();
async function updateDOM(html: string, state?: State, fallback?: Fallback) { // A noop element used to prevent styles from being removed
const doc = parser.parseFromString(html, 'text/html'); if (import.meta.env.DEV) {
var noopEl: string | undefined = document.createElement('div');
}
async function updateDOM(doc: Document, loc: URL, state?: State, fallback?: Fallback) {
// Check for a head element that should persist, either because it has the data // Check for a head element that should persist, either because it has the data
// attribute or is a link el. // attribute or is a link el.
const persistedHeadElement = (el: Element): Element | null => { const persistedHeadElement = (el: Element): Element | null => {
@ -141,6 +144,18 @@ const { fallback = 'animate' } = Astro.props as Props;
} }
} }
} }
// Only run this in dev. This will get stripped from production builds and is not needed.
if (import.meta.env.DEV) {
if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
const devId = el.dataset.viteDevId;
// If this same style tag exists, remove it from the new page
return (
doc.querySelector(`style[data-astro-dev-id="${devId}"]`) ||
// Otherwise, keep it anyways. This is client:only styles.
noopEl
);
}
}
return null; return null;
}; };
@ -193,19 +208,17 @@ const { fallback = 'animate' } = Astro.props as Props;
// Chromium based browsers (Chrome, Edge, Opera, ...) // Chromium based browsers (Chrome, Edge, Opera, ...)
scrollTo({ left: 0, top: 0, behavior: 'instant' }); scrollTo({ left: 0, top: 0, behavior: 'instant' });
if (state?.scrollY === 0 && location.hash) { let initialScrollY = 0;
const id = decodeURIComponent(location.hash.slice(1)); if (!state && loc.hash) {
const id = decodeURIComponent(loc.hash.slice(1));
const elem = document.getElementById(id); const elem = document.getElementById(id);
// prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account // prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account
if (elem) { elem && (initialScrollY = elem.offsetTop) && elem.scrollIntoView();
state.scrollY = elem.offsetTop;
persistState(state); // first guess, later updated by scroll handler
elem.scrollIntoView(); // for Firefox, this should better be {behavior: 'instant'}
}
} else if (state && state.scrollY !== 0) { } else if (state && state.scrollY !== 0) {
scrollTo(0, state.scrollY); // usings default scrollBehavior scrollTo(0, state.scrollY); // usings default scrollBehavior
} }
!state &&
history.pushState({ index: ++currentHistoryIndex, scrollY: initialScrollY }, '', loc.href);
triggerEvent('astro:after-swap'); triggerEvent('astro:after-swap');
}; };
@ -236,8 +249,10 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations // Trigger the animations
const currentAnimations = document.getAnimations(); const currentAnimations = document.getAnimations();
document.documentElement.dataset.astroTransitionFallback = 'old'; document.documentElement.dataset.astroTransitionFallback = 'old';
const newAnimations = document.getAnimations().filter(a => !currentAnimations.includes(a) && !isInfinite(a)); const newAnimations = document
const finished = Promise.all(newAnimations.map(a => a.finished)); .getAnimations()
.filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
const finished = Promise.all(newAnimations.map((a) => a.finished));
const fallbackSwap = () => { const fallbackSwap = () => {
swap(); swap();
document.documentElement.dataset.astroTransitionFallback = 'new'; document.documentElement.dataset.astroTransitionFallback = 'new';
@ -249,19 +264,29 @@ const { fallback = 'animate' } = Astro.props as Props;
} }
} }
async function navigate(dir: Direction, href: string, state?: State) { async function navigate(dir: Direction, loc: URL, state?: State) {
let finished: Promise<void>; let finished: Promise<void>;
const href = loc.href;
const { html, ok } = await getHTML(href); const { html, ok } = await getHTML(href);
// If there is a problem fetching the new page, just do an MPA navigation to it. // If there is a problem fetching the new page, just do an MPA navigation to it.
if (!ok) { if (!ok) {
location.href = href; location.href = href;
return; return;
} }
const doc = parser.parseFromString(html, 'text/html');
if (!doc.querySelector('[name="astro-view-transitions-enabled"]')) {
location.href = href;
return;
}
// Now we are sure that we will push state, and it is time to create a state if it is still missing.
!state && history.replaceState({ index: currentHistoryIndex, scrollY }, '');
document.documentElement.dataset.astroTransition = dir; document.documentElement.dataset.astroTransition = dir;
if (supportsViewTransitions) { if (supportsViewTransitions) {
finished = document.startViewTransition(() => updateDOM(html, state)).finished; finished = document.startViewTransition(() => updateDOM(doc, loc, state)).finished;
} else { } else {
finished = updateDOM(html, state, getFallback()); finished = updateDOM(doc, loc, state, getFallback());
} }
try { try {
await finished; await finished;
@ -313,11 +338,11 @@ const { fallback = 'animate' } = Astro.props as Props;
ev.shiftKey || // new window ev.shiftKey || // new window
ev.defaultPrevented || ev.defaultPrevented ||
!transitionEnabledOnThisPage() !transitionEnabledOnThisPage()
) ) {
// No page transitions in these cases, // No page transitions in these cases,
// Let the browser standard action handle this // Let the browser standard action handle this
return; return;
}
// We do not need to handle same page links because there are no page transitions // We do not need to handle same page links because there are no page transitions
// Same page means same path and same query params (but different hash) // Same page means same path and same query params (but different hash)
if (location.pathname === link.pathname && location.search === link.search) { if (location.pathname === link.pathname && location.search === link.search) {
@ -330,31 +355,29 @@ const { fallback = 'animate' } = Astro.props as Props;
// But we want to handle it like any other same page navigation // But we want to handle it like any other same page navigation
// So we scroll to the top of the page but do not start page transitions // So we scroll to the top of the page but do not start page transitions
ev.preventDefault(); ev.preventDefault();
persistState({ ...history.state, scrollY }); // push state on the first navigation but not if we were here already
scrollTo({ left: 0, top: 0, behavior: 'instant' });
if (location.hash) { if (location.hash) {
// last target was different history.replaceState({ index: currentHistoryIndex, scrollY: -(scrollY + 1) }, '');
const newState: State = { index: ++currentHistoryIndex, scrollY: 0 }; const newState: State = { index: ++currentHistoryIndex, scrollY: 0 };
history.pushState(newState, '', link.href); history.pushState(newState, '', link.href);
} }
scrollTo({ left: 0, top: 0, behavior: 'instant' });
return; return;
} }
} }
// these are the cases we will handle: same origin, different page // these are the cases we will handle: same origin, different page
ev.preventDefault(); ev.preventDefault();
navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 }); navigate('forward', new URL(link.href));
const newState: State = { index: currentHistoryIndex, scrollY };
persistState({ index: currentHistoryIndex - 1, scrollY });
history.pushState(newState, '', link.href);
}); });
addEventListener('popstate', (ev) => { addEventListener('popstate', (ev) => {
if (!transitionEnabledOnThisPage() && ev.state) { if (!transitionEnabledOnThisPage() && ev.state) {
// The current page doesn't haven't View Transitions, // The current page doesn't have View Transitions enabled
// respect that with a full page reload // but the page we navigate to does (because it set the state).
// -- but only for transition managed by us (ev.state is set) // Do a full page refresh to reload the client-side router from the new page.
history.scrollRestoration && (history.scrollRestoration = "manual") // Scroll restauration will then happen during the reload when the router's code is re-executed
history.scrollRestoration && (history.scrollRestoration = 'manual');
location.reload(); location.reload();
return; return;
} }
@ -365,7 +388,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// The browser will handle navigation fine without our help // The browser will handle navigation fine without our help
if (ev.state === null) { if (ev.state === null) {
if (history.scrollRestoration) { if (history.scrollRestoration) {
history.scrollRestoration = "auto"; history.scrollRestoration = 'auto';
} }
return; return;
} }
@ -373,14 +396,18 @@ const { fallback = 'animate' } = Astro.props as Props;
// With the default "auto", the browser will jump to the old scroll position // With the default "auto", the browser will jump to the old scroll position
// before the ViewTransition is complete. // before the ViewTransition is complete.
if (history.scrollRestoration) { if (history.scrollRestoration) {
history.scrollRestoration = "manual"; history.scrollRestoration = 'manual';
} }
const state: State | undefined = history.state; const state: State = history.state;
const nextIndex = state?.index ?? currentHistoryIndex + 1; const nextIndex = state.index;
const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back'; const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
navigate(direction, location.href, state);
currentHistoryIndex = nextIndex; currentHistoryIndex = nextIndex;
if (state.scrollY < 0) {
scrollTo(0, -(state.scrollY + 1));
} else {
navigate(direction, new URL(location.href), state);
}
}); });
['mouseenter', 'touchstart', 'focus'].forEach((evName) => { ['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
@ -404,13 +431,10 @@ const { fallback = 'animate' } = Astro.props as Props;
addEventListener('load', onPageLoad); addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button. // There's not a good way to record scroll position before a back button.
// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position. // So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
const updateState = () => { const updateState = () => {
// only update history entries that are managed by us persistState({ ...history.state, scrollY });
// leave other entries alone and do not accidently add state. };
if (history.state) {
persistState({ ...history.state, scrollY });
}
}
if ('onscrollend' in window) addEventListener('scrollend', updateState); if ('onscrollend' in window) addEventListener('scrollend', updateState);
else addEventListener('scroll', throttle(updateState, 300)); else addEventListener('scroll', throttle(updateState, 300));
} }

10
packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-one.astro Normal file
View file

@ -0,0 +1,10 @@
---
import Layout from '../components/Layout.astro';
import Island from '../components/Island';
---
<Layout>
<a id="click-two" href="/client-only-two">go to page 2</a>
<div transition:persist="island">
<Island client:only count={5}>message here</Island>
</div>
</Layout>

10
packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-two.astro Normal file
View file

@ -0,0 +1,10 @@
---
import Layout from '../components/Layout.astro';
import Island from '../components/Island';
---
<Layout>
<p id="page-two">Page 2</p>
<div transition:persist="island">
<Island client:only count={5}>message here</Island>
</div>
</Layout>

Some files were not shown because too many files have changed in this diff Show more