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

[ci] format

Browse source
This commit is contained in:
FredKSchott 2022-08-06 04:39:26 +00:00 • committed by fredkbot
parent 24c8e7d853
commit 4de35f3b70
59 changed files with 216 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/basics/src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from '../layouts/Layout.astro';
import Card from "../components/Card.astro"; import Card from '../components/Card.astro';
--- ---
<Layout title="Welcome to Astro."> <Layout title="Welcome to Astro.">

2
examples/blog/src/components/BaseHead.astro
View file

@ -1,5 +1,5 @@
--- ---
import "../styles/blog.css"; import '../styles/blog.css';
export interface Props { export interface Props {
title: string; title: string;

1
examples/blog/src/components/FollowMe.astro
View file

@ -8,4 +8,3 @@ const { username, href } = Astro.props as Props;
--- ---
<p>Follow me <a {href} target="_blank" rel="noreferrer">@{username}</a></p> <p>Follow me <a {href} target="_blank" rel="noreferrer">@{username}</a></p>

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

@ -1,13 +1,13 @@
--- ---
import BaseHead from "../components/BaseHead.astro"; import BaseHead from '../components/BaseHead.astro';
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import BlogPostPreview from "../components/BlogPostPreview.astro"; import BlogPostPreview from '../components/BlogPostPreview.astro';
let title = "Example Blog"; let title = 'Example Blog';
let description = "The perfect starter for your perfect blog."; let description = 'The perfect starter for your perfect blog.';
// Use Astro.glob to fetch all post with associated frontmatter // Use Astro.glob to fetch all post with associated frontmatter
const unsortedPosts = await Astro.glob("./posts/*.md"); const unsortedPosts = await Astro.glob('./posts/*.md');
const posts = unsortedPosts.sort(function (a, b) { const posts = unsortedPosts.sort(function (a, b) {
return ( return (
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf() new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()

2
examples/component/demo/src/pages/index.astro
View file

@ -1,5 +1,5 @@
--- ---
import * as Component from "@example/my-component"; import * as Component from '@example/my-component';
--- ---
<html lang="en"> <html lang="en">

2
examples/component/packages/my-component/Button.astro
View file

@ -7,7 +7,7 @@ const { type, ...props } = {
...Astro.props, ...Astro.props,
} as Props; } as Props;
props.type = type || "button"; props.type = type || 'button';
--- ---
<button {...props}><slot /></button> <button {...props}><slot /></button>

4
examples/component/packages/my-component/Heading.astro
View file

@ -8,8 +8,8 @@ const { level, role, ...props } = {
...Astro.props, ...Astro.props,
} as Props; } as Props;
props.role = role || "heading"; props.role = role || 'heading';
props["aria-level"] = level || "1"; props['aria-level'] = level || '1';
--- ---
<h {...props}><slot /></h> <h {...props}><slot /></h>

10
examples/docs/src/components/Footer/AvatarList.astro
View file

@ -1,6 +1,6 @@
--- ---
// fetch all commits for just this page's path // fetch all commits for just this page's path
const path = "docs/" + Astro.props.path; const path = 'docs/' + Astro.props.path;
const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`; const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`;
const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`; const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`;
@ -13,13 +13,13 @@ async function getCommits(url) {
); );
} }
const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`; const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
const res = await fetch(url, { const res = await fetch(url, {
method: "GET", method: 'GET',
headers: { headers: {
Authorization: auth, Authorization: auth,
"User-Agent": "astro-docs/1.0", 'User-Agent': 'astro-docs/1.0',
}, },
}); });
@ -81,7 +81,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
{additionalContributors > 0 && ( {additionalContributors > 0 && (
<span> <span>
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${ <a href={commitsURL}>{`and ${additionalContributors} additional contributor${
additionalContributors > 1 ? "s" : "" additionalContributors > 1 ? 's' : ''
}.`}</a> }.`}</a>
</span> </span>
)} )}

2
examples/docs/src/components/Footer/Footer.astro
View file

@ -1,5 +1,5 @@
--- ---
import AvatarList from "./AvatarList.astro"; import AvatarList from './AvatarList.astro';
const { path } = Astro.props; const { path } = Astro.props;
--- ---

12
examples/docs/src/components/HeadCommon.astro
View file

@ -1,6 +1,6 @@
--- ---
import "../styles/theme.css"; import '../styles/theme.css';
import "../styles/index.css"; import '../styles/index.css';
--- ---
<!-- Global Metadata --> <!-- Global Metadata -->
@ -28,11 +28,11 @@ import "../styles/index.css";
<!-- This is intentionally inlined to avoid FOUC --> <!-- This is intentionally inlined to avoid FOUC -->
<script is:inline> <script is:inline>
const root = document.documentElement; const root = document.documentElement;
const theme = localStorage.getItem("theme"); const theme = localStorage.getItem('theme');
if (theme === "dark" || (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)) { if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
root.classList.add("theme-dark"); root.classList.add('theme-dark');
} else { } else {
root.classList.remove("theme-dark"); root.classList.remove('theme-dark');
} }
</script> </script>

2
examples/docs/src/components/HeadSEO.astro
View file

@ -1,5 +1,5 @@
--- ---
import { SITE, OPEN_GRAPH } from "../config"; import { SITE, OPEN_GRAPH } from '../config';
export interface Props { export interface Props {
content: any; content: any;
site: any; site: any;

16
examples/docs/src/components/Header/Header.astro
View file

@ -1,11 +1,11 @@
--- ---
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages"; import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
import * as CONFIG from "../../config"; import * as CONFIG from '../../config';
import AstroLogo from "./AstroLogo.astro"; import AstroLogo from './AstroLogo.astro';
import SkipToContent from "./SkipToContent.astro"; import SkipToContent from './SkipToContent.astro';
import SidebarToggle from "./SidebarToggle"; import SidebarToggle from './SidebarToggle';
import LanguageSelect from "./LanguageSelect"; import LanguageSelect from './LanguageSelect';
import Search from "./Search"; import Search from './Search';
const { currentPage } = Astro.props; const { currentPage } = Astro.props;
const lang = currentPage && getLanguageFromURL(currentPage); const lang = currentPage && getLanguageFromURL(currentPage);
@ -20,7 +20,7 @@ const lang = currentPage && getLanguageFromURL(currentPage);
<div class="logo flex"> <div class="logo flex">
<a href="/"> <a href="/">
<AstroLogo size={40} /> <AstroLogo size={40} />
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1> <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
</a> </a>
</div> </div>
<div style="flex-grow: 1;"></div> <div style="flex-grow: 1;"></div>

16
examples/docs/src/components/LeftSidebar/LeftSidebar.astro
View file

@ -1,6 +1,6 @@
--- ---
import { getLanguageFromURL } from "../../languages"; import { getLanguageFromURL } from '../../languages';
import { SIDEBAR } from "../../config"; import { SIDEBAR } from '../../config';
const { currentPage } = Astro.props; const { currentPage } = Astro.props;
const currentPageMatch = currentPage.slice(1); const currentPageMatch = currentPage.slice(1);
const langCode = getLanguageFromURL(currentPage); const langCode = getLanguageFromURL(currentPage);
@ -9,7 +9,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
// If the first item is not a section header, create a new container section. // If the first item is not a section header, create a new container section.
if (i === 0) { if (i === 0) {
if (!item.header) { if (!item.header) {
const pesudoSection = { text: "" }; const pesudoSection = { text: '' };
col.push({ ...pesudoSection, children: [] }); col.push({ ...pesudoSection, children: [] });
} }
} }
@ -33,7 +33,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
<li class="nav-link"> <li class="nav-link">
<a <a
href={`${Astro.site.pathname}${child.link}`} href={`${Astro.site.pathname}${child.link}`}
aria-current={`${currentPageMatch === child.link ? "page" : "false"}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}
> >
{child.text} {child.text}
</a> </a>
@ -47,10 +47,10 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
</nav> </nav>
<script is:inline> <script is:inline>
window.addEventListener("DOMContentLoaded", (event) => { window.addEventListener('DOMContentLoaded', (event) => {
var target = document.querySelector('[aria-current="page"]'); var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) { if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector(".nav-groups").scrollTop = target.offsetTop; document.querySelector('.nav-groups').scrollTop = target.offsetTop;
} }
}); });
</script> </script>
@ -103,13 +103,13 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
background-color: var(--theme-bg-hover); background-color: var(--theme-bg-hover);
} }
.nav-link a[aria-current="page"] { .nav-link a[aria-current='page'] {
color: var(--theme-text-accent); color: var(--theme-text-accent);
background-color: var(--theme-bg-accent); background-color: var(--theme-bg-accent);
font-weight: 600; font-weight: 600;
} }
:global(:root.theme-dark) .nav-link a[aria-current="page"] { :global(:root.theme-dark) .nav-link a[aria-current='page'] {
color: hsla(var(--color-base-white), 100%, 1); color: hsla(var(--color-base-white), 100%, 1);
} }

6
examples/docs/src/components/PageContent/PageContent.astro
View file

@ -1,6 +1,6 @@
--- ---
import MoreMenu from "../RightSidebar/MoreMenu.astro"; import MoreMenu from '../RightSidebar/MoreMenu.astro';
import TableOfContents from "../RightSidebar/TableOfContents"; import TableOfContents from '../RightSidebar/TableOfContents';
const { content, headings, githubEditUrl } = Astro.props; const { content, headings, githubEditUrl } = Astro.props;
const title = content.title; const title = content.title;
@ -29,7 +29,7 @@ const title = content.title;
flex-direction: column; flex-direction: column;
} }
.content>section { .content > section {
margin-bottom: 4rem; margin-bottom: 4rem;
} }

4
examples/docs/src/components/RightSidebar/MoreMenu.astro
View file

@ -1,6 +1,6 @@
--- ---
import ThemeToggleButton from "./ThemeToggleButton"; import ThemeToggleButton from './ThemeToggleButton';
import * as CONFIG from "../../config"; import * as CONFIG from '../../config';
const { editHref } = Astro.props; const { editHref } = Astro.props;
const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref; const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
--- ---

4
examples/docs/src/components/RightSidebar/RightSidebar.astro
View file

@ -1,6 +1,6 @@
--- ---
import TableOfContents from "./TableOfContents"; import TableOfContents from './TableOfContents';
import MoreMenu from "./MoreMenu.astro"; import MoreMenu from './MoreMenu.astro';
const { content, headings, githubEditUrl } = Astro.props; const { content, headings, githubEditUrl } = Astro.props;
--- ---

20
examples/docs/src/layouts/MainLayout.astro
View file

@ -1,21 +1,21 @@
--- ---
import HeadCommon from "../components/HeadCommon.astro"; import HeadCommon from '../components/HeadCommon.astro';
import HeadSEO from "../components/HeadSEO.astro"; import HeadSEO from '../components/HeadSEO.astro';
import Header from "../components/Header/Header.astro"; import Header from '../components/Header/Header.astro';
import Footer from "../components/Footer/Footer.astro"; import Footer from '../components/Footer/Footer.astro';
import PageContent from "../components/PageContent/PageContent.astro"; import PageContent from '../components/PageContent/PageContent.astro';
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro"; import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
import RightSidebar from "../components/RightSidebar/RightSidebar.astro"; import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
import * as CONFIG from "../config"; import * as CONFIG from '../config';
const { content = {} } = Astro.props; const { content = {} } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site); const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const currentPage = Astro.url.pathname; const currentPage = Astro.url.pathname;
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile; const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile;
--- ---
<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial"> <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
<head> <head>
<HeadCommon /> <HeadCommon />
<HeadSEO {content} canonicalURL={canonicalURL} /> <HeadSEO {content} canonicalURL={canonicalURL} />

4
examples/framework-alpine/src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter.astro"; import Counter from '../components/Counter.astro';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/
@ -24,7 +24,7 @@ import Counter from "../components/Counter.astro";
<!-- Load AlpineJS on the page --> <!-- Load AlpineJS on the page -->
<script> <script>
import Alpine from "alpinejs"; import Alpine from 'alpinejs';
Alpine.start(); Alpine.start();
</script> </script>
</head> </head>

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

@ -1,7 +1,7 @@
--- ---
import Lorem from "../components/Lorem.astro"; import Lorem from '../components/Lorem.astro';
import { CalcAdd } from "../components/calc-add.js"; import { CalcAdd } from '../components/calc-add.js';
import { MyCounter } from "../components/my-counter.js"; import { MyCounter } from '../components/my-counter.js';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

12
examples/framework-multiple/src/pages/index.astro
View file

@ -1,15 +1,15 @@
--- ---
// Style Imports // Style Imports
import "../styles/global.css"; import '../styles/global.css';
// Component Imports // Component Imports
// For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported! // For JSX components, all the common ways of exporting (under a namespace, specific export, default export etc) are supported!
import * as react from "../components/ReactCounter"; import * as react from '../components/ReactCounter';
import { PreactCounter } from "../components/PreactCounter"; import { PreactCounter } from '../components/PreactCounter';
import SolidCounter from "../components/SolidCounter"; import SolidCounter from '../components/SolidCounter';
import VueCounter from "../components/VueCounter.vue"; import VueCounter from '../components/VueCounter.vue';
import SvelteCounter from "../components/SvelteCounter.svelte"; import SvelteCounter from '../components/SvelteCounter.svelte';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

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

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter"; import Counter from '../components/Counter';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

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

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter"; import Counter from '../components/Counter';
const someProps = { const someProps = {
count: 0, count: 0,
}; };

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

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter"; import Counter from '../components/Counter';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

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

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter.svelte"; import Counter from '../components/Counter.svelte';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

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

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Counter from "../components/Counter.vue"; import Counter from '../components/Counter.vue';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

2
examples/non-html-pages/src/pages/index.astro
View file

@ -12,7 +12,7 @@
const response = await fetch(`/about.json`); const response = await fetch(`/about.json`);
const data = await response.json(); const data = await response.json();
document.getElementById( document.getElementById(
"result" 'result'
).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`; ).innerHTML = `Load complete!<br/>Built with: <a href="${data.url}">${data.name}!</a>`;
</script> </script>
</body> </body>

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

@ -1,8 +1,8 @@
--- ---
import "../styles/global.scss"; import '../styles/global.scss';
const { const {
title = "Jeanine White: Personal Site", title = 'Jeanine White: Personal Site',
description = "The personal site of Jeanine White", description = 'The personal site of Jeanine White',
} = Astro.props; } = Astro.props;
--- ---

10
examples/portfolio/src/layouts/project.astro
View file

@ -1,13 +1,13 @@
--- ---
import MainHead from "../components/MainHead.astro"; import MainHead from '../components/MainHead.astro';
import Button from "../components/Button/index.jsx"; import Button from '../components/Button/index.jsx';
import Footer from "../components/Footer/index.jsx"; import Footer from '../components/Footer/index.jsx';
import Nav from "../components/Nav/index.jsx"; import Nav from '../components/Nav/index.jsx';
const { content } = Astro.props; const { content } = Astro.props;
--- ---
<html lang={content.lang || "en"}> <html lang={content.lang || 'en'}>
<head> <head>
<MainHead title={content.title} description={content.description} /> <MainHead title={content.title} description={content.description} />
<style lang="scss"> <style lang="scss">

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

@ -1,7 +1,7 @@
--- ---
import MainHead from "../components/MainHead.astro"; import MainHead from '../components/MainHead.astro';
import Footer from "../components/Footer/index.jsx"; import Footer from '../components/Footer/index.jsx';
import Nav from "../components/Nav/index.jsx"; import Nav from '../components/Nav/index.jsx';
--- ---
<html lang="en"> <html lang="en">

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

@ -1,7 +1,7 @@
--- ---
import MainHead from "../components/MainHead.astro"; import MainHead from '../components/MainHead.astro';
import Footer from "../components/Footer/index.jsx"; import Footer from '../components/Footer/index.jsx';
import Nav from "../components/Nav/index.jsx"; import Nav from '../components/Nav/index.jsx';
--- ---
<html lang="en"> <html lang="en">

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

@ -1,13 +1,13 @@
--- ---
// Component Imports // Component Imports
import MainHead from "../components/MainHead.astro"; import MainHead from '../components/MainHead.astro';
import Button from "../components/Button/index.jsx"; import Button from '../components/Button/index.jsx';
import Nav from "../components/Nav/index.jsx"; import Nav from '../components/Nav/index.jsx';
import Footer from "../components/Footer/index.jsx"; import Footer from '../components/Footer/index.jsx';
import PortfolioPreview from "../components/PortfolioPreview/index.jsx"; import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
// Data Fetching: List all Markdown posts in the repo. // Data Fetching: List all Markdown posts in the repo.
const projects = await Astro.glob("./project/**/*.md"); const projects = await Astro.glob('./project/**/*.md');
const featuredProject = projects[0]; const featuredProject = projects[0];
// Full Astro Component Syntax: // Full Astro Component Syntax:
@ -40,7 +40,7 @@ const featuredProject = projects[0];
.gradient, .gradient,
.gradient2 { .gradient2 {
background-image: url("/assets/mesh-gradient.jpg"); background-image: url('/assets/mesh-gradient.jpg');
background-size: cover; background-size: cover;
pointer-events: none; pointer-events: none;
mix-blend-mode: screen; mix-blend-mode: screen;
@ -225,7 +225,7 @@ const featuredProject = projects[0];
<div class="section"> <div class="section">
<h3 class="sectionTitle">About me</h3> <h3 class="sectionTitle">About me</h3>
<p class="bio"> <p class="bio">
<span>Hello!</span> I’m Jeanine, and this is my website. It was made using{" "} <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
<a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>, <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro</a>,
a new way to build static sites. This is just an example template for you to modify. a new way to build static sites. This is just an example template for you to modify.
</p> </p>

10
examples/portfolio/src/pages/projects.astro
View file

@ -1,10 +1,10 @@
--- ---
import MainHead from "../components/MainHead.astro"; import MainHead from '../components/MainHead.astro';
import Footer from "../components/Footer/index.jsx"; import Footer from '../components/Footer/index.jsx';
import Nav from "../components/Nav/index.jsx"; import Nav from '../components/Nav/index.jsx';
import PortfolioPreview from "../components/PortfolioPreview/index.jsx"; import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
const projects = (await Astro.glob("./project/**/*.md")) const projects = (await Astro.glob('./project/**/*.md'))
.filter(({ frontmatter }) => !!frontmatter.publishDate) .filter(({ frontmatter }) => !!frontmatter.publishDate)
.sort( .sort(
(a, b) => (a, b) =>

2
examples/ssr/src/components/Container.astro
View file

@ -1,5 +1,5 @@
--- ---
const { tag = "div" } = Astro.props; const { tag = 'div' } = Astro.props;
const Tag = tag; const Tag = tag;
--- ---

10
examples/ssr/src/components/Header.astro
View file

@ -1,14 +1,14 @@
--- ---
import TextDecorationSkip from "./TextDecorationSkip.astro"; import TextDecorationSkip from './TextDecorationSkip.astro';
import Cart from "./Cart.svelte"; import Cart from './Cart.svelte';
import { getCart } from "../api"; import { getCart } from '../api';
const cart = await getCart(Astro.request); const cart = await getCart(Astro.request);
const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0); const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
--- ---
<style> <style>
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
header { header {
margin: 1rem 2rem; margin: 1rem 2rem;
@ -18,7 +18,7 @@ const cartCount = cart.items.reduce((sum, item) => sum + item.count, 0);
h1 { h1 {
margin: 0; margin: 0;
font-family: "Lobster", cursive; font-family: 'Lobster', cursive;
color: black; color: black;
} }

2
examples/ssr/src/components/ProductListing.astro
View file

@ -44,7 +44,7 @@ const { products } = Astro.props;
color: #787878; color: #787878;
} }
</style> </style>
<slot name="title"></slot> <slot name="title" />
<ul> <ul>
{products.map((product) => ( {products.map((product) => (
<li class="product"> <li class="product">

2
examples/ssr/src/components/TextDecorationSkip.astro
View file

@ -1,6 +1,6 @@
--- ---
const { text } = Astro.props; const { text } = Astro.props;
const words = text.split(" "); const words = text.split(' ');
const last = words.length - 1; const last = words.length - 1;
--- ---

12
examples/ssr/src/pages/cart.astro
View file

@ -1,16 +1,16 @@
--- ---
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import Container from "../components/Container.astro"; import Container from '../components/Container.astro';
import { getCart } from "../api"; import { getCart } from '../api';
import { isLoggedIn } from "../models/user"; import { isLoggedIn } from '../models/user';
if (!isLoggedIn(Astro.request)) { if (!isLoggedIn(Astro.request)) {
return Astro.redirect("/"); return Astro.redirect('/');
} }
// They must be logged in. // They must be logged in.
const user = { name: "test" }; // getUser? const user = { name: 'test' }; // getUser?
const cart = await getCart(Astro.request); const cart = await getCart(Astro.request);
--- ---

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

@ -1,9 +1,9 @@
--- ---
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import Container from "../components/Container.astro"; import Container from '../components/Container.astro';
import ProductListing from "../components/ProductListing.astro"; import ProductListing from '../components/ProductListing.astro';
import { getProducts } from "../api"; import { getProducts } from '../api';
import "../styles/common.css"; import '../styles/common.css';
const products = await getProducts(Astro.request); const products = await getProducts(Astro.request);
--- ---

4
examples/ssr/src/pages/login.astro
View file

@ -1,6 +1,6 @@
--- ---
import Header from "../components/Header.astro"; import Header from '../components/Header.astro';
import Container from "../components/Container.astro"; import Container from '../components/Container.astro';
--- ---
<html> <html>

10
examples/ssr/src/pages/products/[id].astro
View file

@ -1,9 +1,9 @@
--- ---
import Header from "../../components/Header.astro"; import Header from '../../components/Header.astro';
import Container from "../../components/Container.astro"; import Container from '../../components/Container.astro';
import AddToCart from "../../components/AddToCart.svelte"; import AddToCart from '../../components/AddToCart.svelte';
import { getProduct } from "../../api"; import { getProduct } from '../../api';
import "../../styles/common.css"; import '../../styles/common.css';
const id = Number(Astro.params.id); const id = Number(Astro.params.id);
const product = await getProduct(Astro.request, id); const product = await getProduct(Astro.request, id);

4
examples/subpath/src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
import "../styles/main.css"; import '../styles/main.css';
import Time from "../components/Time.jsx"; import Time from '../components/Time.jsx';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

4
examples/with-markdown-plugins/src/layouts/main.astro
View file

@ -1,10 +1,10 @@
--- ---
import "../styles/global.css"; import '../styles/global.css';
const { content } = Astro.props; const { content } = Astro.props;
--- ---
<html lang={content.lang || "en"}> <html lang={content.lang || 'en'}>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

4
examples/with-markdown-shiki/src/layouts/main.astro
View file

@ -1,10 +1,10 @@
--- ---
import "../styles/global.css"; import '../styles/global.css';
const { content } = Astro.props; const { content } = Astro.props;
--- ---
<html lang={content.lang || "en"}> <html lang={content.lang || 'en'}>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

2
examples/with-mdx/src/pages/index.mdx
View file

@ -22,7 +22,7 @@ We also support syntax highlighting in MDX out-of-the-box! This example uses our
```astro ```astro
--- ---
const weSupportAstro = true const weSupportAstro = true;
--- ---
<h1>Hey, what theme is that? Looks nice!</h1> <h1>Hey, what theme is that? Looks nice!</h1>

18
examples/with-nanostores/src/components/FigurineDescription.astro
View file

@ -1,6 +1,9 @@
<h1>Astronaut Figurine</h1> <h1>Astronaut Figurine</h1>
<p class="limited-edition-badge">Limited Edition</p> <p class="limited-edition-badge">Limited Edition</p>
<p>The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This fully-poseable action figurine comes equipped with:</p> <p>
The limited edition Astronaut Figurine is the perfect gift for any Astro contributor. This
fully-poseable action figurine comes equipped with:
</p>
<ul> <ul>
<li>A fabric space suit with adjustible straps</li> <li>A fabric space suit with adjustible straps</li>
<li>Boots lightly dusted by the lunar surface *</li> <li>Boots lightly dusted by the lunar surface *</li>
@ -15,11 +18,11 @@
margin: 0; margin: 0;
margin-block-start: 2rem; margin-block-start: 2rem;
} }
.limited-edition-badge { .limited-edition-badge {
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
background-image: linear-gradient(0deg,var(--astro-blue), var(--astro-pink)); background-image: linear-gradient(0deg, var(--astro-blue), var(--astro-pink));
background-size: 100% 200%; background-size: 100% 200%;
background-position-y: 100%; background-position-y: 100%;
border-radius: 0.4rem; border-radius: 0.4rem;
@ -30,7 +33,12 @@
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { background-position-y: 0%; } 0%,
50% { background-position-y: 80%; } 100% {
background-position-y: 0%;
}
50% {
background-position-y: 80%;
}
} }
</style> </style>

3
examples/with-nanostores/src/pages/index.astro
View file

@ -10,6 +10,7 @@ const item: CartItemDisplayInfo = {
imageSrc: '/images/astronaut-figurine.png', imageSrc: '/images/astronaut-figurine.png',
}; };
--- ---
<Layout title={item.name}> <Layout title={item.name}>
<main> <main>
<div class="product-layout"> <div class="product-layout">
@ -42,7 +43,7 @@ const item: CartItemDisplayInfo = {
max-width: 26rem; max-width: 26rem;
} }
button[type="submit"] { button[type='submit'] {
margin-block-start: 1rem; margin-block-start: 1rem;
} }
</style> </style>

4
examples/with-tailwindcss/src/components/Button.astro
View file

@ -10,6 +10,6 @@
</button> </button>
<script> <script>
import confetti from "canvas-confetti"; import confetti from 'canvas-confetti';
document.body.querySelector("button").addEventListener("click", () => confetti()); document.body.querySelector('button').addEventListener('click', () => confetti());
</script> </script>

2
examples/with-tailwindcss/src/pages/index.astro
View file

@ -1,6 +1,6 @@
--- ---
// Component Imports // Component Imports
import Button from "../components/Button.astro"; import Button from '../components/Button.astro';
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/

8
packages/astro-prism/Prism.astro
View file

@ -8,9 +8,11 @@ export interface Props {
} }
const { class: className, lang, code } = Astro.props as Props; const { class: className, lang, code } = Astro.props as Props;
const { classLanguage, html } = runHighlighterWithAstro(lang, code) const { classLanguage, html } = runHighlighterWithAstro(lang, code);
--- ---
<pre class={[className, classLanguage].join(' ')}> <pre
<code class={classLanguage}><Fragment set:html={html} /></code> class={[className, classLanguage].join(
' '
)}> <code class={classLanguage}><Fragment set:html={html} /></code>
</pre> </pre>

26
packages/astro/CHANGELOG.md
View file

@ -374,13 +374,14 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
--- ---
import LoadTodos from '../components/LoadTodos.astro'; import LoadTodos from '../components/LoadTodos.astro';
--- ---
<html> <html>
<head> <head>
<title>App</title> <title>App</title>
</head> </head>
<body> <body>
<LoadTodos /> <LoadTodos />
</body> </body>
</html> </html>
``` ```
@ -390,12 +391,11 @@ The **Astro v1.0.0 Release Candidate** comes includes new features, tons of bug
```astro ```astro
<ul> <ul>
{(async function * () { {(async function* () {
for(const number of numbers) { for (const number of numbers) {
await wait(1000); await wait(1000);
yield <li>Number: {number}</li>;
yield <li>Number: {number}</li> yield '\n';
yield '\n'
} }
})()} })()}
</ul> </ul>
@ -2586,7 +2586,9 @@ For convenience, you may now also move your `astro.config.js` file to a top-leve
```astro ```astro
--- ---
import Debug from 'astro/debug'; import Debug from 'astro/debug';
const obj = { /* ... */ } const obj = {
/* ... */
};
--- ---
<Debug {obj} /> <Debug {obj} />

10
packages/astro/components/Code.astro
View file

@ -39,13 +39,19 @@ function repairShikiTheme(html: string): string {
// Replace "shiki" class naming with "astro" // Replace "shiki" class naming with "astro"
html = html.replace('<pre class="shiki"', '<pre class="astro-code"'); html = html.replace('<pre class="shiki"', '<pre class="astro-code"');
// Replace "shiki" css variable naming with "astro". // Replace "shiki" css variable naming with "astro".
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-'); html = html.replace(
/style="(background-)?color: var\(--shiki-/g,
'style="$1color: var(--astro-code-'
);
// Handle code wrapping // Handle code wrapping
// if wrap=null, do nothing. // if wrap=null, do nothing.
if (wrap === false) { if (wrap === false) {
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"'); html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
} else if (wrap === true) { } else if (wrap === true) {
html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'); html = html.replace(
/style="(.*?)"/,
'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
);
} }
return html; return html;
} }

8
packages/astro/components/Debug.astro
View file

@ -7,7 +7,10 @@ const value = Astro.props[key];
<div class="astro-debug"> <div class="astro-debug">
<div class="astro-debug-header"> <div class="astro-debug-header">
<h2 class="astro-debug-title"><span class="astro-debug-label">Debug</span> <span class="astro-debug-name">"{key}"</span></h2> <h2 class="astro-debug-title">
<span class="astro-debug-label">Debug</span>
<span class="astro-debug-name">"{key}"</span>
</h2>
</div> </div>
<Code code={JSON.stringify(value, null, 2)} /> <Code code={JSON.stringify(value, null, 2)} />
@ -18,7 +21,8 @@ const value = Astro.props[key];
font-size: 14px; font-size: 14px;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: white; background: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
} }
.astro-debug-header, .astro-debug-header,

2
packages/integrations/cloudflare/CHANGELOG.md
View file

@ -44,7 +44,7 @@
The new `Astro.clientAddress` property allows you to get the IP address of the requested user. The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
```astro ```astro
<div>Your address { Astro.clientAddress }</div> <div>Your address {Astro.clientAddress}</div>
``` ```
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error. This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.

2
packages/integrations/deno/CHANGELOG.md
View file

@ -32,7 +32,7 @@
The new `Astro.clientAddress` property allows you to get the IP address of the requested user. The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
```astro ```astro
<div>Your address { Astro.clientAddress }</div> <div>Your address {Astro.clientAddress}</div>
``` ```
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error. This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.

8
packages/integrations/image/components/Image.astro
View file

@ -4,9 +4,9 @@ import { getImage } from '../dist/index.js';
import type { ImgHTMLAttributes } from './index.js'; import type { ImgHTMLAttributes } from './index.js';
import type { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js'; import type { ImageMetadata, TransformOptions, OutputFormat } from '../dist/index.js';
interface LocalImageProps extends interface LocalImageProps
Omit<TransformOptions, 'src'>, extends Omit<TransformOptions, 'src'>,
Omit<ImgHTMLAttributes, | 'src' | 'width' | 'height'> { Omit<ImgHTMLAttributes, 'src' | 'width' | 'height'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>; src: ImageMetadata | Promise<{ default: ImageMetadata }>;
} }
@ -19,7 +19,7 @@ interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttrib
export type Props = LocalImageProps | RemoteImageProps; export type Props = LocalImageProps | RemoteImageProps;
const { loading = "lazy", decoding = "async", ...props } = Astro.props as Props; const { loading = 'lazy', decoding = 'async', ...props } = Astro.props as Props;
const attrs = await getImage(props); const attrs = await getImage(props);
--- ---

31
packages/integrations/image/components/Picture.astro
View file

@ -3,10 +3,10 @@ import { getPicture } from '../dist/index.js';
import type { ImgHTMLAttributes, HTMLAttributes } from './index.js'; import type { ImgHTMLAttributes, HTMLAttributes } from './index.js';
import type { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js'; import type { ImageMetadata, OutputFormat, TransformOptions } from '../dist/index.js';
interface LocalImageProps extends interface LocalImageProps
Omit<HTMLAttributes, 'src' | 'width' | 'height'>, extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
Omit<TransformOptions, 'src'>, Omit<TransformOptions, 'src'>,
Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> { Pick<astroHTML.JSX.ImgHTMLAttributes, 'loading' | 'decoding'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>; src: ImageMetadata | Promise<{ default: ImageMetadata }>;
alt?: string; alt?: string;
sizes: HTMLImageElement['sizes']; sizes: HTMLImageElement['sizes'];
@ -14,10 +14,10 @@ interface LocalImageProps extends
formats?: OutputFormat[]; formats?: OutputFormat[];
} }
interface RemoteImageProps extends interface RemoteImageProps
Omit<HTMLAttributes, 'src' | 'width' | 'height'>, extends Omit<HTMLAttributes, 'src' | 'width' | 'height'>,
TransformOptions, TransformOptions,
Pick<ImgHTMLAttributes, 'loading' | 'decoding'> { Pick<ImgHTMLAttributes, 'loading' | 'decoding'> {
src: string; src: string;
alt?: string; alt?: string;
sizes: HTMLImageElement['sizes']; sizes: HTMLImageElement['sizes'];
@ -28,14 +28,23 @@ interface RemoteImageProps extends
export type Props = LocalImageProps | RemoteImageProps; export type Props = LocalImageProps | RemoteImageProps;
const { src, alt, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'async', ...attrs } = Astro.props as Props; const {
src,
alt,
sizes,
widths,
aspectRatio,
formats = ['avif', 'webp'],
loading = 'lazy',
decoding = 'async',
...attrs
} = Astro.props as Props;
const { image, sources } = await getPicture({ src, widths, formats, aspectRatio }); const { image, sources } = await getPicture({ src, widths, formats, aspectRatio });
--- ---
<picture {...attrs}> <picture {...attrs}>
{sources.map(attrs => ( {sources.map((attrs) => <source {...attrs} {sizes} />)}
<source {...attrs} {sizes}>))}
<img {...image} {loading} {decoding} {alt} /> <img {...image} {loading} {decoding} {alt} />
</picture> </picture>

2
packages/integrations/netlify/CHANGELOG.md
View file

@ -34,7 +34,7 @@
The new `Astro.clientAddress` property allows you to get the IP address of the requested user. The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
```astro ```astro
<div>Your address { Astro.clientAddress }</div> <div>Your address {Astro.clientAddress}</div>
``` ```
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error. This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.

2
packages/integrations/node/CHANGELOG.md
View file

@ -38,7 +38,7 @@
The new `Astro.clientAddress` property allows you to get the IP address of the requested user. The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
```astro ```astro
<div>Your address { Astro.clientAddress }</div> <div>Your address {Astro.clientAddress}</div>
``` ```
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error. This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.

2
packages/integrations/vercel/CHANGELOG.md
View file

@ -40,7 +40,7 @@
The new `Astro.clientAddress` property allows you to get the IP address of the requested user. The new `Astro.clientAddress` property allows you to get the IP address of the requested user.
```astro ```astro
<div>Your address { Astro.clientAddress }</div> <div>Your address {Astro.clientAddress}</div>
``` ```
This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error. This property is only available when building for SSR, and only if the adapter you are using supports providing the IP address. If you attempt to access the property in a SSG app it will throw an error.