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

Template fixes (#1656)

Browse source
This commit is contained in:
Drew Powers 2021-10-26 09:57:17 -06:00 committed by GitHub
parent dd40617038
commit c85c7e2188
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 41 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
examples/blog/public/blog.css
View file

@ -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 {

4
examples/blog/src/components/BlogHeader.astro
View file

@ -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>
</header>

5
examples/blog/src/components/BlogPostPreview.astro
View file

@ -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,

15
examples/blog/src/layouts/BlogPost.astro
View file

@ -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>

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

@ -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>

6
examples/blog/src/pages/posts/index.md
View file

@ -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}?

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

@ -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%;
}
}

20
packages/astro/src/@types/astro-core.ts
View file

@ -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>;

103
packages/astro/src/core/create-vite.ts
View file

@ -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]),
};
}

3
packages/astro/src/core/ssr/css.ts
View file

@ -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 {

4
packages/astro/src/runtime/server/index.ts
View file

@ -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);

7
packages/astro/test/astro-pagination.test.js
View file

@ -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', () => {});