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 { body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1rem; font-size: 1rem;
font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
line-height: 1.625; line-height: 1.625;
} }
body { .wrapper {
margin-left: auto;
margin-right: auto;
max-width: 65em;
padding-left: 2rem;
padding-right: 2rem;
width: 100%; 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 { nav ul {

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

@ -56,7 +56,7 @@ h1 a {
} }
</style> </style>
<header class="layout"> <header class="wrapper">
<article> <article>
<h1> <h1>
<a href="/"> <a href="/">

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

@ -26,13 +26,12 @@ const { post } = Astro.props;
} }
header { header {
align-items: flex-start;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left;
align-items: flex-start;
justify-content: center; justify-content: center;
padding-bottom: 2rem; padding-bottom: 2rem;
text-align: left;
} }
.title, .title,

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

@ -1,7 +1,7 @@
--- ---
import BaseHead from '../components/BaseHead.astro'; import BaseHead from '../components/BaseHead.astro';
// import BlogHeader from '../components/BlogHeader.astro'; import BlogHeader from '../components/BlogHeader.astro';
// import BlogPost from '../components/BlogPost.astro'; import BlogPost from '../components/BlogPost.astro';
const {content} = Astro.props; const {content} = Astro.props;
const {title, description, publishDate, author, heroImage, permalink, alt} = content; const {title, description, publishDate, author, heroImage, permalink, alt} = content;
@ -14,13 +14,12 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
</head> </head>
<body> <body>
<h1>Hello world!</h1> <BlogHeader />
<div class="container"> <div class="wrapper">
<BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}>
<slot /> <slot />
</BlogPost>
</div> </div>
<!-- <BlogHeader /> -->
<!-- <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}> -->
<!-- </BlogPost> -->
</body> </body>
</html> </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" /> <link rel="stylesheet" href="/blog.css" />
<style> <style>
body {
width: 100%;
display: grid;
grid-template-rows: 3.5rem 1fr;
--gutter: 0.5rem;
--doc-padding: 2rem;
}
header { header {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -75,7 +67,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
<body> <body>
<BlogHeader /> <BlogHeader />
<div class="layout"> <div class="wrapper">
<main class="content"> <main class="content">
<section class="intro"> <section class="intro">
<h1 class="latest">{title}</h1> <h1 class="latest">{title}</h1>

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

@ -2,13 +2,13 @@
setup: | setup: |
import Layout from '../../layouts/BlogPost.astro' import Layout from '../../layouts/BlogPost.astro'
import Cool from '../../components/Author.astro' import Cool from '../../components/Author.astro'
title: Hello world!
publishDate: 12 Sep 2021
name: Nate Moore name: Nate Moore
value: 128 value: 128
description: Just a Hello World Post! description: Just a Hello World Post!
--- ---
# Hello world!
<Cool name={frontmatter.name} href="https://twitter.com/n_moore" client:load /> <Cool name={frontmatter.name} href="https://twitter.com/n_moore" client:load />
This is so cool! This is so cool!

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" /> <MainHead title="About | Jeanine White" />
<style lang="scss"> <style lang="scss">
.heroImg { .heroImg {
max-height: 24rem;
object-fit: cover; object-fit: cover;
overflow: hidden;
img { img {
width: 100%; 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 babel from '@babel/core';
import type vite from 'vite';
import type { z } from 'zod'; import type { z } from 'zod';
import type { AstroConfigSchema } from '../core/config'; import type { AstroConfigSchema } from '../core/config';
import type { AstroComponentFactory } from '../runtime/server'; import type { AstroComponentFactory } from '../runtime/server';
import type vite from '../../vendor/vite';
export interface AstroComponentMetadata { export interface AstroComponentMetadata {
displayName: string; displayName: string;
@ -94,16 +94,14 @@ export interface AstroUserConfig {
vite?: vite.InlineConfig; vite?: vite.InlineConfig;
} }
/* // NOTE(fks): We choose to keep our hand-generated AstroUserConfig interface so that
* 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.
* 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
* 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
* 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:
* @types/config.ts file, consider replacing it with the following lines: //
* // export interface AstroUserConfig extends z.input<typeof AstroConfigSchema> {
* export interface AstroUserConfig extends z.input<typeof AstroConfigSchema> { // }
* }
*/
export type AstroConfig = z.output<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 { AstroDevServer } from './dev';
import type { LogOptions } from './logger'; import type { LogOptions } from './logger';
import slash from 'slash';
import { fileURLToPath } from 'url'; import { fileURLToPath } from 'url';
import { createRequire } from 'module';
import vite from './vite.js'; import vite from './vite.js';
import astroVitePlugin from '../vite-plugin-astro/index.js'; import astroVitePlugin from '../vite-plugin-astro/index.js';
import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js'; import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js';
import markdownVitePlugin from '../vite-plugin-markdown/index.js'; import markdownVitePlugin from '../vite-plugin-markdown/index.js';
import jsxVitePlugin from '../vite-plugin-jsx/index.js'; import jsxVitePlugin from '../vite-plugin-jsx/index.js';
import fetchVitePlugin from '../vite-plugin-fetch/index.js'; import fetchVitePlugin from '../vite-plugin-fetch/index.js';
import { getPackageJSON, parseNpmName, resolveDependency } from './util.js'; import { getPackageJSON, resolveDependency } from './util.js';
const require = createRequire(import.meta.url);
// Some packages are just external, and that’s the way it goes. // Some packages are just external, and that’s the way it goes.
const ALWAYS_EXTERNAL = new Set([ const ALWAYS_EXTERNAL = new Set(['@sveltejs/vite-plugin-svelte', 'estree-util-value-to-estree', 'micromark-util-events-to-acorn', 'prismjs', 'shorthash', 'unified']);
'@sveltejs/vite-plugin-svelte',
'micromark-util-events-to-acorn',
'estree-util-value-to-estree',
'prismjs',
'shorthash',
'unified'
]);
const ALWAYS_NOEXTERNAL = new Set([ const ALWAYS_NOEXTERNAL = new Set([
// This is only because Vite's native ESM doesn't resolve "exports" correctly. 'astro', // This is only because Vite's native ESM doesn't resolve "exports" correctly.
'astro'
]); ]);
/*
* 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 // note: ssr is still an experimental API hence the type omission
type ViteConfigWithSSR = vite.InlineConfig & { ssr?: { external?: string[]; noExternal?: string[] } }; 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> { export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig, logging, devServer }: CreateViteOptions): Promise<ViteConfigWithSSR> {
const packageJSON = (await getPackageJSON(astroConfig.projectRoot)) || {}; const packageJSON = (await getPackageJSON(astroConfig.projectRoot)) || {};
const userDeps = Object.keys(packageJSON?.dependencies || {}); 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 // First, start with the Vite configuration that Astro core needs
let viteConfig: ViteConfigWithSSR = { 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) */ /** Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html) */
ssr: { ssr: {
external: [...external, ...ALWAYS_EXTERNAL], external: [...ALWAYS_EXTERNAL],
noExternal: [...noExternal, ...ALWAYS_NOEXTERNAL], noExternal: [...ALWAYS_NOEXTERNAL],
}, },
}; };
@ -108,75 +87,3 @@ export async function createVite(inlineConfig: ViteConfigWithSSR, { astroConfig,
viteConfig = vite.mergeConfig(viteConfig, inlineConfig); // merge in inline Vite config viteConfig = vite.mergeConfig(viteConfig, inlineConfig); // merge in inline Vite config
return viteConfig; 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); const moduleName = idToModuleMap.get(entryModule);
if (!moduleName) return; if (!moduleName) return;
for (const importedModule of moduleName.importedModules) { 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()); const ext = path.extname(importedModule.id.toLowerCase());
if (STYLE_EXTENSIONS.has(ext)) { if (STYLE_EXTENSIONS.has(ext)) {
css.add(importedModule.id); // if style file, add to list css.add(importedModule.id); // if style file, add to list
} else { } else {

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

@ -259,12 +259,12 @@ function createFetchContentFn(url: URL) {
if (!mod.frontmatter) { if (!mod.frontmatter) {
return; return;
} }
const urlSpec = new URL(spec, url).pathname.replace(/[\\/\\\\]/, '/'); const urlSpec = new URL(spec, url).pathname;
return { return {
...mod.frontmatter, ...mod.frontmatter,
content: mod.metadata, content: mod.metadata,
file: new URL(spec, url), 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); .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 { expect } from 'chai';
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
@ -25,7 +23,7 @@ describe('Pagination', () => {
}); });
it('named root page', async () => { 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; expect(await fixture.readFile(file)).to.be.ok;
} }
}); });
@ -47,6 +45,3 @@ describe('Pagination', () => {
); );
}); });
}); });
*/
it.skip('is skipped', () => {});