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

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

@ -1,4 +1,4 @@
---
---
interface Props {
title: string;
}
@ -6,11 +6,11 @@ interface Props {
const { title } = Astro.props;
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description">
<meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
@ -25,15 +25,27 @@ const { title } = Astro.props;
--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--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 {
font-family: system-ui, sans-serif;
background: #13151A;
background: #13151a;
background-size: 224px;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</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">
<head>
<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';
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
@ -16,14 +16,14 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<p>
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
a personal website, blog, or portfolio with Astro.
template serves as a lightweight, minimally-styled starting point for anyone looking to
build a personal website, blog, or portfolio with Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<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,
React, or Vue to your project.
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
Tailwind, React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>

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

@ -6,7 +6,7 @@ interface Props {
const { title } = Astro.props as Props;
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@ -46,8 +46,15 @@ const { title } = Astro.props as Props;
}
:global(code) {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
</style>
</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/
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<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}`}>
{story.user}
</a>
&nbsp;{story.time_ago}
&nbsp;{story.time_ago}
</p>
</header>
<main>

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

@ -30,7 +30,9 @@ const { href, title, body } = Astro.props;
border-radius: 0.6rem;
background-position: 100%;
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 {

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

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

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

@ -1,4 +1,5 @@
---
---
<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">
<a href="/" class="site-title">
<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
Jeanine White
Jeanine White
</a>
<menu-button>
<template>
@ -321,7 +321,9 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
.link {
padding: 0.5rem 1rem;
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,

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

@ -54,7 +54,9 @@ import Icon from './Icon.astro';
@media (prefers-reduced-motion: no-preference) {
.icon,
.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%;
isolation: isolate;
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,
/*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,
/*base*/ var(--gray-999);
background-blend-mode: /*noise*/ overlay, /*footer*/ var(--bg-blend-mode),
/*header1*/ var(--bg-svg-blend-mode), /*header2*/ normal, /*base*/ normal;
background-blend-mode: /*noise*/
overlay,
/*footer*/ var(--bg-blend-mode),
/*header1*/ var(--bg-svg-blend-mode),
/*header2*/ normal,
/*base*/ normal;
}
@media (forced-colors: active) {
/* 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">
<p>
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
id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla
pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl
condimentum id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu
odio ut sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum
dui faucibus in ornare.
</p>
<p>
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));
top: 0;
transform: translateY(-75%) translateX(-50%);
background: url('/assets/backgrounds/noise.png') top center/220px repeat,
var(--hero-bg) center center / var(--bg-gradient-size) no-repeat, var(--gray-999);
background:
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;
mix-blend-mode: var(--bg-blend-mode);
z-index: -1;

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

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

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

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

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

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

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

@ -1,4 +1,5 @@
---
---
<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) {
const effect = animation.effect;
if(
!effect ||
!(effect instanceof KeyframeEffect) ||
!effect.target
) return false;
const style = window.getComputedStyle(effect.target, effect.pseudoElement);
return style.animationIterationCount === "infinite";
}
if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
const style = window.getComputedStyle(effect.target, effect.pseudoElement);
return style.animationIterationCount === 'infinite';
}
const parser = new DOMParser();
@ -236,8 +232,10 @@ const { fallback = 'animate' } = Astro.props as Props;
// Trigger the animations
const currentAnimations = document.getAnimations();
document.documentElement.dataset.astroTransitionFallback = 'old';
const newAnimations = document.getAnimations().filter(a => !currentAnimations.includes(a) && !isInfinite(a));
const finished = Promise.all(newAnimations.map(a => a.finished));
const newAnimations = document
.getAnimations()
.filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
const finished = Promise.all(newAnimations.map((a) => a.finished));
const fallbackSwap = () => {
swap();
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,
// respect that with a full page reload
// -- but only for transition managed by us (ev.state is set)
history.scrollRestoration && (history.scrollRestoration = "manual")
history.scrollRestoration && (history.scrollRestoration = 'manual');
location.reload();
return;
}
@ -365,7 +363,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// The browser will handle navigation fine without our help
if (ev.state === null) {
if (history.scrollRestoration) {
history.scrollRestoration = "auto";
history.scrollRestoration = 'auto';
}
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
// before the ViewTransition is complete.
if (history.scrollRestoration) {
history.scrollRestoration = "manual";
history.scrollRestoration = 'manual';
}
const state: State | undefined = history.state;
@ -404,13 +402,13 @@ const { fallback = 'animate' } = Astro.props as Props;
addEventListener('load', onPageLoad);
// 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.
const updateState = () => {
const updateState = () => {
// only update history entries that are managed by us
// leave other entries alone and do not accidently add state.
if (history.state) {
persistState({ ...history.state, scrollY });
}
}
};
if ('onscrollend' in window) addEventListener('scrollend', updateState);
else addEventListener('scroll', throttle(updateState, 300));
}