improve Vulcan onboarding with default route screens

packages/example-simple/lib/stylesheets/style.css

@@ -0,0 +1,3 @@
+.datacard-label{
+  width: 120px;
+}

packages/example-simple/package.js

@@ -15,6 +15,8 @@ Package.onUse(function (api) {
     
   ]);
 
+  api.addFiles('lib/stylesheets/style.css');
+  
   api.mainModule('lib/server/main.js', 'server');
   api.mainModule('lib/client/main.js', 'client');
 

packages/vulcan-core/lib/modules/components/App.jsx

@@ -30,7 +30,7 @@ class App extends PureComponent {
         <div>
           <Components.HeadTags />
           <LayoutComponent {...this.props} currentRoute={currentRoute}>
-            { this.props.currentUserLoading ? <Components.Loading /> : this.props.children }
+            { this.props.currentUserLoading ? <Components.Loading /> : (this.props.children ? this.props.children : <Components.Welcome />) }
           </LayoutComponent>
         </div>
       </IntlProvider>

packages/vulcan-core/lib/modules/components/Card.jsx

@@ -90,8 +90,8 @@ const getFieldValue = (value, typeName) => {
 
 const CardItem = ({label, value, typeName}) => 
   <tr>
-    <td><strong>{label}</strong></td>
-    <td>{getFieldValue(value, typeName)}</td>
+    <td className="datacard-label"><strong>{label}</strong></td>
+    <td className="datacard-value">{getFieldValue(value, typeName)}</td>
   </tr>
 
 const CardEdit = (props, context) =>

packages/vulcan-core/lib/modules/components/HelloWorld.jsx

@@ -0,0 +1,82 @@
+import { registerComponent } from 'meteor/vulcan:lib';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const wrapper = {
+  fontFamily: '"Source Sans", "Helvetica", sans-serif', 
+  background: '#F7F6F5',
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  left: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+const header = {
+  textAlign: 'center',
+}
+
+const code = {
+  border: "1px solid #ccc",
+  borderRadius: 3,
+  padding: '10px 20px',
+  background: 'white',
+}
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+ }
+
+const HelloWorld = props => 
+  <div style={wrapper}>
+
+    <div>
+      <h3 style={header}>Well Done! Now replace this with your own component</h3>
+
+      <p>1. Create a new <code>components/Home.jsx</code> file.</p>
+
+      <p>2. Import it into your custom package.</p>
+
+      <p>3. Add the following code:</p>
+
+      <pre style={code}>
+        <code dangerouslySetInnerHTML={{__html: escapeHtml(`
+import { registerComponent } from 'meteor/vulcan:lib';
+import React from 'react';
+
+const Home = props => 
+  <div>
+    <h3>Welcome Home!</h3>
+  </div>
+
+registerComponent('Home', Home);
+        `)}}/>
+      </pre>
+
+      <p>4. Update your route:</p>
+
+      <pre style={code}>
+        <code dangerouslySetInnerHTML={{__html: `
+import { addRoute } from 'meteor/vulcan:core';
+
+addRoute({ name: 'home', path: '/', componentName: 'Home' });
+        `}}/>
+      </pre>
+
+    </div>
+
+  </div>
+
+HelloWorld.displayName = 'HelloWorld';
+
+registerComponent('HelloWorld', HelloWorld);
+
+export default HelloWorld;

packages/vulcan-core/lib/modules/components/Welcome.jsx

@@ -0,0 +1,56 @@
+import { registerComponent } from 'meteor/vulcan:lib';
+import React from 'react';
+
+const wrapper = {
+  fontFamily: '"Source Sans", "Helvetica", sans-serif', 
+  background: '#F7F6F5',
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  left: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+const header = {
+  textAlign: 'center',
+}
+
+const code = {
+  border: "1px solid #ccc",
+  borderRadius: 3,
+  padding: '10px 20px',
+  background: 'white',
+}
+
+const Welcome = props => 
+  <div style={wrapper}>
+
+    <div>
+      <h3 style={header}>Welcome to VulcanJS! Create a new index route to get started.</h3>
+
+      <p>1. Create a new <code>route.js</code> file.</p>
+
+      <p>2. Import it into your custom package.</p>
+
+      <p>3. Add the following code:</p>
+
+      <pre style={code}>
+        <code dangerouslySetInnerHTML={{__html: `
+import { addRoute } from 'meteor/vulcan:core';
+
+addRoute({ name: 'home', path: '/', componentName: 'HelloWorld' });
+        `}}/>
+      </pre>
+
+    </div>
+
+  </div>
+
+Welcome.displayName = 'Welcome';
+
+registerComponent('Welcome', Welcome);
+
+export default Welcome;

packages/vulcan-core/lib/modules/index.js

@@ -19,6 +19,8 @@ export { default as Avatar } from './components/Avatar.jsx';
 export { default as Card } from './components/Card.jsx';
 export { default as Datatable } from './components/Datatable.jsx';
 export { default as Flash } from './components/Flash.jsx';
+export { default as HelloWorld } from './components/HelloWorld.jsx';
+export { default as Welcome } from './components/Welcome.jsx';
 
 export { default as withMessages } from "./containers/withMessages.js";
 export { default as withList } from './containers/withList.js';