Added: (boilerplate) more layouts and components so new users have more...

CHANGELOG.md

@@ -1,4 +1,3 @@
-
 - Added: Initial support for Service Worker
   ([#343](https://github.com/MoOx/phenomic/pull/343))
 - Changed: Remove the ability to define a custom globby pattern via appcache option.
@@ -8,9 +7,19 @@
 
 ## Boilerplate
 
+- Removed: ``layouts/index.js``. It is not used since 0.10.0.
+- Removed: (boilerplate) ``layouts/index.js``. It is not used since 0.10.0.
 - Added: Run lint process in parallel with [npm-run-all](https://www.npmjs.com/package/npm-run-all)
   ([#402](https://github.com/MoOx/phenomic/pull/343))
-- Removed: ``layouts/index.js``. It is not used since 0.10.0.
+- Added: (boilerplate) more layouts and components so new users have more
+  example to show list of entries:
+
+  - ``Homepage`` layout that include a list of posts
+  - ``Post`` layout
+  - ``PagesList`` component to easily show page preview
+  - ``PagePreview`` to display page meta
+
+  ([#71](https://github.com/MoOx/statinamic/issues/71))
 
 # 0.10.2 - 2016-04-14
 

boilerplate/content/index.md

@@ -1,5 +1,6 @@
 ---
 title: Phenomic default boilerplate
+layout: Homepage
 ---
 
 > Hi there.

boilerplate/content/posts/first-post.md

@@ -0,0 +1,7 @@
+---
+title: First Post
+date: 2016-01-01
+layout: Post
+---
+
+This is the first post!

boilerplate/content/posts/hello-world.md

@@ -0,0 +1,7 @@
+---
+title: Hello World!
+date: 2016-02-06
+layout: Post
+---
+
+Hello there. Here is another dumb post.

boilerplate/web_modules/PagePreview/index.js

@@ -0,0 +1,31 @@
+import React, { PropTypes } from "react"
+import { Link } from "react-router"
+
+const PagePreview = ({ __url, title, date }) => {
+  const pageDate = date ? new Date(date) : null
+
+  return (
+    <div>
+      <Link to={ __url }>
+        { title }
+      </Link>
+      {
+        pageDate &&
+        <small>
+          { " " }
+          <time key={ pageDate.toISOString() }>
+            { pageDate.toDateString() }
+          </time>
+        </small>
+      }
+    </div>
+  )
+}
+
+PagePreview.propTypes = {
+  __url: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  date: PropTypes.string,
+}
+
+export default PagePreview

boilerplate/web_modules/PagesList/index.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from "react"
+
+import PagePreview from "../PagePreview"
+
+const PagesList = ({ pages }) => {
+  return (
+    <div>
+    {
+      pages.length
+      ? (
+        <ul>
+        {
+          pages.map((page) => (
+            <li key={ page.title }><PagePreview { ...page } /></li>
+          ))
+        }
+        </ul>
+      )
+      : "No posts yet."
+    }
+    </div>
+  )
+}
+
+PagesList.propTypes = {
+  pages: PropTypes.array.isRequired,
+}
+
+export default PagesList

boilerplate/web_modules/app/routes.js

@@ -7,6 +7,8 @@ import PhenomicPageContainer from "phenomic/lib/PageContainer"
 import Page from "../layouts/Page"
 import PageError from "../layouts/PageError"
 import PageLoading from "../layouts/PageLoading"
+import Homepage from "../layouts/Homepage"
+import Post from "../layouts/Post"
 
 class PageContainer extends Component {
   render() {
@@ -18,6 +20,8 @@ class PageContainer extends Component {
           Page,
           PageError,
           PageLoading,
+          Homepage,
+          Post,
         } }
       />
     )

boilerplate/web_modules/layouts/Homepage/index.js

@@ -0,0 +1,29 @@
+import React, { Component, PropTypes } from "react"
+import enhanceCollection from "phenomic/lib/enhance-collection"
+
+import Page from "../Page"
+import PagesList from "../../PagesList"
+
+const numberOfLatestPosts = 6
+
+export default class Homepage extends Component {
+  static contextTypes = {
+    collection: PropTypes.array.isRequired,
+  }
+
+  render() {
+    const latestPosts = enhanceCollection(this.context.collection, {
+      filter: { layout: "Post" },
+      sort: "date",
+      reverse: true,
+    })
+    .slice(0, numberOfLatestPosts)
+
+    return (
+      <Page { ...this.props}>
+        <h2>{ "Latest Posts" }</h2>
+        <PagesList pages={ latestPosts } />
+      </Page>
+    )
+  }
+}

boilerplate/web_modules/layouts/Page/index.js

@@ -2,31 +2,22 @@ import React, { Component, PropTypes } from "react"
 import Helmet from "react-helmet"
 import invariant from "invariant"
 
-export default class Page extends Component {
-
-  static propTypes = {
-    children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]),
-    __filename: PropTypes.string.isRequired,
-    __url: PropTypes.string.isRequired,
-    head: PropTypes.object.isRequired,
-    body: PropTypes.string.isRequired,
-  };
-
-  static contextTypes = {
-    metadata: PropTypes.object.isRequired,
-  };
-
+class Page extends Component {
   render() {
+    const { props, context } = this
+
     const {
       pkg,
-    } = this.context.metadata
+    } = context.metadata
 
     const {
       __filename,
       __url,
       head,
       body,
-    } = this.props
+      header,
+      footer,
+    } = props
 
     invariant(
       typeof head.title === "string",
@@ -58,14 +49,32 @@ export default class Page extends Component {
           head.title &&
           <h1>{ head.title }</h1>
         }
+        { header }
         {
           body &&
           <div
             dangerouslySetInnerHTML={ { __html: body } }
           />
         }
-        { this.props.children }
+        { props.children }
+        { footer }
       </div>
     )
   }
 }
+
+Page.propTypes = {
+  children: PropTypes.oneOfType([ PropTypes.array, PropTypes.object ]),
+  __filename: PropTypes.string.isRequired,
+  __url: PropTypes.string.isRequired,
+  head: PropTypes.object.isRequired,
+  body: PropTypes.string.isRequired,
+  header: PropTypes.element,
+  footer: PropTypes.element,
+}
+
+Page.contextTypes = {
+  metadata: PropTypes.object.isRequired,
+}
+
+export default Page

boilerplate/web_modules/layouts/Post/index.js

@@ -0,0 +1,37 @@
+import React, { Component, PropTypes } from "react"
+
+import Page from "../Page"
+
+class Post extends Component {
+
+  // it's up to you to choose what to do with this layout ;)
+
+  render() {
+    const { props } = this
+    const { head } = props
+
+    const pageDate = head.date ? new Date(head.date) : null
+
+    return (
+      <Page
+        { ...props}
+        header={
+          <header>
+          {
+            pageDate &&
+            <time key={ pageDate.toISOString() }>
+              { pageDate.toDateString() }
+            </time>
+          }
+          </header>
+        }
+      />
+    )
+  }
+}
+
+Post.propTypes = {
+  head: PropTypes.object.isRequired,
+}
+
+export default Post