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>
withastro · Mar 9, 2022 · 4b53a53 · 4b53a53
1 parent 43a5c06
commit 4b53a53
Show file tree

Hide file tree

Showing 16 changed files with 81 additions and 86 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,12 +1,12 @@
 ---
+import '../styles/main.scss';
 import Time from '../components/Time.jsx';
 ---
 
 <html lang="en">
  <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>