Merge branch 'main' into fix/squoosh-quality-defaults

.changeset/itchy-guests-perform.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Specify sharp as optional peer dependency

.changeset/odd-elephants-argue.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Fix non-hoisted remark/rehype plugin loading

.changeset/silver-rats-know.md

@@ -0,0 +1,15 @@
+---
+'astro': patch
+'@astrojs/image': patch
+'@astrojs/mdx': patch
+'@astrojs/netlify': patch
+'@astrojs/preact': patch
+'@astrojs/rss': patch
+'@astrojs/svelte': patch
+'@astrojs/tailwind': patch
+'@astrojs/vue': patch
+'@astrojs/markdown-remark': patch
+'@astrojs/telemetry': patch
+---
+
+Add missing dependencies, support strict dependency installation (e.g. pnpm)

.changeset/young-pens-lick.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/rss': patch
+---
+
+Remove path-browserify dependency

.github/workflows/ci.yml

@@ -207,8 +207,9 @@ jobs:
           repository: withastro/docs
           path: smoke/docs
 
+      # NOTE: remove shamefully-hoist when docs is also not hoisted
       - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
+        run: pnpm install --no-frozen-lockfile --shamefully-hoist
 
       - name: Build Packages
         run: pnpm run build

.npmrc

@@ -4,19 +4,13 @@ link-workspace-packages=true
 save-workspace-protocol=false # This prevents the examples to have the `workspace:` prefix
 auto-install-peers=false
 
-shamefully-hoist=true
-# TODO: We would like to move to individual opt-in hoisting, but Astro was not originally
-# written with this in mind. In the future, it would be good to hoist individual packages only.
-# public-hoist-pattern[]=autoprefixer
-# public-hoist-pattern[]=astro
-# public-hoist-pattern[]=remark-*
-# public-hoist-pattern[]=rehype-*
-# public-hoist-pattern[]=react
-# public-hoist-pattern[]=react-dom
-# public-hoist-pattern[]=preact
-# public-hoist-pattern[]=preact-render-to-string
-# public-hoist-pattern[]=vue
-# public-hoist-pattern[]=svelte
-# public-hoist-pattern[]=solid-js
-# public-hoist-pattern[]=lit
-# public-hoist-pattern[]=@webcomponents/template-shadowroot
+# `github-slugger` is used by `vite-plugin-markdown-legacy`.
+# Temporarily hoist this until we remove the feature.
+public-hoist-pattern[]=github-slugger
+# Vite's esbuild optimizer has trouble optimizing `@astrojs/lit/client-shim.js`
+# which imports this dependency.
+public-hoist-pattern[]=@webcomponents/template-shadowroot
+# On Windows, `svelte-preprocess` can't import `svelte/compiler`. Might be a pnpm bug.
+public-hoist-pattern[]=svelte
+# There's a lit dependency duplication somewhere causing multiple Lit versions error.
+public-hoist-pattern[]=*lit*

examples/basics/src/components/Card.astro

@@ -20,57 +20,43 @@ const { href, title, body } = Astro.props;
 	</a>
 </li>
 <style>
-	:root {
-		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
-	}
-
 	.link-card {
 		list-style: none;
 		display: flex;
 		padding: 0.15rem;
-		background-image: var(--link-gradient);
+		background-color: white;
+		background-image: var(--accent-gradient);
 		background-size: 400%;
 		border-radius: 0.5rem;
 		background-position: 100%;
 		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);
 	}
 
 	.link-card > a {
 		width: 100%;
 		text-decoration: none;
 		line-height: 1.4;
-		padding: 1em 1.3em;
+		padding: 1rem 1.3rem;
 		border-radius: 0.35rem;
-		color: var(--text-color);
+		color: #111;
 		background-color: white;
 		opacity: 0.8;
 	}
-
 	h2 {
 		margin: 0;
+		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
-
 	p {
-		margin-top: 0.75rem;
+		margin-top: 0.5rem;
 		margin-bottom: 0;
+		color: #444;
 	}
-
-	h2 span {
-		display: inline-block;
-		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-
 	.link-card:is(:hover, :focus-within) {
 		background-position: 0;
 	}
-
 	.link-card:is(:hover, :focus-within) h2 {
-		color: #4f39fa;
-	}
-
-	.link-card:is(:hover, :focus-within) h2 span {
-		will-change: transform;
-		transform: translateX(2px);
+		color: rgb(var(--accent));
 	}
 </style>

examples/basics/src/layouts/Layout.astro

@@ -19,40 +19,15 @@ const { title } = Astro.props;
 		<slot />
 	</body>
 </html>
-<style>
+<style is:global>
 	:root {
-		--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-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
-
-		--color-text: hsl(12, 5%, 4%);
-		--color-bg: hsl(10, 21%, 95%);
-		--color-border: hsl(17, 24%, 90%);
+		--accent: 124, 58, 237;
+		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
 	}
-
 	html {
 		font-family: system-ui, sans-serif;
-		font-size: var(--font-size-base);
-		color: var(--color-text);
-		background-color: var(--color-bg);
-	}
-
-	body {
-		margin: 0;
-	}
-
-
-</style>
-
-<style is:global>
-	h1 {
-		font-size: var(--font-size-xl);
+		background-color: #F6F6F6;
 	}
-
-	h2 {
-		font-size: var(--font-size-lg);
-	}
-
 	code {
 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
 			Bitstream Vera Sans Mono, Courier New, monospace;

examples/basics/src/pages/index.astro

@@ -7,7 +7,7 @@ import Card from '../components/Card.astro';
 	<main>
 		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
 		<p class="instructions">
-			Check out the <code>src/pages</code> directory to get started.<br />
+			To get started, open the directory <code>src/pages</code> in your project.<br />
 			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
 		</p>
 		<ul role="list" class="link-card-grid">
@@ -28,65 +28,50 @@ import Card from '../components/Card.astro';
 			/>
 			<Card
 				href="https://astro.build/chat/"
-				title="Chat"
+				title="Community"
 				body="Come say hi to our amazing Discord community. ❤️"
 			/>
 		</ul>
 	</main>
 </Layout>
 
 <style>
-	:root {
-		--astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
-	}
-
-	h1 {
-		margin: 2rem 0;
-	}
-
 	main {
 		margin: auto;
-		padding: 1em;
+		padding: 1.5rem;
 		max-width: 60ch;
 	}
-
+	h1 {
+		font-size: 3rem;
+		font-weight: 800;
+		margin: 0;
+	}
 	.text-gradient {
-		font-weight: 900;
-		background-image: var(--astro-gradient);
+		background-image: var(--accent-gradient);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
-		background-size: 100% 200%;
-		background-position-y: 100%;
-		border-radius: 0.4rem;
-		animation: pulse 4s ease-in-out infinite;
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			background-position-y: 0%;
-		}
-		50% {
-			background-position-y: 80%;
-		}
+		background-size: 400%;
+		background-position: 0%;
 	}
-
 	.instructions {
 		line-height: 1.6;
 		margin: 1rem 0;
-		background: #4f39fa;
+		border: 1px solid rgba(var(--accent), 25%);
+		background-color: white;
 		padding: 1rem;
 		border-radius: 0.4rem;
-		color: var(--color-bg);
 	}
-
 	.instructions code {
 		font-size: 0.875em;
-		border: 0.1em solid var(--color-border);
+		font-weight: bold;
+		background: rgba(var(--accent), 12%);
+		color: rgb(var(--accent));
 		border-radius: 4px;
-		padding: 0.15em 0.25em;
+		padding: 0.3em 0.45em;
+	}
+	.instructions strong {
+		color: rgb(var(--accent));
 	}
-
 	.link-card-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));

examples/framework-lit/.npmrc

@@ -1,2 +1 @@
-# Expose Astro dependencies for `pnpm` users
-shamefully-hoist=true
+public-hoist-pattern[]=*lit*

package.json

@@ -41,7 +41,7 @@
     "node": "^14.18.0 || >=16.12.0",
     "pnpm": ">=7.9.5"
   },
-  "packageManager": "pnpm@7.9.5",
+  "packageManager": "pnpm@7.12.2",
   "pnpm": {
     "packageExtensions": {
       "svelte2tsx": {
@@ -74,6 +74,7 @@
     "@changesets/changelog-github": "0.4.4",
     "@changesets/cli": "2.23.0",
     "@octokit/action": "^3.18.1",
+    "@types/node": "^18.7.21",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "del": "^7.0.0",

packages/astro-rss/src/util.ts

@@ -1,10 +1,8 @@
-import npath from 'path-browserify';
-
 /** Normalize URL to its canonical form */
 export function createCanonicalURL(url: string, base?: string): URL {
 	let pathname = url.replace(/\/index.html$/, ''); // index.html is not canonical
 	pathname = pathname.replace(/\/1\/?$/, ''); // neither is a trailing /1/ (impl. detail of collections)
-	if (!npath.extname(pathname)) pathname = pathname.replace(/(\/+)?$/, '/'); // add trailing slash if there’s no extension
+	if (!getUrlExtension(url)) pathname = pathname.replace(/(\/+)?$/, '/'); // add trailing slash if there’s no extension
 	pathname = pathname.replace(/\/+/g, '/'); // remove duplicate slashes (URL() won’t)
 	return new URL(pathname, base);
 }
@@ -17,3 +15,9 @@ export function isValidURL(url: string): boolean {
 	} catch (e) {}
 	return false;
 }
+
+function getUrlExtension(url: string) {
+	const lastDot = url.lastIndexOf('.');
+	const lastSlash = url.lastIndexOf('/');
+	return lastDot > lastSlash ? url.slice(lastDot + 1) : '';
+}

packages/astro/e2e/fixtures/astro-component/astro.config.mjs

@@ -1,4 +1,7 @@
 import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact'
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [preact()]
+});