From c85c7e2188c5e385f97bf43a3ba822c8e23a0e8a Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Tue, 26 Oct 2021 09:57:17 -0600
Subject: [PATCH] Template fixes (#1656)

---
 examples/blog/public/blog.css                 |  24 +---
 examples/blog/src/components/BlogHeader.astro |   4 +-
 .../blog/src/components/BlogPostPreview.astro |   5 +-
 examples/blog/src/layouts/BlogPost.astro      |  15 ++-
 examples/blog/src/pages/index.astro           |  10 +-
 examples/blog/src/pages/posts/index.md        |   6 +-
 examples/portfolio/src/pages/about.astro      |   3 +-
 packages/astro/src/@types/astro-core.ts       |  20 ++--
 packages/astro/src/core/create-vite.ts        | 103 +-----------------
 packages/astro/src/core/ssr/css.ts            |   3 +-
 packages/astro/src/runtime/server/index.ts    |   4 +-
 packages/astro/test/astro-pagination.test.js  |   7 +-
 12 files changed, 41 insertions(+), 163 deletions(-)
diff --git a/examples/blog/public/blog.css b/examples/blog/public/blog.css
index 9264f4e02..1bd7479ce 100644
--- a/examples/blog/public/blog.css
+++ b/examples/blog/public/blog.css
@@ -90,31 +90,19 @@ body {
 }
 
 body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
   font-family: var(--font-body);
   font-size: 1rem;
   font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
   line-height: 1.625;
 }
 
-body {
+.wrapper {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 65em;
+  padding-left: 2rem;
+  padding-right: 2rem;
   width: 100%;
-  display: grid;
-  --gutter: 0.5rem;
-  --doc-padding: 2rem;
-}
-
-.layout {
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(var(--gutter), 1fr);
-  gap: 1em;
-}
-
-.layout > :is(main, article) {
-  grid-column: 2;
 }
 
 nav ul {
diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro
index 35ea272b7..92d0cbfb1 100644
--- a/examples/blog/src/components/BlogHeader.astro
+++ b/examples/blog/src/components/BlogHeader.astro
@@ -56,7 +56,7 @@ h1 a {
 }
 </style>
 
-<header class="layout">
+<header class="wrapper">
   <article>
     <h1>
       <a href="/">
@@ -87,4 +87,4 @@ h1 a {
       </a>
     </h1>
   </article>
-</header>
\ No newline at end of file
+</header>
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro
index 6a553366d..96d1190c7 100644
--- a/examples/blog/src/components/BlogPostPreview.astro
+++ b/examples/blog/src/components/BlogPostPreview.astro
@@ -26,13 +26,12 @@ const { post } = Astro.props;
 }
 
 header {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  text-align: left;
-  align-items: flex-start;
   justify-content: center;
-
   padding-bottom: 2rem;
+  text-align: left;
 }
 
 .title,
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index 95ad97564..06bba074d 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -1,7 +1,7 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
-// import BlogHeader from '../components/BlogHeader.astro';
-// import BlogPost from '../components/BlogPost.astro';
+import BlogHeader from '../components/BlogHeader.astro';
+import BlogPost from '../components/BlogPost.astro';
 
 const {content} = Astro.props;
 const {title, description, publishDate, author, heroImage, permalink, alt} = content;
@@ -14,13 +14,12 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
   </head>
 
   <body>
-    <h1>Hello world!</h1>
-    <div class="container">
-      <slot />
+    <BlogHeader />
+    <div class="wrapper">
+      <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}>
+        <slot />
+      </BlogPost>
     </div>
-    <!-- <BlogHeader /> -->
-    <!-- <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}> -->
-    <!-- </BlogPost> -->
   </body>
 </html>
 
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
index 812897779..f96f5e049 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -30,14 +30,6 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
     <link rel="stylesheet" href="/blog.css" />
 
     <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: 3.5rem 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
-
       header {
         width: 100%;
         height: 100%;
@@ -75,7 +67,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 
   <body>
     <BlogHeader />
-    <div class="layout">
+    <div class="wrapper">
       <main class="content">
         <section class="intro">
           <h1 class="latest">{title}</h1>
diff --git a/examples/blog/src/pages/posts/index.md b/examples/blog/src/pages/posts/index.md
index fe1df30bb..949dfb866 100644
--- a/examples/blog/src/pages/posts/index.md
+++ b/examples/blog/src/pages/posts/index.md
@@ -2,15 +2,15 @@
 setup: |
   import Layout from '../../layouts/BlogPost.astro'
   import Cool from '../../components/Author.astro'
+title: Hello world!
+publishDate: 12 Sep 2021
 name: Nate Moore
 value: 128
 description: Just a Hello World Post!
 ---
 
-# Hello world!
-
 <Cool name={frontmatter.name} href="https://twitter.com/n_moore" client:load />
 
-This is so cool! 
+This is so cool!
 
 Do variables work {frontmatter.value * 2}?
diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro
index 1fb855eb0..4a64ad0fe 100644
--- a/examples/portfolio/src/pages/about.astro
+++ b/examples/portfolio/src/pages/about.astro
@@ -10,11 +10,12 @@ import Nav from '../components/Nav/index.jsx';
     <MainHead title="About | Jeanine White" />
     <style lang="scss">
       .heroImg {
+        max-height: 24rem;
         object-fit: cover;
+        overflow: hidden;
 
         img {
           width: 100%;
-          height: 100%;
         }
       }
 
diff --git a/packages/astro/src/@types/astro-core.ts b/packages/astro/src/@types/astro-core.ts
index c475ee09b..9a5d718fc 100644
--- a/packages/astro/src/@types/astro-core.ts
+++ b/packages/astro/src/@types/astro-core.ts
@@ -1,8 +1,8 @@
 import type babel from '@babel/core';
-import type vite from 'vite';
 import type { z } from 'zod';
 import type { AstroConfigSchema } from '../core/config';
 import type { AstroComponentFactory } from '../runtime/server';
+import type vite from '../../vendor/vite';
 
 export interface AstroComponentMetadata {
   displayName: string;
@@ -94,16 +94,14 @@ export interface AstroUserConfig {
   vite?: vite.InlineConfig;
 }
 
-/*
- * NOTE(fks): We choose to keep our hand-generated AstroUserConfig interface so that
- * we can add JSDoc-style documentation and link to the definition file in our repo.
- * However, Zod comes with the ability to auto-generate AstroConfig from the schema
- * above. If we ever get to the point where we no longer need the dedicated
- * @types/config.ts file, consider replacing it with the following lines:
- *
- * export interface AstroUserConfig extends z.input<typeof AstroConfigSchema> {
- * }
- */
+// NOTE(fks): We choose to keep our hand-generated AstroUserConfig interface so that
+// we can add JSDoc-style documentation and link to the definition file in our repo.
+// However, Zod comes with the ability to auto-generate AstroConfig from the schema
+// above. If we ever get to the point where we no longer need the dedicated
+// @types/config.ts file, consider replacing it with the following lines:
+//
+// export interface AstroUserConfig extends z.input<typeof AstroConfigSchema> {
+// }
 
 export type AstroConfig = z.output<typeof AstroConfigSchema>;
 
diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts
index b35922f64..2b929ca3f 100644
--- a/packages/astro/src/core/create-vite.ts
+++ b/packages/astro/src/core/create-vite.ts
@@ -2,40 +2,21 @@ import type { AstroConfig } from '../@types/astro-core';
 import type { AstroDevServer } from './dev';
 import type { LogOptions } from './logger';
 
-import slash from 'slash';
 import { fileURLToPath } from 'url';
-import { createRequire } from 'module';
 import vite from './vite.js';
 import astroVitePlugin from '../vite-plugin-astro/index.js';
 import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js';
 import markdownVitePlugin from '../vite-plugin-markdown/index.js';
 import jsxVitePlugin from '../vite-plugin-jsx/index.js';
 import fetchVitePlugin from '../vite-plugin-fetch/index.js';
-import { getPackageJSON, parseNpmName, resolveDependency } from './util.js';
-
-const require = createRequire(import.meta.url);
+import { getPackageJSON, resolveDependency } from './util.js';
 
 // Some packages are just external, and that’s the way it goes.
-const ALWAYS_EXTERNAL = new Set([
-  '@sveltejs/vite-plugin-svelte',
-  'micromark-util-events-to-acorn',
-  'estree-util-value-to-estree',
-  'prismjs',
-  'shorthash',
-  'unified'
-]);
+const ALWAYS_EXTERNAL = new Set(['@sveltejs/vite-plugin-svelte', 'estree-util-value-to-estree', 'micromark-util-events-to-acorn', 'prismjs', 'shorthash', 'unified']);
 const ALWAYS_NOEXTERNAL = new Set([
-  // This is only because Vite's native ESM doesn't resolve "exports" correctly.
-  'astro'
+  'astro', // This is only because Vite's native ESM doesn't resolve "exports" correctly.
 ]);
 
-/*
- * Tailwind fixes
- * These fix Tailwind HMR in dev, and must be declared before Vite initiates.
- * These are Tailwind-specific, so they’re safe to add.
- */
-(process.env as any).TAILWIND_MODE = 'watch';
-
 // note: ssr is still an experimental API hence the type omission
 type ViteConfigWithSSR = vite.InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } };
 
@@ -49,8 +30,6 @@ interface CreateViteOptions {
 export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig, logging, devServer }: CreateViteOptions): Promise<ViteConfigWithSSR> {
   const packageJSON = (await getPackageJSON(astroConfig.projectRoot)) || {};
   const userDeps = Object.keys(packageJSON?.dependencies || {});
-  const userDevDeps = Object.keys(packageJSON?.devDependencies || {});
-  const { external, noExternal } = await viteSSRDeps([...userDeps, ...userDevDeps]); // TODO: improve this?
 
   // First, start with the Vite configuration that Astro core needs
   let viteConfig: ViteConfigWithSSR = {
@@ -80,8 +59,8 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
     },
     /** Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html) */
     ssr: {
-      external: [...external, ...ALWAYS_EXTERNAL],
-      noExternal: [...noExternal, ...ALWAYS_NOEXTERNAL],
+      external: [...ALWAYS_EXTERNAL],
+      noExternal: [...ALWAYS_NOEXTERNAL],
     },
   };
 
@@ -108,75 +87,3 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
   viteConfig = vite.mergeConfig(viteConfig, inlineConfig); // merge in inline Vite config
   return viteConfig;
 }
-
-/** Try and automatically figure out Vite external & noExternal */
-async function viteSSRDeps(deps: string[]): Promise<{ external: Set<string>; noExternal: Set<string> }> {
-  const skip = new Set<string>();
-  const external = new Set<string>();
-  const noExternal = new Set<string>();
-
-  /** categorize package as ESM or CJS */
-  async function sortPkg(spec: string): Promise<void> {
-    // already sorted; skip
-    if (external.has(spec) || noExternal.has(spec) || skip.has(spec)) return;
-
-    // not an npm package: ignore
-    const pkg = parseNpmName(spec);
-    if (!pkg) {
-      skip.add(spec);
-      return;
-    }
-
-    try {
-      const moduleLoc = require.resolve(spec);
-
-      // node can’t find this: skip
-      if (!moduleLoc) {
-        skip.add(spec);
-        return;
-      }
-
-      // load module’s package.json
-      let cwd = new URL('../', `file://${slash(moduleLoc)}/`);
-      let packageJSON = await getPackageJSON(cwd);
-      while (!packageJSON) {
-        const next = new URL('../', cwd);
-        if (next.href === cwd.href) return; // we’re at root; skip
-        cwd = next;
-        packageJSON = await getPackageJSON(cwd);
-      }
-
-      // couldn’t locate: skip
-      if (!packageJSON) {
-        skip.add(spec);
-        return;
-      }
-
-      // otherwise, assume external by default
-      if (packageJSON.type !== 'module') {
-        external.add(spec);
-      }
-
-      // recursively load dependencies for package (but not devDeps)
-      await Promise.all(Object.keys(packageJSON.dependencies || {}).map(sortPkg));
-    } catch (err) {
-      // can’t load package: skip
-      skip.add(spec);
-      return;
-    }
-  }
-
-  // for top-level, load deps and devDeps (just in case)
-  await Promise.all(deps.map(sortPkg));
-
-  // sort (when debugging, makes packages easier to find)
-  const externalSorted = [...external];
-  externalSorted.sort((a, b) => a.localeCompare(b, 'en-us', { numeric: true }));
-  const noExternalSorted = [...noExternal];
-  noExternalSorted.sort((a, b) => a.localeCompare(b, 'en-us', { numeric: true }));
-
-  return {
-    external: new Set([...externalSorted]),
-    noExternal: new Set([...noExternalSorted]),
-  };
-}
diff --git a/packages/astro/src/core/ssr/css.ts b/packages/astro/src/core/ssr/css.ts
index 4e25f7884..67588b95e 100644
--- a/packages/astro/src/core/ssr/css.ts
+++ b/packages/astro/src/core/ssr/css.ts
@@ -19,9 +19,8 @@ export function getStylesForID(id: string, viteServer: vite.ViteDevServer): Set<
     const moduleName = idToModuleMap.get(entryModule);
     if (!moduleName) return;
     for (const importedModule of moduleName.importedModules) {
-      if (!importedModule.id || scanned.has(importedModule.id)) return;
+      if (!importedModule.id || scanned.has(importedModule.id)) continue;
       const ext = path.extname(importedModule.id.toLowerCase());
-
       if (STYLE_EXTENSIONS.has(ext)) {
         css.add(importedModule.id); // if style file, add to list
       } else {
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 3335e6720..027c69ef4 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -259,12 +259,12 @@ function createFetchContentFn(url: URL) {
         if (!mod.frontmatter) {
           return;
         }
-        const urlSpec = new URL(spec, url).pathname.replace(/[\\/\\\\]/, '/');
+        const urlSpec = new URL(spec, url).pathname;
         return {
           ...mod.frontmatter,
           content: mod.metadata,
           file: new URL(spec, url),
-          url: urlSpec.includes('/pages/') && urlSpec.replace(/^.*\/pages\//, '/').replace(/\.md$/, ''),
+          url: urlSpec.includes('/pages/') ? urlSpec.replace(/^.*\/pages\//, '/').replace(/(\/index)?\.md$/, '') : undefined,
         };
       })
       .filter(Boolean);
diff --git a/packages/astro/test/astro-pagination.test.js b/packages/astro/test/astro-pagination.test.js
index 408d5da17..faccc2ecb 100644
--- a/packages/astro/test/astro-pagination.test.js
+++ b/packages/astro/test/astro-pagination.test.js
@@ -1,5 +1,3 @@
-/**
- * UNCOMMENT: there’s a bug with Canonical URLs
 import { expect } from 'chai';
 import cheerio from 'cheerio';
 import { loadFixture } from './test-utils.js';
@@ -25,7 +23,7 @@ describe('Pagination', () => {
   });
 
   it('named root page', async () => {
-    for (const file of ['/posts/named-root-page/index.html', '/posts/named-root-page/2/index.html', '/posts/named-root-page/3/index.html']) {
+    for (const file of ['/posts/named-root-page/1/index.html', '/posts/named-root-page/2/index.html', '/posts/named-root-page/3/index.html']) {
       expect(await fixture.readFile(file)).to.be.ok;
     }
   });
@@ -47,6 +45,3 @@ describe('Pagination', () => {
     );
   });
 });
-*/
-
-it.skip('is skipped', () => {});
