diff options
143 files changed, 2032 insertions, 259 deletions
diff --git a/.changeset/config.json b/.changeset/config.json index c9c7d3d7d..972a1568f 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,5 +6,5 @@ "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", - "ignore": ["@example/*", "www"] + "ignore": ["@example/*", "www", "docs-www"] } diff --git a/.changeset/nervous-pillows-sing.md b/.changeset/nervous-pillows-sing.md new file mode 100644 index 000000000..851749d0a --- /dev/null +++ b/.changeset/nervous-pillows-sing.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Improve error handling within `.astro` files (#526) diff --git a/.changeset/orange-grapes-divide.md b/.changeset/orange-grapes-divide.md new file mode 100644 index 000000000..1f0f890f5 --- /dev/null +++ b/.changeset/orange-grapes-divide.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Updates collections to match URLs by exact template filename diff --git a/.changeset/silly-birds-drive.md b/.changeset/silly-birds-drive.md new file mode 100644 index 000000000..a845151cc --- /dev/null +++ b/.changeset/silly-birds-drive.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.changeset/two-birds-jog.md b/.changeset/two-birds-jog.md new file mode 100644 index 000000000..67469f174 --- /dev/null +++ b/.changeset/two-birds-jog.md @@ -0,0 +1,6 @@ +--- +'@astrojs/example-blog': minor +'@astrojs/example-blog-multiple-authors': minor +--- + +Update blog example template diff --git a/examples/astro-nanostores/.gitignore b/examples/blog-multiple-authors/.gitignore index d436c6dad..d436c6dad 100644 --- a/examples/astro-nanostores/.gitignore +++ b/examples/blog-multiple-authors/.gitignore diff --git a/examples/astro-markdown/.npmrc b/examples/blog-multiple-authors/.npmrc index 0cc653b2c..0cc653b2c 100644 --- a/examples/astro-markdown/.npmrc +++ b/examples/blog-multiple-authors/.npmrc diff --git a/examples/blog/CHANGELOG.md b/examples/blog-multiple-authors/CHANGELOG.md index 70acc9610..70acc9610 100644 --- a/examples/blog/CHANGELOG.md +++ b/examples/blog-multiple-authors/CHANGELOG.md diff --git a/examples/astro-nanostores/README.md b/examples/blog-multiple-authors/README.md index ad3eab67e..59df007d1 100644 --- a/examples/astro-nanostores/README.md +++ b/examples/blog-multiple-authors/README.md @@ -1,6 +1,13 @@ -# Welcome to [Astro](https://astro.build) - [nanostores](https://github.com/nanostores/nanostores) +# Astro Blog Example -This is a test of a shared store between components from different frameworks/libs using [nanostores](https://github.com/nanostores/nanostores). +> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun! + +Features: + +- ✅ SEO-friendly setup with canonical URLs and OpenGraph data +- ✅ Full Markdown support +- ✅ RSS 2.0 generation +- ✅ Sitemap.xml generation ## 🚀 Project Structure diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs new file mode 100644 index 000000000..d72db6491 --- /dev/null +++ b/examples/blog-multiple-authors/astro.config.mjs @@ -0,0 +1,14 @@ +export default { + // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. + // pages: './src/pages', // Path to Astro components, pages, and data + // dist: './dist', // When running `astro build`, path to final static output + // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. + buildOptions: { + site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. + // sitemap: true, // Generate sitemap (set to "false" to disable) + }, + devOptions: { + // port: 3000, // The port to run the dev server on. + // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + }, +}; diff --git a/examples/astro-markdown/package.json b/examples/blog-multiple-authors/package.json index 5565b0b14..6cb6aa951 100644 --- a/examples/astro-markdown/package.json +++ b/examples/blog-multiple-authors/package.json @@ -1,5 +1,5 @@ { - "name": "@astrojs/markdown-example", + "name": "@example/blog-multiple-authors", "version": "0.0.1", "private": true, "scripts": { diff --git a/examples/blog/public/authors/don.jpg b/examples/blog-multiple-authors/public/authors/don.jpg Binary files differindex 4419679de..4419679de 100644 --- a/examples/blog/public/authors/don.jpg +++ b/examples/blog-multiple-authors/public/authors/don.jpg diff --git a/examples/blog/public/authors/sancho.jpg b/examples/blog-multiple-authors/public/authors/sancho.jpg Binary files differindex 2c2b0c6bd..2c2b0c6bd 100644 --- a/examples/blog/public/authors/sancho.jpg +++ b/examples/blog-multiple-authors/public/authors/sancho.jpg diff --git a/examples/astro-nanostores/public/favicon.svg b/examples/blog-multiple-authors/public/favicon.svg index 542f90aec..542f90aec 100644 --- a/examples/astro-nanostores/public/favicon.svg +++ b/examples/blog-multiple-authors/public/favicon.svg diff --git a/examples/blog-multiple-authors/public/global.scss b/examples/blog-multiple-authors/public/global.scss new file mode 100644 index 000000000..d5891f6b4 --- /dev/null +++ b/examples/blog-multiple-authors/public/global.scss @@ -0,0 +1,25 @@ +body { + font-family: 'Spectral', serif; + line-height: 1.4; +} + +p { + line-height: 2; +} + +a { + color: crimson; +} + +img { + max-width: 100%; + height: auto; +} + +.wrapper { + max-width: 60rem; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; +} diff --git a/examples/blog/public/images/chapter-01.jpg b/examples/blog-multiple-authors/public/images/chapter-01.jpg Binary files differindex a848d3059..a848d3059 100644 --- a/examples/blog/public/images/chapter-01.jpg +++ b/examples/blog-multiple-authors/public/images/chapter-01.jpg diff --git a/examples/blog/public/images/chapter-02.jpg b/examples/blog-multiple-authors/public/images/chapter-02.jpg Binary files differindex 0a18c689d..0a18c689d 100644 --- a/examples/blog/public/images/chapter-02.jpg +++ b/examples/blog-multiple-authors/public/images/chapter-02.jpg diff --git a/examples/blog/public/images/chapter-03.jpg b/examples/blog-multiple-authors/public/images/chapter-03.jpg Binary files differindex e3b6823ce..e3b6823ce 100644 --- a/examples/blog/public/images/chapter-03.jpg +++ b/examples/blog-multiple-authors/public/images/chapter-03.jpg diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro index fbdaa2965..fbdaa2965 100644 --- a/examples/blog/src/components/MainHead.astro +++ b/examples/blog-multiple-authors/src/components/MainHead.astro diff --git a/examples/blog/src/components/Nav.astro b/examples/blog-multiple-authors/src/components/Nav.astro index a7ef0985f..a7ef0985f 100644 --- a/examples/blog/src/components/Nav.astro +++ b/examples/blog-multiple-authors/src/components/Nav.astro diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog-multiple-authors/src/components/Pagination.astro index 401931c07..401931c07 100644 --- a/examples/blog/src/components/Pagination.astro +++ b/examples/blog-multiple-authors/src/components/Pagination.astro diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index b126ca2fb..b126ca2fb 100644 --- a/examples/blog/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro diff --git a/examples/blog/src/data/authors.json b/examples/blog-multiple-authors/src/data/authors.json index e958e7cd1..e958e7cd1 100644 --- a/examples/blog/src/data/authors.json +++ b/examples/blog-multiple-authors/src/data/authors.json diff --git a/examples/blog/src/layouts/post.astro b/examples/blog-multiple-authors/src/layouts/post.astro index c8f394892..c8f394892 100644 --- a/examples/blog/src/layouts/post.astro +++ b/examples/blog-multiple-authors/src/layouts/post.astro diff --git a/examples/blog/src/pages/$author.astro b/examples/blog-multiple-authors/src/pages/$author.astro index e06d8bc94..ff80344e4 100644 --- a/examples/blog/src/pages/$author.astro +++ b/examples/blog-multiple-authors/src/pages/$author.astro @@ -8,7 +8,6 @@ import Pagination from '../components/Pagination.astro'; let title = 'Don’s Blog'; let description = 'An example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; -const author = authorData[collection.params.author]; // collection import authorData from '../data/authors.json'; @@ -42,6 +41,8 @@ export async function createCollection() { routes, }; } + +const author = authorData[collection.params.author]; --- <html> diff --git a/examples/blog/src/pages/$posts.astro b/examples/blog-multiple-authors/src/pages/$posts.astro index 0975e8007..0975e8007 100644 --- a/examples/blog/src/pages/$posts.astro +++ b/examples/blog-multiple-authors/src/pages/$posts.astro diff --git a/examples/blog/src/pages/about.astro b/examples/blog-multiple-authors/src/pages/about.astro index d7a219057..d7a219057 100644 --- a/examples/blog/src/pages/about.astro +++ b/examples/blog-multiple-authors/src/pages/about.astro diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro new file mode 100644 index 000000000..a4407378c --- /dev/null +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -0,0 +1,43 @@ +--- +import MainHead from '../components/MainHead.astro'; +import Nav from '../components/Nav.astro'; +import PostPreview from '../components/PostPreview.astro'; +import Pagination from '../components/Pagination.astro'; + +// page +let title = 'Don’s Blog'; +let description = 'An example blog on Astro'; + +// collection +// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc. +// so we show a preview of posts here, but actually paginate from $posts.astro +import authorData from '../data/authors.json'; + +let allPosts = Astro.fetchContent('./post/*.md'); +allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); +let firstPage = allPosts.slice(0, 2); +--- + +<html> + <head> + <title>{title}</title> + <MainHead + title={title} + description={description} + image={firstPage[0].image} + canonicalURL={Astro.request.canonicalURL.href} + /> + </head> + + <body> + <Nav /> + + <main class="wrapper"> + {firstPage.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + </main> + + <footer> + <Pagination nextUrl="/posts/2" /> + </footer> + </body> +</html> diff --git a/examples/blog/src/pages/post/chapter-i.md b/examples/blog-multiple-authors/src/pages/post/chapter-i.md index 9a6fa14ea..9a6fa14ea 100644 --- a/examples/blog/src/pages/post/chapter-i.md +++ b/examples/blog-multiple-authors/src/pages/post/chapter-i.md diff --git a/examples/blog/src/pages/post/chapter-ii.md b/examples/blog-multiple-authors/src/pages/post/chapter-ii.md index eda406b42..eda406b42 100644 --- a/examples/blog/src/pages/post/chapter-ii.md +++ b/examples/blog-multiple-authors/src/pages/post/chapter-ii.md diff --git a/examples/blog/src/pages/post/chapter-iii.md b/examples/blog-multiple-authors/src/pages/post/chapter-iii.md index 0b799bc61..0b799bc61 100644 --- a/examples/blog/src/pages/post/chapter-iii.md +++ b/examples/blog-multiple-authors/src/pages/post/chapter-iii.md diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index d72db6491..ef2cd38aa 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -1,14 +1,5 @@ export default { - // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. - // pages: './src/pages', // Path to Astro components, pages, and data - // dist: './dist', // When running `astro build`, path to final static output - // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. buildOptions: { - site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. - // sitemap: true, // Generate sitemap (set to "false" to disable) + sitemap: true, }, - devOptions: { - // port: 3000, // The port to run the dev server on. - // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' - }, -}; +} diff --git a/examples/blog/package.json b/examples/blog/package.json index 00ec77f07..e57fbf6f2 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -1,13 +1,13 @@ { - "name": "@astrojs/example-blog", - "version": "0.0.2", + "name": "@example/blog", + "version": "0.0.1", "private": true, "scripts": { "start": "astro dev", "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/blog/public/assets/blog/introducing-astro.jpg b/examples/blog/public/assets/blog/introducing-astro.jpg Binary files differnew file mode 100644 index 000000000..c58aacf66 --- /dev/null +++ b/examples/blog/public/assets/blog/introducing-astro.jpg diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.scss new file mode 100644 index 000000000..afea09108 --- /dev/null +++ b/examples/blog/public/blog.scss @@ -0,0 +1,272 @@ +:root { + --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; + --font-body: "IBM Plex Sans", var(--font-fallback); + --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, + "Courier New", Courier, monospace; + + --color-white: #FFF; + --color-black: #000014; + + --color-gray-50: #F9FAFB; + --color-gray-100: #F3F4F6; + --color-gray-200: #E5E7EB; + --color-gray-300: #D1D5DB; + --color-gray-400: #9CA3AF; + --color-gray-500: #6B7280; + --color-gray-600: #4B5563; + --color-gray-700: #374151; + --color-gray-800: #1F2937; + --color-gray-900: #111827; + + --color-blue: #3894FF; + --color-blue-rgb: 56,148,255; + --color-green: #17C083; + --color-green-rgb: 23,192,131; + --color-orange: #FF5D01; + --color-orange-rgb: 255,93,1; + --color-purple: #882DE7; + --color-purple-rgb: 136,45,231; + --color-red: #FF1639; + --color-red-rgb: 255,22,57; + --color-yellow: #FFBE2D; + --color-yellow-rgb: 255,190,45; +} + +:root { + color-scheme: light; + --theme-accent: var(--color-orange); + --theme-accent-rgb: var(--color-orange-rgb); + --theme-accent-opacity: 0.1; + --theme-divider: var(--color-gray-100); + --theme-text: var(--color-gray-800); + --theme-text-light: var(--color-gray-600); + --theme-text-lighter: var(--color-gray-400); + --theme-bg: var(--color-white); + --theme-bg-offset: var(--color-gray-100); + --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); + --theme-code-inline-bg: var(--color-gray-100); + --theme-code-text: var(--color-gray-100); + --theme-code-bg: var(--color-gray-700); +} + +body { + background: var(--theme-bg); + color: var(--theme-text); +} + +:root.theme-dark { + color-scheme: dark; + --theme-accent-opacity: 0.3; + --theme-divider: var(--color-gray-900); + --theme-text: var(--color-gray-200); + --theme-text-light: var(--color-gray-400); + --theme-text-lighter: var(--color-gray-600); + --theme-bg: var(--color-black); + --theme-bg-offset: var(--color-gray-900); + --theme-code-inline-bg: var(--color-gray-800); + --theme-code-text: var(--color-gray-200); + --theme-code-bg: var(--color-gray-900); +} + +::selection { + color: var(--theme-accent); + background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); +} + +* { + box-sizing: border-box; + margin: 0; +} + +:root { + --user-font-scale: 1rem - 16px; + --max-width: calc(100% - 2rem); +} + +@media (min-width: 50em) { + :root { + --max-width: 40em; + } +} + +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 { + 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 > article { + grid-column: 2; +} + +nav ul { + list-style: none; + padding: 0; +} + +/* Typography */ +:is(h1, h2, h3, h4, h5, h6) { + margin-bottom: 1.38rem; + font-weight: 400; + line-height: 1.3; +} + +:is(h1, h2) { + max-width: 40ch; +} + +:is(h2, h3):not(:first-child) { + margin-top: 3rem; +} + +h1 { + font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); +} + +h2 { + font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); +} + +h3 { + font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); +} + +h4 { + font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); +} + +h5 { + font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); +} + +p { + color: var(--theme-text-light); +} + +small, .text_small { + font-size: 0.833rem; +} + +a { + color: var(--theme-accent); + font-weight: 400; + text-underline-offset: 0.08em; + text-decoration: none; + align-items: center; + gap: 0.5rem; +} + +a > code:not([class*="language"]) { + position: relative; + color: var(--theme-accent); + background: transparent; + text-underline-offset: var(--padding-block); +} + +a > code:not([class*="language"])::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + background: var(--theme-accent); + opacity: var(--theme-accent-opacity); + border-radius: var(--border-radius); +} + +a:hover, +a:focus { + text-decoration: underline; +} + +a:focus { + outline: 2px solid currentColor; + outline-offset: 0.25em; +} + +strong { + font-weight: 600; + color: inherit; +} + +/* Supporting Content */ + +code:not([class*="language"]) { + --border-radius: 3px; + --padding-block: 0.2rem; + --padding-inline: 0.33rem; + + font-family: var(--font-mono); + font-size: .85em; + color: inherit; + background-color: var(--theme-code-inline-bg); + padding: var(--padding-block) var(--padding-inline); + margin: calc(var(--padding-block) * -1) -0.125em; + border-radius: var(--border-radius); +} + +pre > code:not([class*="language"]) { + background-color: transparent; + padding: 0; + margin: 0; + border-radius: 0; + color: inherit; +} + +pre { + position: relative; + background-color: var(--theme-code-bg); + color: var(--theme-code-text); + --padding-block: 1rem; + --padding-inline: 2rem; + padding: var(--padding-block) var(--padding-inline); + padding-right: calc(var(--padding-inline) * 2); + margin-left: calc(50vw - var(--padding-inline)); + transform: translateX(-50vw); + + line-height: 1.414; + width: calc(100vw + (var(--padding-inline) * 2)); + max-width: calc(100% + (var(--padding-inline) * 2)); + overflow-y: hidden; + overflow-x: auto; +} + +@media (min-width: 37.75em) { + pre { + --padding-inline: 1.25rem; + border-radius: 8px; + } +} + +.flex { + display: flex; + align-items: center; +} + +img.cover { + width: 100%; + max-height: 50vh; + object-fit: cover; +} diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss index d5891f6b4..c0d03a8fd 100644 --- a/examples/blog/public/global.scss +++ b/examples/blog/public/global.scss @@ -1,25 +1,99 @@ -body { - font-family: 'Spectral', serif; - line-height: 1.4; +:root { + --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, + "Courier New", Courier, monospace; + --color-green: #17c083; } -p { - line-height: 2; +* { + box-sizing: border-box; + margin: 0; } - -a { - color: crimson; +html { + display: grid; + width: 100%; + max-width: 100vw; + overflow: hidden; + height: 100%; + background-color: #000014; } - -img { - max-width: 100%; - height: auto; +html, body { + padding: 0; + font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); + font-family: var(--font-sans); + font-weight: 400; + background-image: radial-gradient( + 87.7% 87.7% at 85.6% 18.14%, + #111827 0%, + #000014 100% + ); + background-repeat: no-repeat; + color: #f3f4f6; +} +body { + position: relative; + display: grid; + place-items: center; + min-width: 100%; + max-width: 100vw; + min-height: 100vh; + overflow-x: hidden; } +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} +a { + position: relative; + text-decoration: none; + color: var(--color-green); + padding: 0.05em 0.125em; + margin: -0.05em -0.125em; + transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1); + z-index: 0; + display: inline-block; + + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + + &::before { + transform: scaleY(1); + background: var(--color-green); + } + } + + &:visited { + // color: var(--color-green); + color: var(--color-green); + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + } + } -.wrapper { - max-width: 60rem; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + &::before { + transform-origin: bottom center; + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + inset: 0; + background: var(--color-green); + pointer-events: none; + transform: scaleY(0.05); + transition: transform 120ms cubic-bezier(0.23, 1, 0.320, 1), + background 120ms cubic-bezier(0.23, 1, 0.320, 1); + z-index: -1; + } } diff --git a/examples/blog/public/social.jpg b/examples/blog/public/social.jpg Binary files differnew file mode 100644 index 000000000..906c76144 --- /dev/null +++ b/examples/blog/public/social.jpg diff --git a/examples/blog/public/social.png b/examples/blog/public/social.png Binary files differnew file mode 100644 index 000000000..1399856f1 --- /dev/null +++ b/examples/blog/public/social.png diff --git a/examples/blog/src/components/Author.astro b/examples/blog/src/components/Author.astro new file mode 100644 index 000000000..87cb48c45 --- /dev/null +++ b/examples/blog/src/components/Author.astro @@ -0,0 +1,16 @@ +--- +export interface Props { + name: string; + href: string; +} + +const { name, href } = Astro.props; +--- +<style> + .author { + margin-bottom: 0.75rem; + } +</style> +<div class="author"> + <p><a href={href}>{name}</a></p> +</div> diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro new file mode 100644 index 000000000..4905e1b7a --- /dev/null +++ b/examples/blog/src/components/BaseHead.astro @@ -0,0 +1,36 @@ +--- +export interface Props { + title: string; + description: string; + permalink: string; +} +const { title, description, permalink } = Astro.props; +--- + +<meta charset="utf-8" /> +<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> + +<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + +<!-- Primary Meta Tags --> +<title>{title}</title> +<meta name="title" content={title} /> +<meta name="description" content={description} /> + +<!-- Open Graph / Facebook --> +<meta property="og:type" content="website" /> +<meta property="og:url" content={permalink} /> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> +<meta property="og:image" content="https://astro.build/social.jpg?v=1" /> + +<!-- Twitter --> +<meta property="twitter:card" content="summary_large_image" /> +<meta property="twitter:url" content={permalink} /> +<meta property="twitter:title" content={title} /> +<meta property="twitter:description" content={description} /> +<meta property="twitter:image" content="https://astro.build/social.jpg?v=1" /> + +<!-- 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"> diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro new file mode 100644 index 000000000..347ce3a05 --- /dev/null +++ b/examples/blog/src/components/BlogHeader.astro @@ -0,0 +1,90 @@ +<header class="layout"> + <article> + <h1> + <a href="/"> + <svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { + fill: #ff5d01; + } + #a { + fill: #000014; + } + </style> + <title>Logo</title> + <path + id="a" + fill-rule="evenodd" + clip-rule="evenodd" + d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" + /> + <path + id="flame" + fill-rule="evenodd" + clip-rule="evenodd" + d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" + /> + </svg> + <span>My Blog</span> + </a> + </h1> + </article> +</header> + +<style> +header { + padding-top: 1rem; + padding-bottom: 1rem; + height: 5rem; +} +article { + display: flex; + align-items: center; + justify-content: space-between; +} +.header-subitem { + display: flex; + flex-grow: 0; + gap: 0.5em; + align-items: center; + justify-content: center; + color: var(--theme-text-lighter); + font-size: initial; + padding: 0.5rem; +} +.header-subitem:hover { + color: var(--theme-accent); +} +.header-subitem svg { + width: 1.5rem; + height: 1.5rem; +} + +@media (max-width: 32em) { + .header-subitem { + display: none; + } +} + +h1 { + margin: 0; + font-size: 1.5rem; + max-width: 100%; + display: flex; + flex-grow: 1; +} + +.logo { + transform: translateY(0.25rem); +} + +svg { + width: 2.5rem; + height: 2.5rem; +} + +h1 a { + text-decoration: none; + display: inline-flex; +} +</style> diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro new file mode 100644 index 000000000..95116b2e7 --- /dev/null +++ b/examples/blog/src/components/BlogPost.astro @@ -0,0 +1,86 @@ +--- +import Author from './Author.astro'; + +export interface Props { + title: string; + author: string; + publishDate: string; + heroImage: string; +} + +const { title, author, publishDate, heroImage } = Astro.props; +--- + +<div class="layout"> + <article class="content"> + <div> + <header> + {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />} + <p class="publish-date">{publishDate}</p> + <h1 class="title">{title}</h1> + <Author name="@FredKSchott" url="https://twitter.com/FredKSchott" /> + </header> + <main> + <slot /> + </main> + </article> +</div> + +<style> +.hero-image { + width: 100vw; + object-fit: cover; + object-position: center; + margin-top: 2rem; + margin-bottom: 4rem; + max-width: 1280px; +} + +@media (max-width: 50em) { + .hero-image { + height: 260px; + margin-top: 0; + margin-bottom: 2rem; + } +} + +.content { + margin-bottom: 8rem; +} + +.content :global(main > * + *) { + margin-top: 1rem; +} + +.content :global(h2) { + margin-top: 4rem; +} + +header { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); +} + +.title, +.author, +.publish-date { + margin: 0; +} + +.publish-date, +.author { + color: var(--theme-text-lighter); +} + +.title { + font-size: 2.25rem; + font-weight: 700; +} +</style> diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro new file mode 100644 index 000000000..9e698fb6e --- /dev/null +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -0,0 +1,57 @@ +--- +export interface Props { + post: any; +} + +const { post } = Astro.props; +--- +<article class="post-preview"> + <header> + <h3 class="publish-date">{post.publishDate}</h3> + <a href={post.url}><h1 class="title">{post.title}</h1></a> + </header> + <main> + <p>{post.description}</p> + <a href={post.url}>Read more</a> + </main> +</article> + +<style> +.content :global(main > * + *) { + margin-top: 1rem; +} + +.post-preview { + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); +} + +header { + display: flex; + flex-direction: column; + text-align: left; + align-items: flex-start; + justify-content: center; + + padding-bottom: 2rem; +} + +.title, +.author, +.publish-date { + margin: 0; +} + +.publish-date, +.author { + font-size: 1.25rem; + color: var(--theme-text-lighter); +} + +.title { + font-size: 2.25rem; + font-weight: 700; + color: var(--theme-text); +} +</style> diff --git a/examples/blog/src/components/Logo.astro b/examples/blog/src/components/Logo.astro new file mode 100644 index 000000000..7926dab4d --- /dev/null +++ b/examples/blog/src/components/Logo.astro @@ -0,0 +1,56 @@ +<svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z" fill="white" /> + <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="#FF5D01" /> + <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="url(#paint1_linear)" /> + <path d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z" fill="white" /> + <path d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z" fill="white" /> + <path d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z" fill="white" /> + <path d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z" fill="white" /> + <path d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z" fill="white" /> + <defs> + <linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse"> + <stop stop-color="#FF1639" /> + <stop offset="1" stop-color="#FF1639" stop-opacity="0" /> + </linearGradient> + </defs> +</svg> + +<style lang="scss"> + .logo { + margin: 2rem auto; + } + + .title { + font-family: var(--font-sans); + font-size: 1rem; + } + .title svg { + margin-right: -100%; + } + .title svg text { + font-size: 16px; + font-family: var(--font-sans); + } + .title svg text.span { + fill: white; + font-size: 16.2px; + transform: translate(0, 18px); + } + .title svg text.em { + fill: var(--color-green); + transform: translate(0, 36px); + } + + @media (min-width: 40em) { + .title svg { + margin-right: 0; + margin-bottom: -40px; + } + .title svg text.span { + font-size: 16px; + } + .title svg text.em { + transform: translate(190px, 18px); + } + } +</style> diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro new file mode 100644 index 000000000..e6b644789 --- /dev/null +++ b/examples/blog/src/layouts/BlogPost.astro @@ -0,0 +1,23 @@ +--- +import { Markdown } from 'astro/components'; +import BaseHead from '../components/BaseHead.astro'; +import BlogHeader from '../components/BlogHeader.astro'; +import BlogPost from '../components/BlogPost.astro'; + +const {content} = Astro.props; +const {title, description, publishDate, author, heroImage, permalink} = content; +--- +<html> + <head> + <BaseHead title={title} description={description} permalink={permalink} /> + <link rel="stylesheet" href="/blog.css" /> + </head> + + <body> + <BlogHeader /> + <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}> + <slot /> + </BlogPost> + </body> +</html> + diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index a4407378c..c61340fdd 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -1,43 +1,77 @@ --- -import MainHead from '../components/MainHead.astro'; -import Nav from '../components/Nav.astro'; -import PostPreview from '../components/PostPreview.astro'; -import Pagination from '../components/Pagination.astro'; - -// page -let title = 'Don’s Blog'; -let description = 'An example blog on Astro'; - -// collection -// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc. -// so we show a preview of posts here, but actually paginate from $posts.astro -import authorData from '../data/authors.json'; - -let allPosts = Astro.fetchContent('./post/*.md'); -allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); -let firstPage = allPosts.slice(0, 2); +import BaseHead from '../components/BaseHead.astro'; +import BlogHeader from '../components/BlogHeader.astro'; +import BlogPostPreview from '../components/BlogPostPreview.astro'; + +let title = 'Example Blog'; +let description = 'The perfect starter for your perfect blog.'; +let permalink = 'https://example.com/'; + +let allPosts = Astro.fetchContent('./posts/*.md'); +allPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date)); --- <html> <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={firstPage[0].image} - canonicalURL={Astro.request.canonicalURL.href} - /> - </head> + <BaseHead title={title} description={description} permalink={permalink} /> + <link rel="stylesheet" href="/blog.css" /> - <body> - <Nav /> + <style> + body { + width: 100%; + display: grid; + grid-template-rows: 3.5rem 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + + header { + width: 100%; + height: 100%; + background-color: var(--theme-bg-offset); + display: flex; + align-items: center; + justify-content: center; + } + + .content { + margin-top: 4rem; + margin-bottom: 8rem; + } - <main class="wrapper"> - {firstPage.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} - </main> + .content :global(main > * + *) { + margin-top: 1rem; + } - <footer> - <Pagination nextUrl="/posts/2" /> - </footer> + .intro { + padding-bottom: 4rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } + + .intro > * { + margin: 0; + } + + .latest { + font-size: 2.5rem; + font-weight: 700; + } + </style> + </head> + + <body> + <BlogHeader /> + <div class="layout"> + <article class="content"> + <section class="intro"> + <h1 class="latest">{title}</h1> + <p>{description}</p> + </section> + <section> + {allPosts.map(p => <BlogPostPreview post={p} />)} + </section> + </article> + </div> </body> </html> diff --git a/examples/blog/src/pages/posts/introducing-astro.md b/examples/blog/src/pages/posts/introducing-astro.md new file mode 100644 index 000000000..3f30087a1 --- /dev/null +++ b/examples/blog/src/pages/posts/introducing-astro.md @@ -0,0 +1,89 @@ +--- +title: 'Introducing Astro: Ship Less JavaScript' +description: "We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience." +publishDate: 'Tuesday, June 8 2021' +author: 'fred' +heroImage: '/social.jpg' +layout: '../../layouts/BlogPost.astro' +--- + +There's a simple secret to building a faster website — _just ship less_. + +Unfortunately, modern web development has been trending in the opposite direction—towards _more._ More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly. + +Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including: + +- **Bring Your Own Framework (BYOF):** Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript. +- **100% Static HTML, No JS:** Astro renders your entire page to static HTML, removing all JavaScript from your final build by default. +- **On-Demand Components:** Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it. +- **Fully-Featured:** Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages. +- **SEO Enabled:** Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication. + +This post marks the first public beta release of Astro. **Missing features and bugs are still to be expected at this early stage.** There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year. + +<Note> + To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) +</Note> + +## Getting Started + +Starting a new project in Astro is easy: + +```shell +# create your project +mkdir new-project-directory +cd new-project-directory +npm init astro + +# install your dependencies +npm install + +# start the dev server and open your browser +npm start +``` + +> To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides). + +## How Astro Works + +Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. + +In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page. No monolithic JavaScript application required, just static HTML that loads as fast as possible in the browser regardless of how many UI components you used to generate it. + +Of course, sometimes client-side JavaScript is inevitable. Image carousels, shopping carts, and auto-complete search bars are just a few examples of things that require some JavaScript to run in the browser. This is where Astro really shines: When a component needs some JavaScript, Astro only loads that one component (and any dependencies). The rest of your site continues to exist as static, lightweight HTML. + +In other full-stack web frameworks this level of per-component optimization would be impossible without loading the entire page in JavaScript, delaying interactivity. In Astro, this kind of [partial hydration](https://addyosmani.com/blog/rehydration/) is built into the tool itself. + +You can even [automatically defer components](https://codepen.io/jonneal/full/ZELvMvw) to only load once they become visible on the page with the `:visible` modifier. + +This new approach to web architecture is called [islands architecture](https://jasonformat.com/islands-architecture/). We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites. + +> To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) + +## Embracing the Pit of Success + +<BlockQuote author="Jeff Atwood" source="Falling Into The Pit of Success" sourceHref="https://blog.codinghorror.com/falling-into-the-pit-of-success/"> + A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things +</BlockQuote> + +Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website. + +Astro's main design principle is to lead developers into what [Rico Mariani](https://twitter.com/ricomariani) dubbed "the pit of success". It is our goal to build every site "fast by default" while also delivering a familiar, modern developer experience. + +By building your site to static HTML by default, Astro makes it difficult (but never impossible 😉) to build a slow site. + +## Long-Term Sustainability + +Astro is built by the team of open source developers behind [Snowpack](https://snowpack.dev) and [Skypack](https://skypack.dev), with additional contributions from the community. + +**Astro is and always will be free.** It is an open source project released under the [MIT license](https://github.com/snowpackjs/astro/blob/main/LICENSE). + +We care deeply about building a more sustainable future for open source software. At the same time, we need to support Astro's development long-term. This requires money (donations alone aren't enough.) + +We're inspired by the early success of projects like [Tailwind](https://tailwindcss.com/), [Rome](https://rome.tools/), [Remix](https://remix.run/), [Ionic](https://ionicframework.com/), and others who are experimenting with long-term financial sustainability on top of Open Source. Over the next year we'll be exploring how we can create a sustainable business to support a 100% free, open source Astro for years to come. + +If your company is as excited about Astro as we are, [we'd love to hear from you.](https://astro.build/chat) + +Finally, I'd like to give a **HUGE** thanks to the 300+ developers who joined our earliest private beta. Your feedback has been essential in shaping Astro into the tool it is today. If you're interested in getting involved (or just following along with development) please [join us on Discord.](https://astro.build/chat) + +> To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) diff --git a/examples/docs/package.json b/examples/docs/package.json index 34ade97ce..f5dcad1b5 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -1,13 +1,13 @@ { - "name": "@astrojs/docs-template", - "version": "0.0.2", + "name": "@example/docs", + "version": "0.0.1", "private": true, "scripts": { "start": "astro dev", "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/framework-multiple/.gitignore b/examples/framework-multiple/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-multiple/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/astro-nanostores/.npmrc b/examples/framework-multiple/.npmrc index 0cc653b2c..0cc653b2c 100644 --- a/examples/astro-nanostores/.npmrc +++ b/examples/framework-multiple/.npmrc diff --git a/examples/framework-multiple/README.md b/examples/framework-multiple/README.md new file mode 100644 index 000000000..42f8e2b1f --- /dev/null +++ b/examples/framework-multiple/README.md @@ -0,0 +1,7 @@ +# Using Preact with Astro + +This example showcases Astro's built-in support for multiple frameworks ([React](https://reactjs.org), [Preact](https://preactjs.com), [Svelte](https://svelte.dev), and [Vue (`v3.x`)](https://v3.vuejs.org/)). + +No configuration is needed to enable these frameworks—just start writing components in `src/components`. + +> **Note**: If used, components _must_ include a JSX factory (ex. `import React from "react"`, `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/kitchen-sink/package.json b/examples/framework-multiple/package.json index b1254eb7c..81f68ef13 100644 --- a/examples/kitchen-sink/package.json +++ b/examples/framework-multiple/package.json @@ -1,13 +1,13 @@ { - "name": "@astrojs/kitchen-sink-example", + "name": "@example/framework-multiple", + "version": "0.0.1", "private": true, - "version": "1.0.0", "scripts": { "start": "astro dev", "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/kitchen-sink/src/components/A.astro b/examples/framework-multiple/src/components/A.astro index 702a4be35..702a4be35 100644 --- a/examples/kitchen-sink/src/components/A.astro +++ b/examples/framework-multiple/src/components/A.astro diff --git a/examples/kitchen-sink/src/components/B.astro b/examples/framework-multiple/src/components/B.astro index 9022cb372..9022cb372 100644 --- a/examples/kitchen-sink/src/components/B.astro +++ b/examples/framework-multiple/src/components/B.astro diff --git a/examples/kitchen-sink/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index be4ddb6ce..be4ddb6ce 100644 --- a/examples/kitchen-sink/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx diff --git a/examples/kitchen-sink/src/components/ReactCounter.jsx b/examples/framework-multiple/src/components/ReactCounter.jsx index 06d8f2513..06d8f2513 100644 --- a/examples/kitchen-sink/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx diff --git a/examples/astro-markdown/src/components/SvelteCounter.svelte b/examples/framework-multiple/src/components/SvelteCounter.svelte index 8d6b3f5e1..8d6b3f5e1 100644 --- a/examples/astro-markdown/src/components/SvelteCounter.svelte +++ b/examples/framework-multiple/src/components/SvelteCounter.svelte diff --git a/examples/astro-markdown/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index 8179fb1d9..8179fb1d9 100644 --- a/examples/astro-markdown/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue diff --git a/examples/kitchen-sink/src/components/index.ts b/examples/framework-multiple/src/components/index.ts index 4077dcacd..4077dcacd 100644 --- a/examples/kitchen-sink/src/components/index.ts +++ b/examples/framework-multiple/src/components/index.ts diff --git a/examples/kitchen-sink/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 3fbef72e0..3fbef72e0 100644 --- a/examples/kitchen-sink/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro diff --git a/examples/framework-preact/.gitignore b/examples/framework-preact/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-preact/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/kitchen-sink/.npmrc b/examples/framework-preact/.npmrc index 0cc653b2c..0cc653b2c 100644 --- a/examples/kitchen-sink/.npmrc +++ b/examples/framework-preact/.npmrc diff --git a/examples/framework-preact/README.md b/examples/framework-preact/README.md new file mode 100644 index 000000000..d948d9a4a --- /dev/null +++ b/examples/framework-preact/README.md @@ -0,0 +1,7 @@ +# Using Preact with Astro + +This example showcases Astro's built-in support for [Preact](https://preactjs.com/). + +No configuration is needed to enable Preact support—just start writing Preact components in `src/components`. + +> **Note**: If used, components _must_ include the JSX factory (ex. `import { h } from "preact"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json new file mode 100644 index 000000000..9b20697c7 --- /dev/null +++ b/examples/framework-preact/package.json @@ -0,0 +1,15 @@ +{ + "name": "@example/framework-preact", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx new file mode 100644 index 000000000..7c520b167 --- /dev/null +++ b/examples/framework-preact/src/components/Counter.tsx @@ -0,0 +1,19 @@ +import { h, Fragment } from 'preact'; +import { useState } from 'preact/hooks'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); +} diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro new file mode 100644 index 000000000..66fa9e84b --- /dev/null +++ b/examples/framework-preact/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.jsx' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello Preact!</h1> + </Counter:visible> + </main> + </body> +</html> diff --git a/examples/framework-react/.gitignore b/examples/framework-react/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-react/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/tailwindcss/.npmrc b/examples/framework-react/.npmrc index 0cc653b2c..0cc653b2c 100644 --- a/examples/tailwindcss/.npmrc +++ b/examples/framework-react/.npmrc diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md new file mode 100644 index 000000000..016cf0f21 --- /dev/null +++ b/examples/framework-react/README.md @@ -0,0 +1,7 @@ +# Using React with Astro + +This example showcases Astro's built-in support for [React](https://reactjs.org/). + +No configuration is needed to enable React support—just start writing React components in `src/components`. + +> **Note**: If used, components _must_ include the JSX factory (ex. `import React from "react"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json new file mode 100644 index 000000000..1be1bc1ed --- /dev/null +++ b/examples/framework-react/package.json @@ -0,0 +1,15 @@ +{ + "name": "@example/framework-react", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.jsx new file mode 100644 index 000000000..3ab6728e7 --- /dev/null +++ b/examples/framework-react/src/components/Counter.jsx @@ -0,0 +1,18 @@ +import React, { useState } from 'react'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); +} diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro new file mode 100644 index 000000000..3bd650e02 --- /dev/null +++ b/examples/framework-react/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.jsx' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello React!</h1> + </Counter:visible> + </main> + </body> +</html> diff --git a/examples/framework-svelte/.gitignore b/examples/framework-svelte/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-svelte/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/framework-svelte/.npmrc b/examples/framework-svelte/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/framework-svelte/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/framework-svelte/README.md b/examples/framework-svelte/README.md new file mode 100644 index 000000000..a6c995ac4 --- /dev/null +++ b/examples/framework-svelte/README.md @@ -0,0 +1,5 @@ +# Using Svelte with Astro + +This example showcases Astro's built-in support for [Svelte](https://svelte.dev/). + +No configuration is needed to enable Svelte support—just start writing Svelte components in `src/components`. diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json new file mode 100644 index 000000000..13082e213 --- /dev/null +++ b/examples/framework-svelte/package.json @@ -0,0 +1,15 @@ +{ + "name": "@example/framework-svelte", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte new file mode 100644 index 000000000..9aaf421c1 --- /dev/null +++ b/examples/framework-svelte/src/components/Counter.svelte @@ -0,0 +1,20 @@ +<script> + let count = 0; + + function add() { + count += 1; + } + + function subtract() { + count -= 1; + } +</script> + +<div class="counter"> + <button on:click={subtract}>-</button> + <pre>{ count }</pre> + <button on:click={add}>+</button> +</div> +<div class="children"> + <slot /> +</div> diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro new file mode 100644 index 000000000..5a0c1039d --- /dev/null +++ b/examples/framework-svelte/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.svelte' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello Svelte!</h1> + </Counter:visible> + </main> + </body> +</html> diff --git a/examples/framework-vue/.gitignore b/examples/framework-vue/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-vue/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/framework-vue/.npmrc b/examples/framework-vue/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/framework-vue/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/framework-vue/README.md b/examples/framework-vue/README.md new file mode 100644 index 000000000..a6c4683ba --- /dev/null +++ b/examples/framework-vue/README.md @@ -0,0 +1,5 @@ +# Using Vue with Astro + +This example showcases Astro's built-in support for [Vue (`v3.x`)](https://v3.vuejs.org/). + +No configuration is needed to enable Vue support—just start writing Vue components in `src/components`. diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json new file mode 100644 index 000000000..985f3ae0c --- /dev/null +++ b/examples/framework-vue/package.json @@ -0,0 +1,15 @@ +{ + "name": "@example/framework-vue", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/kitchen-sink/src/components/VueCounter.vue b/examples/framework-vue/src/components/Counter.vue index 8179fb1d9..8179fb1d9 100644 --- a/examples/kitchen-sink/src/components/VueCounter.vue +++ b/examples/framework-vue/src/components/Counter.vue diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro new file mode 100644 index 000000000..949012d0f --- /dev/null +++ b/examples/framework-vue/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.vue' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello Vue!</h1> + </Counter:visible> + </main> + </body> +</html> diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index 8267c9d20..40a61805f 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -1,13 +1,13 @@ { - "name": "@astrojs/portfolio-template", - "private": true, + "name": "@example/portfolio", "version": "0.0.1", + "private": true, "scripts": { "start": "astro dev", "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/snowpack/.gitignore b/examples/snowpack/.gitignore index 8a882418f..d436c6dad 100644 --- a/examples/snowpack/.gitignore +++ b/examples/snowpack/.gitignore @@ -1,4 +1,18 @@ -.DS_Store -build -node_modules +# build output dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/snowpack/package.json b/examples/snowpack/package.json index bbbe2f035..8b5efbe42 100644 --- a/examples/snowpack/package.json +++ b/examples/snowpack/package.json @@ -1,7 +1,7 @@ { "name": "@example/snowpack", + "version": "0.0.1", "private": true, - "version": "3.0.0", "scripts": { "start": "astro dev", "build": "astro build", diff --git a/examples/starter/package.json b/examples/starter/package.json index b096d72b8..5bc6804db 100644 --- a/examples/starter/package.json +++ b/examples/starter/package.json @@ -1,5 +1,5 @@ { - "name": "@astrojs/starter-kit", + "name": "@example/starter", "version": "0.0.1", "private": true, "scripts": { @@ -7,7 +7,7 @@ "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/tailwindcss/.gitignore b/examples/tailwindcss/.gitignore deleted file mode 100644 index 1521c8b76..000000000 --- a/examples/tailwindcss/.gitignore +++ /dev/null @@ -1 +0,0 @@ -dist diff --git a/examples/tailwindcss/README.md b/examples/tailwindcss/README.md deleted file mode 100644 index dd96562bd..000000000 --- a/examples/tailwindcss/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Astro + Tailwind - -## Setup - -``` -npm install -``` - -## Dev - -``` -npm start -``` - -Preview at `http://localhost:3000` - -## Build - -``` -npm build -``` - -Will output static site at `./dist` diff --git a/examples/with-markdown/.gitignore b/examples/with-markdown/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/with-markdown/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/with-markdown/.npmrc b/examples/with-markdown/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/with-markdown/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md new file mode 100644 index 000000000..fa0ac5030 --- /dev/null +++ b/examples/with-markdown/README.md @@ -0,0 +1,6 @@ +# Astro with Markdown + +This example showcases Astro's [built-in Markdown support](../../docs/markdown.md). + +- `src/pages/index.astro` uses Astro's `<Markdown>` component. +- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`. diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json new file mode 100644 index 000000000..bd1671e3c --- /dev/null +++ b/examples/with-markdown/package.json @@ -0,0 +1,15 @@ +{ + "name": "@example/with-markdown", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/astro-markdown/public/styles/global.scss b/examples/with-markdown/public/styles/global.scss index 1eda4646f..1eda4646f 100644 --- a/examples/astro-markdown/public/styles/global.scss +++ b/examples/with-markdown/public/styles/global.scss diff --git a/examples/astro-markdown/public/styles/prism.scss b/examples/with-markdown/public/styles/prism.scss index 29a3cf5d8..29a3cf5d8 100644 --- a/examples/astro-markdown/public/styles/prism.scss +++ b/examples/with-markdown/public/styles/prism.scss diff --git a/examples/astro-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx index e3761643f..e3761643f 100644 --- a/examples/astro-markdown/src/components/PreactCounter.tsx +++ b/examples/with-markdown/src/components/PreactCounter.tsx diff --git a/examples/astro-markdown/src/components/ReactCounter.jsx b/examples/with-markdown/src/components/ReactCounter.jsx index 92871a8d8..92871a8d8 100644 --- a/examples/astro-markdown/src/components/ReactCounter.jsx +++ b/examples/with-markdown/src/components/ReactCounter.jsx diff --git a/examples/kitchen-sink/src/components/SvelteCounter.svelte b/examples/with-markdown/src/components/SvelteCounter.svelte index 8d6b3f5e1..8d6b3f5e1 100644 --- a/examples/kitchen-sink/src/components/SvelteCounter.svelte +++ b/examples/with-markdown/src/components/SvelteCounter.svelte diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue new file mode 100644 index 000000000..8179fb1d9 --- /dev/null +++ b/examples/with-markdown/src/components/VueCounter.vue @@ -0,0 +1,27 @@ +<template> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="children"> + <slot /> + </div> +</template> + +<script> +import { ref } from 'vue'; +export default { + setup() { + const count = ref(0) + const add = () => count.value = count.value + 1; + const subtract = () => count.value = count.value - 1; + + return { + count, + add, + subtract + } + } +} +</script> diff --git a/examples/astro-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index 26993bcaf..26993bcaf 100644 --- a/examples/astro-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro diff --git a/examples/astro-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro index 666e0557f..666e0557f 100644 --- a/examples/astro-markdown/src/pages/index.astro +++ b/examples/with-markdown/src/pages/index.astro diff --git a/examples/astro-markdown/src/pages/other.md b/examples/with-markdown/src/pages/other.md index d4180940d..d4180940d 100644 --- a/examples/astro-markdown/src/pages/other.md +++ b/examples/with-markdown/src/pages/other.md diff --git a/examples/with-nanostores/.gitignore b/examples/with-nanostores/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/with-nanostores/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/with-nanostores/.npmrc b/examples/with-nanostores/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/with-nanostores/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/with-nanostores/README.md b/examples/with-nanostores/README.md new file mode 100644 index 000000000..e74f30fd0 --- /dev/null +++ b/examples/with-nanostores/README.md @@ -0,0 +1,3 @@ +# Astro with [`nanostores`](https://github.com/nanostores/nanostores) + +This example showcases using [`nanostores`](https://github.com/nanostores/nanostores) to provide shared state between components from different frameworks. diff --git a/examples/astro-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs index e16ed1327..e16ed1327 100644 --- a/examples/astro-nanostores/astro.config.mjs +++ b/examples/with-nanostores/astro.config.mjs diff --git a/examples/astro-nanostores/package.json b/examples/with-nanostores/package.json index 51cbc2a68..623a7e0b5 100644 --- a/examples/astro-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -1,5 +1,5 @@ { - "name": "@astrojs/with-nanostores", + "name": "@example/with-nanostores", "version": "0.0.1", "private": true, "scripts": { @@ -7,9 +7,12 @@ "build": "astro build" }, "devDependencies": { - "astro": "^0.15.0" + "astro": "^0.15.1" }, "dependencies": { "nanostores": "^0.3.3" + }, + "snowpack": { + "workspaceRoot": "../.." } } diff --git a/examples/astro-nanostores/public/assets/logo.svg b/examples/with-nanostores/public/assets/logo.svg index d751556b2..d751556b2 100644 --- a/examples/astro-nanostores/public/assets/logo.svg +++ b/examples/with-nanostores/public/assets/logo.svg diff --git a/examples/with-nanostores/public/favicon.svg b/examples/with-nanostores/public/favicon.svg new file mode 100644 index 000000000..542f90aec --- /dev/null +++ b/examples/with-nanostores/public/favicon.svg @@ -0,0 +1,11 @@ +<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { fill: #FF5D01; } + #a { fill: #000014; } + @media (prefers-color-scheme: dark) { + #a { fill: #fff; } + } + </style> + <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" /> + <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" /> +</svg> diff --git a/examples/astro-nanostores/public/robots.txt b/examples/with-nanostores/public/robots.txt index 1f53798bb..1f53798bb 100644 --- a/examples/astro-nanostores/public/robots.txt +++ b/examples/with-nanostores/public/robots.txt diff --git a/examples/astro-nanostores/public/style/global.css b/examples/with-nanostores/public/style/global.css index e1a3a6bd1..e1a3a6bd1 100644 --- a/examples/astro-nanostores/public/style/global.css +++ b/examples/with-nanostores/public/style/global.css diff --git a/examples/astro-nanostores/public/style/home.css b/examples/with-nanostores/public/style/home.css index c4271a845..c4271a845 100644 --- a/examples/astro-nanostores/public/style/home.css +++ b/examples/with-nanostores/public/style/home.css diff --git a/examples/astro-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx index 93fecd878..93fecd878 100644 --- a/examples/astro-nanostores/src/components/AdminsPreact.jsx +++ b/examples/with-nanostores/src/components/AdminsPreact.jsx diff --git a/examples/astro-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx index a03df1f47..a03df1f47 100644 --- a/examples/astro-nanostores/src/components/AdminsReact.jsx +++ b/examples/with-nanostores/src/components/AdminsReact.jsx diff --git a/examples/astro-nanostores/src/components/AdminsSvelte.svelte b/examples/with-nanostores/src/components/AdminsSvelte.svelte index a98444b4f..a98444b4f 100644 --- a/examples/astro-nanostores/src/components/AdminsSvelte.svelte +++ b/examples/with-nanostores/src/components/AdminsSvelte.svelte diff --git a/examples/astro-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue index 68dcd2065..68dcd2065 100644 --- a/examples/astro-nanostores/src/components/AdminsVue.vue +++ b/examples/with-nanostores/src/components/AdminsVue.vue diff --git a/examples/astro-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index 3d7e1d4d6..3d7e1d4d6 100644 --- a/examples/astro-nanostores/src/pages/index.astro +++ b/examples/with-nanostores/src/pages/index.astro diff --git a/examples/astro-nanostores/src/store/admins.js b/examples/with-nanostores/src/store/admins.js index 91215470b..91215470b 100644 --- a/examples/astro-nanostores/src/store/admins.js +++ b/examples/with-nanostores/src/store/admins.js diff --git a/examples/astro-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js index a57d8e2c3..a57d8e2c3 100644 --- a/examples/astro-nanostores/src/store/counter.js +++ b/examples/with-nanostores/src/store/counter.js diff --git a/examples/astro-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js index 719f75cd1..719f75cd1 100644 --- a/examples/astro-nanostores/src/store/users.js +++ b/examples/with-nanostores/src/store/users.js diff --git a/examples/with-tailwindcss/.gitignore b/examples/with-tailwindcss/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/with-tailwindcss/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/with-tailwindcss/.npmrc b/examples/with-tailwindcss/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/with-tailwindcss/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md new file mode 100644 index 000000000..20979a78f --- /dev/null +++ b/examples/with-tailwindcss/README.md @@ -0,0 +1,5 @@ +# Astro with [Tailwind](https://tailwindcss.com) + +Astro comes with Tailwind support out of the box. This example showcases how to style your Astro project with [Tailwind](https://tailwindcss.com). + +For complete setup instructions, please see our [Styling Guide](https://github.com/snowpackjs/astro/blob/main/docs/styling.md#-tailwind). diff --git a/examples/tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index 7e6aaa3fd..7e6aaa3fd 100644 --- a/examples/tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs diff --git a/examples/tailwindcss/package.json b/examples/with-tailwindcss/package.json index 2efe251e7..10fb5f059 100644 --- a/examples/tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -1,5 +1,5 @@ { - "name": "@astrojs/tailwind-example", + "name": "@example/with-tailwindcss", "version": "0.0.1", "private": true, "scripts": { @@ -8,7 +8,7 @@ }, "devDependencies": { "tailwindcss": "^2.1.2", - "astro": "^0.15.0" + "astro": "^0.15.1" }, "snowpack": { "workspaceRoot": "../.." diff --git a/examples/tailwindcss/public/global.css b/examples/with-tailwindcss/public/global.css index b5c61c956..b5c61c956 100644 --- a/examples/tailwindcss/public/global.css +++ b/examples/with-tailwindcss/public/global.css diff --git a/examples/tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 64baa50ae..64baa50ae 100644 --- a/examples/tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro diff --git a/examples/tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index 00ac41dac..00ac41dac 100644 --- a/examples/tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro diff --git a/examples/tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js index dc8c3ae87..dc8c3ae87 100644 --- a/examples/tailwindcss/tailwind.config.js +++ b/examples/with-tailwindcss/tailwind.config.js diff --git a/packages/astro/README.md b/packages/astro/README.md index d1e99f3ef..568e11d6b 100644 --- a/packages/astro/README.md +++ b/packages/astro/README.md @@ -10,7 +10,7 @@ Learn more: https://astro.build/blog/introducing-astro ## 🔧 Quick Start -> __Important__: Astro is built with [ESM modules](https://nodejs.org/api/esm.html) which are not supported in older version of Node.js. The minimum supported version is __14.15.1__. +> __Important__: Astro is built with [ES modules (ESM)](https://nodejs.org/api/esm.html) which are not supported in older version of Node.js. The minimum supported version is __14.15.1__. ```bash # create your project diff --git a/packages/astro/src/build.ts b/packages/astro/src/build.ts index fbe990169..073dbd2c3 100644 --- a/packages/astro/src/build.ts +++ b/packages/astro/src/build.ts @@ -9,7 +9,7 @@ import { performance } from 'perf_hooks'; import eslexer from 'es-module-lexer'; import cheerio from 'cheerio'; import del from 'del'; -import { bold, green, yellow } from 'kleur/colors'; +import { bold, green, yellow, red, dim, underline } from 'kleur/colors'; import mime from 'mime'; import glob from 'tiny-glob'; import { bundleCSS } from './build/bundle/css.js'; @@ -71,21 +71,47 @@ export async function build(astroConfig: AstroConfig, logging: LogOptions = defa timer.build = performance.now(); const pages = await allPages(pagesRoot); info(logging, 'build', yellow('! building pages...')); - await Promise.all( - pages.map(async (filepath) => { - const buildPage = getPageType(filepath) === 'collection' ? buildCollectionPage : buildStaticPage; - await buildPage({ - astroConfig, - buildState, - filepath, + try { + await Promise.all( + pages.map((filepath) => { + const buildPage = getPageType(filepath) === 'collection' ? buildCollectionPage : buildStaticPage; + return buildPage({ + astroConfig, + buildState, + filepath, + logging, + mode, + resolvePackageUrl: (pkgName: string) => snowpack.getUrlForPackage(pkgName), + runtime, + site: astroConfig.buildOptions.site, + }); + }) + ); + } catch (e) { + if (e.filename) { + let stack = e.stack + .replace(/Object\.__render \(/gm, '') + .replace(/\/_astro\/(.+)\.astro\.js\:\d+\:\d+\)/gm, (_: string, $1: string) => 'file://' + fileURLToPath(projectRoot) + $1 + '.astro') + .split('\n'); + stack.splice(1, 0, ` at file://${e.filename}`); + stack = stack.join('\n'); + + error( logging, - mode, - resolvePackageUrl: (pkgName: string) => snowpack.getUrlForPackage(pkgName), - runtime, - site: astroConfig.buildOptions.site, - }); - }) - ); + 'build', + `${red(`Unable to render ${underline(e.filename.replace(fileURLToPath(projectRoot), ''))}`)} + +${stack} +` + ); + } else { + error(logging, 'build', e); + } + error(logging, 'build', red('✕ building pages failed!')); + + await runtime.shutdown(); + return 1; + } info(logging, 'build', green('✔'), 'pages built.'); debug(logging, 'build', `built pages [${stopTimer(timer.build)}]`); diff --git a/packages/astro/src/build/page.ts b/packages/astro/src/build/page.ts index e19cf097b..d7e8e276c 100644 --- a/packages/astro/src/build/page.ts +++ b/packages/astro/src/build/page.ts @@ -3,6 +3,7 @@ import type { AstroRuntime, LoadResult } from '../runtime'; import type { LogOptions } from '../logger'; import path from 'path'; import { generateRSS } from './rss.js'; +import { fileURLToPath } from 'url'; interface PageBuildOptions { astroConfig: AstroConfig; @@ -92,7 +93,12 @@ export async function buildStaticPage({ astroConfig, buildState, filepath, runti const { pages: pagesRoot } = astroConfig; const url = filepath.pathname.replace(pagesRoot.pathname, '/').replace(/(index)?\.(astro|md)$/, ''); const result = await runtime.load(url); - if (result.statusCode !== 200) throw new Error((result as any).error); + if (result.statusCode !== 200) { + let err = (result as any).error; + if (!(err instanceof Error)) err = new Error(err); + err.filename = fileURLToPath(filepath); + throw err; + } const outFile = path.posix.join(url, '/index.html'); buildState[outFile] = { srcPath: filepath, diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 8e1edf763..843ecc428 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -277,7 +277,7 @@ function compileModule(module: Script, state: CodegenState, compileOptions: Comp if (module) { const parseOptions: babelParser.ParserOptions = { sourceType: 'module', - plugins: ['jsx', 'typescript', 'topLevelAwait'], + plugins: ['jsx', 'typescript', 'topLevelAwait', 'throwExpressions'], }; let parseResult; try { diff --git a/packages/astro/src/search.ts b/packages/astro/src/search.ts index 198ec73b0..c9f4f436b 100644 --- a/packages/astro/src/search.ts +++ b/packages/astro/src/search.ts @@ -115,7 +115,7 @@ export function searchForPage(url: URL, astroConfig: AstroConfig): SearchResult function loadCollection(url: string, astroConfig: AstroConfig): { currentPage?: number; location: PageLocation } | undefined { const pages = glob('**/$*.astro', { cwd: fileURLToPath(astroConfig.pages), filesOnly: true }); for (const pageURL of pages) { - const reqURL = new RegExp('^/' + pageURL.replace(/\$([^/]+)\.astro/, '$1') + '/?(.*)'); + const reqURL = new RegExp('^/' + pageURL.replace(/\$([^/]+)\.astro/, '$1') + '(?:/(.*)|/?$)'); const match = url.match(reqURL); if (match) { let currentPage: number | undefined; diff --git a/packages/astro/test/astro-collection.test.js b/packages/astro/test/astro-collection.test.js index 058ebbbb6..4f685b355 100644 --- a/packages/astro/test/astro-collection.test.js +++ b/packages/astro/test/astro-collection.test.js @@ -109,4 +109,18 @@ Collections('generates individual pages from a collection', async ({ runtime }) } }); +Collections('matches collection filename exactly', async ({ runtime }) => { + const result = await runtime.load('/individuals'); + if (result.error) throw new Error(result.error); + const $ = doc(result.contents); + + assert.ok($('#posts').length); + const urls = [ + ...$('#posts a').map(function () { + return $(this).attr('href'); + }), + ]; + assert.equal(urls, ['/post/nested/a', '/post/three', '/post/two', '/post/one']); +}); + Collections.run(); diff --git a/packages/astro/test/astro-throw.test.js b/packages/astro/test/astro-throw.test.js new file mode 100644 index 000000000..016804dc1 --- /dev/null +++ b/packages/astro/test/astro-throw.test.js @@ -0,0 +1,27 @@ +import { suite } from 'uvu'; +import * as assert from 'uvu/assert'; +import { doc } from './test-utils.js'; +import { setup, setupBuild } from './helpers.js'; + +const Throwable = suite('Throw test'); + +setup(Throwable, './fixtures/astro-throw', { + runtimeOptions: { + mode: 'development', + }, +}); +setupBuild(Throwable, './fixtures/astro-throw'); + +Throwable('Can throw an error from an `.astro` file', async ({ runtime }) => { + const result = await runtime.load('/'); + assert.equal(result.statusCode, 500); + assert.equal(result.error.message, 'Oops!'); +}); + +Throwable('Does not complete build when Error is thrown', async ({ build }) => { + await build().catch((e) => { + assert.ok(e, 'Build threw'); + }); +}); + +Throwable.run(); diff --git a/packages/astro/test/fixtures/astro-collection/src/pages/$individuals.astro b/packages/astro/test/fixtures/astro-collection/src/pages/$individuals.astro new file mode 100644 index 000000000..97d5ec206 --- /dev/null +++ b/packages/astro/test/fixtures/astro-collection/src/pages/$individuals.astro @@ -0,0 +1,24 @@ +--- +const { collection } = Astro.props; + +export async function createCollection() { + return { + async data() { + let data = Astro.fetchContent('./post/**/*.md'); + data.sort((a, b) => new Date(b.date) - new Date(a.date)); + return data; + }, + + pageSize: 10 + }; +} +--- + +<div id="posts"> +{collection.data.map((post) => ( + <article> + <h1>{post.title}</h1> + <a href={post.url}>Read more</a> + </article> +))} +</div>
\ No newline at end of file diff --git a/packages/astro/test/fixtures/astro-throw/snowpack.config.json b/packages/astro/test/fixtures/astro-throw/snowpack.config.json new file mode 100644 index 000000000..8f034781d --- /dev/null +++ b/packages/astro/test/fixtures/astro-throw/snowpack.config.json @@ -0,0 +1,3 @@ +{ + "workspaceRoot": "../../../../../" +} diff --git a/packages/astro/test/fixtures/astro-throw/src/pages/index.astro b/packages/astro/test/fixtures/astro-throw/src/pages/index.astro new file mode 100644 index 000000000..69e9fcd30 --- /dev/null +++ b/packages/astro/test/fixtures/astro-throw/src/pages/index.astro @@ -0,0 +1,13 @@ +--- +let title = 'My App' + +throw new Error('Oops!') +--- + +<html> + <head> + </head> + <body> + <h1>I will never render.</h1> + </body> +</html> diff --git a/tools/language-server/package.json b/tools/language-server/package.json index 6fab066e4..033b05a1e 100644 --- a/tools/language-server/package.json +++ b/tools/language-server/package.json @@ -28,7 +28,7 @@ "vscode-languageserver-textdocument": "^1.0.1" }, "devDependencies": { - "astro": "^0.15.0", + "astro": "^0.15.1", "astro-scripts": "0.0.1" } } diff --git a/www/src/pages/posts/introducing-astro.astro b/www/src/pages/posts/introducing-astro.astro new file mode 100644 index 000000000..dc72a6a98 --- /dev/null +++ b/www/src/pages/posts/introducing-astro.astro @@ -0,0 +1,129 @@ +--- +import { Markdown } from 'astro/components'; +import BaseHead from '../../components/BaseHead.astro'; +import BlogHeader from '../../components/BlogHeader.astro'; +import BlogPost from '../../components/BlogPost.astro'; +import BlockQuote from '../../components/BlockQuote.astro'; +import Note from '../../components/Note.astro'; +import Shell from '../../components/Shell.astro'; + +let title = 'Introducing Astro: Ship Less JavaScript'; +let description = `We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.`; +let publishDate = 'Tuesday, June 8 2021'; +let author = 'fred'; +let heroImage = '/social.jpg'; +let permalink = 'https://astro.build/blog/introducing-astro'; +--- + +<html> + <head> + <BaseHead title={title} description={description} permalink={permalink} /> + <link rel="stylesheet" href="/blog.css" /> + </head> + + <body> + <BlogHeader /> + <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate}> + <Markdown> + There's a simple secret to building a faster website — *just ship less*. + + Unfortunately, modern web development has been trending in the opposite direction—towards *more.* More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly. + + Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including: + + - **Bring Your Own Framework (BYOF):** Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript. + - **100% Static HTML, No JS:** Astro renders your entire page to static HTML, removing all JavaScript from your final build by default. + - **On-Demand Components:** Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it. + - **Fully-Featured:** Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages. + - **SEO Enabled:** Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication. + + This post marks the first public beta release of Astro. **Missing features and bugs are still to be expected at this early stage.** There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year. + + <Note> + To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) + </Note> + + ## Getting Started + + Starting a new project in Astro is easy: + + <Shell code={` +# create your project +mkdir new-project-directory +cd new-project-directory +npm init astro + +# install your dependencies +npm install + +# start the dev server and open your browser +npm start +`} /> + + <Note> + To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) + </Note> + + + ## How Astro Works + + Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. + + In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page. No monolithic JavaScript application required, just static HTML that loads as fast as possible in the browser regardless of how many UI components you used to generate it. + + Of course, sometimes client-side JavaScript is inevitable. Image carousels, shopping carts, and auto-complete search bars are just a few examples of things that require some JavaScript to run in the browser. This is where Astro really shines: When a component needs some JavaScript, Astro only loads that one component (and any dependencies). The rest of your site continues to exist as static, lightweight HTML. + + In other full-stack web frameworks this level of per-component optimization would be impossible without loading the entire page in JavaScript, delaying interactivity. In Astro, this kind of [partial hydration](https://addyosmani.com/blog/rehydration/) is built into the tool itself. + + You can even [automatically defer components](https://codepen.io/jonneal/full/ZELvMvw) to only load once they become visible on the page with the `:visible` modifier. + + This new approach to web architecture is called [islands architecture](https://jasonformat.com/islands-architecture/). We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites. + + <Note> + To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) + </Note> + + ## Embracing the Pit of Success + + <BlockQuote author="Jeff Atwood" source="Falling Into The Pit of Success" sourceHref="https://blog.codinghorror.com/falling-into-the-pit-of-success/"> + A well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things + </BlockQuote> + + Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website. + + Astro's main design principle is to lead developers into what [Rico Mariani](https://twitter.com/ricomariani) dubbed "the pit of success". It is our goal to build every site "fast by default" while also delivering a familiar, modern developer experience. + + By building your site to static HTML by default, Astro makes it difficult (but never impossible 😉) to build a slow site. + + ## Long-Term Sustainability + + Astro is built by the team of open source developers behind [Snowpack](https://snowpack.dev) and [Skypack](https://skypack.dev), with additional contributions from the community. + + **Astro is and always will be free.** It is an open source project released under the [MIT license](https://github.com/snowpackjs/astro/blob/main/LICENSE). + + We care deeply about building a more sustainable future for open source software. At the same time, we need to support Astro's development long-term. This requires money (donations alone aren't enough.) + + We're inspired by the early success of projects like [Tailwind](https://tailwindcss.com/), [Rome](https://rome.tools/), [Remix](https://remix.run/), [Ionic](https://ionicframework.com/), and others who are experimenting with long-term financial sustainability on top of Open Source. Over the next year we'll be exploring how we can create a sustainable business to support a 100% free, open source Astro for years to come. + + If your company is as excited about Astro as we are, [we'd love to hear from you.](https://astro.build/chat) + + Finally, I'd like to give a **HUGE** thanks to the 300+ developers who joined our earliest private beta. Your feedback has been essential in shaping Astro into the tool it is today. If you're interested in getting involved (or just following along with development) please [join us on Discord.](https://astro.build/chat) + + <Note> + To learn more about Astro and start building your first site, check out [the project README.](https://github.com/snowpackjs/astro#-guides) + </Note> + </Markdown> + </BlogPost> + + <!-- Global site tag (gtag.js) - Google Analytics --> + <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script> + <script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', 'G-TEL60V1WM9'); + </script> + </body> +</html> + @@ -396,12 +396,12 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@fullhuman/postcss-purgecss@^3.1.3": - version "3.1.3" - resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339" - integrity sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA== +"@fullhuman/postcss-purgecss@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.0.3.tgz#55d71712ec1c7a88e0d1ba5f10ce7fb6aa05beb4" + integrity sha512-/EnQ9UDWGGqHkn1UKAwSgh+gJHPKmD+Z+5dQ4gWT4qq2NUyez3zqAfZNwFH3eSgmgO+wjTXfhlLchx2M9/K+7Q== dependencies: - purgecss "^3.1.3" + purgecss "^4.0.3" "@lerna/add@4.0.0": version "4.0.0" @@ -1929,7 +1929,7 @@ any-promise@^0.1.0: resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27" integrity sha1-gwtoCqflbzNFHUsEnzvYBESY7ic= -anymatch@~3.1.1: +anymatch@~3.1.1, anymatch@~3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== @@ -2278,20 +2278,20 @@ breakword@^1.0.5: dependencies: wcwidth "^1.0.1" -browser-sync-client@^2.26.14: - version "2.26.14" - resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.26.14.tgz#f2f0a8e5febc65b725fb38c8d648389214a38947" - integrity sha512-be0m1MchmKv/26r/yyyolxXcBi052aYrmaQep5nm8YNMjFcEyzv0ZoOKn/c3WEXNlEB/KeXWaw70fAOJ+/F1zQ== +browser-sync-client@^2.27.3: + version "2.27.3" + resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.27.3.tgz#6525466f819d5672c5b7fbc65465050a1428326b" + integrity sha512-GaadUAfO0hmueUi5hikJQhv1Qdak4qc62WFWl+0MQcqWTKDFG4fFbjnXs/W/sDpcOHclXVbNZqx2l+LLwuNz5Q== dependencies: etag "1.8.1" fresh "0.5.2" mitt "^1.1.3" rxjs "^5.5.6" -browser-sync-ui@^2.26.14: - version "2.26.14" - resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.26.14.tgz#96632c38dda72560a3be8e985716d7a735e94749" - integrity sha512-6oT1sboM4KVNnWCCJDMGbRIeTBw97toMFQ+srImvwQ6J5t9KMgizaIX8HcKLiemsUMSJkgGM9RVKIpq2UblgOA== +browser-sync-ui@^2.27.3: + version "2.27.3" + resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.27.3.tgz#d37c1c93e022cd6e3bab1828dcd914b8f10ec724" + integrity sha512-va7dNwF+BC9gBVuVYa07wZPWEp4mTgi8/08oXiAzH0aSXOciu7II/Pu0V1fOFhRWcoFQxP8EzRJ4JP9Drx8evQ== dependencies: async-each-series "0.1.1" connect-history-api-fallback "^1" @@ -2301,12 +2301,12 @@ browser-sync-ui@^2.26.14: stream-throttle "^0.1.3" browser-sync@^2.26.13: - version "2.26.14" - resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.26.14.tgz#716c13ef91e72dfe092ff84bec3ddf62ea9d81fd" - integrity sha512-3TtpsheGolJT6UFtM2CZWEcGJmI4ZEvoCKiKE2bvcDnPxRkhQT4nIGVtfiyPcoHKXGM0LwMOZmYJNWfiNfVXWA== + version "2.27.3" + resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.27.3.tgz#a6759502e53de7fee43ba5e35e1bce1c3e1ef1dd" + integrity sha512-kyU5t5Sbm0lwCZTM4r2TKO9opznOT/P8eorkwWF4leZkbIZGyZohbSBiifYEWWlElM/vCRRhN/AqBH/3sSfOUw== dependencies: - browser-sync-client "^2.26.14" - browser-sync-ui "^2.26.14" + browser-sync-client "^2.27.3" + browser-sync-ui "^2.27.3" bs-recipes "1.3.4" bs-snippet-injector "^2.0.1" chokidar "^3.5.1" @@ -2533,7 +2533,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.1.0: +chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad" integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg== @@ -2595,7 +2595,31 @@ cheerio-select@^1.4.0: domhandler "^4.2.0" domutils "^2.6.0" -cheerio@^1.0.0-rc.3, cheerio@^1.0.0-rc.6: +cheerio-select@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823" + integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg== + dependencies: + css-select "^4.1.3" + css-what "^5.0.1" + domelementtype "^2.2.0" + domhandler "^4.2.0" + domutils "^2.7.0" + +cheerio@^1.0.0-rc.3: + version "1.0.0-rc.10" + resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e" + integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw== + dependencies: + cheerio-select "^1.5.0" + dom-serializer "^1.3.2" + domhandler "^4.2.0" + htmlparser2 "^6.1.0" + parse5 "^6.0.1" + parse5-htmlparser2-tree-adapter "^6.0.1" + tslib "^2.2.0" + +cheerio@^1.0.0-rc.6: version "1.0.0-rc.9" resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.9.tgz#a3ae6b7ce7af80675302ff836f628e7cb786a67f" integrity sha512-QF6XVdrLONO6DXRF5iaolY+odmhj2CLj+xzNod7INPWMi/x9X4SOylH0S/vaPpX+AUU6t04s34SQNh7DbkuCng== @@ -2608,7 +2632,7 @@ cheerio@^1.0.0-rc.3, cheerio@^1.0.0-rc.6: parse5-htmlparser2-tree-adapter "^6.0.1" tslib "^2.2.0" -"chokidar@>=3.0.0 <4.0.0", chokidar@^3.2.2, chokidar@^3.4.0, chokidar@^3.5.1: +"chokidar@>=3.0.0 <4.0.0": version "3.5.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== @@ -2623,6 +2647,21 @@ cheerio@^1.0.0-rc.3, cheerio@^1.0.0-rc.6: optionalDependencies: fsevents "~2.3.1" +chokidar@^3.2.2, chokidar@^3.4.0, chokidar@^3.5.1, chokidar@^3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -3091,6 +3130,17 @@ css-select@^4.1.2: domutils "^2.6.0" nth-check "^2.0.0" +css-select@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067" + integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA== + dependencies: + boolbase "^1.0.0" + css-what "^5.0.0" + domhandler "^4.2.0" + domutils "^2.6.0" + nth-check "^2.0.0" + css-unit-converter@^1.1.1: version "1.1.2" resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" @@ -3106,6 +3156,11 @@ css-what@^5.0.0: resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.0.tgz#f0bf4f8bac07582722346ab243f6a35b512cfc47" integrity sha512-qxyKHQvgKwzwDWC/rGbT821eJalfupxYW2qbSJSAtdSTimsr/MlaGONoNLllaUPZWf8QnbcKM/kPVYUQuEKAFA== +css-what@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" + integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg== + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -3161,9 +3216,9 @@ dashdash@^1.12.0: assert-plus "^1.0.0" date-fns@^2.19.0: - version "2.21.3" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.21.3.tgz#8f5f6889d7a96bbcc1f0ea50239b397a83357f9b" - integrity sha512-HeYdzCaFflc1i4tGbj7JKMjM4cKGYoyxwcIIkHzNgCkX8xXDNJDZXgDDVchIWpN4eQc3lH37WarduXFZJOtxfw== + version "2.22.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4" + integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg== date-time@^0.1.1: version "0.1.1" @@ -3398,9 +3453,9 @@ dezalgo@^1.0.0: wrappy "1" didyoumean@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" - integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8= + version "1.2.2" + resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037" + integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw== diff@^5.0.0: version "5.0.0" @@ -3444,7 +3499,7 @@ doctypes@^1.1.0: resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9" integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk= -dom-serializer@^1.0.1, dom-serializer@^1.3.1: +dom-serializer@^1.0.1, dom-serializer@^1.3.1, dom-serializer@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91" integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig== @@ -3479,6 +3534,15 @@ domutils@^2.4.3, domutils@^2.4.4, domutils@^2.5.2, domutils@^2.6.0: domelementtype "^2.2.0" domhandler "^4.2.0" +domutils@^2.7.0: + version "2.7.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442" + integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg== + dependencies: + dom-serializer "^1.0.1" + domelementtype "^2.2.0" + domhandler "^4.2.0" + dot-prop@^5.1.0, dot-prop@^5.2.0: version "5.3.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88" @@ -3557,11 +3621,6 @@ eleventy-plugin-nesting-toc@^1.2.0: dependencies: cheerio "^1.0.0-rc.3" -emitter-mixin@0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/emitter-mixin/-/emitter-mixin-0.0.3.tgz#5948cb286f2e48edc3b251a7cfc1f7883396d65c" - integrity sha1-WUjLKG8uSO3DslGnz8H3iDOW1lw= - emmet@^2.1.5: version "2.3.4" resolved "https://registry.yarnpkg.com/emmet/-/emmet-2.3.4.tgz#5ba0d7a5569a68c7697dfa890c772e4f3179d123" @@ -4050,7 +4109,7 @@ fast-equals@^2.0.1: resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.3.tgz#7039b0a039909f345a2ce53f6202a14e5f392efc" integrity sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA== -fast-glob@^3.1.1, fast-glob@^3.2.2, fast-glob@^3.2.5: +fast-glob@^3.1.1: version "3.2.5" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661" integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg== @@ -4062,6 +4121,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.2, fast-glob@^3.2.5: micromatch "^4.0.2" picomatch "^2.2.1" +fast-glob@^3.2.2, fast-glob@^3.2.5: + version "3.2.6" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.6.tgz#434dd9529845176ea049acc9343e8282765c6e1a" + integrity sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -4223,6 +4293,15 @@ fs-extra@3.0.1: jsonfile "^3.0.0" universalify "^0.1.0" +fs-extra@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1" + integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ== + dependencies: + graceful-fs "^4.2.0" + jsonfile "^6.0.1" + universalify "^2.0.0" + fs-extra@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9" @@ -4270,7 +4349,7 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= -fsevents@^2.2.0, fsevents@~2.3.1: +fsevents@^2.2.0, fsevents@~2.3.1, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -4433,29 +4512,21 @@ github-slugger@^1.2.1, github-slugger@^1.3.0: dependencies: emoji-regex ">=6.0.0 <=6.1.1" -glob-base@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4" - integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q= - dependencies: - glob-parent "^2.0.0" - is-glob "^2.0.0" - -glob-parent@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28" - integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg= - dependencies: - is-glob "^2.0.0" - -glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@~5.1.0: +glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.1, glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== dependencies: is-glob "^4.0.1" -glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: +glob-parent@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.0.tgz#f851b59b388e788f3a44d63fab50382b2859c33c" + integrity sha512-Hdd4287VEJcZXUwv1l8a+vXC1GjOQqXe+VS30w/ypihpcnu9M1n3xeYeJu5CBpeEQj2nAab2xxz28GuA3vp4Ww== + dependencies: + is-glob "^4.0.1" + +glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.7" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== @@ -5210,11 +5281,6 @@ is-docker@^2.0.0: resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa" integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ== -is-dotfile@^1.0.0: - version "1.0.3" - resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1" - integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE= - is-expression@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f" @@ -5228,11 +5294,6 @@ is-extendable@^0.1.0: resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89" integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik= -is-extglob@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0" - integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA= - is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" @@ -5265,13 +5326,6 @@ is-fullwidth-code-point@^4.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88" integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ== -is-glob@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863" - integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM= - dependencies: - is-extglob "^1.0.0" - is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" @@ -5537,14 +5591,13 @@ jest-worker@^26.2.1: supports-color "^7.0.0" js-beautify@^1.6.12: - version "1.13.13" - resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.13.13.tgz#756907d1728f329f2b84c42efd56ad17514620bf" - integrity sha512-oH+nc0U5mOAqX8M5JO1J0Pw/7Q35sAdOsM5W3i87pir9Ntx6P/5Gx1xLNoK+MGyvHk4rqqRCE4Oq58H6xl2W7A== + version "1.14.0" + resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.0.tgz#2ce790c555d53ce1e3d7363227acf5dc69024c2d" + integrity sha512-yuck9KirNSCAwyNJbqW+BxJqJ0NLJ4PwBUzQQACl5O3qHMBXVkXb/rD0ilh/Lat/tn88zSZ+CAHOlk0DsY7GuQ== dependencies: config-chain "^1.1.12" editorconfig "^0.15.3" glob "^7.1.3" - mkdirp "^1.0.4" nopt "^5.0.0" js-stringify@^1.0.1: @@ -5772,6 +5825,11 @@ libnpmpublish@^4.0.0: semver "^7.1.3" ssri "^8.0.1" +lilconfig@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd" + integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg== + limiter@^1.0.5: version "1.1.5" resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.5.tgz#8f92a25b3b16c6131293a0cc834b4a838a2aa7c2" @@ -6480,7 +6538,7 @@ micromark@^2.11.3, micromark@~2.11.0, micromark@~2.11.3: debug "^4.0.0" parse-entities "^2.0.0" -micromatch@^4.0.2: +micromatch@^4.0.2, micromatch@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9" integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg== @@ -6493,13 +6551,25 @@ mime-db@1.47.0: resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c" integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw== -mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24: +mime-db@1.48.0: + version "1.48.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d" + integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ== + +mime-types@^2.1.12, mime-types@~2.1.19: version "2.1.30" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d" integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg== dependencies: mime-db "1.47.0" +mime-types@~2.1.17, mime-types@~2.1.24: + version "2.1.31" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b" + integrity sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg== + dependencies: + mime-db "1.48.0" + mime@1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" @@ -6666,7 +6736,7 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -modern-normalize@^1.0.0: +modern-normalize@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7" integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== @@ -6822,9 +6892,9 @@ node-releases@^1.1.71: integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw== nodemon@^2.0.7: - version "2.0.7" - resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.7.tgz#6f030a0a0ebe3ea1ba2a38f71bf9bab4841ced32" - integrity sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA== + version "2.0.8" + resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.8.tgz#95719984d4ae57c2b5ce2a1e1bf1ca14de36f500" + integrity sha512-omq5AbNSMZjjZf12qd5vRpVobbuBJsLhTOS/vwy5ApnO6jpHbS/YuN97X4/zzB9YkdAa3q73HG5IuyM6kIQw8Q== dependencies: chokidar "^3.2.2" debug "^3.2.6" @@ -7043,7 +7113,7 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= -object-hash@^2.1.1: +object-hash@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5" integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw== @@ -7339,16 +7409,6 @@ parse-github-repo-url@^1.3.0: resolved "https://registry.yarnpkg.com/parse-github-repo-url/-/parse-github-repo-url-1.4.1.tgz#9e7d8bb252a6cb6ba42595060b7bf6df3dbc1f50" integrity sha1-nn2LslKmy2ukJZUGC3v23z28H1A= -parse-glob@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c" - integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw= - dependencies: - glob-base "^0.3.0" - is-dotfile "^1.0.0" - is-extglob "^1.0.0" - is-glob "^2.0.0" - parse-json@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9" @@ -7579,16 +7639,6 @@ portscanner@2.1.1: async "1.5.2" is-number-like "^1.0.3" -postcss-functions@^3: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e" - integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4= - dependencies: - glob "^7.1.2" - object-assign "^4.1.1" - postcss "^6.0.9" - postcss-value-parser "^3.3.0" - postcss-icss-keyframes@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz#80c4455e0112b0f2f9c3c05ac7515062bb9ff295" @@ -7614,6 +7664,15 @@ postcss-load-config@^3.0.1: cosmiconfig "^7.0.0" import-cwd "^3.0.0" +postcss-load-config@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829" + integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g== + dependencies: + import-cwd "^3.0.0" + lilconfig "^2.0.3" + yaml "^1.10.2" + postcss-modules-extract-imports@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" @@ -7663,7 +7722,7 @@ postcss-nested@5.0.5: dependencies: postcss-selector-parser "^6.0.4" -postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6: version "6.0.6" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== @@ -7681,7 +7740,7 @@ postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== -postcss@^6.0.2, postcss@^6.0.9: +postcss@^6.0.2: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== @@ -7690,7 +7749,7 @@ postcss@^6.0.2, postcss@^6.0.9: source-map "^0.6.1" supports-color "^5.4.0" -postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15: +postcss@^8.1.10, postcss@^8.2.15: version "8.3.0" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f" integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ== @@ -7699,6 +7758,15 @@ postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.2.15: nanoid "^3.1.23" source-map-js "^0.6.2" +postcss@^8.1.6, postcss@^8.2.1: + version "8.3.5" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709" + integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.23" + source-map-js "^0.6.2" + posthtml-parser@^0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.7.2.tgz#3fba3375544d824bb1c8504f0d69f6e0b95774db" @@ -8030,10 +8098,10 @@ pupa@^2.0.1: dependencies: escape-goat "^2.0.0" -purgecss@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.1.3.tgz#26987ec09d12eeadc318e22f6e5a9eb0be094f41" - integrity sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ== +purgecss@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742" + integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw== dependencies: commander "^6.0.0" glob "^7.0.0" @@ -8292,6 +8360,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + rechoir@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384" @@ -8300,12 +8375,11 @@ rechoir@^0.6.2: resolve "^1.1.6" recursive-copy@^2.0.10: - version "2.0.11" - resolved "https://registry.yarnpkg.com/recursive-copy/-/recursive-copy-2.0.11.tgz#7ed3c0f4b6bb0ffda7cab62bf865a82f5a391c39" - integrity sha512-DqL2kO10mUne7XK5BPcwRtOJJZKhddD7IrW4UmHmKrwdV3HLPWcw6Jr4Jh12ooddfJOVz7ynFoFYYnPM7De0Og== + version "2.0.13" + resolved "https://registry.yarnpkg.com/recursive-copy/-/recursive-copy-2.0.13.tgz#ace471459650f379d4127dd64aa2a4ceca808aa2" + integrity sha512-BjmE6R/dOImStEku+017L3Z0I6u/lA+SVr1sySWbTLjmQKDTESNmJ9WBZP8wbN5FuvqNvSYvRKA/IKQhAjqnpQ== dependencies: del "^2.2.0" - emitter-mixin "0.0.3" errno "^0.1.2" graceful-fs "^4.1.4" junk "^1.0.1" @@ -8594,7 +8668,7 @@ rimraf@^2.2.8, rimraf@^2.6.3: dependencies: glob "^7.1.3" -rimraf@^3.0.2: +rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== @@ -9462,37 +9536,41 @@ table@^6.0.9: strip-ansi "^6.0.0" tailwindcss@^2.1.2: - version "2.1.4" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.1.4.tgz#ee8a1b8ccc140db61960b6738f968a8a1c4cd1f8" - integrity sha512-fh1KImDLg6se/Suaelju/5oFbqq1b0ntagmGLu0aG9LlnNPGHgO1n/4E57CbKcCtyz/VYnvVXUiWmfyfBBZQ6g== + version "2.2.4" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.4.tgz#6a2e259b1e26125aeaa7cdc479963fd217c308b0" + integrity sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA== dependencies: - "@fullhuman/postcss-purgecss" "^3.1.3" + "@fullhuman/postcss-purgecss" "^4.0.3" + arg "^5.0.0" bytes "^3.0.0" - chalk "^4.1.0" - chokidar "^3.5.1" + chalk "^4.1.1" + chokidar "^3.5.2" color "^3.1.3" + cosmiconfig "^7.0.0" detective "^5.2.0" didyoumean "^1.2.1" dlv "^1.1.3" fast-glob "^3.2.5" - fs-extra "^9.1.0" + fs-extra "^10.0.0" + glob-parent "^6.0.0" html-tags "^3.1.0" + is-glob "^4.0.1" lodash "^4.17.21" lodash.topath "^4.5.2" - modern-normalize "^1.0.0" + modern-normalize "^1.1.0" node-emoji "^1.8.1" normalize-path "^3.0.0" - object-hash "^2.1.1" - parse-glob "^3.0.4" - postcss-functions "^3" + object-hash "^2.2.0" postcss-js "^3.0.3" + postcss-load-config "^3.1.0" postcss-nested "5.0.5" - postcss-selector-parser "^6.0.4" + postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" pretty-hrtime "^1.0.3" quick-lru "^5.1.1" reduce-css-calc "^2.1.8" resolve "^1.20.0" + tmp "^0.2.1" tar@^4.4.12: version "4.4.13" @@ -9624,6 +9702,13 @@ tmp@^0.0.33: dependencies: os-tmpdir "~1.0.2" +tmp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" + integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ== + dependencies: + rimraf "^3.0.0" + to-array@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890" @@ -10520,7 +10605,7 @@ yallist@^4.0.0: resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== -yaml@^1.10.0: +yaml@^1.10.0, yaml@^1.10.2: version "1.10.2" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== |