[ci] yarn format
This commit is contained in:
FredKSchott
GitHub Actions
parent
07e533402e
commit
50f82e1a53
46 changed files with 666 additions and 632 deletions
4
.github/ISSUE_TEMPLATE/---01-bug-report.yml
vendored
4
.github/ISSUE_TEMPLATE/---01-bug-report.yml
vendored
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
2
.github/ISSUE_TEMPLATE/config.yml
vendored
2
.github/ISSUE_TEMPLATE/config.yml
vendored
|
|
@ -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!'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"endOfLine": "auto",
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 80
|
||||
}
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"endOfLine": "auto",
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 80
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ export default {
|
|||
},
|
||||
plugins: ['@snowpack/plugin-dotenv'],
|
||||
workspaceRoot: '../',
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
};
|
||||
renderers: ['@astrojs/renderer-lit'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="counter">
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
</div>
|
||||
<div class="children">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="counter">
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
</div>
|
||||
<div class="children">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ export default {
|
|||
renderers: [
|
||||
'@astrojs/renderer-vue',
|
||||
'@astrojs/renderer-svelte',
|
||||
'@astrojs/renderer-preact'
|
||||
]
|
||||
'@astrojs/renderer-preact',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ export default {
|
|||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
body {
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="counter">
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
<button @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
</div>
|
||||
<div class="children">
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
<h1>Vue</h1>
|
||||
<ul>
|
||||
<li v-for="user in list" :key="user.name">
|
||||
{{JSON.stringify(user, null, 2)}}
|
||||
{{ JSON.stringify(user, null, 2) }}
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<h3>Counter</h3>
|
||||
<p>{{count}}</p>
|
||||
<p>{{ count }}</p>
|
||||
<button @click="decreaseCounter">-1</button>
|
||||
<button @click="increaseCounter">+1</button>
|
||||
</div>
|
||||
|
|
@ -15,16 +15,16 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { useStore } from 'nanostores/vue'
|
||||
import { useStore } from 'nanostores/vue';
|
||||
|
||||
import { admins } from '../store/admins.js'
|
||||
import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'
|
||||
import { admins } from '../store/admins.js';
|
||||
import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const list = useStore(admins)
|
||||
const count = useStore(counter)
|
||||
return { list, count, increaseCounter, decreaseCounter }
|
||||
}
|
||||
}
|
||||
export default {
|
||||
setup() {
|
||||
const list = useStore(admins);
|
||||
const count = useStore(counter);
|
||||
return { list, count, increaseCounter, decreaseCounter };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} source
|
||||
* @param {string} [flags]
|
||||
*/
|
||||
function re(source, flags) {
|
||||
source = source
|
||||
.replace(/<S>/g, function () { return space; })
|
||||
.replace(/<BRACES>/g, function () { return braces; })
|
||||
.replace(/<SPREAD>/g, function () { return spread; });
|
||||
.replace(/<S>/g, function () {
|
||||
return space;
|
||||
})
|
||||
.replace(/<BRACES>/g, function () {
|
||||
return braces;
|
||||
})
|
||||
.replace(/<SPREAD>/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.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
|
||||
);
|
||||
|
||||
Prism.languages.astro.tag.pattern = re(/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<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(/<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
|
||||
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 === '</') {
|
||||
// Closing tag
|
||||
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
|
||||
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);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -15,28 +15,17 @@ const DEFAULT_HMR_PORT = 12321;
|
|||
* @type {import('snowpack').SnowpackPluginFactory<PluginOptions>}
|
||||
*/
|
||||
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 });
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ if (requiredMajorVersion < minimumMajorVersion) {
|
|||
process.exit(1);
|
||||
}
|
||||
|
||||
import('./dist/index.js').then(({main}) => main());
|
||||
import('./dist/index.js').then(({ main }) => main());
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
buildOptions: {
|
||||
sitemap: true,
|
||||
site: 'https://astro.build/'
|
||||
site: 'https://astro.build/',
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue