summaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
authorGravatar Tony Sullivan <tony.f.sullivan@outlook.com> 2022-03-09 21:52:31 +0000
committerGravatar GitHub <noreply@github.com> 2022-03-09 13:52:31 -0800
commit4b53a53c1b7df094b5bd194955ff1c4cf7cc809f (patch)
tree250c7cda1161b9874ace9bcc999f1cf97c0b7740 /examples
parent43a5c06a9379fbe5f8f66e8fc9bf6879ad9b1dbf (diff)
downloadastro-4b53a53c1b7df094b5bd194955ff1c4cf7cc809f.tar.gz
astro-4b53a53c1b7df094b5bd194955ff1c4cf7cc809f.tar.zst
astro-4b53a53c1b7df094b5bd194955ff1c4cf7cc809f.zip
Update examples for 0.24.0 (#2740)
* removing Astro.resolve, adding sass dev dependencies * updating tailwind example to use ESM style imports * moving from `<style global>@import` to ESM imports * updating lockfile to pick up examples sass deps * chore(lint): ESLint fix Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Diffstat (limited to 'examples')
-rw-r--r--examples/blog-multiple-authors/src/components/MainHead.astro5
-rw-r--r--examples/blog/src/components/BaseHead.astro5
-rw-r--r--examples/docs/src/components/HeadCommon.astro13
-rw-r--r--examples/framework-multiple/src/pages/index.astro5
-rw-r--r--examples/portfolio-svelte/package.json3
-rw-r--r--examples/portfolio-svelte/src/components/MainHead.astro2
-rw-r--r--examples/portfolio/package.json3
-rw-r--r--examples/starter/src/pages/index.astro7
-rw-r--r--examples/subpath/package.json3
-rw-r--r--examples/subpath/src/pages/index.astro2
-rw-r--r--examples/with-markdown-plugins/src/layouts/main.astro5
-rw-r--r--examples/with-markdown-shiki/src/layouts/main.astro6
-rw-r--r--examples/with-markdown/src/layouts/main.astro5
-rw-r--r--examples/with-nanostores/src/pages/index.astro9
-rw-r--r--examples/with-tailwindcss/src/pages/index.astro4
15 files changed, 33 insertions, 44 deletions
diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro
index 81fad3672..ca129df8d 100644
--- a/examples/blog-multiple-authors/src/components/MainHead.astro
+++ b/examples/blog-multiple-authors/src/components/MainHead.astro
@@ -1,4 +1,6 @@
---
+import '../styles/global.css';
+
export interface Props {
title: string;
description: string;
@@ -18,9 +20,6 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
<meta name="description" content={description} />
<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" />
-<style global>
- @import "../styles/global.css";
-</style>
<!-- Sitemap -->
<link rel="sitemap" href="/sitemap.xml" />
<!-- RSS -->
diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
index f39f77338..20ca69212 100644
--- a/examples/blog/src/components/BaseHead.astro
+++ b/examples/blog/src/components/BaseHead.astro
@@ -1,5 +1,5 @@
---
-
+import '../styles/blog.css';
export interface Props {
title: string;
@@ -36,6 +36,3 @@ const { title, description, permalink } = Astro.props;
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" />
-<style global>
- @import "../styles/blog.css";
-</style>
diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro
index 2902da5a3..4906aaf7f 100644
--- a/examples/docs/src/components/HeadCommon.astro
+++ b/examples/docs/src/components/HeadCommon.astro
@@ -1,3 +1,9 @@
+---
+import '../styles/theme.css';
+import '../styles/code.css';
+import '../styles/index.css';
+---
+
<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
@@ -7,13 +13,6 @@
<link rel="sitemap" href="/sitemap.xml" />
-<!-- Global CSS -->
-<style global>
- @import "../styles/theme.css";
- @import "../styles/code.css";
- @import "../styles/index.css";
-</style>
-
<!-- Preload Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro
index 917f604a2..30b422c0a 100644
--- a/examples/framework-multiple/src/pages/index.astro
+++ b/examples/framework-multiple/src/pages/index.astro
@@ -1,4 +1,6 @@
---
+// Style Imports
+import '../styles/global.css';
// Component Imports
import { A, B as Renamed } from '../components';
import * as react from '../components/ReactCounter.jsx';
@@ -17,9 +19,6 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
- <style global>
- @import "../styles/global.css";
- </style>
</head>
<body>
<main>
diff --git a/examples/portfolio-svelte/package.json b/examples/portfolio-svelte/package.json
index 73ade49a0..b50d15131 100644
--- a/examples/portfolio-svelte/package.json
+++ b/examples/portfolio-svelte/package.json
@@ -10,6 +10,7 @@
},
"devDependencies": {
"@astrojs/renderer-svelte": "^0.5.1",
- "astro": "^0.24.0-next.0"
+ "astro": "^0.24.0-next.0",
+ "sass": "^1.49.9"
}
}
diff --git a/examples/portfolio-svelte/src/components/MainHead.astro b/examples/portfolio-svelte/src/components/MainHead.astro
index 0597b178f..978c1d245 100644
--- a/examples/portfolio-svelte/src/components/MainHead.astro
+++ b/examples/portfolio-svelte/src/components/MainHead.astro
@@ -1,4 +1,5 @@
---
+import '../styles/global.scss';
const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props;
---
@@ -8,6 +9,5 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site
<title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')} />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet" />
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
index 5629af7d4..88620ca72 100644
--- a/examples/portfolio/package.json
+++ b/examples/portfolio/package.json
@@ -10,6 +10,7 @@
},
"devDependencies": {
"@astrojs/renderer-preact": "^0.5.0",
- "astro": "^0.24.0-next.0"
+ "astro": "^0.24.0-next.0",
+ "sass": "^1.49.9"
}
}
diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro
index 859ebb205..1de0ce37d 100644
--- a/examples/starter/src/pages/index.astro
+++ b/examples/starter/src/pages/index.astro
@@ -1,4 +1,7 @@
---
+// Style Imports
+import '../styles/global.css';
+import '../styles/home.css';
// Component Imports
import Tour from '../components/Tour.astro';
// You can import components from any supported Framework here!
@@ -20,10 +23,6 @@ let title = 'My Astro Site';
<title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
- <style global>
- @import "../styles/global.css";
- @import "../styles/home.css";
- </style>
<style>
header {
diff --git a/examples/subpath/package.json b/examples/subpath/package.json
index 55001eee2..8ac5cedee 100644
--- a/examples/subpath/package.json
+++ b/examples/subpath/package.json
@@ -10,6 +10,7 @@
},
"devDependencies": {
"@astrojs/renderer-react": "^0.5.0",
- "astro": "^0.24.0-next.0"
+ "astro": "^0.24.0-next.0",
+ "sass": "^1.49.9"
}
}
diff --git a/examples/subpath/src/pages/index.astro b/examples/subpath/src/pages/index.astro
index 44cb83358..a7620accd 100644
--- a/examples/subpath/src/pages/index.astro
+++ b/examples/subpath/src/pages/index.astro
@@ -1,4 +1,5 @@
---
+import '../styles/main.scss';
import Time from '../components/Time.jsx';
---
@@ -6,7 +7,6 @@ import Time from '../components/Time.jsx';
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
- <link rel="stylesheet" href={Astro.resolve('../styles/main.scss')} />
<meta name="viewport" content="width=device-width" />
<title>Welcome to Astro</title>
</head>
diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro
index 6b1ba2a52..854b2b425 100644
--- a/examples/with-markdown-plugins/src/layouts/main.astro
+++ b/examples/with-markdown-plugins/src/layouts/main.astro
@@ -1,4 +1,6 @@
---
+import '../styles/global.css';
+
const { content } = Astro.props;
---
@@ -9,9 +11,6 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title>
- <style global>
- @import "../styles/global.css";
- </style>
<style>
.nav {
border-bottom: 1px solid #ccc;
diff --git a/examples/with-markdown-shiki/src/layouts/main.astro b/examples/with-markdown-shiki/src/layouts/main.astro
index 1c4441a11..425f5dc08 100644
--- a/examples/with-markdown-shiki/src/layouts/main.astro
+++ b/examples/with-markdown-shiki/src/layouts/main.astro
@@ -1,4 +1,6 @@
---
+import '../styles/global.css';
+
const { content } = Astro.props;
---
@@ -9,10 +11,6 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title>
-
- <style global>
- @import "../styles/global.css";
- </style>
</head>
<body>
<slot />
diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro
index afbb48512..425f5dc08 100644
--- a/examples/with-markdown/src/layouts/main.astro
+++ b/examples/with-markdown/src/layouts/main.astro
@@ -1,4 +1,6 @@
---
+import '../styles/global.css';
+
const { content } = Astro.props;
---
@@ -9,9 +11,6 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title>
- <style global>
- @import "../styles/global.css";
- </style>
</head>
<body>
<slot />
diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro
index 5aba10e8a..ad3fb4e26 100644
--- a/examples/with-nanostores/src/pages/index.astro
+++ b/examples/with-nanostores/src/pages/index.astro
@@ -1,4 +1,8 @@
---
+// Style Imports
+import '../styles/global.css';
+import '../styles/home.css';
+
// Component Imports
import AdminsReact from '../components/AdminsReact.jsx';
import AdminsSvelte from '../components/AdminsSvelte.svelte';
@@ -17,11 +21,6 @@ import AdminsSolid from '../components/AdminsSolid.jsx';
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
- <style global>
- @import "../styles/global.css";
- @import "../styles/home.css";
- </style>
-
<style>
header {
display: flex;
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
index 6a5ca8f96..ba346e6c2 100644
--- a/examples/with-tailwindcss/src/pages/index.astro
+++ b/examples/with-tailwindcss/src/pages/index.astro
@@ -1,8 +1,7 @@
---
// Component Imports
import Button from '../components/Button.astro';
-// Imports the global styles to be inlined in the <head>
-import styles from '../styles/global.css';
+import '../styles/global.css';
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
@@ -13,7 +12,6 @@ import styles from '../styles/global.css';
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Astro + TailwindCSS</title>
- <style set:html={styles}></style>
</head>
<body>
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-10 11:51:07 +0000