8 files changed, 60 insertions, 20 deletions
diff --git a/.changeset/perfect-kids-occur.md b/.changeset/perfect-kids-occur.md
new file mode 100644
index 000000000..7617cdcd4
--- /dev/null
+++ b/.changeset/perfect-kids-occur.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Adds interfaces for built-in components
diff --git a/docs/src/components/Footer/AvatarList.astro b/docs/src/components/Footer/AvatarList.astro
index 589e296b9..053b015fa 100644
--- a/docs/src/components/Footer/AvatarList.astro
+++ b/docs/src/components/Footer/AvatarList.astro
@@ -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 {
diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro
index 084fb7ff8..13f24c829 100644
--- a/examples/blog-multiple-authors/src/pages/authors/[author].astro
+++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro
@@ -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} />)}
diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro
index ef099b7c2..da7539394 100644
--- a/examples/blog-multiple-authors/src/pages/index.astro
+++ b/examples/blog-multiple-authors/src/pages/index.astro
@@ -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>
diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro
index 056796deb..65b4067fc 100644
--- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro
+++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro
@@ -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}
     />
diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro
index 65eed099d..e6a838404 100644
--- a/examples/blog/src/components/BlogPost.astro
+++ b/examples/blog/src/components/BlogPost.astro
@@ -23,6 +23,7 @@ const { title, author, publishDate, heroImage, alt } = Astro.props;
     <main>
       <slot />
     </main>
+  </div>
   </article>
 </div>
 
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
index 6ab19b73e..b082088c8 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -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/
diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro
index 6da3b423f..53180c801 100644
--- a/examples/portfolio/src/pages/projects.astro
+++ b/examples/portfolio/src/pages/projects.astro
@@ -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">