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

[ci] yarn format

Browse source
This commit is contained in:
FredKSchott 2021-07-20 04:07:49 +00:00 committed by GitHub Actions
parent 07e533402e
commit 50f82e1a53
46 changed files with 666 additions and 632 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.github/ISSUE_TEMPLATE/---01-bug-report.yml vendored
View file

@ -9,7 +9,7 @@ body:
value: | value: |
## Quick Checklist ## Quick Checklist
Thank you for taking the time to file a bug report! Please fill out this form as completely as possible. 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 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+`) ✅ I am using a version of Node that supports ESM (`v12.20.0+`, `v14.13.1+`, or `v16.0.0+`)
- type: input - type: input
@ -45,5 +45,5 @@ body:
- type: input - type: input
attributes: attributes:
label: Link to Minimal Reproducible Example (Optional) 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' placeholder: 'https://github.com/username/repo'

2
.github/ISSUE_TEMPLATE/---02-feature-request.yml vendored
View file

@ -41,7 +41,7 @@ body:
- type: checkboxes - type: checkboxes
attributes: attributes:
label: Help make it happen! 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: 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.
- label: I am willing to submit a PR to implement this change, but would need some guidance. - label: I am willing to submit a PR to implement this change, but would need some guidance.

2
.github/ISSUE_TEMPLATE/config.yml vendored
View file

@ -5,4 +5,4 @@ contact_links:
about: Our Discord server is active, come join us! about: Our Discord server is active, come join us!
- name: 💁 Support - name: 💁 Support
url: https://astro.build/chat 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!'

12
docs/.prettierrc
View file

@ -1,7 +1,7 @@
{ {
"singleQuote": true, "singleQuote": true,
"tabWidth": 2, "tabWidth": 2,
"endOfLine": "auto", "endOfLine": "auto",
"trailingComma": "es5", "trailingComma": "es5",
"printWidth": 80 "printWidth": 80
} }

44
docs/public/code.css
View file

@ -1,28 +1,28 @@
.language-css > code, .language-css > code,
.language-sass > code, .language-sass > code,
.language-scss > code { .language-scss > code {
color: #fd9170; color: #fd9170;
} }
[class*="language-"] .namespace { [class*='language-'] .namespace {
opacity: 0.7; opacity: 0.7;
} }
.token.plain-text, .token.plain-text,
[class*="language-bash"] span.token, [class*='language-bash'] span.token,
[class*="language-shell"] span.token { [class*='language-shell'] span.token {
color: var(--color-gray-200); color: var(--color-gray-200);
} }
[class*="language-bash"] span.token, [class*='language-bash'] span.token,
[class*="language-shell"] span.token { [class*='language-shell'] span.token {
font-style: bold; font-style: bold;
} }
.token.prolog, .token.prolog,
.token.comment, .token.comment,
[class*="language-bash"] span.token.comment, [class*='language-bash'] span.token.comment,
[class*="language-shell"] span.token.comment { [class*='language-shell'] span.token.comment {
color: var(--color-gray-400); color: var(--color-gray-400);
} }
@ -33,7 +33,7 @@
.token.variable, .token.variable,
.token.entity, .token.entity,
.token.deleted { .token.deleted {
color: #FA5E5B; color: #fa5e5b;
} }
.token.boolean, .token.boolean,
@ -46,7 +46,7 @@
.token.hexcode, .token.hexcode,
.token.class-name, .token.class-name,
.token.attr-name { .token.attr-name {
color: var(--color-yellow); color: var(--color-yellow);
} }
.token.atrule, .token.atrule,
@ -56,15 +56,14 @@
.token.pseudo-class, .token.pseudo-class,
.token.pseudo-element, .token.pseudo-element,
.token.string { .token.string {
color: var(--color-green); color: var(--color-green);
} }
.token.symbol, .token.symbol,
.token.function, .token.function,
.token.id, .token.id,
.token.important .token.important {
{ color: var(--color-blue);
color: var(--color-blue);
} }
.token.important, .token.important,
@ -72,27 +71,26 @@
font-weight: bold; font-weight: bold;
} }
.token.cdata, .token.cdata,
.token.char, .token.char,
.token.property { .token.property {
color: #23B1AF; color: #23b1af;
} }
.token.inserted { .token.inserted {
color: var(--color-green); color: var(--color-green);
} }
.token.keyword { .token.keyword {
color: #FF657C; color: #ff657c;
font-style: italic; font-style: italic;
} }
.token.operator { .token.operator {
color: var(--color-gray-300); color: var(--color-gray-300);
} }
.token.attr-value .token.attr-equals, .token.attr-value .token.attr-equals,
.token.punctuation { .token.punctuation {
color: var(--color-gray-200); color: var(--color-gray-200);
} }

15
docs/public/theme.css
View file

@ -2,7 +2,10 @@
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji; sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-body: system-ui, var(--font-fallback); --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-white: #fff;
--color-black: #000014; --color-black: #000014;
@ -56,7 +59,10 @@
--theme-navbar-height: 3.5rem; --theme-navbar-height: 3.5rem;
--theme-sidebar-offset: var(--theme-navbar-height); --theme-sidebar-offset: var(--theme-navbar-height);
--theme-selection-color: var(--color-orange); --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 { body {
@ -87,7 +93,10 @@ body {
--theme-code-text: var(--color-white); --theme-code-text: var(--color-white);
--theme-navbar-bg: var(--color-gray-900); --theme-navbar-bg: var(--color-gray-900);
--theme-selection-color: var(--color-white); --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 { ::selection {

2
docs/snowpack.config.mjs
View file

@ -5,4 +5,4 @@ export default {
}, },
plugins: ['@snowpack/plugin-dotenv'], plugins: ['@snowpack/plugin-dotenv'],
workspaceRoot: '../', workspaceRoot: '../',
}; };

6
examples/blog-multiple-authors/astro.config.mjs
View file

@ -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. // 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: { 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) sitemap: true, // Generate sitemap (set to "false" to disable)
}, },
devOptions: { devOptions: {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

6
examples/blog/astro.config.mjs
View file

@ -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. // 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: { 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) sitemap: true, // Generate sitemap (set to "false" to disable)
}, },
devOptions: { devOptions: {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

77
examples/blog/public/blog.scss
View file

@ -1,37 +1,35 @@
:root { :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: "IBM Plex Sans", var(--font-fallback); --font-body: 'IBM Plex Sans', var(--font-fallback);
--font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
"Courier New", Courier, monospace;
--color-white: #FFF; --color-white: #fff;
--color-black: #000014; --color-black: #000014;
--color-gray-50: #F9FAFB; --color-gray-50: #f9fafb;
--color-gray-100: #F3F4F6; --color-gray-100: #f3f4f6;
--color-gray-200: #E5E7EB; --color-gray-200: #e5e7eb;
--color-gray-300: #D1D5DB; --color-gray-300: #d1d5db;
--color-gray-400: #9CA3AF; --color-gray-400: #9ca3af;
--color-gray-500: #6B7280; --color-gray-500: #6b7280;
--color-gray-600: #4B5563; --color-gray-600: #4b5563;
--color-gray-700: #374151; --color-gray-700: #374151;
--color-gray-800: #1F2937; --color-gray-800: #1f2937;
--color-gray-900: #111827; --color-gray-900: #111827;
--color-blue: #3894FF; --color-blue: #3894ff;
--color-blue-rgb: 56,148,255; --color-blue-rgb: 56, 148, 255;
--color-green: #17C083; --color-green: #17c083;
--color-green-rgb: 23,192,131; --color-green-rgb: 23, 192, 131;
--color-orange: #FF5D01; --color-orange: #ff5d01;
--color-orange-rgb: 255,93,1; --color-orange-rgb: 255, 93, 1;
--color-purple: #882DE7; --color-purple: #882de7;
--color-purple-rgb: 136,45,231; --color-purple-rgb: 136, 45, 231;
--color-red: #FF1639; --color-red: #ff1639;
--color-red-rgb: 255,22,57; --color-red-rgb: 255, 22, 57;
--color-yellow: #FFBE2D; --color-yellow: #ffbe2d;
--color-yellow-rgb: 255,190,45; --color-yellow-rgb: 255, 190, 45;
} }
:root { :root {
@ -140,30 +138,31 @@ nav ul {
} }
h1 { h1 {
font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
} }
h2 { h2 {
font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
} }
h3 { h3 {
font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
} }
h4 { h4 {
font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
} }
h5 { h5 {
font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
} }
p { p {
color: var(--theme-text-light); color: var(--theme-text-light);
} }
small, .text_small { small,
.text_small {
font-size: 0.833rem; font-size: 0.833rem;
} }
@ -176,14 +175,14 @@ a {
gap: 0.5rem; gap: 0.5rem;
} }
a > code:not([class*="language"]) { a > code:not([class*='language']) {
position: relative; position: relative;
color: var(--theme-accent); color: var(--theme-accent);
background: transparent; background: transparent;
text-underline-offset: var(--padding-block); text-underline-offset: var(--padding-block);
} }
a > code:not([class*="language"])::before { a > code:not([class*='language'])::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -213,13 +212,13 @@ strong {
/* Supporting Content */ /* Supporting Content */
code:not([class*="language"]) { code:not([class*='language']) {
--border-radius: 3px; --border-radius: 3px;
--padding-block: 0.2rem; --padding-block: 0.2rem;
--padding-inline: 0.33rem; --padding-inline: 0.33rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: .85em; font-size: 0.85em;
color: inherit; color: inherit;
background-color: var(--theme-code-inline-bg); background-color: var(--theme-code-inline-bg);
padding: var(--padding-block) var(--padding-inline); padding: var(--padding-block) var(--padding-inline);
@ -227,7 +226,7 @@ code:not([class*="language"]) {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
pre > code:not([class*="language"]) { pre > code:not([class*='language']) {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -245,7 +244,7 @@ pre {
padding-right: calc(var(--padding-inline) * 2); padding-right: calc(var(--padding-inline) * 2);
margin-left: calc(50vw - var(--padding-inline)); margin-left: calc(50vw - var(--padding-inline));
transform: translateX(-50vw); transform: translateX(-50vw);
line-height: 1.414; line-height: 1.414;
width: calc(100vw + (var(--padding-inline) * 2)); width: calc(100vw + (var(--padding-inline) * 2));
max-width: calc(100% + (var(--padding-inline) * 2)); max-width: calc(100% + (var(--padding-inline) * 2));

156
examples/blog/public/global.scss
View file

@ -1,99 +1,93 @@
:root { :root {
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --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", --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, --color-green: #17c083;
"Courier New", Courier, monospace;
--color-green: #17c083;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
} }
html { html {
display: grid; display: grid;
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
background-color: #000014; background-color: #000014;
} }
html, body { html,
padding: 0; body {
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); padding: 0;
font-family: var(--font-sans); font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-weight: 400; font-family: var(--font-sans);
background-image: radial-gradient( font-weight: 400;
87.7% 87.7% at 85.6% 18.14%, background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
#111827 0%, background-repeat: no-repeat;
#000014 100% color: #f3f4f6;
);
background-repeat: no-repeat;
color: #f3f4f6;
} }
body { body {
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
min-width: 100%; min-width: 100%;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
.visually-hidden { .visually-hidden {
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
clip-path: inset(50%); clip-path: inset(50%);
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
width: 1px; width: 1px;
} }
a { a {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: var(--color-green); color: var(--color-green);
padding: 0.05em 0.125em; padding: 0.05em 0.125em;
margin: -0.05em -0.125em; margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1); transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
&:hover, &:hover,
&:focus { &:focus {
color: rgba(0, 0, 0, 1); 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);
}
}
&::before { &::before {
transform-origin: bottom center; transform: scaleY(1);
content: ''; background: var(--color-green);
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;
} }
}
&: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;
}
} }

4
examples/docs/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

82
examples/docs/public/code.css
View file

@ -1,155 +1,155 @@
.language-css > code, .language-css > code,
.language-sass > code, .language-sass > code,
.language-scss > code { .language-scss > code {
color: #fd9170; color: #fd9170;
} }
[class*="language-"] .namespace { [class*='language-'] .namespace {
opacity: 0.7; opacity: 0.7;
} }
.token.atrule { .token.atrule {
color: #c792ea; color: #c792ea;
} }
.token.attr-name { .token.attr-name {
color: #ffcb6b; color: #ffcb6b;
} }
.token.attr-value { .token.attr-value {
color: #a5e844; color: #a5e844;
} }
.token.attribute { .token.attribute {
color: #a5e844; color: #a5e844;
} }
.token.boolean { .token.boolean {
color: #c792ea; color: #c792ea;
} }
.token.builtin { .token.builtin {
color: #ffcb6b; color: #ffcb6b;
} }
.token.cdata { .token.cdata {
color: #80cbc4; color: #80cbc4;
} }
.token.char { .token.char {
color: #80cbc4; color: #80cbc4;
} }
.token.class { .token.class {
color: #ffcb6b; color: #ffcb6b;
} }
.token.class-name { .token.class-name {
color: #f2ff00; color: #f2ff00;
} }
.token.comment { .token.comment {
color: #616161; color: #616161;
} }
.token.constant { .token.constant {
color: #c792ea; color: #c792ea;
} }
.token.deleted { .token.deleted {
color: #ff6666; color: #ff6666;
} }
.token.doctype { .token.doctype {
color: #616161; color: #616161;
} }
.token.entity { .token.entity {
color: #ff6666; color: #ff6666;
} }
.token.function { .token.function {
color: #c792ea; color: #c792ea;
} }
.token.hexcode { .token.hexcode {
color: #f2ff00; color: #f2ff00;
} }
.token.id { .token.id {
color: #c792ea; color: #c792ea;
font-weight: bold; font-weight: bold;
} }
.token.important { .token.important {
color: #c792ea; color: #c792ea;
font-weight: bold; font-weight: bold;
} }
.token.inserted { .token.inserted {
color: #80cbc4; color: #80cbc4;
} }
.token.keyword { .token.keyword {
color: #c792ea; color: #c792ea;
} }
.token.number { .token.number {
color: #fd9170; color: #fd9170;
} }
.token.operator { .token.operator {
color: #89ddff; color: #89ddff;
} }
.token.prolog { .token.prolog {
color: #616161; color: #616161;
} }
.token.property { .token.property {
color: #80cbc4; color: #80cbc4;
} }
.token.pseudo-class { .token.pseudo-class {
color: #a5e844; color: #a5e844;
} }
.token.pseudo-element { .token.pseudo-element {
color: #a5e844; color: #a5e844;
} }
.token.punctuation { .token.punctuation {
color: #89ddff; color: #89ddff;
} }
.token.regex { .token.regex {
color: #f2ff00; color: #f2ff00;
} }
.token.selector { .token.selector {
color: #ff6666; color: #ff6666;
} }
.token.string { .token.string {
color: #a5e844; color: #a5e844;
} }
.token.symbol { .token.symbol {
color: #c792ea; color: #c792ea;
} }
.token.tag { .token.tag {
color: #ff6666; color: #ff6666;
} }
.token.unit { .token.unit {
color: #fd9170; color: #fd9170;
} }
.token.url { .token.url {
color: #ff6666; color: #ff6666;
} }
.token.variable { .token.variable {
color: #ff6666; color: #ff6666;
} }

32
examples/docs/public/index.css
View file

@ -52,30 +52,31 @@ nav ul {
} }
h1 { h1 {
font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
} }
h2 { h2 {
font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
} }
h3 { h3 {
font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
} }
h4 { h4 {
font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
} }
h5 { h5 {
font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
} }
p { p {
color: var(--theme-text-light); color: var(--theme-text-light);
} }
small, .text_small { small,
.text_small {
font-size: 0.833rem; font-size: 0.833rem;
} }
@ -89,14 +90,14 @@ a {
gap: 0.5rem; gap: 0.5rem;
} }
a > code:not([class*="language"]) { a > code:not([class*='language']) {
position: relative; position: relative;
color: var(--theme-accent); color: var(--theme-accent);
background: transparent; background: transparent;
text-underline-offset: var(--padding-block); text-underline-offset: var(--padding-block);
} }
a > code:not([class*="language"])::before { a > code:not([class*='language'])::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -126,13 +127,13 @@ strong {
/* Supporting Content */ /* Supporting Content */
code:not([class*="language"]) { code:not([class*='language']) {
--border-radius: 3px; --border-radius: 3px;
--padding-block: 0.2rem; --padding-block: 0.2rem;
--padding-inline: 0.33rem; --padding-inline: 0.33rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: .85em; font-size: 0.85em;
color: inherit; color: inherit;
background-color: var(--theme-code-inline-bg); background-color: var(--theme-code-inline-bg);
padding: var(--padding-block) var(--padding-inline); padding: var(--padding-block) var(--padding-inline);
@ -140,7 +141,7 @@ code:not([class*="language"]) {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
pre > code:not([class*="language"]) { pre > code:not([class*='language']) {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -158,7 +159,7 @@ pre {
padding-right: calc(var(--padding-inline) * 2); padding-right: calc(var(--padding-inline) * 2);
margin-left: calc(50vw - var(--padding-inline)); margin-left: calc(50vw - var(--padding-inline));
transform: translateX(-50vw); transform: translateX(-50vw);
line-height: 1.414; line-height: 1.414;
width: calc(100vw + 4px); width: calc(100vw + 4px);
max-width: calc(100% + (var(--padding-inline) * 2)); max-width: calc(100% + (var(--padding-inline) * 2));
@ -211,7 +212,6 @@ button {
background-color: var(--theme-bg); background-color: var(--theme-bg);
} }
button:hover { button:hover {
} }
#theme-toggle { #theme-toggle {
@ -254,7 +254,7 @@ button:hover {
opacity: 1; opacity: 1;
} }
input[name="theme-toggle"] { input[name='theme-toggle'] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
top: 0; top: 0;
@ -354,7 +354,7 @@ nav h4 {
} }
.nav-groups > li + li { .nav-groups > li + li {
margin-top: 2rem; margin-top: 2rem;
} }
/* Scrollbar */ /* Scrollbar */
@ -362,7 +362,7 @@ nav h4 {
/* Firefox */ /* Firefox */
body { body {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--theme-text-lighter) var(--theme-divider); scrollbar-color: var(--theme-text-lighter) var(--theme-divider);
} }
/* width */ /* width */

46
examples/docs/public/theme.css
View file

@ -1,34 +1,34 @@
:root { :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-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-black: #000014;
--color-gray-50: #F9FAFB; --color-gray-50: #f9fafb;
--color-gray-100: #F3F4F6; --color-gray-100: #f3f4f6;
--color-gray-200: #E5E7EB; --color-gray-200: #e5e7eb;
--color-gray-300: #D1D5DB; --color-gray-300: #d1d5db;
--color-gray-400: #9CA3AF; --color-gray-400: #9ca3af;
--color-gray-500: #6B7280; --color-gray-500: #6b7280;
--color-gray-600: #4B5563; --color-gray-600: #4b5563;
--color-gray-700: #374151; --color-gray-700: #374151;
--color-gray-800: #1F2937; --color-gray-800: #1f2937;
--color-gray-900: #111827; --color-gray-900: #111827;
--color-blue: #3894FF; --color-blue: #3894ff;
--color-blue-rgb: 56,148,255; --color-blue-rgb: 56, 148, 255;
--color-green: #17C083; --color-green: #17c083;
--color-green-rgb: 23,192,131; --color-green-rgb: 23, 192, 131;
--color-orange: #FF5D01; --color-orange: #ff5d01;
--color-orange-rgb: 255,93,1; --color-orange-rgb: 255, 93, 1;
--color-purple: #882DE7; --color-purple: #882de7;
--color-purple-rgb: 136,45,231; --color-purple-rgb: 136, 45, 231;
--color-red: #FF1639; --color-red: #ff1639;
--color-red-rgb: 255,22,57; --color-red-rgb: 255, 22, 57;
--color-yellow: #FFBE2D; --color-yellow: #ffbe2d;
--color-yellow-rgb: 255,190,45; --color-yellow-rgb: 255, 190, 45;
} }
:root { :root {

6
examples/framework-lit/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-lit'],
'@astrojs/renderer-lit' };
]
};

33
examples/framework-lit/public/style/home.css
View file

@ -1,38 +1,39 @@
:root { :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; --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
--color-light: #F3F4F6; 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-light: #f3f4f6;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-light: #1F2937; --color-light: #1f2937;
} }
} }
a { a {
color: inherit; color: inherit;
} }
header > div { header > div {
font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
} }
header > div { header > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
header h1 { header h1 {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
} }
header img { header img {
width: 2em; width: 2em;
height: 2.667em; height: 2.667em;
} }
h2 { h2 {
font-weight: 500; font-weight: 500;
font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
} }

7
examples/framework-multiple/astro.config.mjs
View file

@ -11,10 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
'@astrojs/renderer-preact',
'@astrojs/renderer-react',
'@astrojs/renderer-svelte',
'@astrojs/renderer-vue',
]
}; };

22
examples/framework-multiple/src/components/VueCounter.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="counter"> <div class="counter">
<button @click="subtract()">-</button> <button @click="subtract()">-</button>
<pre>{{ count }}</pre> <pre>{{ count }}</pre>
<button @click="add()">+</button> <button @click="add()">+</button>
</div> </div>
<div class="children"> <div class="children">
<slot /> <slot />
</div> </div>
</template> </template>
@ -13,15 +13,15 @@
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const count = ref(0) const count = ref(0);
const add = () => count.value = count.value + 1; const add = () => (count.value = count.value + 1);
const subtract = () => count.value = count.value - 1; const subtract = () => (count.value = count.value - 1);
return { return {
count, count,
add, add,
subtract subtract,
} };
} },
} };
</script> </script>

4
examples/framework-preact/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

4
examples/framework-react/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-react'],
'@astrojs/renderer-react'
]
}; };

4
examples/framework-svelte/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-svelte'],
'@astrojs/renderer-svelte'
]
}; };

4
examples/framework-vue/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-vue'],
'@astrojs/renderer-vue'
]
}; };

22
examples/framework-vue/src/components/Counter.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="counter"> <div class="counter">
<button @click="subtract()">-</button> <button @click="subtract()">-</button>
<pre>{{ count }}</pre> <pre>{{ count }}</pre>
<button @click="add()">+</button> <button @click="add()">+</button>
</div> </div>
<div class="children"> <div class="children">
<slot /> <slot />
</div> </div>
</template> </template>
@ -13,15 +13,15 @@
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const count = ref(0) const count = ref(0);
const add = () => count.value = count.value + 1; const add = () => (count.value = count.value + 1);
const subtract = () => count.value = count.value - 1; const subtract = () => (count.value = count.value - 1);
return { return {
count, count,
add, add,
subtract subtract,
} };
} },
} };
</script> </script>

4
examples/portfolio/astro.config.mjs
View file

@ -11,7 +11,5 @@ export default {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.
// tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
}, },
renderers: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

70
examples/portfolio/public/global.scss
View file

@ -86,35 +86,69 @@ h1 {
$colors: 'black', 'blue', 'white'; $colors: 'black', 'blue', 'white';
@each $color in $colors { @each $color in $colors {
// text color // text color
.tc-#{$color} { color: var(--c-#{color}); } .tc-#{$color} {
color: var(--c-#{color});
}
// background color // background color
.bg-#{$color} { background-color: var(--c-#{color}); } .bg-#{$color} {
background-color: var(--c-#{color});
}
} }
// font size // font size
@for $i from 0 through 18 { @for $i from 0 through 18 {
.f-u#{$i} { font-size: var(--f-u#{$i}); } .f-u#{$i} {
.f-d#{$i} { font-size: var(--f-d#{$i}); } font-size: var(--f-u#{$i});
}
.f-d#{$i} {
font-size: var(--f-d#{$i});
}
} }
// margin & padding // margin & padding
@for $i from 0 through 36 { @for $i from 0 through 36 {
.ma#{$i} { margin: #{0.5 * $i}rem; } .ma#{$i} {
.mt#{$i} { margin-top: #{0.5 * $i}rem; } margin: #{0.5 * $i}rem;
.mr#{$i} { margin-right: #{0.5 * $i}rem; } }
.mb#{$i} { margin-bottom: #{0.5 * $i}rem; } .mt#{$i} {
.ml#{$i} { margin-left: #{0.5 * $i}rem; } margin-top: #{0.5 * $i}rem;
.pa#{$i} { padding: #{0.5 * $i}rem; } }
.pt#{$i} { padding-top: #{0.5 * $i}rem; } .mr#{$i} {
.pr#{$i} { padding-right: #{0.5 * $i}rem; } margin-right: #{0.5 * $i}rem;
.pb#{$i} { padding-bottom: #{0.5 * $i}rem; } }
.pl#{$i} { padding-left: #{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 // text align
.tac { text-align: center; } .tac {
.tal { text-align: left; } text-align: center;
.tar { text-align: right; } }
.tal {
text-align: left;
}
.tar {
text-align: right;
}
// wrapper // wrapper
.wrapper { .wrapper {
@ -126,4 +160,4 @@ $colors: 'black', 'blue', 'white';
} }
.wrapper__readable { .wrapper__readable {
max-width: 50em; max-width: 50em;
} }

4
examples/snowpack/astro.config.mjs
View file

@ -6,6 +6,6 @@ export default {
renderers: [ renderers: [
'@astrojs/renderer-vue', '@astrojs/renderer-vue',
'@astrojs/renderer-svelte', '@astrojs/renderer-svelte',
'@astrojs/renderer-preact' '@astrojs/renderer-preact',
] ],
}; };

20
examples/snowpack/public/favicon/site.webmanifest
View file

@ -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"} {
"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"
}

54
examples/snowpack/public/styles/_utils.scss
View file

@ -4,22 +4,48 @@
// margin & padding // margin & padding
@for $i from 0 through 36 { @for $i from 0 through 36 {
.ma#{$i} { margin: #{0.5 * $i}rem; } .ma#{$i} {
.mt#{$i} { margin-top: #{0.5 * $i}rem; } margin: #{0.5 * $i}rem;
.mr#{$i} { margin-right: #{0.5 * $i}rem; } }
.mb#{$i} { margin-bottom: #{0.5 * $i}rem; } .mt#{$i} {
.ml#{$i} { margin-left: #{0.5 * $i}rem; } margin-top: #{0.5 * $i}rem;
.pa#{$i} { padding: #{0.5 * $i}rem; } }
.pt#{$i} { padding-top: #{0.5 * $i}rem; } .mr#{$i} {
.pr#{$i} { padding-right: #{0.5 * $i}rem; } margin-right: #{0.5 * $i}rem;
.pb#{$i} { padding-bottom: #{0.5 * $i}rem; } }
.pl#{$i} { padding-left: #{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 // text align
.tac { text-align: center; } .tac {
.tal { text-align: left; } text-align: center;
.tar { text-align: right; } }
.tal {
text-align: left;
}
.tar {
text-align: right;
}
// wrapper // wrapper
.wrapper { .wrapper {
@ -32,4 +58,4 @@
.wrapper__readable { .wrapper__readable {
max-width: 55em; max-width: 55em;
} }

8
examples/snowpack/src/components/NewsTitle.vue
View file

@ -8,8 +8,8 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true required: true,
} },
} },
} };
</script> </script>

33
examples/starter/public/style/home.css
View file

@ -1,40 +1,41 @@
:root { :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; --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
--color-light: #F3F4F6; 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-light: #f3f4f6;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-light: #1F2937; --color-light: #1f2937;
} }
} }
a { a {
color: inherit; color: inherit;
} }
header > div { header > div {
font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
} }
header > div { header > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
header h1 { header h1 {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
} }
header img { header img {
width: 2em; width: 2em;
height: 2.667em; height: 2.667em;
} }
h2 { h2 {
font-weight: 500; font-weight: 500;
font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
} }
.counter { .counter {

14
examples/with-markdown-plugins/astro.config.mjs
View file

@ -4,19 +4,15 @@ export default {
// dist: './dist', // When running `astro build`, path to final static output // 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. // 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: { 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) // sitemap: true, // Generate sitemap (set to "false" to disable)
}, },
markdownOptions: { markdownOptions: {
remarkPlugins: [ remarkPlugins: ['remark-code-titles', 'remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
'remark-code-titles',
'remark-slug',
['remark-autolink-headings', { behavior: 'prepend' }],
],
rehypePlugins: [ rehypePlugins: [
['rehype-toc', { headings: ["h2", "h3"] }], ['rehype-toc', { headings: ['h2', 'h3'] }],
['rehype-add-classes', { 'h1,h2,h3': 'title', }], ['rehype-add-classes', { 'h1,h2,h3': 'title' }],
] ],
}, },
devOptions: { devOptions: {
// port: 3000, // The port to run the dev server on. // port: 3000, // The port to run the dev server on.

10
examples/with-markdown-plugins/public/global.css
View file

@ -34,20 +34,20 @@ body {
} }
.remark-code-title, .remark-code-title,
pre[class^="language-"] { pre[class^='language-'] {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
} }
.remark-code-title { .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; border-radius: 4px 4px 0 0;
background: rgba(0,0,0,.08); background: rgba(0, 0, 0, 0.08);
font-family: monospace; font-family: monospace;
font-weight: bold; font-weight: bold;
} }
pre[class^="language-"] { pre[class^='language-'] {
background: rgba(0,0,0,.05); background: rgba(0, 0, 0, 0.05);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }

2
examples/with-markdown/public/styles/global.scss
View file

@ -3,4 +3,4 @@
body { body {
max-width: 900px; max-width: 900px;
margin: auto; margin: auto;
} }

22
examples/with-markdown/src/components/VueCounter.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div class="counter"> <div class="counter">
<button @click="subtract()">-</button> <button @click="subtract()">-</button>
<pre>{{ count }}</pre> <pre>{{ count }}</pre>
<button @click="add()">+</button> <button @click="add()">+</button>
</div> </div>
<div class="children"> <div class="children">
<slot /> <slot />
</div> </div>
</template> </template>
@ -13,15 +13,15 @@
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
setup() { setup() {
const count = ref(0) const count = ref(0);
const add = () => count.value = count.value + 1; const add = () => (count.value = count.value + 1);
const subtract = () => count.value = count.value - 1; const subtract = () => (count.value = count.value - 1);
return { return {
count, count,
add, add,
subtract subtract,
} };
} },
} };
</script> </script>

9
examples/with-nanostores/astro.config.mjs
View file

@ -9,12 +9,7 @@ export default {
}, },
devOptions: { devOptions: {
// port: 3000, // The port to run the dev server on. // 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: [ renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
'@astrojs/renderer-preact',
'@astrojs/renderer-react',
'@astrojs/renderer-svelte',
'@astrojs/renderer-vue',
]
}; };

33
examples/with-nanostores/public/style/home.css
View file

@ -1,38 +1,39 @@
:root { :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; --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
--color-light: #F3F4F6; 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-light: #f3f4f6;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-light: #1F2937; --color-light: #1f2937;
} }
} }
a { a {
color: inherit; color: inherit;
} }
header > div { header > div {
font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
} }
header > div { header > div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
header h1 { header h1 {
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
} }
header img { header img {
width: 2em; width: 2em;
height: 2.667em; height: 2.667em;
} }
h2 { h2 {
font-weight: 500; font-weight: 500;
font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
} }

24
examples/with-nanostores/src/components/AdminsVue.vue
View file

@ -2,12 +2,12 @@
<h1>Vue</h1> <h1>Vue</h1>
<ul> <ul>
<li v-for="user in list" :key="user.name"> <li v-for="user in list" :key="user.name">
{{JSON.stringify(user, null, 2)}} {{ JSON.stringify(user, null, 2) }}
</li> </li>
</ul> </ul>
<div> <div>
<h3>Counter</h3> <h3>Counter</h3>
<p>{{count}}</p> <p>{{ count }}</p>
<button @click="decreaseCounter">-1</button> <button @click="decreaseCounter">-1</button>
<button @click="increaseCounter">+1</button> <button @click="increaseCounter">+1</button>
</div> </div>
@ -15,16 +15,16 @@
</template> </template>
<script> <script>
import { useStore } from 'nanostores/vue' import { useStore } from 'nanostores/vue';
import { admins } from '../store/admins.js' import { admins } from '../store/admins.js';
import { counter, increaseCounter, decreaseCounter } from '../store/counter.js' import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
export default { export default {
setup() { setup() {
const list = useStore(admins) const list = useStore(admins);
const count = useStore(counter) const count = useStore(counter);
return { list, count, increaseCounter, decreaseCounter } return { list, count, increaseCounter, decreaseCounter };
} },
} };
</script> </script>

8
examples/with-tailwindcss/astro.config.mjs
View file

@ -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. // 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: { 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) sitemap: true, // Generate sitemap (set to "false" to disable)
}, },
devOptions: { devOptions: {
// port: 3000, // The port to run the dev server on. // 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: [ renderers: ['@astrojs/renderer-preact'],
'@astrojs/renderer-preact'
]
}; };

115
packages/astro-prism/index.mjs
View file

@ -1,72 +1,82 @@
export function addAstro(Prism) { export function addAstro(Prism) {
if(Prism.languages.astro) { if (Prism.languages.astro) {
return; return;
} }
let scriptLang; let scriptLang;
if(Prism.languages.typescript) { if (Prism.languages.typescript) {
scriptLang = 'typescript'; scriptLang = 'typescript';
} else { } else {
scriptLang = 'javascript'; scriptLang = 'javascript';
console.warn('Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.'); console.warn('Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.');
} }
let script = Prism.util.clone(Prism.languages[scriptLang]); let script = Prism.util.clone(Prism.languages[scriptLang]);
let space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source; let space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source; let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
let spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source; let spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
/** /**
* @param {string} source * @param {string} source
* @param {string} [flags] * @param {string} [flags]
*/ */
function re(source, flags) { function re(source, flags) {
source = source source = source
.replace(/<S>/g, function () { return space; }) .replace(/<S>/g, function () {
.replace(/<BRACES>/g, function () { return braces; }) return space;
.replace(/<SPREAD>/g, function () { return spread; }); })
.replace(/<BRACES>/g, function () {
return braces;
})
.replace(/<SPREAD>/g, function () {
return spread;
});
return RegExp(source, flags); return RegExp(source, flags);
} }
spread = re(spread).source; spread = re(spread).source;
Prism.languages.astro = Prism.languages.extend('markup', script); Prism.languages.astro = Prism.languages.extend('markup', script);
Prism.languages.astro.tag.pattern = re( Prism.languages.astro.tag.pattern = re(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source);
/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
);
Prism.languages.astro.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i; Prism.languages.astro.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
Prism.languages.astro.tag.inside['attr-value'].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['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
Prism.languages.astro.tag.inside['comment'] = script['comment']; Prism.languages.astro.tag.inside['comment'] = script['comment'];
Prism.languages.insertBefore('inside', 'attr-name', {
'spread': {
pattern: re(/<SPREAD>/.source),
inside: Prism.languages.astro
}
}, Prism.languages.astro.tag);
Prism.languages.insertBefore('inside', 'special-attr', {
'script': {
// Allow for two levels of nesting
pattern: re(/=<BRACES>/.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(/<SPREAD>/.source),
inside: Prism.languages.astro,
},
},
Prism.languages.astro.tag
);
Prism.languages.insertBefore(
'inside',
'special-attr',
{
script: {
// Allow for two levels of nesting
pattern: re(/=<BRACES>/.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 // The following will handle plain text inside tags
let stringifyToken = function (token) { let stringifyToken = function (token) {
if (!token) { if (!token) {
@ -80,23 +90,23 @@ export function addAstro(Prism) {
} }
return token.content.map(stringifyToken).join(''); return token.content.map(stringifyToken).join('');
}; };
let walkTokens = function (tokens) { let walkTokens = function (tokens) {
let openedTags = []; let openedTags = [];
for (let i = 0; i < tokens.length; i++) { for (let i = 0; i < tokens.length; i++) {
let token = tokens[i]; let token = tokens[i];
// This breaks styles, not sure why // This breaks styles, not sure why
if(token.type === 'style') { if (token.type === 'style') {
return; return;
} }
let notTagNorBrace = false; let notTagNorBrace = false;
if (typeof token !== 'string') { if (typeof token !== 'string') {
if (token.type === 'tag' && token.content[0] && token.content[0].type === 'tag') { if (token.type === 'tag' && token.content[0] && token.content[0].type === 'tag') {
// We found a tag, now find its kind // We found a tag, now find its kind
if (token.content[0].content[0].content === '</') { if (token.content[0].content[0].content === '</') {
// Closing tag // Closing tag
if (openedTags.length > 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token.content[0].content[1])) { if (openedTags.length > 0 && openedTags[openedTags.length - 1].tagName === stringifyToken(token.content[0].content[1])) {
@ -110,22 +120,18 @@ export function addAstro(Prism) {
// Opening tag // Opening tag
openedTags.push({ openedTags.push({
tagName: stringifyToken(token.content[0].content[1]), tagName: stringifyToken(token.content[0].content[1]),
openedBraces: 0 openedBraces: 0,
}); });
} }
} }
} else if (openedTags.length > 0 && token.type === 'punctuation' && token.content === '{') { } else if (openedTags.length > 0 && token.type === 'punctuation' && token.content === '{') {
// Here we might have entered a Astro context inside a tag // Here we might have entered a Astro context inside a tag
openedTags[openedTags.length - 1].openedBraces++; openedTags[openedTags.length - 1].openedBraces++;
} else if (openedTags.length > 0 && openedTags[openedTags.length - 1].openedBraces > 0 && token.type === 'punctuation' && token.content === '}') { } 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 // Here we might have left a Astro context inside a tag
openedTags[openedTags.length - 1].openedBraces--; openedTags[openedTags.length - 1].openedBraces--;
} else { } else {
notTagNorBrace = true notTagNorBrace = true;
} }
} }
if (notTagNorBrace || typeof token === 'string') { 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. // Here we are inside a tag, and not inside a Astro context.
// That's plain text: drop any tokens matched. // That's plain text: drop any tokens matched.
let plainText = stringifyToken(token); let plainText = stringifyToken(token);
// And merge text with adjacent text // And merge text with adjacent text
if (i < tokens.length - 1 && (typeof tokens[i + 1] === 'string' || tokens[i + 1].type === 'plain-text')) { if (i < tokens.length - 1 && (typeof tokens[i + 1] === 'string' || tokens[i + 1].type === 'plain-text')) {
plainText += stringifyToken(tokens[i + 1]); plainText += stringifyToken(tokens[i + 1]);
@ -144,22 +150,21 @@ export function addAstro(Prism) {
tokens.splice(i - 1, 1); tokens.splice(i - 1, 1);
i--; i--;
} }
tokens[i] = new Prism.Token('plain-text', plainText, null, plainText); tokens[i] = new Prism.Token('plain-text', plainText, null, plainText);
} }
} }
if (token.content && typeof token.content !== 'string') { if (token.content && typeof token.content !== 'string') {
walkTokens(token.content); walkTokens(token.content);
} }
} }
}; };
Prism.hooks.add('after-tokenize', function (env) { Prism.hooks.add('after-tokenize', function (env) {
if (env.language !== 'astro') { if (env.language !== 'astro') {
return; return;
} }
walkTokens(env.tokens); walkTokens(env.tokens);
}); });
}
}

10
packages/astro/astro.cjs
View file

@ -7,14 +7,14 @@ const ci = require('ci-info');
const CI_INTRUCTIONS = { const CI_INTRUCTIONS = {
NETLIFY: 'https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript', 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', 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 */ /** Dynamically import the CLI after checking if this version of Node is supported */
async function main() { async function main() {
const engines = pkg.engines.node; const engines = pkg.engines.node;
const version = process.versions.node; const version = process.versions.node;
const isSupported = semver.satisfies(version, engines) const isSupported = semver.satisfies(version, engines);
if (!isSupported) { if (!isSupported) {
console.error(`\nNode.js v${version} is not supported by Astro! 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; 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]); if (CI_INTRUCTIONS[platform]) console.log(CI_INTRUCTIONS[platform]);
} }
process.exit(1); process.exit(1);
} }
await import('./dist/cli.js').then(({cli}) => cli(process.argv)); await import('./dist/cli.js').then(({ cli }) => cli(process.argv));
} }
main(); main();

23
packages/astro/snowpack-plugin.cjs
View file

@ -15,28 +15,17 @@ const DEFAULT_HMR_PORT = 12321;
* @type {import('snowpack').SnowpackPluginFactory<PluginOptions>} * @type {import('snowpack').SnowpackPluginFactory<PluginOptions>}
*/ */
module.exports = (snowpackConfig, options = {}) => { module.exports = (snowpackConfig, options = {}) => {
const { const { resolvePackageUrl, astroConfig, configManager, mode } = options;
resolvePackageUrl,
astroConfig,
configManager,
mode
} = options;
let hmrPort = DEFAULT_HMR_PORT; let hmrPort = DEFAULT_HMR_PORT;
return { return {
name: 'snowpack-astro', name: 'snowpack-astro',
knownEntrypoints: [ knownEntrypoints: ['astro/dist/internal/h.js', 'astro/components/Prism.astro', 'shorthash', 'estree-util-value-to-estree', 'astring'],
'astro/dist/internal/h.js',
'astro/components/Prism.astro',
'shorthash',
'estree-util-value-to-estree',
'astring'
],
resolve: { resolve: {
input: ['.astro', '.md'], input: ['.astro', '.md'],
output: ['.js', '.css'], output: ['.js', '.css'],
}, },
async transform({contents, id, fileExt}) { async transform({ contents, id, fileExt }) {
if(configManager.isConfigModule(fileExt, id)) { if (configManager.isConfigModule(fileExt, id)) {
configManager.configModuleId = id; configManager.configModuleId = id;
const source = await configManager.buildSource(contents); const source = await configManager.buildSource(contents);
return source; return source;
@ -44,13 +33,13 @@ module.exports = (snowpackConfig, options = {}) => {
}, },
onChange({ filePath }) { onChange({ filePath }) {
// If the astro.config.mjs file changes, mark the generated config module as changed. // 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); this.markChanged(configManager.configModuleId);
configManager.markDirty(); configManager.markDirty();
} }
}, },
async config(snowpackConfig) { async config(snowpackConfig) {
if(!isNaN(snowpackConfig.devOptions.hmrPort)) { if (!isNaN(snowpackConfig.devOptions.hmrPort)) {
hmrPort = snowpackConfig.devOptions.hmrPort; hmrPort = snowpackConfig.devOptions.hmrPort;
} else { } else {
hmrPort = await getPort({ port: DEFAULT_HMR_PORT, host: snowpackConfig.devOptions.hostname }); hmrPort = await getPort({ port: DEFAULT_HMR_PORT, host: snowpackConfig.devOptions.hostname });

2
packages/create-astro/create-astro.mjs
View file

@ -11,4 +11,4 @@ if (requiredMajorVersion < minimumMajorVersion) {
process.exit(1); process.exit(1);
} }
import('./dist/index.js').then(({main}) => main()); import('./dist/index.js').then(({ main }) => main());

4
www/astro.config.mjs
View file

@ -1,6 +1,6 @@
export default { export default {
buildOptions: { buildOptions: {
sitemap: true, sitemap: true,
site: 'https://astro.build/' site: 'https://astro.build/',
}, },
} };

77
www/public/blog.scss
View file

@ -1,37 +1,35 @@
:root { :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: "IBM Plex Sans", var(--font-fallback); --font-body: 'IBM Plex Sans', var(--font-fallback);
--font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
"Courier New", Courier, monospace;
--color-white: #FFF; --color-white: #fff;
--color-black: #000014; --color-black: #000014;
--color-gray-50: #F9FAFB; --color-gray-50: #f9fafb;
--color-gray-100: #F3F4F6; --color-gray-100: #f3f4f6;
--color-gray-200: #E5E7EB; --color-gray-200: #e5e7eb;
--color-gray-300: #D1D5DB; --color-gray-300: #d1d5db;
--color-gray-400: #9CA3AF; --color-gray-400: #9ca3af;
--color-gray-500: #6B7280; --color-gray-500: #6b7280;
--color-gray-600: #4B5563; --color-gray-600: #4b5563;
--color-gray-700: #374151; --color-gray-700: #374151;
--color-gray-800: #1F2937; --color-gray-800: #1f2937;
--color-gray-900: #111827; --color-gray-900: #111827;
--color-blue: #3894FF; --color-blue: #3894ff;
--color-blue-rgb: 56,148,255; --color-blue-rgb: 56, 148, 255;
--color-green: #17C083; --color-green: #17c083;
--color-green-rgb: 23,192,131; --color-green-rgb: 23, 192, 131;
--color-orange: #FF5D01; --color-orange: #ff5d01;
--color-orange-rgb: 255,93,1; --color-orange-rgb: 255, 93, 1;
--color-purple: #882DE7; --color-purple: #882de7;
--color-purple-rgb: 136,45,231; --color-purple-rgb: 136, 45, 231;
--color-red: #FF1639; --color-red: #ff1639;
--color-red-rgb: 255,22,57; --color-red-rgb: 255, 22, 57;
--color-yellow: #FFBE2D; --color-yellow: #ffbe2d;
--color-yellow-rgb: 255,190,45; --color-yellow-rgb: 255, 190, 45;
} }
:root { :root {
@ -140,30 +138,31 @@ nav ul {
} }
h1 { h1 {
font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem); font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
} }
h2 { h2 {
font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem); font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
} }
h3 { h3 {
font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem); font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
} }
h4 { h4 {
font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem); font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
} }
h5 { h5 {
font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem); font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
} }
p { p {
color: var(--theme-text-light); color: var(--theme-text-light);
} }
small, .text_small { small,
.text_small {
font-size: 0.833rem; font-size: 0.833rem;
} }
@ -176,14 +175,14 @@ a {
gap: 0.5rem; gap: 0.5rem;
} }
a > code:not([class*="language"]) { a > code:not([class*='language']) {
position: relative; position: relative;
color: var(--theme-accent); color: var(--theme-accent);
background: transparent; background: transparent;
text-underline-offset: var(--padding-block); text-underline-offset: var(--padding-block);
} }
a > code:not([class*="language"])::before { a > code:not([class*='language'])::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -213,13 +212,13 @@ strong {
/* Supporting Content */ /* Supporting Content */
code:not([class*="language"]) { code:not([class*='language']) {
--border-radius: 3px; --border-radius: 3px;
--padding-block: 0.2rem; --padding-block: 0.2rem;
--padding-inline: 0.33rem; --padding-inline: 0.33rem;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: .85em; font-size: 0.85em;
color: inherit; color: inherit;
background-color: var(--theme-code-inline-bg); background-color: var(--theme-code-inline-bg);
padding: var(--padding-block) var(--padding-inline); padding: var(--padding-block) var(--padding-inline);
@ -227,7 +226,7 @@ code:not([class*="language"]) {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
pre > code:not([class*="language"]) { pre > code:not([class*='language']) {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -245,7 +244,7 @@ pre {
padding-right: calc(var(--padding-inline) * 2); padding-right: calc(var(--padding-inline) * 2);
margin-left: calc(50vw - var(--padding-inline)); margin-left: calc(50vw - var(--padding-inline));
transform: translateX(-50vw); transform: translateX(-50vw);
line-height: 1.414; line-height: 1.414;
width: calc(100vw + (var(--padding-inline) * 2)); width: calc(100vw + (var(--padding-inline) * 2));
max-width: calc(100% + (var(--padding-inline) * 2)); max-width: calc(100% + (var(--padding-inline) * 2));

156
www/public/global.scss
View file

@ -1,99 +1,93 @@
:root { :root {
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --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", --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, --color-green: #17c083;
"Courier New", Courier, monospace;
--color-green: #17c083;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
} }
html { html {
display: grid; display: grid;
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
background-color: #000014; background-color: #000014;
} }
html, body { html,
padding: 0; body {
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px); padding: 0;
font-family: var(--font-sans); font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-weight: 400; font-family: var(--font-sans);
background-image: radial-gradient( font-weight: 400;
87.7% 87.7% at 85.6% 18.14%, background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
#111827 0%, background-repeat: no-repeat;
#000014 100% color: #f3f4f6;
);
background-repeat: no-repeat;
color: #f3f4f6;
} }
body { body {
position: relative; position: relative;
display: grid; display: grid;
place-items: center; place-items: center;
min-width: 100%; min-width: 100%;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
.visually-hidden { .visually-hidden {
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
clip-path: inset(50%); clip-path: inset(50%);
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
width: 1px; width: 1px;
} }
a { a {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: var(--color-green); color: var(--color-green);
padding: 0.05em 0.125em; padding: 0.05em 0.125em;
margin: -0.05em -0.125em; margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1); transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0; z-index: 0;
display: inline-block; display: inline-block;
&:hover, &:hover,
&:focus { &:focus {
color: rgba(0, 0, 0, 1); 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);
}
}
&::before { &::before {
transform-origin: bottom center; transform: scaleY(1);
content: ''; background: var(--color-green);
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;
} }
}
&: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;
}
} }