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

[ci] format

Browse source
This commit is contained in:
natemoo-re 2023-09-06 15:25:56 +00:00 committed by astrobot-houston
parent c06b41a6b8
commit eb7615f25a
19 changed files with 127 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
examples/basics/src/layouts/Layout.astro
View file

@ -6,11 +6,11 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content="Astro description"> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
@ -25,15 +25,27 @@ const { title } = Astro.props;
--accent: 136, 58, 234; --accent: 136, 58, 234;
--accent-light: 224, 204, 250; --accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101; --accent-dark: 49, 10, 101;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%); --accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
} }
html { html {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
background: #13151A; background: #13151a;
background-size: 224px; background-size: 224px;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>

2
examples/blog/src/pages/blog/index.astro
View file

@ -11,7 +11,7 @@ const posts = (await getCollection('blog')).sort(
); );
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />

10
examples/blog/src/pages/index.astro
View file

@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
@ -16,14 +16,14 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<h1>🧑‍🚀 Hello, Astronaut!</h1> <h1>🧑‍🚀 Hello, Astronaut!</h1>
<p> <p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build template serves as a lightweight, minimally-styled starting point for anyone looking to
a personal website, blog, or portfolio with Astro. build a personal website, blog, or portfolio with Astro.
</p> </p>
<p> <p>
This template comes with a few integrations already configured in your This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with <code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind, <a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
React, or Vue to your project. Tailwind, React, or Vue to your project.
</p> </p>
<p>Here are a few ideas on how to get started with the template:</p> <p>Here are a few ideas on how to get started with the template:</p>
<ul> <ul>

13
examples/deno/src/components/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props as Props; const { title } = Astro.props as Props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -46,8 +46,15 @@ const { title } = Astro.props as Props;
} }
:global(code) { :global(code) {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>
</body> </body>

2
examples/framework-lit/src/pages/index.astro
View file

@ -7,7 +7,7 @@ import { MyCounter } from '../components/my-counter.js';
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

2
examples/hackernews/src/pages/stories/[id].astro
View file

@ -25,7 +25,7 @@ const story = (await fetchAPI(`item/${id}`)) as IStory;
<a href={`/users/${story.user}`}> <a href={`/users/${story.user}`}>
{story.user} {story.user}
</a> </a>
&nbsp;{story.time_ago} &nbsp;{story.time_ago}
</p> </p>
</header> </header>
<main> <main>

4
examples/middleware/src/components/Card.astro
View file

@ -30,7 +30,9 @@ const { href, title, body } = Astro.props;
border-radius: 0.6rem; border-radius: 0.6rem;
background-position: 100%; background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
.link-card > a { .link-card > a {

13
examples/middleware/src/layouts/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -29,7 +29,14 @@ const { title } = Astro.props;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
</style> </style>

1
examples/minimal/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

6
examples/portfolio/src/components/Nav.astro
View file

@ -25,7 +25,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
<div class="menu-header"> <div class="menu-header">
<a href="/" class="site-title"> <a href="/" class="site-title">
<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient /> <Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
Jeanine White Jeanine White
</a> </a>
<menu-button> <menu-button>
<template> <template>
@ -321,7 +321,9 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
.link { .link {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 999rem; border-radius: 999rem;
transition: color var(--theme-transition), background-color var(--theme-transition); transition:
color var(--theme-transition),
background-color var(--theme-transition);
} }
.link:hover, .link:hover,

4
examples/portfolio/src/components/ThemeToggle.astro
View file

@ -54,7 +54,9 @@ import Icon from './Icon.astro';
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.icon, .icon,
.icon.light::before { .icon.light::before {
transition: transform var(--theme-transition), color var(--theme-transition); transition:
transform var(--theme-transition),
color var(--theme-transition);
} }
} }

11
examples/portfolio/src/layouts/BaseLayout.astro
View file

@ -92,13 +92,18 @@ const { title, description } = Astro.props;
min-height: 100%; min-height: 100%;
isolation: isolate; isolation: isolate;
background: background:
/*noise*/ url('/assets/backgrounds/noise.png') top center/220px repeat, /*noise*/
url('/assets/backgrounds/noise.png') top center/220px repeat,
/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat, /*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat, /*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat, /*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
/*base*/ var(--gray-999); /*base*/ var(--gray-999);
background-blend-mode: /*noise*/ overlay, /*footer*/ var(--bg-blend-mode), background-blend-mode: /*noise*/
/*header1*/ var(--bg-svg-blend-mode), /*header2*/ normal, /*base*/ normal; overlay,
/*footer*/ var(--bg-blend-mode),
/*header1*/ var(--bg-svg-blend-mode),
/*header2*/ normal,
/*base*/ normal;
} }
@media (forced-colors: active) { @media (forced-colors: active) {
/* Deactivate custom backgrounds for high contrast users. */ /* Deactivate custom backgrounds for high contrast users. */

7
examples/portfolio/src/pages/about.astro
View file

@ -25,9 +25,10 @@ import Hero from '../components/Hero.astro';
<div class="content"> <div class="content">
<p> <p>
Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy. Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl
id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla condimentum id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu
pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. odio ut sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum
dui faucibus in ornare.
</p> </p>
<p> <p>
Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis

6
examples/portfolio/src/pages/index.astro
View file

@ -169,8 +169,10 @@ const projects = (await getCollection('work'))
aspect-ratio: calc(2.25 / var(--bg-scale)); aspect-ratio: calc(2.25 / var(--bg-scale));
top: 0; top: 0;
transform: translateY(-75%) translateX(-50%); transform: translateY(-75%) translateX(-50%);
background: url('/assets/backgrounds/noise.png') top center/220px repeat, background:
var(--hero-bg) center center / var(--bg-gradient-size) no-repeat, var(--gray-999); url('/assets/backgrounds/noise.png') top center/220px repeat,
var(--hero-bg) center center / var(--bg-gradient-size) no-repeat,
var(--gray-999);
background-blend-mode: overlay, normal, normal, normal; background-blend-mode: overlay, normal, normal, normal;
mix-blend-mode: var(--bg-blend-mode); mix-blend-mode: var(--bg-blend-mode);
z-index: -1; z-index: -1;

13
examples/with-markdoc/src/layouts/Layout.astro
View file

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -25,8 +25,15 @@ const { title } = Astro.props;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
code { code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family:
Bitstream Vera Sans Mono, Courier New, monospace; Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
} }
main { main {
margin: auto; margin: auto;

51
examples/with-nanostores/src/layouts/Layout.astro
View file

@ -9,25 +9,27 @@ interface Props {
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<header> <header>
<nav> <nav>
<a href="/" class="nav-header"><span style="color: var(--astro-blue)">Astro</span> storefront</a> <a href="/" class="nav-header"
<CartFlyoutToggle client:load /> ><span style="color: var(--astro-blue)">Astro</span> storefront</a
</nav> >
</header> <CartFlyoutToggle client:load />
<slot /> </nav>
<CartFlyout client:load /> </header>
</body> <slot />
<CartFlyout client:load />
</body>
</html> </html>
<style is:global> <style is:global>
@ -35,14 +37,14 @@ const { title } = Astro.props;
--font-family: system-ui, sans-serif; --font-family: system-ui, sans-serif;
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.0rem, 1.75vw + 1.35rem, 2.75rem); --font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--color-text: hsl(12, 5%, 4%); --color-text: hsl(12, 5%, 4%);
--color-bg: hsl(17, 20%, 97%); --color-bg: hsl(17, 20%, 97%);
--color-bg-2: hsl(17, 20%, 94%); --color-bg-2: hsl(17, 20%, 94%);
--color-bg-3: hsl(17, 20%, 88%); --color-bg-3: hsl(17, 20%, 88%);
--astro-blue: #4F39FA; --astro-blue: #4f39fa;
--astro-pink: #DA62C4; --astro-pink: #da62c4;
--content-max-width: 90ch; --content-max-width: 90ch;
--nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@ -56,7 +58,9 @@ const { title } = Astro.props;
border: none; border: none;
color: var(--astro-blue); color: var(--astro-blue);
border: 2px solid var(--astro-blue); border: 2px solid var(--astro-blue);
transition: color 0.2s, background-color 0.2s; transition:
color 0.2s,
background-color 0.2s;
background-color: transparent; background-color: transparent;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 0.4rem; border-radius: 0.4rem;
@ -98,7 +102,8 @@ const { title } = Astro.props;
align-items: center; align-items: center;
} }
.nav-header, .nav-header:visited { .nav-header,
.nav-header:visited {
font-size: var(--font-size-base); font-size: var(--font-size-base);
font-weight: bold; font-weight: bold;
color: inherit; color: inherit;

1
examples/with-vite-plugin-pwa/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

1
examples/with-vitest/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
--- ---
<html lang="en"> <html lang="en">

28
packages/astro/components/ViewTransitions.astro
View file

@ -102,14 +102,10 @@ const { fallback = 'animate' } = Astro.props as Props;
function isInfinite(animation: Animation) { function isInfinite(animation: Animation) {
const effect = animation.effect; const effect = animation.effect;
if( if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
!effect || const style = window.getComputedStyle(effect.target, effect.pseudoElement);
!(effect instanceof KeyframeEffect) || return style.animationIterationCount === 'infinite';
!effect.target }
) return false;
const style = window.getComputedStyle(effect.target, effect.pseudoElement);
return style.animationIterationCount === "infinite";
}
const parser = new DOMParser(); const parser = new DOMParser();
@ -236,8 +232,10 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations // Trigger the animations
const currentAnimations = document.getAnimations(); const currentAnimations = document.getAnimations();
document.documentElement.dataset.astroTransitionFallback = 'old'; document.documentElement.dataset.astroTransitionFallback = 'old';
const newAnimations = document.getAnimations().filter(a => !currentAnimations.includes(a) && !isInfinite(a)); const newAnimations = document
const finished = Promise.all(newAnimations.map(a => a.finished)); .getAnimations()
.filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
const finished = Promise.all(newAnimations.map((a) => a.finished));
const fallbackSwap = () => { const fallbackSwap = () => {
swap(); swap();
document.documentElement.dataset.astroTransitionFallback = 'new'; document.documentElement.dataset.astroTransitionFallback = 'new';
@ -354,7 +352,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// The current page doesn't haven't View Transitions, // The current page doesn't haven't View Transitions,
// respect that with a full page reload // respect that with a full page reload
// -- but only for transition managed by us (ev.state is set) // -- but only for transition managed by us (ev.state is set)
history.scrollRestoration && (history.scrollRestoration = "manual") history.scrollRestoration && (history.scrollRestoration = 'manual');
location.reload(); location.reload();
return; return;
} }
@ -365,7 +363,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// The browser will handle navigation fine without our help // The browser will handle navigation fine without our help
if (ev.state === null) { if (ev.state === null) {
if (history.scrollRestoration) { if (history.scrollRestoration) {
history.scrollRestoration = "auto"; history.scrollRestoration = 'auto';
} }
return; return;
} }
@ -373,7 +371,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// With the default "auto", the browser will jump to the old scroll position // With the default "auto", the browser will jump to the old scroll position
// before the ViewTransition is complete. // before the ViewTransition is complete.
if (history.scrollRestoration) { if (history.scrollRestoration) {
history.scrollRestoration = "manual"; history.scrollRestoration = 'manual';
} }
const state: State | undefined = history.state; const state: State | undefined = history.state;
@ -404,13 +402,13 @@ const { fallback = 'animate' } = Astro.props as Props;
addEventListener('load', onPageLoad); addEventListener('load', onPageLoad);
// There's not a good way to record scroll position before a back button. // There's not a good way to record scroll position before a back button.
// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position. // So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
const updateState = () => { const updateState = () => {
// only update history entries that are managed by us // only update history entries that are managed by us
// leave other entries alone and do not accidently add state. // leave other entries alone and do not accidently add state.
if (history.state) { if (history.state) {
persistState({ ...history.state, scrollY }); persistState({ ...history.state, scrollY });
} }
} };
if ('onscrollend' in window) addEventListener('scrollend', updateState); if ('onscrollend' in window) addEventListener('scrollend', updateState);
else addEventListener('scroll', throttle(updateState, 300)); else addEventListener('scroll', throttle(updateState, 300));
} }