[ci] format
This commit is contained in:
Princesseuh
fredkbot
parent
0dcdc6fb1e
commit
dcdeca56ac
17 changed files with 187 additions and 167 deletions
|
|
@ -40,11 +40,13 @@ const {
|
||||||
{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
|
{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
|
||||||
<h1 class="title">{title}</h1>
|
<h1 class="title">{title}</h1>
|
||||||
{pubDate && <time>{pubDate}</time>}
|
{pubDate && <time>{pubDate}</time>}
|
||||||
{updatedDate && (
|
{
|
||||||
<div>
|
updatedDate && (
|
||||||
Last updated on <time>{updatedDate}</time>
|
<div>
|
||||||
</div>
|
Last updated on <time>{updatedDate}</time>
|
||||||
)}
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
<hr />
|
<hr />
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -37,18 +37,20 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort(
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<ul>
|
<ul>
|
||||||
{posts.map((post) => (
|
{
|
||||||
<li>
|
posts.map((post) => (
|
||||||
<time datetime={post.frontmatter.pubDate}>
|
<li>
|
||||||
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
|
<time datetime={post.frontmatter.pubDate}>
|
||||||
year: 'numeric',
|
{new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
|
||||||
month: 'short',
|
year: 'numeric',
|
||||||
day: 'numeric',
|
month: 'short',
|
||||||
})}
|
day: 'numeric',
|
||||||
</time>
|
})}
|
||||||
<a href={post.url}>{post.frontmatter.title}</a>
|
</time>
|
||||||
</li>
|
<a href={post.url}>{post.frontmatter.title}</a>
|
||||||
))}
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -72,27 +72,31 @@ const additionalContributors = unique.length - recentContributors.length; // lis
|
||||||
<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
|
<!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
|
||||||
<div class="contributors">
|
<div class="contributors">
|
||||||
<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
|
<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
|
||||||
{recentContributors.map((item) => (
|
{
|
||||||
<li>
|
recentContributors.map((item) => (
|
||||||
<a href={`https://github.com/${item.login}`}>
|
<li>
|
||||||
<img
|
<a href={`https://github.com/${item.login}`}>
|
||||||
alt={`Contributor ${item.login}`}
|
<img
|
||||||
title={`Contributor ${item.login}`}
|
alt={`Contributor ${item.login}`}
|
||||||
width="64"
|
title={`Contributor ${item.login}`}
|
||||||
height="64"
|
width="64"
|
||||||
src={`https://avatars.githubusercontent.com/u/${item.id}`}
|
height="64"
|
||||||
/>
|
src={`https://avatars.githubusercontent.com/u/${item.id}`}
|
||||||
</a>
|
/>
|
||||||
</li>
|
</a>
|
||||||
))}
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
{additionalContributors > 0 && (
|
{
|
||||||
<span>
|
additionalContributors > 0 && (
|
||||||
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
|
<span>
|
||||||
additionalContributors > 1 ? 's' : ''
|
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
|
||||||
}.`}</a>
|
additionalContributors > 1 ? 's' : ''
|
||||||
</span>
|
}.`}</a>
|
||||||
)}
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
|
{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,7 @@ import '../styles/index.css';
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Scrollable a11y code helper -->
|
<!-- Scrollable a11y code helper -->
|
||||||
<script src="/make-scrollable-code-focusable.js" is:inline>
|
<script src="/make-scrollable-code-focusable.js" is:inline></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- This is intentionally inlined to avoid FOUC -->
|
<!-- This is intentionally inlined to avoid FOUC -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
|
|
|
||||||
|
|
@ -16,25 +16,27 @@ const sidebar = SIDEBAR[langCode];
|
||||||
|
|
||||||
<nav aria-labelledby="grid-left">
|
<nav aria-labelledby="grid-left">
|
||||||
<ul class="nav-groups">
|
<ul class="nav-groups">
|
||||||
{Object.entries(sidebar).map(([header, children]) => (
|
{
|
||||||
<li>
|
Object.entries(sidebar).map(([header, children]) => (
|
||||||
<div class="nav-group">
|
<li>
|
||||||
<h2>{header}</h2>
|
<div class="nav-group">
|
||||||
<ul>
|
<h2>{header}</h2>
|
||||||
{children.map((child) => {
|
<ul>
|
||||||
const url = Astro.site?.pathname + child.link;
|
{children.map((child) => {
|
||||||
return (
|
const url = Astro.site?.pathname + child.link;
|
||||||
<li class="nav-link">
|
return (
|
||||||
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
|
<li class="nav-link">
|
||||||
{child.text}
|
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
|
||||||
</a>
|
{child.text}
|
||||||
</li>
|
</a>
|
||||||
);
|
</li>
|
||||||
})}
|
);
|
||||||
</ul>
|
})}
|
||||||
</div>
|
</ul>
|
||||||
</li>
|
</div>
|
||||||
))}
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,54 +12,58 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
|
||||||
|
|
||||||
{showMoreSection && <h2 class="heading">More</h2>}
|
{showMoreSection && <h2 class="heading">More</h2>}
|
||||||
<ul>
|
<ul>
|
||||||
{editHref && (
|
{
|
||||||
<li class={`heading-link depth-2`}>
|
editHref && (
|
||||||
<a class="edit-on-github" href={editHref} target="_blank">
|
<li class={`heading-link depth-2`}>
|
||||||
<svg
|
<a class="edit-on-github" href={editHref} target="_blank">
|
||||||
aria-hidden="true"
|
<svg
|
||||||
focusable="false"
|
aria-hidden="true"
|
||||||
data-prefix="fas"
|
focusable="false"
|
||||||
data-icon="pen"
|
data-prefix="fas"
|
||||||
class="svg-inline--fa fa-pen fa-w-16"
|
data-icon="pen"
|
||||||
role="img"
|
class="svg-inline--fa fa-pen fa-w-16"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
role="img"
|
||||||
viewBox="0 0 512 512"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="1em"
|
viewBox="0 0 512 512"
|
||||||
width="1em"
|
height="1em"
|
||||||
>
|
width="1em"
|
||||||
<path
|
>
|
||||||
fill="currentColor"
|
<path
|
||||||
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"
|
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>
|
</svg>
|
||||||
</a>
|
<span>Edit this page</span>
|
||||||
</li>
|
</a>
|
||||||
)}
|
</li>
|
||||||
{CONFIG.COMMUNITY_INVITE_URL && (
|
)
|
||||||
<li class={`heading-link depth-2`}>
|
}
|
||||||
<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
|
{
|
||||||
<svg
|
CONFIG.COMMUNITY_INVITE_URL && (
|
||||||
aria-hidden="true"
|
<li class={`heading-link depth-2`}>
|
||||||
focusable="false"
|
<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
|
||||||
data-prefix="fas"
|
<svg
|
||||||
data-icon="comment-alt"
|
aria-hidden="true"
|
||||||
class="svg-inline--fa fa-comment-alt fa-w-16"
|
focusable="false"
|
||||||
role="img"
|
data-prefix="fas"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
data-icon="comment-alt"
|
||||||
viewBox="0 0 512 512"
|
class="svg-inline--fa fa-comment-alt fa-w-16"
|
||||||
height="1em"
|
role="img"
|
||||||
width="1em"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
viewBox="0 0 512 512"
|
||||||
<path
|
height="1em"
|
||||||
fill="currentColor"
|
width="1em"
|
||||||
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"
|
>
|
||||||
/>
|
<path
|
||||||
</svg>
|
fill="currentColor"
|
||||||
<span>Join our community</span>
|
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"
|
||||||
</a>
|
/>
|
||||||
</li>
|
</svg>
|
||||||
)}
|
<span>Join our community</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
<div style="margin: 2rem 0; text-align: center;">
|
<div style="margin: 2rem 0; text-align: center;">
|
||||||
<ThemeToggleButton client:visible />
|
<ThemeToggleButton client:visible />
|
||||||
|
|
|
||||||
|
|
@ -20,10 +20,12 @@ import { MyCounter } from '../components/my-counter.js';
|
||||||
<MyCounter client:load />
|
<MyCounter client:load />
|
||||||
<Lorem />
|
<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!
|
* Our VS Code extension does not currently properly typecheck attributes on Lit components
|
||||||
* @ts-expect-error */}
|
* 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} />
|
<CalcAdd num={0} />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ const { comment } = Astro.props;
|
||||||
<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
|
<a href={`/users/${comment.user}`}>{comment.user}</a>{' '}
|
||||||
{comment.time_ago} ago
|
{comment.time_ago} ago
|
||||||
</div>
|
</div>
|
||||||
<div class="text" set:html={comment.content}></div>
|
<div class="text" set:html={comment.content} />
|
||||||
<Show when={comment.comments.length}>
|
<Show when={comment.comments.length}>
|
||||||
<Toggle open>
|
<Toggle open>
|
||||||
<For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For>
|
<For each={comment.comments}>{(comment: IComment) => <Astro.self comment={comment} />}</For>
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,15 @@ export interface Props<T> {
|
||||||
const { each } = Astro.props;
|
const { each } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
{(async function* () {
|
{
|
||||||
for await (const value of each) {
|
(async function* () {
|
||||||
let html = await Astro.slots.render('default', [value]);
|
for await (const value of each) {
|
||||||
yield <Fragment set:html={html} />;
|
let html = await Astro.slots.render('default', [value]);
|
||||||
yield '\n';
|
yield <Fragment set:html={html} />;
|
||||||
}
|
yield '\n';
|
||||||
})()}
|
}
|
||||||
|
})()
|
||||||
|
}
|
||||||
|
|
||||||
<Show when={!each.length}>
|
<Show when={!each.length}>
|
||||||
<slot name="fallback" />
|
<slot name="fallback" />
|
||||||
|
|
|
||||||
|
|
@ -15,11 +15,13 @@ const links: Link[] = [
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<nav aria-label="Main menu">
|
<nav aria-label="Main menu">
|
||||||
{links.map(({ href, text }) => (
|
{
|
||||||
<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
|
links.map(({ href, text }) => (
|
||||||
<strong>{text}</strong>
|
<a href={href} aria-current={href === Astro.url.pathname ? 'page' : undefined}>
|
||||||
</a>
|
<strong>{text}</strong>
|
||||||
))}
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
<a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer">
|
<a class="github" href="http://github.com/withastro/astro" target="_blank" rel="noreferrer">
|
||||||
Built with Astro
|
Built with Astro
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ const user = (await fetchAPI(`user/${id}`)) as IUser;
|
||||||
{user.karma}
|
{user.karma}
|
||||||
</li>
|
</li>
|
||||||
<Show when={user.about}>
|
<Show when={user.about}>
|
||||||
<li set:html={user.about} class="about"></li>{' '}
|
<li set:html={user.about} class="about" />{' '}
|
||||||
</Show>
|
</Show>
|
||||||
</ul>
|
</ul>
|
||||||
<p>
|
<p>
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,13 @@ const { frontmatter, url } = Astro.props.project;
|
||||||
<p class="desc">{frontmatter.description}</p>
|
<p class="desc">{frontmatter.description}</p>
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
Tagged:
|
Tagged:
|
||||||
{frontmatter.tags.map((t) => (
|
{
|
||||||
<div class="tag" data-tag={t}>
|
frontmatter.tags.map((t) => (
|
||||||
{t}
|
<div class="tag" data-tag={t}>
|
||||||
</div>
|
{t}
|
||||||
))}
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<a class="link" href={url}>
|
<a class="link" href={url}>
|
||||||
<span class="linkInner">View</span>
|
<span class="linkInner">View</span>
|
||||||
|
|
|
||||||
|
|
@ -52,17 +52,19 @@ const { products } = Astro.props;
|
||||||
</style>
|
</style>
|
||||||
<slot name="title" />
|
<slot name="title" />
|
||||||
<ul>
|
<ul>
|
||||||
{products.map((product) => (
|
{
|
||||||
<li class="product">
|
products.map((product) => (
|
||||||
<a href={`/products/${product.id}`}>
|
<li class="product">
|
||||||
<figure>
|
<a href={`/products/${product.id}`}>
|
||||||
<img src={product.image} />
|
<figure>
|
||||||
<figcaption>
|
<img src={product.image} />
|
||||||
<div class="name">{product.name}</div>
|
<figcaption>
|
||||||
<div class="price">${product.price}</div>
|
<div class="name">{product.name}</div>
|
||||||
</figcaption>
|
<div class="price">${product.price}</div>
|
||||||
</figure>
|
</figcaption>
|
||||||
</a>
|
</figure>
|
||||||
</li>
|
</a>
|
||||||
))}
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,11 @@ const last = words.length - 1;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{words.map((word, i) => (
|
{
|
||||||
<Fragment>
|
words.map((word, i) => (
|
||||||
<span>{word}</span>
|
<Fragment>
|
||||||
{i !== last && <Fragment> </Fragment>}
|
<span>{word}</span>
|
||||||
</Fragment>
|
{i !== last && <Fragment> </Fragment>}
|
||||||
))}
|
</Fragment>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,12 +36,14 @@ const cart = await getCart(Astro.request);
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{cart.items.map((item) => (
|
{
|
||||||
<tr>
|
cart.items.map((item) => (
|
||||||
<td>{item.name}</td>
|
<tr>
|
||||||
<td>{item.count}</td>
|
<td>{item.name}</td>
|
||||||
</tr>
|
<td>{item.count}</td>
|
||||||
))}
|
</tr>
|
||||||
|
))
|
||||||
|
}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,6 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||||
<script src="/src/index.ts">
|
<script src="/src/index.ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -501,7 +501,7 @@
|
||||||
This expands the abilities of `set:html` to ultimate service this use-case:
|
This expands the abilities of `set:html` to ultimate service this use-case:
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
<div set:html={fetch('/legacy-post.html')}></div>
|
<div set:html={fetch('/legacy-post.html')} />
|
||||||
```
|
```
|
||||||
|
|
||||||
This means you can take a legacy app that has been statically generated to HTML and directly consume that HTML within your templates. As is always the case with `set:html`, this should only be used on trusted content.
|
This means you can take a legacy app that has been statically generated to HTML and directly consume that HTML within your templates. As is always the case with `set:html`, this should only be used on trusted content.
|
||||||
|
|
@ -514,8 +514,7 @@
|
||||||
set:html={new Response('<span>Hello world</span>', {
|
set:html={new Response('<span>Hello world</span>', {
|
||||||
headers: { 'content-type': 'text/html' },
|
headers: { 'content-type': 'text/html' },
|
||||||
})}
|
})}
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
- `ReadableStream`s:
|
- `ReadableStream`s:
|
||||||
```astro
|
```astro
|
||||||
|
|
@ -526,8 +525,7 @@
|
||||||
controller.close();
|
controller.close();
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
- `AsyncIterable`s:
|
- `AsyncIterable`s:
|
||||||
```astro
|
```astro
|
||||||
|
|
@ -537,8 +535,7 @@
|
||||||
yield `<li>${num}</li>`;
|
yield `<li>${num}</li>`;
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
- `Iterable`s (non-async):
|
- `Iterable`s (non-async):
|
||||||
```astro
|
```astro
|
||||||
|
|
@ -548,8 +545,7 @@
|
||||||
yield `<li>${num}</li>`;
|
yield `<li>${num}</li>`;
|
||||||
}
|
}
|
||||||
})()}
|
})()}
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue