1 files changed, 89 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/guides.astro b/examples/snowpack/src/pages/guides.astro
new file mode 100644
index 000000000..e02856ede
--- /dev/null
+++ b/examples/snowpack/src/pages/guides.astro
@@ -0,0 +1,89 @@
+---
+import Card from '../components/Card.jsx';
+import BaseHead from '../components/BaseHead.astro';
+import MainLayout from '../components/MainLayout.astro';
+
+// mocked for now, to be added later
+// 1. import {paginate} from 'magicthing';
+// 2. export default function ({paginate}) {
+function paginate(options) {
+  if (options.tag === 'guide') {
+    return [
+      { title: 'Test guide 1', href: "#" },
+      { title: 'Test guide 2', href: "#" },
+    ];
+  }
+  if (options.tag === 'communityGuides') {
+    return [{ title: 'Test communityGuides', href: "#" }];
+  }
+  return [];
+}
+
+let title = 'Guides';
+let description = 'Snowpack\'s usage and integration guides.';
+let guides;
+let communityGuides;
+
+
+  guides = paginate({
+    files: '/posts/guides/*.md',
+    // sort: ((a, b) => new Date(b) - new Date(a)),
+    tag: 'guide',
+    limit: 10,
+    // page: query.page,
+  });
+  communityGuides = paginate({
+    files: '/posts/guides/*.md',
+    // sort: ((a, b) => new Date(b) - new Date(a)),
+    tag: 'communityGuides',
+    limit: 10,
+  });
+---
+
+<!doctype html>
+<html>
+
+<head>
+  <BaseHead title={title} description={description} permalink="TODO" />
+</head>
+
+<body>
+  <MainLayout>
+    <h2 class="content-title">
+      {title}
+    </h2>
+
+    <h3 class="content-title">
+      Using Snowpack
+    </h3>
+
+    <div class="content">
+      <ul>
+        {guides.map((post) => {
+        return <li><a href={post.href}>{post.title}</a></li>;
+        })}
+      </ul>
+    </div>
+
+    <br />
+    <br />
+
+    <h3 class="content-title">
+      Popular Integration Guides
+    </h3>
+
+    <div class="card-grid card-grid-4">
+      {communityGuides.map((post) => <Card item={post} />)}
+
+      <Card item={{
+        url: 'https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0',
+        img: 'https://www.snowpack.dev/img/social-snowpackv3.jpg',
+        date: '2021-01-12 00:00:00Z',
+        title: 'Snowpack v3.0',
+        description: 'Snowpack v3.0 is here!',
+      }} />
+    </div>
+  </MainLayout>
+</body>
+
+</html>