diff --git a/README.md b/README.md
index d8d01b7b4..e465d2e05 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ export default {
astroRoot: './astro',
/** When running `astro build`, path to final static output */
dist: './_site',
- /** A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don‘t need processing. */
+ /** A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. */
public: './public',
/** Extension-specific handlings */
extensions: {
@@ -80,7 +80,7 @@ Our goal is to support all popular state management libraries, as long as there
### 💅 Styling
-If you‘ve used [Svelte][svelte]’s styles before, Astro works almost the same way. In any `.astro` file, start writing styles in a `
+
+
diff --git a/examples/blog/astro/pages/$posts.astro b/examples/blog/astro/pages/$posts.astro
new file mode 100644
index 000000000..ae4bcb223
--- /dev/null
+++ b/examples/blog/astro/pages/$posts.astro
@@ -0,0 +1,48 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Muppet Blog: Home';
+let description = 'An example blog on Astro';
+
+// collection
+import authorData from '../data/authors.json';
+export let collection: any;
+export async function createCollection() {
+ return {
+ async data() {
+ let allPosts = await import.meta.fetchContent('./post/*.md');
+ allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+ return allPosts;
+ },
+ pageSize: 3
+ };
+}
+---
+
+
+
+ {title}
+
+
+ {collection.url.next && }
+ {collection.url.prev && }
+
+
+
+
+
+
+
All Posts
+ {collection.start + 1}–{collection.end + 1} of {collection.total}
+ {collection.data.map((post) => )}
+
+
+
+
+
diff --git a/examples/blog/astro/pages/$tag.astro b/examples/blog/astro/pages/$tag.astro
new file mode 100644
index 000000000..58b06e52a
--- /dev/null
+++ b/examples/blog/astro/pages/$tag.astro
@@ -0,0 +1,58 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Muppet Blog: Home';
+let description = 'An example blog on Astro';
+
+// collection
+import authorData from '../data/authors.json';
+export let collection: any;
+export async function createCollection() {
+ let allPosts = import.meta.fetchContent('./post/*.md');
+ let allTags = new Set();
+ let routes = [];
+ for (const post of allPosts) {
+ if (!allTags.has(post.tag)) {
+ allTags.add(post.tag);
+ routes.push({ tag: post.tag });
+ }
+ }
+ return {
+ async data({ params }) {
+ allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+ return allPosts.filter((post) => post.tag === params.tag);
+ },
+ routes,
+ permalink: ({ params }) => `/tag/${params.tag}`,
+ pageSize: 3
+ };
+}
+---
+
+
+
+ {title}
+
+
+ {collection.url.next && }
+ {collection.url.prev && }
+
+
+
+
+
+
+
Tagged: {collection.params.tag}
+ {collection.start + 1}–{collection.end + 1} of {collection.total}
+ {collection.data.map((post) => )}
+
+
+
+
+
diff --git a/examples/blog/astro/pages/index.astro b/examples/blog/astro/pages/index.astro
index a9758dffe..e42f4507a 100644
--- a/examples/blog/astro/pages/index.astro
+++ b/examples/blog/astro/pages/index.astro
@@ -4,22 +4,18 @@ import Nav from '../components/Nav.astro';
import PostPreview from '../components/PostPreview.astro';
import Pagination from '../components/Pagination.astro';
-// posts
-import authorData from '../data/authors.json';
-
-const postData = import.meta.collection('./post/*.md');
-
-const PER_PAGE = 10;
-postData.sort((a, b) => new Date(b.date) - new Date(a.date)); // new -> old
-
-const start = 0;
-const currentPage = 1;
-const maxPages = 1;
-const posts = postData.splice(start, PER_PAGE);
-
// page
let title = 'Muppet Blog: Home';
let description = 'An example blog on Astro';
+
+// collection
+// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc.
+// so we show a preview of posts here, but actually paginate from $posts.astro
+import authorData from '../data/authors.json';
+
+let allPosts = import.meta.fetchContent('./post/*.md');
+allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+let firstThree = allPosts.slice(0, 3);
---
@@ -33,11 +29,11 @@ let description = 'An example blog on Astro';