diff options
author | 2022-11-08 18:39:22 +0000 | |
---|---|---|
committer | 2022-11-08 18:39:22 +0000 | |
commit | dcdeca56acb6c03d4868ece51ef4611e7598e270 (patch) | |
tree | f8731cc4f82f335c00a4a9a7f4b573d277b84a3e /examples | |
parent | 0dcdc6fb1e6160c8a225a65c4810f565e2b673b5 (diff) | |
download | astro-dcdeca56acb6c03d4868ece51ef4611e7598e270.tar.gz astro-dcdeca56acb6c03d4868ece51ef4611e7598e270.tar.zst astro-dcdeca56acb6c03d4868ece51ef4611e7598e270.zip |
[ci] format
Diffstat (limited to 'examples')
-rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 12 | ||||
-rw-r--r-- | examples/blog/src/pages/blog.astro | 26 | ||||
-rw-r--r-- | examples/docs/src/components/Footer/AvatarList.astro | 44 | ||||
-rw-r--r-- | examples/docs/src/components/HeadCommon.astro | 4 | ||||
-rw-r--r-- | examples/docs/src/components/LeftSidebar/LeftSidebar.astro | 40 | ||||
-rw-r--r-- | examples/docs/src/components/RightSidebar/MoreMenu.astro | 100 | ||||
-rw-r--r-- | examples/framework-lit/src/pages/index.astro | 10 | ||||
-rw-r--r-- | examples/hackernews/src/components/Comment.astro | 2 | ||||
-rw-r--r-- | examples/hackernews/src/components/For.astro | 16 | ||||
-rw-r--r-- | examples/hackernews/src/components/Nav.astro | 12 | ||||
-rw-r--r-- | examples/hackernews/src/pages/users/[id].astro | 2 | ||||
-rw-r--r-- | examples/portfolio/src/components/PortfolioPreview.astro | 12 | ||||
-rw-r--r-- | examples/ssr/src/components/ProductListing.astro | 28 | ||||
-rw-r--r-- | examples/ssr/src/components/TextDecorationSkip.astro | 14 | ||||
-rw-r--r-- | examples/ssr/src/pages/cart.astro | 14 | ||||
-rw-r--r-- | examples/with-vite-plugin-pwa/src/pages/index.astro | 4 |
16 files changed, 182 insertions, 158 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 67f297444..4baf8e972 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -40,11 +40,13 @@ const { {heroImage && <img width={720} height={360} src={heroImage} alt="" />} <h1 class="title">{title}</h1> {pubDate && <time>{pubDate}</time>} - {updatedDate && ( - <div> - Last updated on <time>{updatedDate}</time> - </div> - )} + { + updatedDate && ( + <div> + Last updated on <time>{updatedDate}</time> + </div> + ) + } <hr /> <slot /> </article> diff --git a/examples/blog/src/pages/blog.astro b/examples/blog/src/pages/blog.astro index c50cc0528..cedf505b0 100644 --- a/examples/blog/src/pages/blog.astro +++ b/examples/blog/src/pages/blog.astro @@ -37,18 +37,20 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort( <main> <section> <ul> - {posts.map((post) => ( - <li> - <time datetime={post.frontmatter.pubDate}> - {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', { - year: 'numeric', - month: 'short', - day: 'numeric', - })} - </time> - <a href={post.url}>{post.frontmatter.title}</a> - </li> - ))} + { + posts.map((post) => ( + <li> + <time datetime={post.frontmatter.pubDate}> + {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} + </time> + <a href={post.url}>{post.frontmatter.title}</a> + </li> + )) + } </ul> </section> </main> diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index 5926936d6..b75589f5a 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -72,27 +72,31 @@ const additionalContributors = unique.length - recentContributors.length; // lis <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! --> <div class="contributors"> <ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}> - {recentContributors.map((item) => ( - <li> - <a href={`https://github.com/${item.login}`}> - <img - alt={`Contributor ${item.login}`} - title={`Contributor ${item.login}`} - width="64" - height="64" - src={`https://avatars.githubusercontent.com/u/${item.id}`} - /> - </a> - </li> - ))} + { + recentContributors.map((item) => ( + <li> + <a href={`https://github.com/${item.login}`}> + <img + alt={`Contributor ${item.login}`} + title={`Contributor ${item.login}`} + width="64" + height="64" + src={`https://avatars.githubusercontent.com/u/${item.id}`} + /> + </a> + </li> + )) + } </ul> - {additionalContributors > 0 && ( - <span> - <a href={commitsURL}>{`and ${additionalContributors} additional contributor${ - additionalContributors > 1 ? 's' : '' - }.`}</a> - </span> - )} + { + additionalContributors > 0 && ( + <span> + <a href={commitsURL}>{`and ${additionalContributors} additional contributor${ + additionalContributors > 1 ? 's' : '' + }.`}</a> + </span> + ) + } {unique.length === 0 && <a href={commitsURL}>Contributors</a>} </div> diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro index 3551e5489..d77e4a90c 100644 --- a/examples/docs/src/components/HeadCommon.astro +++ b/examples/docs/src/components/HeadCommon.astro @@ -21,9 +21,7 @@ import '../styles/index.css'; /> <!-- Scrollable a11y code helper --> -<script src="/make-scrollable-code-focusable.js" is:inline> - -</script> +<script src="/make-scrollable-code-focusable.js" is:inline></script> <!-- This is intentionally inlined to avoid FOUC --> <script is:inline> diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index 33af79463..33433f5be 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -16,25 +16,27 @@ const sidebar = SIDEBAR[langCode]; <nav aria-labelledby="grid-left"> <ul class="nav-groups"> - {Object.entries(sidebar).map(([header, children]) => ( - <li> - <div class="nav-group"> - <h2>{header}</h2> - <ul> - {children.map((child) => { - const url = Astro.site?.pathname + child.link; - return ( - <li class="nav-link"> - <a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> - {child.text} - </a> - </li> - ); - })} - </ul> - </div> - </li> - ))} + { + Object.entries(sidebar).map(([header, children]) => ( + <li> + <div class="nav-group"> + <h2>{header}</h2> + <ul> + {children.map((child) => { + const url = Astro.site?.pathname + child.link; + return ( + <li class="nav-link"> + <a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> + {child.text} + </a> + </li> + ); + })} + </ul> + </div> + </li> + )) + } </ul> </nav> diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro index 8fcbfa567..655f8eac1 100644 --- a/examples/docs/src/components/RightSidebar/MoreMenu.astro +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -12,54 +12,58 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL; {showMoreSection && <h2 class="heading">More</h2>} <ul> - {editHref && ( - <li class={`heading-link depth-2`}> - <a class="edit-on-github" href={editHref} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="pen" - class="svg-inline--fa fa-pen fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" - /> - </svg> - <span>Edit this page</span> - </a> - </li> - )} - {CONFIG.COMMUNITY_INVITE_URL && ( - <li class={`heading-link depth-2`}> - <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="comment-alt" - class="svg-inline--fa fa-comment-alt fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" - /> - </svg> - <span>Join our community</span> - </a> - </li> - )} + { + editHref && ( + <li class={`heading-link depth-2`}> + <a class="edit-on-github" href={editHref} target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="pen" + class="svg-inline--fa fa-pen fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" + /> + </svg> + <span>Edit this page</span> + </a> + </li> + ) + } + { + CONFIG.COMMUNITY_INVITE_URL && ( + <li class={`heading-link depth-2`}> + <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="comment-alt" + class="svg-inline--fa fa-comment-alt fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" + /> + </svg> + <span>Join our community</span> + </a> + </li> + ) + } </ul> <div style="margin: 2rem 0; text-align: center;"> <ThemeToggleButton client:visible /> diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro index d193842a0..55d051cc0 100644 --- a/examples/framework-lit/src/pages/index.astro +++ b/examples/framework-lit/src/pages/index.astro @@ -20,10 +20,12 @@ import { MyCounter } from '../components/my-counter.js'; <MyCounter client:load /> <Lorem /> - {/** - * Our VS Code extension does not currently properly typecheck attributes on Lit components - * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro! - * @ts-expect-error */} + { + /** + * Our VS Code extension does not currently properly typecheck attributes on Lit components + * As such, the following code will result in a TypeScript error inside the editor, nonetheless, it works in Astro! + * @ts-expect-error */ + } <CalcAdd num={0} /> </body> </html> diff --git a/examples/hackernews/src/components/Comment.astro b/examples/hackernews/src/components/Comment.astro index 50fa3e9e4..8327e666c 100644 --- a/examples/hackernews/src/components/Comment.astro +++ b/examples/hackernews/src/components/Comment.astro @@ -16,7 +16,7 @@ const { comment } = Astro.props; <a href={`/users/${comment.user}`}>{comment.user}</a>{' '} {comment.time_ago} ago </div> - <div class="text" set:html={comment.content}></div> + <div class="text" set:html={comment.content} /> <Show when={comment.comments.length}> <Toggle open> <For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For> diff --git a/examples/hackernews/src/components/For.astro b/examples/hackernews/src/components/For.astro index b784f8f8a..885c22a65 100644 --- a/examples/hackernews/src/components/For.astro +++ b/examples/hackernews/src/components/For.astro @@ -8,13 +8,15 @@ export interface Props<T> { const { each } = Astro.props; --- -{(async function* () { - for await (const value of each) { - let html = await Astro.slots.render('default', [value]); - yield <Fragment set:html={html} />; - yield '\n'; - } -})()} +{ + (async function* () { + for await (const value of each) { + let html = await Astro.slots.render('default', [value]); + yield <Fragment set:html={html} />; + yield '\n'; + } + })() +} <Show when={!each.length}> <slot name="fallback" /> diff --git a/examples/hackernews/src/components/Nav.astro b/examples/hackernews/src/components/Nav.astro index 10bf0f899..7eeba2865 100644 --- a/examples/hackernews/src/components/Nav.astro +++ b/examples/hackernews/src/components/Nav.astro @@ -15,11 +15,13 @@ const links: Link[] = [ <header> <nav aria-label="Main menu"> - {links.map(({ href, text }) => ( - <a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}> - <strong>{text}</strong> - </a> - ))} + { + links.map(({ href, text }) => ( + <a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}> + <strong>{text}</strong> + </a> + )) + } <a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer"> Built with Astro </a> diff --git a/examples/hackernews/src/pages/users/[id].astro b/examples/hackernews/src/pages/users/[id].astro index 9b43c6958..e56085992 100644 --- a/examples/hackernews/src/pages/users/[id].astro +++ b/examples/hackernews/src/pages/users/[id].astro @@ -25,7 +25,7 @@ const user = (await fetchAPI(`user/${id}`)) as IUser; {user.karma} </li> <Show when={user.about}> - <li set:html={user.about} class="about"></li>{' '} + <li set:html={user.about} class="about" />{' '} </Show> </ul> <p> diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro index 4a4b55e7d..4dafd0e6a 100644 --- a/examples/portfolio/src/components/PortfolioPreview.astro +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -17,11 +17,13 @@ const { frontmatter, url } = Astro.props.project; <p class="desc">{frontmatter.description}</p> <div class="tags"> Tagged: - {frontmatter.tags.map((t) => ( - <div class="tag" data-tag={t}> - {t} - </div> - ))} + { + frontmatter.tags.map((t) => ( + <div class="tag" data-tag={t}> + {t} + </div> + )) + } </div> <a class="link" href={url}> <span class="linkInner">View</span> diff --git a/examples/ssr/src/components/ProductListing.astro b/examples/ssr/src/components/ProductListing.astro index 96b6ea581..14e6e1d8c 100644 --- a/examples/ssr/src/components/ProductListing.astro +++ b/examples/ssr/src/components/ProductListing.astro @@ -52,17 +52,19 @@ const { products } = Astro.props; </style> <slot name="title" /> <ul> - {products.map((product) => ( - <li class="product"> - <a href={`/products/${product.id}`}> - <figure> - <img src={product.image} /> - <figcaption> - <div class="name">{product.name}</div> - <div class="price">${product.price}</div> - </figcaption> - </figure> - </a> - </li> - ))} + { + products.map((product) => ( + <li class="product"> + <a href={`/products/${product.id}`}> + <figure> + <img src={product.image} /> + <figcaption> + <div class="name">{product.name}</div> + <div class="price">${product.price}</div> + </figcaption> + </figure> + </a> + </li> + )) + } </ul> diff --git a/examples/ssr/src/components/TextDecorationSkip.astro b/examples/ssr/src/components/TextDecorationSkip.astro index 524732d04..707027763 100644 --- a/examples/ssr/src/components/TextDecorationSkip.astro +++ b/examples/ssr/src/components/TextDecorationSkip.astro @@ -13,9 +13,11 @@ const last = words.length - 1; text-decoration: underline; } </style> -{words.map((word, i) => ( - <Fragment> - <span>{word}</span> - {i !== last && <Fragment> </Fragment>} - </Fragment> -))} +{ + words.map((word, i) => ( + <Fragment> + <span>{word}</span> + {i !== last && <Fragment> </Fragment>} + </Fragment> + )) +} diff --git a/examples/ssr/src/pages/cart.astro b/examples/ssr/src/pages/cart.astro index d153e3ea9..ebc2f1472 100644 --- a/examples/ssr/src/pages/cart.astro +++ b/examples/ssr/src/pages/cart.astro @@ -36,12 +36,14 @@ const cart = await getCart(Astro.request); </tr> </thead> <tbody> - {cart.items.map((item) => ( - <tr> - <td>{item.name}</td> - <td>{item.count}</td> - </tr> - ))} + { + cart.items.map((item) => ( + <tr> + <td>{item.name}</td> + <td>{item.count}</td> + </tr> + )) + } </tbody> </table> </Container> diff --git a/examples/with-vite-plugin-pwa/src/pages/index.astro b/examples/with-vite-plugin-pwa/src/pages/index.astro index af2303f57..28af70e3b 100644 --- a/examples/with-vite-plugin-pwa/src/pages/index.astro +++ b/examples/with-vite-plugin-pwa/src/pages/index.astro @@ -12,8 +12,6 @@ <body> <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> - <script src="/src/index.ts"> - - </script> + <script src="/src/index.ts"></script> </body> </html> |