diff --git a/.github/ISSUE_TEMPLATE/---01-bug-report.yml b/.github/ISSUE_TEMPLATE/---01-bug-report.yml index e204a1f5d..8ae60e544 100644 --- a/.github/ISSUE_TEMPLATE/---01-bug-report.yml +++ b/.github/ISSUE_TEMPLATE/---01-bug-report.yml @@ -9,7 +9,7 @@ body: value: | ## Quick Checklist Thank you for taking the time to file a bug report! Please fill out this form as completely as possible. - + ✅ I am using the **latest version of Astro** and all plugins. ✅ I am using a version of Node that supports ESM (`v12.20.0+`, `v14.13.1+`, or `v16.0.0+`) - type: input @@ -45,5 +45,5 @@ body: - type: input attributes: label: Link to Minimal Reproducible Example (Optional) - description: "Issues with easy reproductions are more likely to get fixed, faster." + description: 'Issues with easy reproductions are more likely to get fixed, faster.' placeholder: 'https://github.com/username/repo' diff --git a/.github/ISSUE_TEMPLATE/---02-feature-request.yml b/.github/ISSUE_TEMPLATE/---02-feature-request.yml index 9b5d4b152..9f7d3c3c8 100644 --- a/.github/ISSUE_TEMPLATE/---02-feature-request.yml +++ b/.github/ISSUE_TEMPLATE/---02-feature-request.yml @@ -41,7 +41,7 @@ body: - type: checkboxes attributes: label: Help make it happen! - description: "Tip: RFCs with contributing authors are much more likely to get done!" + description: 'Tip: RFCs with contributing authors are much more likely to get done!' options: - label: I am willing to submit a PR to implement this change. - label: I am willing to submit a PR to implement this change, but would need some guidance. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index f8927de3f..92864ff94 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -5,4 +5,4 @@ contact_links: about: Our Discord server is active, come join us! - name: 💁 Support url: https://astro.build/chat - about: "This issue tracker is not for support questions. Join us on Discord for assistance!" + about: 'This issue tracker is not for support questions. Join us on Discord for assistance!' diff --git a/docs/.prettierrc b/docs/.prettierrc index 945f3a139..c3a4e0672 100644 --- a/docs/.prettierrc +++ b/docs/.prettierrc @@ -1,7 +1,7 @@ { - "singleQuote": true, - "tabWidth": 2, - "endOfLine": "auto", - "trailingComma": "es5", - "printWidth": 80 -} \ No newline at end of file + "singleQuote": true, + "tabWidth": 2, + "endOfLine": "auto", + "trailingComma": "es5", + "printWidth": 80 +} diff --git a/docs/public/code.css b/docs/public/code.css index 58a631e57..44400633e 100644 --- a/docs/public/code.css +++ b/docs/public/code.css @@ -1,28 +1,28 @@ .language-css > code, .language-sass > code, .language-scss > code { - color: #fd9170; + color: #fd9170; } -[class*="language-"] .namespace { - opacity: 0.7; +[class*='language-'] .namespace { + opacity: 0.7; } .token.plain-text, -[class*="language-bash"] span.token, -[class*="language-shell"] span.token { - color: var(--color-gray-200); +[class*='language-bash'] span.token, +[class*='language-shell'] span.token { + color: var(--color-gray-200); } -[class*="language-bash"] span.token, -[class*="language-shell"] span.token { - font-style: bold; +[class*='language-bash'] span.token, +[class*='language-shell'] span.token { + font-style: bold; } .token.prolog, .token.comment, -[class*="language-bash"] span.token.comment, -[class*="language-shell"] span.token.comment { +[class*='language-bash'] span.token.comment, +[class*='language-shell'] span.token.comment { color: var(--color-gray-400); } @@ -33,7 +33,7 @@ .token.variable, .token.entity, .token.deleted { - color: #FA5E5B; + color: #fa5e5b; } .token.boolean, @@ -46,7 +46,7 @@ .token.hexcode, .token.class-name, .token.attr-name { - color: var(--color-yellow); + color: var(--color-yellow); } .token.atrule, @@ -56,15 +56,14 @@ .token.pseudo-class, .token.pseudo-element, .token.string { - color: var(--color-green); + color: var(--color-green); } .token.symbol, .token.function, .token.id, -.token.important - { - color: var(--color-blue); +.token.important { + color: var(--color-blue); } .token.important, @@ -72,27 +71,26 @@ font-weight: bold; } - .token.cdata, .token.char, .token.property { - color: #23B1AF; + color: #23b1af; } .token.inserted { - color: var(--color-green); + color: var(--color-green); } .token.keyword { - color: #FF657C; + color: #ff657c; font-style: italic; } .token.operator { - color: var(--color-gray-300); + color: var(--color-gray-300); } .token.attr-value .token.attr-equals, .token.punctuation { - color: var(--color-gray-200); + color: var(--color-gray-200); } diff --git a/docs/public/theme.css b/docs/public/theme.css index a16745daf..c7470b4f0 100644 --- a/docs/public/theme.css +++ b/docs/public/theme.css @@ -2,7 +2,10 @@ --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --font-body: system-ui, 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; + --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; @@ -56,7 +59,10 @@ --theme-navbar-height: 3.5rem; --theme-sidebar-offset: var(--theme-navbar-height); --theme-selection-color: var(--color-orange); - --theme-selection-bg: rgba(var(--color-orange-rgb), var(--theme-accent-opacity)); + --theme-selection-bg: rgba( + var(--color-orange-rgb), + var(--theme-accent-opacity) + ); } body { @@ -87,7 +93,10 @@ body { --theme-code-text: var(--color-white); --theme-navbar-bg: var(--color-gray-900); --theme-selection-color: var(--color-white); - --theme-selection-bg: rgba(var(--color-purple-rgb), var(--theme-accent-opacity)); + --theme-selection-bg: rgba( + var(--color-purple-rgb), + var(--theme-accent-opacity) + ); } ::selection { diff --git a/docs/snowpack.config.mjs b/docs/snowpack.config.mjs index c68805894..d1ef58a5f 100644 --- a/docs/snowpack.config.mjs +++ b/docs/snowpack.config.mjs @@ -5,4 +5,4 @@ export default { }, plugins: ['@snowpack/plugin-dotenv'], workspaceRoot: '../', -}; \ No newline at end of file +}; diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs index e6e926d7b..2c8e9130e 100644 --- a/examples/blog-multiple-authors/astro.config.mjs +++ b/examples/blog-multiple-authors/astro.config.mjs @@ -5,13 +5,11 @@ export default { // 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, // 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' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index e6e926d7b..2c8e9130e 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -5,13 +5,11 @@ export default { // 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, // 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' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.scss index afea09108..f74c02692 100644 --- a/examples/blog/public/blog.scss +++ b/examples/blog/public/blog.scss @@ -1,37 +1,35 @@ :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; + --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-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-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-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; + --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 { @@ -140,30 +138,31 @@ nav ul { } h1 { - font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); + font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem); } h2 { - font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); + font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem); } h3 { - font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); + font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem); } h4 { - font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); + font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem); } h5 { - font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); + font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem); } p { color: var(--theme-text-light); } -small, .text_small { +small, +.text_small { font-size: 0.833rem; } @@ -176,14 +175,14 @@ a { gap: 0.5rem; } -a > code:not([class*="language"]) { +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 { +a > code:not([class*='language'])::before { content: ''; position: absolute; top: 0; @@ -213,13 +212,13 @@ strong { /* Supporting Content */ -code:not([class*="language"]) { +code:not([class*='language']) { --border-radius: 3px; --padding-block: 0.2rem; --padding-inline: 0.33rem; font-family: var(--font-mono); - font-size: .85em; + font-size: 0.85em; color: inherit; background-color: var(--theme-code-inline-bg); padding: var(--padding-block) var(--padding-inline); @@ -227,7 +226,7 @@ code:not([class*="language"]) { border-radius: var(--border-radius); } -pre > code:not([class*="language"]) { +pre > code:not([class*='language']) { background-color: transparent; padding: 0; margin: 0; @@ -245,7 +244,7 @@ pre { 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)); diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss index c0d03a8fd..5aea52933 100644 --- a/examples/blog/public/global.scss +++ b/examples/blog/public/global.scss @@ -1,99 +1,93 @@ :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; + --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; } * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } html { - display: grid; - width: 100%; - max-width: 100vw; - overflow: hidden; - height: 100%; - background-color: #000014; + display: grid; + width: 100%; + max-width: 100vw; + overflow: hidden; + height: 100%; + background-color: #000014; } -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; +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; + 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; + 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; + 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.32, 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); - } - } + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); &::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; + transform: scaleY(1); + background: var(--color-green); } + } + + &:visited { + // color: var(--color-green); + color: var(--color-green); + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + } + } + + &::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.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: -1; + } } diff --git a/examples/docs/astro.config.mjs b/examples/docs/astro.config.mjs index 6fd6bb47e..7af3aef7f 100644 --- a/examples/docs/astro.config.mjs +++ b/examples/docs/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/examples/docs/public/code.css b/examples/docs/public/code.css index 54b2c5094..ec735a676 100644 --- a/examples/docs/public/code.css +++ b/examples/docs/public/code.css @@ -1,155 +1,155 @@ .language-css > code, .language-sass > code, .language-scss > code { - color: #fd9170; + color: #fd9170; } -[class*="language-"] .namespace { - opacity: 0.7; +[class*='language-'] .namespace { + opacity: 0.7; } .token.atrule { - color: #c792ea; + color: #c792ea; } .token.attr-name { - color: #ffcb6b; + color: #ffcb6b; } .token.attr-value { - color: #a5e844; + color: #a5e844; } .token.attribute { - color: #a5e844; + color: #a5e844; } .token.boolean { - color: #c792ea; + color: #c792ea; } .token.builtin { - color: #ffcb6b; + color: #ffcb6b; } .token.cdata { - color: #80cbc4; + color: #80cbc4; } .token.char { - color: #80cbc4; + color: #80cbc4; } .token.class { - color: #ffcb6b; + color: #ffcb6b; } .token.class-name { - color: #f2ff00; + color: #f2ff00; } .token.comment { - color: #616161; + color: #616161; } .token.constant { - color: #c792ea; + color: #c792ea; } .token.deleted { - color: #ff6666; + color: #ff6666; } .token.doctype { - color: #616161; + color: #616161; } .token.entity { - color: #ff6666; + color: #ff6666; } .token.function { - color: #c792ea; + color: #c792ea; } .token.hexcode { - color: #f2ff00; + color: #f2ff00; } .token.id { - color: #c792ea; - font-weight: bold; + color: #c792ea; + font-weight: bold; } .token.important { - color: #c792ea; - font-weight: bold; + color: #c792ea; + font-weight: bold; } .token.inserted { - color: #80cbc4; + color: #80cbc4; } .token.keyword { - color: #c792ea; + color: #c792ea; } .token.number { - color: #fd9170; + color: #fd9170; } .token.operator { - color: #89ddff; + color: #89ddff; } .token.prolog { - color: #616161; + color: #616161; } .token.property { - color: #80cbc4; + color: #80cbc4; } .token.pseudo-class { - color: #a5e844; + color: #a5e844; } .token.pseudo-element { - color: #a5e844; + color: #a5e844; } .token.punctuation { - color: #89ddff; + color: #89ddff; } .token.regex { - color: #f2ff00; + color: #f2ff00; } .token.selector { - color: #ff6666; + color: #ff6666; } .token.string { - color: #a5e844; + color: #a5e844; } .token.symbol { - color: #c792ea; + color: #c792ea; } .token.tag { - color: #ff6666; + color: #ff6666; } .token.unit { - color: #fd9170; + color: #fd9170; } .token.url { - color: #ff6666; + color: #ff6666; } .token.variable { - color: #ff6666; + color: #ff6666; } diff --git a/examples/docs/public/index.css b/examples/docs/public/index.css index d58558799..1906eeac8 100644 --- a/examples/docs/public/index.css +++ b/examples/docs/public/index.css @@ -52,30 +52,31 @@ nav ul { } h1 { - font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); + font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem); } h2 { - font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); + font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem); } h3 { - font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); + font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem); } h4 { - font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); + font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem); } h5 { - font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); + font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem); } p { color: var(--theme-text-light); } -small, .text_small { +small, +.text_small { font-size: 0.833rem; } @@ -89,14 +90,14 @@ a { gap: 0.5rem; } -a > code:not([class*="language"]) { +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 { +a > code:not([class*='language'])::before { content: ''; position: absolute; top: 0; @@ -126,13 +127,13 @@ strong { /* Supporting Content */ -code:not([class*="language"]) { +code:not([class*='language']) { --border-radius: 3px; --padding-block: 0.2rem; --padding-inline: 0.33rem; font-family: var(--font-mono); - font-size: .85em; + font-size: 0.85em; color: inherit; background-color: var(--theme-code-inline-bg); padding: var(--padding-block) var(--padding-inline); @@ -140,7 +141,7 @@ code:not([class*="language"]) { border-radius: var(--border-radius); } -pre > code:not([class*="language"]) { +pre > code:not([class*='language']) { background-color: transparent; padding: 0; margin: 0; @@ -158,7 +159,7 @@ pre { padding-right: calc(var(--padding-inline) * 2); margin-left: calc(50vw - var(--padding-inline)); transform: translateX(-50vw); - + line-height: 1.414; width: calc(100vw + 4px); max-width: calc(100% + (var(--padding-inline) * 2)); @@ -211,7 +212,6 @@ button { background-color: var(--theme-bg); } button:hover { - } #theme-toggle { @@ -254,7 +254,7 @@ button:hover { opacity: 1; } -input[name="theme-toggle"] { +input[name='theme-toggle'] { position: absolute; opacity: 0; top: 0; @@ -354,7 +354,7 @@ nav h4 { } .nav-groups > li + li { - margin-top: 2rem; + margin-top: 2rem; } /* Scrollbar */ @@ -362,7 +362,7 @@ nav h4 { /* Firefox */ body { scrollbar-width: thin; - scrollbar-color: var(--theme-text-lighter) var(--theme-divider); + scrollbar-color: var(--theme-text-lighter) var(--theme-divider); } /* width */ diff --git a/examples/docs/public/theme.css b/examples/docs/public/theme.css index d381604c8..7a4613188 100644 --- a/examples/docs/public/theme.css +++ b/examples/docs/public/theme.css @@ -1,34 +1,34 @@ :root { - --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; + --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; --font-body: system-ui, var(--font-fallback); - --font-mono: source-code-pro,Menlo,Monaco,Consolas,'Courier New',monospace; + --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; - --color-white: #FFF; + --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-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-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; + --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 { diff --git a/examples/framework-lit/astro.config.mjs b/examples/framework-lit/astro.config.mjs index 20f741ec6..e4cabec8f 100644 --- a/examples/framework-lit/astro.config.mjs +++ b/examples/framework-lit/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-lit' - ] -}; \ No newline at end of file + renderers: ['@astrojs/renderer-lit'], +}; diff --git a/examples/framework-lit/public/style/home.css b/examples/framework-lit/public/style/home.css index c4271a845..280398c17 100644 --- a/examples/framework-lit/public/style/home.css +++ b/examples/framework-lit/public/style/home.css @@ -1,38 +1,39 @@ :root { - --font-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-light: #F3F4F6; + --font-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-light: #f3f4f6; } @media (prefers-color-scheme: dark) { - :root { - --color-light: #1F2937; - } + :root { + --color-light: #1f2937; + } } a { - color: inherit; + color: inherit; } header > div { - font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); } header > div { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } header h1 { - font-size: 1em; - font-weight: 500; + font-size: 1em; + font-weight: 500; } header img { - width: 2em; - height: 2.667em; + width: 2em; + height: 2.667em; } h2 { - font-weight: 500; - font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); } diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index 89abd7323..ce25e5aff 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -11,10 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact', - '@astrojs/renderer-react', - '@astrojs/renderer-svelte', - '@astrojs/renderer-vue', - ] + renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'], }; diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index 8179fb1d9..2703b8b9b 100644 --- a/examples/framework-multiple/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue @@ -1,11 +1,11 @@ @@ -13,15 +13,15 @@ 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; + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); return { count, add, - subtract - } - } -} + subtract, + }; + }, +}; diff --git a/examples/framework-preact/astro.config.mjs b/examples/framework-preact/astro.config.mjs index 2d1454d51..350d6c7de 100644 --- a/examples/framework-preact/astro.config.mjs +++ b/examples/framework-preact/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/examples/framework-react/astro.config.mjs b/examples/framework-react/astro.config.mjs index f0e022923..da818c2be 100644 --- a/examples/framework-react/astro.config.mjs +++ b/examples/framework-react/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-react' - ] + renderers: ['@astrojs/renderer-react'], }; diff --git a/examples/framework-svelte/astro.config.mjs b/examples/framework-svelte/astro.config.mjs index 59ddc78f0..40dbab1ad 100644 --- a/examples/framework-svelte/astro.config.mjs +++ b/examples/framework-svelte/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-svelte' - ] + renderers: ['@astrojs/renderer-svelte'], }; diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs index 1fec0a4dd..964aa2145 100644 --- a/examples/framework-vue/astro.config.mjs +++ b/examples/framework-vue/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-vue' - ] + renderers: ['@astrojs/renderer-vue'], }; diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue index 8179fb1d9..2703b8b9b 100644 --- a/examples/framework-vue/src/components/Counter.vue +++ b/examples/framework-vue/src/components/Counter.vue @@ -1,11 +1,11 @@ @@ -13,15 +13,15 @@ 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; + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); return { count, add, - subtract - } - } -} + subtract, + }; + }, +}; diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index 2d1454d51..350d6c7de 100644 --- a/examples/portfolio/astro.config.mjs +++ b/examples/portfolio/astro.config.mjs @@ -11,7 +11,5 @@ export default { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/examples/portfolio/public/global.scss b/examples/portfolio/public/global.scss index 3cac56a42..b5a95caf2 100644 --- a/examples/portfolio/public/global.scss +++ b/examples/portfolio/public/global.scss @@ -86,35 +86,69 @@ h1 { $colors: 'black', 'blue', 'white'; @each $color in $colors { // text color - .tc-#{$color} { color: var(--c-#{color}); } + .tc-#{$color} { + color: var(--c-#{color}); + } // background color - .bg-#{$color} { background-color: var(--c-#{color}); } + .bg-#{$color} { + background-color: var(--c-#{color}); + } } // font size @for $i from 0 through 18 { - .f-u#{$i} { font-size: var(--f-u#{$i}); } - .f-d#{$i} { font-size: var(--f-d#{$i}); } + .f-u#{$i} { + font-size: var(--f-u#{$i}); + } + .f-d#{$i} { + font-size: var(--f-d#{$i}); + } } // margin & padding @for $i from 0 through 36 { - .ma#{$i} { margin: #{0.5 * $i}rem; } - .mt#{$i} { margin-top: #{0.5 * $i}rem; } - .mr#{$i} { margin-right: #{0.5 * $i}rem; } - .mb#{$i} { margin-bottom: #{0.5 * $i}rem; } - .ml#{$i} { margin-left: #{0.5 * $i}rem; } - .pa#{$i} { padding: #{0.5 * $i}rem; } - .pt#{$i} { padding-top: #{0.5 * $i}rem; } - .pr#{$i} { padding-right: #{0.5 * $i}rem; } - .pb#{$i} { padding-bottom: #{0.5 * $i}rem; } - .pl#{$i} { padding-left: #{0.5 * $i}rem; } + .ma#{$i} { + margin: #{0.5 * $i}rem; + } + .mt#{$i} { + margin-top: #{0.5 * $i}rem; + } + .mr#{$i} { + margin-right: #{0.5 * $i}rem; + } + .mb#{$i} { + margin-bottom: #{0.5 * $i}rem; + } + .ml#{$i} { + margin-left: #{0.5 * $i}rem; + } + .pa#{$i} { + padding: #{0.5 * $i}rem; + } + .pt#{$i} { + padding-top: #{0.5 * $i}rem; + } + .pr#{$i} { + padding-right: #{0.5 * $i}rem; + } + .pb#{$i} { + padding-bottom: #{0.5 * $i}rem; + } + .pl#{$i} { + padding-left: #{0.5 * $i}rem; + } } // text align -.tac { text-align: center; } -.tal { text-align: left; } -.tar { text-align: right; } +.tac { + text-align: center; +} +.tal { + text-align: left; +} +.tar { + text-align: right; +} // wrapper .wrapper { @@ -126,4 +160,4 @@ $colors: 'black', 'blue', 'white'; } .wrapper__readable { max-width: 50em; -} \ No newline at end of file +} diff --git a/examples/snowpack/astro.config.mjs b/examples/snowpack/astro.config.mjs index 15bc31b47..b829c204f 100644 --- a/examples/snowpack/astro.config.mjs +++ b/examples/snowpack/astro.config.mjs @@ -6,6 +6,6 @@ export default { renderers: [ '@astrojs/renderer-vue', '@astrojs/renderer-svelte', - '@astrojs/renderer-preact' - ] + '@astrojs/renderer-preact', + ], }; diff --git a/examples/snowpack/public/favicon/site.webmanifest b/examples/snowpack/public/favicon/site.webmanifest index 45dc8a206..fa99de77d 100644 --- a/examples/snowpack/public/favicon/site.webmanifest +++ b/examples/snowpack/public/favicon/site.webmanifest @@ -1 +1,19 @@ -{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/examples/snowpack/public/styles/_utils.scss b/examples/snowpack/public/styles/_utils.scss index d61627ddb..ace88d71d 100644 --- a/examples/snowpack/public/styles/_utils.scss +++ b/examples/snowpack/public/styles/_utils.scss @@ -4,22 +4,48 @@ // margin & padding @for $i from 0 through 36 { - .ma#{$i} { margin: #{0.5 * $i}rem; } - .mt#{$i} { margin-top: #{0.5 * $i}rem; } - .mr#{$i} { margin-right: #{0.5 * $i}rem; } - .mb#{$i} { margin-bottom: #{0.5 * $i}rem; } - .ml#{$i} { margin-left: #{0.5 * $i}rem; } - .pa#{$i} { padding: #{0.5 * $i}rem; } - .pt#{$i} { padding-top: #{0.5 * $i}rem; } - .pr#{$i} { padding-right: #{0.5 * $i}rem; } - .pb#{$i} { padding-bottom: #{0.5 * $i}rem; } - .pl#{$i} { padding-left: #{0.5 * $i}rem; } + .ma#{$i} { + margin: #{0.5 * $i}rem; + } + .mt#{$i} { + margin-top: #{0.5 * $i}rem; + } + .mr#{$i} { + margin-right: #{0.5 * $i}rem; + } + .mb#{$i} { + margin-bottom: #{0.5 * $i}rem; + } + .ml#{$i} { + margin-left: #{0.5 * $i}rem; + } + .pa#{$i} { + padding: #{0.5 * $i}rem; + } + .pt#{$i} { + padding-top: #{0.5 * $i}rem; + } + .pr#{$i} { + padding-right: #{0.5 * $i}rem; + } + .pb#{$i} { + padding-bottom: #{0.5 * $i}rem; + } + .pl#{$i} { + padding-left: #{0.5 * $i}rem; + } } // text align -.tac { text-align: center; } -.tal { text-align: left; } -.tar { text-align: right; } +.tac { + text-align: center; +} +.tal { + text-align: left; +} +.tar { + text-align: right; +} // wrapper .wrapper { @@ -32,4 +58,4 @@ .wrapper__readable { max-width: 55em; -} \ No newline at end of file +} diff --git a/examples/snowpack/src/components/NewsTitle.vue b/examples/snowpack/src/components/NewsTitle.vue index 00194ac1e..fdc77b600 100644 --- a/examples/snowpack/src/components/NewsTitle.vue +++ b/examples/snowpack/src/components/NewsTitle.vue @@ -8,8 +8,8 @@ export default { props: { title: { type: String, - required: true - } - } -} + required: true, + }, + }, +}; diff --git a/examples/starter/public/style/home.css b/examples/starter/public/style/home.css index 70741a8da..39de76a44 100644 --- a/examples/starter/public/style/home.css +++ b/examples/starter/public/style/home.css @@ -1,40 +1,41 @@ :root { - --font-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-light: #F3F4F6; + --font-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-light: #f3f4f6; } @media (prefers-color-scheme: dark) { - :root { - --color-light: #1F2937; - } + :root { + --color-light: #1f2937; + } } a { - color: inherit; + color: inherit; } header > div { - font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); } header > div { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } header h1 { - font-size: 1em; - font-weight: 500; + font-size: 1em; + font-weight: 500; } header img { - width: 2em; - height: 2.667em; + width: 2em; + height: 2.667em; } h2 { - font-weight: 500; - font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); } .counter { diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs index 9057b5c2f..e02cde821 100644 --- a/examples/with-markdown-plugins/astro.config.mjs +++ b/examples/with-markdown-plugins/astro.config.mjs @@ -4,19 +4,15 @@ export default { // 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. + 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) }, markdownOptions: { - remarkPlugins: [ - 'remark-code-titles', - 'remark-slug', - ['remark-autolink-headings', { behavior: 'prepend' }], - ], + remarkPlugins: ['remark-code-titles', 'remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]], rehypePlugins: [ - ['rehype-toc', { headings: ["h2", "h3"] }], - ['rehype-add-classes', { 'h1,h2,h3': 'title', }], - ] + ['rehype-toc', { headings: ['h2', 'h3'] }], + ['rehype-add-classes', { 'h1,h2,h3': 'title' }], + ], }, devOptions: { // port: 3000, // The port to run the dev server on. diff --git a/examples/with-markdown-plugins/public/global.css b/examples/with-markdown-plugins/public/global.css index f1e536546..ea585d269 100644 --- a/examples/with-markdown-plugins/public/global.css +++ b/examples/with-markdown-plugins/public/global.css @@ -34,20 +34,20 @@ body { } .remark-code-title, -pre[class^="language-"] { +pre[class^='language-'] { padding: 10px; margin: 0; } .remark-code-title { - border-bottom: 1px solid rgba(0,0,0,.05); + border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-radius: 4px 4px 0 0; - background: rgba(0,0,0,.08); + background: rgba(0, 0, 0, 0.08); font-family: monospace; font-weight: bold; } -pre[class^="language-"] { - background: rgba(0,0,0,.05); +pre[class^='language-'] { + background: rgba(0, 0, 0, 0.05); border-radius: 0 0 4px 4px; } diff --git a/examples/with-markdown/public/styles/global.scss b/examples/with-markdown/public/styles/global.scss index 1eda4646f..5d758a003 100644 --- a/examples/with-markdown/public/styles/global.scss +++ b/examples/with-markdown/public/styles/global.scss @@ -3,4 +3,4 @@ body { max-width: 900px; margin: auto; -} \ No newline at end of file +} diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue index 8179fb1d9..2703b8b9b 100644 --- a/examples/with-markdown/src/components/VueCounter.vue +++ b/examples/with-markdown/src/components/VueCounter.vue @@ -1,11 +1,11 @@ @@ -13,15 +13,15 @@ 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; + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); return { count, add, - subtract - } - } -} + subtract, + }; + }, +}; diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs index ce0e15031..05b7f0961 100644 --- a/examples/with-nanostores/astro.config.mjs +++ b/examples/with-nanostores/astro.config.mjs @@ -9,12 +9,7 @@ export default { }, devOptions: { // port: 3000, // The port to run the dev server on. - tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact', - '@astrojs/renderer-react', - '@astrojs/renderer-svelte', - '@astrojs/renderer-vue', - ] + renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'], }; diff --git a/examples/with-nanostores/public/style/home.css b/examples/with-nanostores/public/style/home.css index c4271a845..280398c17 100644 --- a/examples/with-nanostores/public/style/home.css +++ b/examples/with-nanostores/public/style/home.css @@ -1,38 +1,39 @@ :root { - --font-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-light: #F3F4F6; + --font-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-light: #f3f4f6; } @media (prefers-color-scheme: dark) { - :root { - --color-light: #1F2937; - } + :root { + --color-light: #1f2937; + } } a { - color: inherit; + color: inherit; } header > div { - font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); } header > div { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } header h1 { - font-size: 1em; - font-weight: 500; + font-size: 1em; + font-weight: 500; } header img { - width: 2em; - height: 2.667em; + width: 2em; + height: 2.667em; } h2 { - font-weight: 500; - font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); } diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue index 68dcd2065..1846c4d21 100644 --- a/examples/with-nanostores/src/components/AdminsVue.vue +++ b/examples/with-nanostores/src/components/AdminsVue.vue @@ -2,12 +2,12 @@

Vue

Counter

-

{{count}}

+

{{ count }}

@@ -15,16 +15,16 @@ diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index b69c40cd4..f93e801ce 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -5,13 +5,11 @@ export default { // 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, // Generate sitemap (set to "false" to disable) }, devOptions: { // port: 3000, // The port to run the dev server on. - tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' + tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, - renderers: [ - '@astrojs/renderer-preact' - ] + renderers: ['@astrojs/renderer-preact'], }; diff --git a/packages/astro-prism/index.mjs b/packages/astro-prism/index.mjs index bb4fc53e4..05f1ef2db 100644 --- a/packages/astro-prism/index.mjs +++ b/packages/astro-prism/index.mjs @@ -1,72 +1,82 @@ - export function addAstro(Prism) { - if(Prism.languages.astro) { + if (Prism.languages.astro) { return; } let scriptLang; - if(Prism.languages.typescript) { + if (Prism.languages.typescript) { scriptLang = 'typescript'; } else { scriptLang = 'javascript'; console.warn('Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.'); } - let script = Prism.util.clone(Prism.languages[scriptLang]); - + let space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source; let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source; let spread = /(?:\{*\.{3}(?:[^{}]|)*\})/.source; - + /** * @param {string} source * @param {string} [flags] */ function re(source, flags) { source = source - .replace(//g, function () { return space; }) - .replace(//g, function () { return braces; }) - .replace(//g, function () { return spread; }); + .replace(//g, function () { + return space; + }) + .replace(//g, function () { + return braces; + }) + .replace(//g, function () { + return spread; + }); return RegExp(source, flags); } - + spread = re(spread).source; - - + Prism.languages.astro = Prism.languages.extend('markup', script); - Prism.languages.astro.tag.pattern = re( - /<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source - ); - + Prism.languages.astro.tag.pattern = re(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source); + Prism.languages.astro.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i; Prism.languages.astro.tag.inside['attr-value'].pattern = /=(?!\{)(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s'">]+)/i; Prism.languages.astro.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/; Prism.languages.astro.tag.inside['comment'] = script['comment']; - - Prism.languages.insertBefore('inside', 'attr-name', { - 'spread': { - pattern: re(//.source), - inside: Prism.languages.astro - } - }, Prism.languages.astro.tag); - - Prism.languages.insertBefore('inside', 'special-attr', { - 'script': { - // Allow for two levels of nesting - pattern: re(/=/.source), - inside: { - 'script-punctuation': { - pattern: /^=(?={)/, - alias: 'punctuation' - }, - rest: Prism.languages.astro - }, - 'alias': `language-${scriptLang}` - } - }, Prism.languages.astro.tag); - + Prism.languages.insertBefore( + 'inside', + 'attr-name', + { + spread: { + pattern: re(//.source), + inside: Prism.languages.astro, + }, + }, + Prism.languages.astro.tag + ); + + Prism.languages.insertBefore( + 'inside', + 'special-attr', + { + script: { + // Allow for two levels of nesting + pattern: re(/=/.source), + inside: { + 'script-punctuation': { + pattern: /^=(?={)/, + alias: 'punctuation', + }, + rest: Prism.languages.astro, + }, + alias: `language-${scriptLang}`, + }, + }, + Prism.languages.astro.tag + ); + // The following will handle plain text inside tags let stringifyToken = function (token) { if (!token) { @@ -80,23 +90,23 @@ export function addAstro(Prism) { } return token.content.map(stringifyToken).join(''); }; - + let walkTokens = function (tokens) { let openedTags = []; for (let i = 0; i < tokens.length; i++) { let token = tokens[i]; // This breaks styles, not sure why - if(token.type === 'style') { + if (token.type === 'style') { return; } let notTagNorBrace = false; - + if (typeof token !== 'string') { if (token.type === 'tag' && token.content[0] && token.content[0].type === 'tag') { // We found a tag, now find its kind - + if (token.content[0].content[0].content === ' 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token.content[0].content[1])) { @@ -110,22 +120,18 @@ export function addAstro(Prism) { // Opening tag openedTags.push({ tagName: stringifyToken(token.content[0].content[1]), - openedBraces: 0 + openedBraces: 0, }); } } } else if (openedTags.length > 0 && token.type === 'punctuation' && token.content === '{') { - // Here we might have entered a Astro context inside a tag openedTags[openedTags.length - 1].openedBraces++; - } else if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces > 0 && token.type === 'punctuation' && token.content === '}') { - // Here we might have left a Astro context inside a tag openedTags[openedTags.length - 1].openedBraces--; - } else { - notTagNorBrace = true + notTagNorBrace = true; } } if (notTagNorBrace || typeof token === 'string') { @@ -133,7 +139,7 @@ export function addAstro(Prism) { // Here we are inside a tag, and not inside a Astro context. // That's plain text: drop any tokens matched. let plainText = stringifyToken(token); - + // And merge text with adjacent text if (i < tokens.length - 1 && (typeof tokens[i + 1] === 'string' || tokens[i + 1].type === 'plain-text')) { plainText += stringifyToken(tokens[i + 1]); @@ -144,22 +150,21 @@ export function addAstro(Prism) { tokens.splice(i - 1, 1); i--; } - + tokens[i] = new Prism.Token('plain-text', plainText, null, plainText); } } - + if (token.content && typeof token.content !== 'string') { walkTokens(token.content); } } }; - + Prism.hooks.add('after-tokenize', function (env) { if (env.language !== 'astro') { return; } walkTokens(env.tokens); }); - -} \ No newline at end of file +} diff --git a/packages/astro/astro.cjs b/packages/astro/astro.cjs index 896fc8687..91d75cf2f 100755 --- a/packages/astro/astro.cjs +++ b/packages/astro/astro.cjs @@ -7,14 +7,14 @@ const ci = require('ci-info'); const CI_INTRUCTIONS = { NETLIFY: 'https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript', GITHUB_ACTIONS: 'https://docs.github.com/en/actions/guides/building-and-testing-nodejs#specifying-the-nodejs-version', - VERCEL: 'https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version' -} + VERCEL: 'https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version', +}; /** Dynamically import the CLI after checking if this version of Node is supported */ async function main() { const engines = pkg.engines.node; const version = process.versions.node; - const isSupported = semver.satisfies(version, engines) + const isSupported = semver.satisfies(version, engines); if (!isSupported) { console.error(`\nNode.js v${version} is not supported by Astro! @@ -27,13 +27,13 @@ Please upgrade to one of Node.js ${engines}.\n`); break; } } - console.log(`To set the Node.js version for ${ci.name}, reference the official documentation`) + console.log(`To set the Node.js version for ${ci.name}, reference the official documentation`); if (CI_INTRUCTIONS[platform]) console.log(CI_INTRUCTIONS[platform]); } process.exit(1); } - await import('./dist/cli.js').then(({cli}) => cli(process.argv)); + await import('./dist/cli.js').then(({ cli }) => cli(process.argv)); } main(); diff --git a/packages/astro/snowpack-plugin.cjs b/packages/astro/snowpack-plugin.cjs index 3e1edecc7..eb3c00281 100644 --- a/packages/astro/snowpack-plugin.cjs +++ b/packages/astro/snowpack-plugin.cjs @@ -15,28 +15,17 @@ const DEFAULT_HMR_PORT = 12321; * @type {import('snowpack').SnowpackPluginFactory} */ module.exports = (snowpackConfig, options = {}) => { - const { - resolvePackageUrl, - astroConfig, - configManager, - mode - } = options; + const { resolvePackageUrl, astroConfig, configManager, mode } = options; let hmrPort = DEFAULT_HMR_PORT; return { name: 'snowpack-astro', - knownEntrypoints: [ - 'astro/dist/internal/h.js', - 'astro/components/Prism.astro', - 'shorthash', - 'estree-util-value-to-estree', - 'astring' - ], + knownEntrypoints: ['astro/dist/internal/h.js', 'astro/components/Prism.astro', 'shorthash', 'estree-util-value-to-estree', 'astring'], resolve: { input: ['.astro', '.md'], output: ['.js', '.css'], }, - async transform({contents, id, fileExt}) { - if(configManager.isConfigModule(fileExt, id)) { + async transform({ contents, id, fileExt }) { + if (configManager.isConfigModule(fileExt, id)) { configManager.configModuleId = id; const source = await configManager.buildSource(contents); return source; @@ -44,13 +33,13 @@ module.exports = (snowpackConfig, options = {}) => { }, onChange({ filePath }) { // If the astro.config.mjs file changes, mark the generated config module as changed. - if(configManager.isAstroConfig(filePath) && configManager.configModuleId) { + if (configManager.isAstroConfig(filePath) && configManager.configModuleId) { this.markChanged(configManager.configModuleId); configManager.markDirty(); } }, async config(snowpackConfig) { - if(!isNaN(snowpackConfig.devOptions.hmrPort)) { + if (!isNaN(snowpackConfig.devOptions.hmrPort)) { hmrPort = snowpackConfig.devOptions.hmrPort; } else { hmrPort = await getPort({ port: DEFAULT_HMR_PORT, host: snowpackConfig.devOptions.hostname }); diff --git a/packages/create-astro/create-astro.mjs b/packages/create-astro/create-astro.mjs index 68b6eb5c6..975b921dc 100755 --- a/packages/create-astro/create-astro.mjs +++ b/packages/create-astro/create-astro.mjs @@ -11,4 +11,4 @@ if (requiredMajorVersion < minimumMajorVersion) { process.exit(1); } -import('./dist/index.js').then(({main}) => main()); +import('./dist/index.js').then(({ main }) => main()); diff --git a/www/astro.config.mjs b/www/astro.config.mjs index 3f90c2882..d13e39e6f 100644 --- a/www/astro.config.mjs +++ b/www/astro.config.mjs @@ -1,6 +1,6 @@ export default { buildOptions: { sitemap: true, - site: 'https://astro.build/' + site: 'https://astro.build/', }, -} +}; diff --git a/www/public/blog.scss b/www/public/blog.scss index afea09108..f74c02692 100644 --- a/www/public/blog.scss +++ b/www/public/blog.scss @@ -1,37 +1,35 @@ :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; + --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-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-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-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; + --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 { @@ -140,30 +138,31 @@ nav ul { } h1 { - font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); + font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem); } h2 { - font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); + font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem); } h3 { - font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); + font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem); } h4 { - font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); + font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem); } h5 { - font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); + font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem); } p { color: var(--theme-text-light); } -small, .text_small { +small, +.text_small { font-size: 0.833rem; } @@ -176,14 +175,14 @@ a { gap: 0.5rem; } -a > code:not([class*="language"]) { +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 { +a > code:not([class*='language'])::before { content: ''; position: absolute; top: 0; @@ -213,13 +212,13 @@ strong { /* Supporting Content */ -code:not([class*="language"]) { +code:not([class*='language']) { --border-radius: 3px; --padding-block: 0.2rem; --padding-inline: 0.33rem; font-family: var(--font-mono); - font-size: .85em; + font-size: 0.85em; color: inherit; background-color: var(--theme-code-inline-bg); padding: var(--padding-block) var(--padding-inline); @@ -227,7 +226,7 @@ code:not([class*="language"]) { border-radius: var(--border-radius); } -pre > code:not([class*="language"]) { +pre > code:not([class*='language']) { background-color: transparent; padding: 0; margin: 0; @@ -245,7 +244,7 @@ pre { 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)); diff --git a/www/public/global.scss b/www/public/global.scss index c0d03a8fd..5aea52933 100644 --- a/www/public/global.scss +++ b/www/public/global.scss @@ -1,99 +1,93 @@ :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; + --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; } * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } html { - display: grid; - width: 100%; - max-width: 100vw; - overflow: hidden; - height: 100%; - background-color: #000014; + display: grid; + width: 100%; + max-width: 100vw; + overflow: hidden; + height: 100%; + background-color: #000014; } -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; +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; + 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; + 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; + 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.32, 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); - } - } + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); &::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; + transform: scaleY(1); + background: var(--color-green); } + } + + &:visited { + // color: var(--color-green); + color: var(--color-green); + &:hover, + &:focus { + color: rgba(0, 0, 0, 1); + } + } + + &::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.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1); + z-index: -1; + } }