Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

Add types to examples and docs (#1347)

Browse source 
* Adds a changeset

* Add types to examples and docs

* Make changes based on review feedback

* Avoid using the variable named props

* Make path a const
This commit is contained in:
Matthew Phillips 2021-09-14 09:14:39 -04:00 committed by GitHub
parent 72c916535d
commit b6a75494b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 60 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/perfect-kids-occur.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Adds interfaces for built-in components

12
docs/src/components/Footer/AvatarList.astro
View file

@ -1,8 +1,14 @@
---
// fetch all commits for just this page's path
const path = "docs/" + Astro.props.path;
const url = `https://api.github.com/repos/snowpackjs/astro/commits?path=${path}`;
const commitsURL = `https://github.com/snowpackjs/astro/commits/main/${path}`;
export interface Props {
path: string;
}
const { path } = Astro.props as Props;
const commitPath = 'docs/' + path;
const url = `https://api.github.com/repos/snowpackjs/astro/commits?path=${commitPath}`;
const commitsURL = `https://github.com/snowpackjs/astro/commits/main/${commitPath}`;
async function getCommits(url) {
try {

16
examples/blog-multiple-authors/src/pages/authors/[author].astro
View file

@ -11,8 +11,16 @@ let canonicalURL = Astro.request.canonicalURL;
// collection
import authorData from '../../data/authors.json';
interface MarkdownFrontmatter {
date: number;
description: string;
title: string;
author: string;
}
export function getStaticPaths() {
const allPosts = Astro.fetchContent('../post/*.md');
const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md');
let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))];
return allAuthorsUnique.map(author => ({params: {author}, props: {allPosts}}));
}
@ -23,7 +31,7 @@ const { params } = Astro.request;
/** filter posts by author, sort by date */
const posts = allPosts
.filter((post) => post.author === params.author)
.sort((a, b) => new Date(b.date) - new Date(a.date));
.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
const author = authorData[posts[0].author];
---
@ -34,7 +42,7 @@ const author = authorData[posts[0].author];
title={title}
description={description}
image={posts[0].image}
canonicalURL={canonicalURL}
canonicalURL={canonicalURL.toString()}
/>
<style lang="scss">
@ -76,7 +84,7 @@ const author = authorData[posts[0].author];
<main class="wrapper">
<h2 class="title">
<div class="avatar"><img class="avatar-img" src={author.image} alt=""}></div>
<div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div>
{author.name}
</h2>
{posts.map((post) => <PostPreview post={post} author={author} />)}

14
examples/blog-multiple-authors/src/pages/index.astro
View file

@ -6,6 +6,12 @@ import PostPreview from '../components/PostPreview.astro';
import Pagination from '../components/Pagination.astro';
import authorData from '../data/authors.json';
interface MarkdownFrontmatter {
date: number;
image: string;
author: string;
}
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
@ -14,8 +20,8 @@ let title = 'Don’s Blog';
let description = 'An example blog on Astro';
// Data Fetching: List all Markdown posts in the repo.
let allPosts = Astro.fetchContent('./post/*.md');
allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
let allPosts = Astro.fetchContent<MarkdownFrontmatter>('./post/*.md');
allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
let firstPage = allPosts.slice(0, 2);
// Full Astro Component Syntax:
@ -33,14 +39,14 @@ let firstPage = allPosts.slice(0, 2);
</head>
<body>
<Nav />
<Nav title={title} />
<main class="wrapper">
{allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
</main>
<footer>
<Pagination nextUrl="/posts/2" />
<Pagination prevUrl="/posts" nextUrl="/posts/2" />
</footer>
</body>
</html>

14
examples/blog-multiple-authors/src/pages/posts/[...page].astro
View file

@ -10,10 +10,16 @@ let description = 'An example blog on Astro';
let canonicalURL = Astro.request.canonicalURL;
// collection
interface MarkdownFrontmatter {
date: number;
description: string;
title: string;
}
import authorData from '../../data/authors.json';
export async function getStaticPaths({paginate, rss}) {
const allPosts = Astro.fetchContent('../post/*.md');
const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md');
const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf());
// Generate an RSS feed from this collection of posts.
// NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file.
@ -28,7 +34,7 @@ export async function getStaticPaths({paginate, rss}) {
// pubDate: item.date,
// })),
// });
// Return a paginated collection of paths for all posts
return paginate(sortedPosts, {pageSize: 1});
}
@ -43,7 +49,7 @@ const { page } = Astro.props;
title={title}
description={description}
image={page.data[0].image}
canonicalURL={canonicalURL}
canonicalURL={canonicalURL.toString()}
prev={page.url.prev}
next={page.url.next}
/>

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

@ -23,6 +23,7 @@ const { title, author, publishDate, heroImage, alt } = Astro.props;
<main>
<slot />
</main>
</div>
</article>
</div>

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

@ -4,6 +4,9 @@ import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro';
import BlogPostPreview from '../components/BlogPostPreview.astro';
interface MarkdownFrontmatter {
publishDate: number;
}
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
@ -14,8 +17,9 @@ let description = 'The perfect starter for your perfect blog.';
let permalink = 'https://example.com/';
// Data Fetching: List all Markdown posts in the repo.
let allPosts = Astro.fetchContent('./posts/*.md');
allPosts = allPosts.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
let allPosts = Astro.fetchContent<MarkdownFrontmatter>('./posts/*.md');
allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/

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

@ -4,9 +4,13 @@ import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
const projects = Astro.fetchContent('./project/*.md')
.filter(({ published_at }) => !!published_at)
.sort((a, b) => new Date(b.published_at) - new Date(a.published_at));
interface MarkdownFrontmatter {
publishDate: number;
}
const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/*.md')
.filter(({ publishDate }) => !!publishDate)
.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
---
<html lang="en">