Changed: base theme has been completely redesigned.

Now includes more components and examples of how you can leverage
Phenomic.

docs/content/docs/setup.md

@@ -1,5 +1,5 @@
 ---
-title: How to setup Phenomic
+title: How to setup a new project with Phenomic
 ---
 
 Phenomic require at least

e2e-tests/__tests__/cli-build.js

@@ -48,6 +48,7 @@ it("should build the base theme correctly",
       .toEqual(
         [
           "404.html",
+          "about/index.html",
           "index.html",
           "posts/first-post/index.html",
           "posts/hello-world/index.html",
@@ -58,7 +59,7 @@ it("should build the base theme correctly",
       const html404 = read(testFolder, "404.html")
       expect(html404).toContain(
         "window.__COLLECTION__ = " +
-        "[{\"layout\":\"PageError\",\"route\":\"404.html\",\"description\""
+        "[{\"layout\":\"PageError\",\"route\":\"404.html\",\"hero\""
       )
 
       // ensure all pages have the correct title
@@ -89,7 +90,7 @@ it("should build the base theme correctly",
 
       const htmlHello = read(testFolder, "posts/hello-world/index.html")
       expect(htmlHello).toContain(
-        ">Hello World!"
+        ">Welcome back"
       )
       expect(htmlHello).toContain(
         "window.__INITIAL_STATE__ = {\"pages\":{\"/posts/hello-world/\"",

themes/phenomic-theme-base/content/404.md

@@ -1,5 +1,9 @@
 ---
 layout: PageError
 route: 404.html
+# hero credit: https://www.flickr.com/photos/mypubliclands/16101654539/
+hero: https://farm8.staticflickr.com/7559/16101654539_bee5151340_k.jpg
 ---
-Content here not used, see ``src/layouts/PageError``
+<!---
+  Content here not used, see ``src/layouts/PageError``
+-->

themes/phenomic-theme-base/content/about.md

@@ -0,0 +1,33 @@
+---
+title: About Phenomic base theme
+hero: https://farm4.staticflickr.com/3949/15589950511_3675b15e59_k.jpg
+# hero credit: https://www.flickr.com/photos/pslee999/15589950511/
+cta:
+  label: Discover Phenomic now
+  link: "https://phenomic.io/"
+  props:
+    big: true
+---
+
+You are currently viewing Phenomic base theme.
+
+For now [Phenomic does not provide a native way to extend themes](https://github.com/MoOx/phenomic/issues/508) but since it's based on
+React and use a component approach, it's pretty easy to make your own collection
+of layouts and components and reuse those.
+
+---
+
+This website is made with [Phenomic](https://phenomic.io/).
+
+If you are curious about it, you can take a look to
+[existing websites that use Phenomic](https://phenomic.io/showcase/),
+some projects share their source code!
+
+<!-- demo to show you that you can use "assets" folder -->
+<small>
+  Built with
+  <a href="https://facebook.github.io/react/">
+    <img alt="" src="../assets/react.svg" width="16" height="16" />
+    React
+  </a>.
+</small>

themes/phenomic-theme-base/content/index.md

@@ -1,32 +1,43 @@
 ---
 title: Phenomic base theme
 layout: Homepage
+hero: https://farm4.staticflickr.com/3949/15589950511_3675b15e59_k.jpg
+# hero credit: https://www.flickr.com/photos/pslee999/15589950511/
+cta:
+  label: About this theme
+  link: "about"
 ---
 
-Hi there.
+Hi there. Before having fun with Phenomic, be sure to read the documentation :
 
-Before having fun with Phenomic, be sure to read (or at least pretend to)
-the documentation :
-
-* [Setup](https://phenomic.io/docs/setup/)
-* [Getting Started](https://phenomic.io/docs/getting-started/)
-* [Usage](https://phenomic.io/docs/usage/)
+* [How to setup a new project with Phenomic](https://phenomic.io/docs/setup/)
+* [Getting Started with Phenomic](https://phenomic.io/docs/getting-started/)
+* [Usage & APIs](https://phenomic.io/docs/usage/)
 * [FAQ](https://phenomic.io/docs/faq/)
 
 Also take a look to
 [existing websites that use Phenomic](https://phenomic.io/showcase/),
 some projects share their source code!
 
-Built with
-<a href="https://facebook.github.io/react/">
-  <img alt="" src="assets/react.svg" width="16" height="16" />
-  React
-</a>.
+<!-- demo to show you that you can use "assets" folder -->
+<small>
+  Built with
+  <a href="https://facebook.github.io/react/">
+    <img alt="" src="assets/react.svg" width="16" height="16" />
+    React
+  </a>.
+</small>
 
 ---
 
-You may want to take a look to the <a href="/404.html">404.html</a>.
+You may want to take a look to the [404.html](/404.html) and tweak the render.
+
+If you want to adjust page layouts, directly adjust them in ``src/layouts/``.  
+If you want to adjust small parts like header, footer, buttons, etc, you will
+find those in ``src/components/``.  
+For colors and common CSS variables, you will find stuff to adjust in ``postcss.plugins.js``.
 
-If you want to adjust those, directly adjust them in ``src/layouts/``.
+_You feel like the base theme is not enough or you just saw something wrong?_
+[Please help us make Phenomic better!](https://phenomic.io/contributing/)
 
 ---

themes/phenomic-theme-base/content/posts/first-post.md

@@ -1,5 +1,5 @@
 ---
-title: First Post
+title: First Post, no hero.
 date: 2016-01-22
 layout: Post
 ---
@@ -12,7 +12,7 @@ Code is highlighted by default.
 const StatelessComponent = (props) => {
   return (
     <div>
-      I'am a stateless component that accept children
+      I‘m a stateless component that accepts children
       { props.children }
     </div>
   )

themes/phenomic-theme-base/content/posts/hello-world.md

@@ -1,7 +1,23 @@
 ---
-title: Hello World!
+title: Welcome back to the future of static website!
 date: 2016-02-14
 layout: Post
+# hero credit: https://www.flickr.com/photos/igotz/15669216853/
+hero: https://farm8.staticflickr.com/7479/15669216853_aa8e70eae1_o.jpg
 ---
 
-Hello there. Here is another dumb post.
+<!-- start lipsum code -->
+<!-- http://www.deloreanipsum.com/ -->
+
+Ahh. Hey, Doc, we better back up, we don't have enough roads to get up to 88. Hi. Where were we. In that case, I'll tell you strait out.
+
+Thank you, don't forget to take a flyer. Look, I'm just not ready to ask Lorraine out to the dance, and not you, nor anybody else on this planet is gonna make me change my mind. Over there, on my hope chest. I've never seen purple underwear before, Calvin. What's with the life preserver? Working.
+
+I still don't understand, how am I supposed to go to the dance with her, if she's already going to the dance with you. Our first television set, Dad just picked it up today. Do you have a television? I hope so. Uh, look me up when you get there. Stand tall, boy, have some respect for yourself. Don't you know that if you let people walk all over you know, they'll be walking all over you for the rest of your life? Listen to me, do you think I'm gonna spend the rest of my life in this slop house?
+
+Where were we. That's for messing up my hair. I'm sure that in 1985, plutonium is available at every corner drug store, but in 1955, it's a little hard to come by. Marty, I'm sorry, but I'm afraid you're stuck here. Where's Einstein, is he with you? Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall?
+
+Hi. Now Biff, don't con me. Of course I do. Just a second, let's see if I could find it. George, buddy. remember that girl I introduced you to, Lorraine. What are you writing? Let's go.
+
+
+<!-- end lipsum code -->

themes/phenomic-theme-base/package.json

@@ -106,7 +106,6 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "history": "^2.0.0",
-    "invariant": "^2.1.1",
     "json-loader": "^0.5.2",
     "npm-run-all": "^1.7.0",
     "postcss-browser-reporter": "^0.4.0",
@@ -125,6 +124,7 @@
     "redux": "^3.0.0",
     "style-loader": "^0.13.0",
     "stylelint": "^7.2.0",
+    "warning": "^3.0.0",
     "webpack": "^1.11.0",
     "whatwg-fetch": "^0.11.0"
   }

themes/phenomic-theme-base/postcss.config.js

@@ -5,8 +5,15 @@ module.exports = (config) => [
       features: {
         customProperties: {
           variables: {
-            mainColor: "#111",
-            mainColorContrasted: "#eee",
+            maxWidth: "60rem",
+            colorPrimaryDark: "#107491",
+            colorPrimary: "#007acc",
+            colorSecondaryDark: "#22846C",
+            colorSecondary: "#46BE77",
+            colorNeutralDark: "#111",
+            colorNeutral: "#8C8D91",
+            colorNeutralLight: "#FBFCFC",
+            colorText: "#555",
           },
         },
       },

themes/phenomic-theme-base/src/components/Button/index.css

@@ -0,0 +1,48 @@
+.button {
+  display: inline-flex;
+  padding: 0 1rem;
+  line-height: 2rem;
+  font-weight: 100;
+  text-align: center;
+  border-radius: 3px;
+
+  transition: .2s all;
+
+  color: var(--colorPrimary);
+  border: 1px solid var(--colorPrimary);
+  background: color(var(--colorNeutralLight) a(0.2));
+
+  &:hover {
+    text-decoration: none;
+    color: var(--colorPrimaryDark);
+    border: 1px solid var(--colorPrimaryDark);
+  }
+}
+
+.secondary {
+  color: var(--colorSecondary);
+  border: 1px solid var(--colorSecondary);
+
+  &:hover {
+    color: var(--colorSecondaryDark);
+    border: 1px solid var(--colorSecondaryDark);
+  }
+}
+
+.light {
+  color: var(--colorNeutralLight);
+  border: 1px solid var(--colorNeutralLight);
+
+  &:hover {
+    color: var(--colorNeutralLight);
+    border: 1px solid var(--colorNeutralLight);
+    background: color(var(--colorNeutralLight) a(0.3));
+  }
+}
+
+
+.big {
+  font-size: 1.5rem;
+  padding: 0 2rem;
+  line-height: 3rem;
+}

themes/phenomic-theme-base/src/components/Button/index.js

@@ -0,0 +1,30 @@
+import React, { PropTypes } from "react"
+import cx from "classnames"
+
+import styles from "./index.css"
+
+const Button = ({ className, secondary, light, big, ...otherProps }) => (
+  <span
+    role="button"
+    { ...otherProps }
+    className={ cx({
+      [className]: className,
+      [styles.button]: true,
+      [styles.secondary]: secondary,
+      [styles.light]: light,
+      [styles.big]: big,
+    }) }
+  />
+)
+
+Button.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  secondary: PropTypes.bool,
+  light: PropTypes.bool,
+  big: PropTypes.bool,
+}
+
+Button.displayName = "Button"
+
+export default Button

themes/phenomic-theme-base/src/components/DefaultHeadMeta/index.js

@@ -11,9 +11,11 @@ const DefaultHeadMeta = (props, { metadata: { pkg } }) => (
         },
         { property: "og:site_name", content: pkg.name },
         { name: "twitter:site", content: `@${ pkg.twitter }` },
+        ...props.meta ? props.meta : [],
       ] }
       script={ [
         { src: "https://cdn.polyfill.io/v2/polyfill.min.js" },
+        ...props.scripts ? props.scripts : [],
       ] }
     />
 
@@ -27,6 +29,11 @@ const DefaultHeadMeta = (props, { metadata: { pkg } }) => (
   </div>
 )
 
+DefaultHeadMeta.propTypes = {
+  meta: React.PropTypes.arrayOf(React.PropTypes.object),
+  scripts: React.PropTypes.arrayOf(React.PropTypes.object),
+}
+
 DefaultHeadMeta.contextTypes = {
   metadata: PropTypes.object.isRequired,
 }

themes/phenomic-theme-base/src/components/Footer/index.css

@@ -1,12 +1,10 @@
 .footer {
-  color: var(--mainColorContrasted);
-  background: var(--mainColor);
   text-align: center;
 }
 
 .phenomicReference {
   font-size: 0.75rem;
-  opacity: 0.4;
+  opacity: 0.6;
   color: inherit;
   text-decoration: none;
 }

themes/phenomic-theme-base/src/components/Header/index.css

@@ -3,15 +3,19 @@
 }
 
 .header {
-  color: var(--mainColorContrasted);
-  background: var(--mainColor);
+  position: absolute;
+  /* stretch */
+  left: 0;
+  right: 0;
+
+  color: var(--colorNeutralLight);
 }
 
 .nav {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  max-width: calc(60rem + (var(--nav-item-padding) * 2));
+  max-width: calc(var(--maxWidth) + (var(--nav-item-padding) * 2));
   margin: 0 auto;
   padding: 0;
   line-height: 3rem;
@@ -28,14 +32,24 @@
   align-items: center;
   padding: 0 var(--nav-item-padding);
   color: inherit;
-  text-decoration: none;
+  text-decoration: none !important;
+  opacity: 0.6;
+  transition: 0.4s all;
+  border-bottom: 1px solid transparent;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    opacity: 1;
+    border-bottom-color: var(--colorNeutralLight);
+  }
 }
 
 .link svg {
   fill: currentColor;
   opacity: 0.5;
   margin-right: 0.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 14px;
+  height: 14px;
   vertical-align: middle;
 }

themes/phenomic-theme-base/src/components/LatestPosts/index.css

@@ -0,0 +1,3 @@
+.latestPosts {
+  text-align: center;
+}