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

Update examples to move away from Astro.resolve on styles (#2393)

Browse source 
* Update examples to move away from Astro.resolve on styles

* Prepend the subpath

* Adds a changeset

* Switch to @import for the starter
This commit is contained in:
Matthew Phillips 2022-01-18 08:34:12 -05:00 committed by GitHub
parent 672b831940
commit bcc617f9dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 32 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/flat-tips-happen.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Prepends site subpath when using --experimental-static-build

4
examples/blog-multiple-authors/src/components/MainHead.astro
View file

@ -18,7 +18,9 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <style global>
@import "../styles/global.css";
</style>
<!-- Sitemap --> <!-- Sitemap -->
<link rel="sitemap" href="/sitemap.xml" /> <link rel="sitemap" href="/sitemap.xml" />
<!-- RSS --> <!-- RSS -->

8
examples/docs/src/components/HeadCommon.astro
View file

@ -8,9 +8,11 @@
<link rel="sitemap" href="/sitemap.xml" /> <link rel="sitemap" href="/sitemap.xml" />
<!-- Global CSS --> <!-- Global CSS -->
<link rel="stylesheet" href={Astro.resolve('../styles/theme.css')} /> <style global>
<link rel="stylesheet" href={Astro.resolve('../styles/code.css')} /> @import "../styles/theme.css";
<link rel="stylesheet" href={Astro.resolve('../styles/index.css')} /> @import "../styles/code.css";
@import "../styles/index.css";
</style>
<!-- Preload Fonts --> <!-- Preload Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />

4
examples/framework-multiple/src/pages/index.astro
View file

@ -17,7 +17,9 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> <style global>
@import "../styles/global.css";
</style>
</head> </head>
<body> <body>
<main> <main>

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

@ -20,8 +20,10 @@ let title = 'My Astro Site';
<title>{title}</title> <title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> <style global>
<link rel="stylesheet" href={Astro.resolve('../styles/home.css')}> @import "../styles/global.css";
@import "../styles/home.css";
</style>
<style> <style>
header { header {

4
examples/with-markdown-plugins/src/layouts/main.astro
View file

@ -9,7 +9,9 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title> <title>{content.title}</title>
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <style global>
@import "../styles/global.css";
</style>
<style> <style>
.nav { .nav {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;

4
examples/with-markdown/src/layouts/main.astro
View file

@ -9,7 +9,9 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title> <title>{content.title}</title>
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <style global>
@import "../styles/global.css";
</style>
</head> </head>
<body> <body>
<slot /> <slot />

6
examples/with-nanostores/src/pages/index.astro
View file

@ -18,8 +18,10 @@ import AdminsSolid from '../components/AdminsSolid.jsx';
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <style global>
<link rel="stylesheet" href={Astro.resolve('../styles/home.css')} /> @import "../styles/global.css";
@import "../styles/home.css";
</style>
<style> <style>
header { header {

3
packages/astro/src/core/build/static-build.ts
View file

@ -315,12 +315,13 @@ async function generatePath(pathname: string, opts: StaticBuildOptions, gopts: G
debug(logging, 'generate', `Generating: ${pathname}`); debug(logging, 'generate', `Generating: ${pathname}`);
const rootpath = new URL(astroConfig.buildOptions.site || 'http://localhost/').pathname;
const result = createResult({ astroConfig, origin, params, pathname, renderers }); const result = createResult({ astroConfig, origin, params, pathname, renderers });
result.links = new Set<SSRElement>( result.links = new Set<SSRElement>(
linkIds.map((href) => ({ linkIds.map((href) => ({
props: { props: {
rel: 'stylesheet', rel: 'stylesheet',
href, href: npath.posix.join(rootpath, href)
}, },
children: '', children: '',
})) }))