chore: work on site

site/.eslintrc

@@ -3,6 +3,9 @@
 	"rules": {
 		"react/jsx-filename-extension": "off",
 		"react/prop-types": "off",
-		"import/prefer-default-export": "off"
+		"import/prefer-default-export": "off",
+		"jsx-a11y/anchor-is-valid": "off",
+		"react/destructuring-assignment": "off",
+		"jsx-a11y/accessible-emoji": "off"
 	}
 }

site/frontpage/mission/mission.md

@@ -0,0 +1,26 @@
+---
+order: 1
+title: 'What is supported out of the box'
+---
+
+### What you get for free
+
+-   👉 Have Create React App like developer experience for WordPress Plugin/Theme development.
+-   👉 Consume all the modern packages from [npm registry](https://npmjs.com).
+-   👉 Write javascript with modern ES2018 (ES6+) syntax and compile it down to ES5 (or in accordance to your `.browserslistrc`).
+-   👉 Automatically minify and bundle code with [webpack](https://webpack.js.org).
+-   👉 Split large files automatically and have PHP library to `wp_enqueue_script` all generated parts.
+-   👉 Use SASS/SCSS language to create stylesheets.
+-   👉 Use postcss autoprefixer to automatically make your CSS work with needed vendor prefixes.
+-   👉 Implement all the above to your existing wamp, mamp, vvv (basically any) dev server.
+-   👉 Create production grade, super optimized and minified files with one command (hello CI).
+
+### Here are a few more bonus you get for using wpackio.
+
+-   😎 Using [ES6 Modules](https://scrimba.com/p/p4Mrt9/c9kMkhM) you will never run into namespace collision.
+    > Remember when that third-party plugin was using that old version of `foo` library which caused
+    > your system to completely fail? No more!.
+-   😎 Zero configuration for a sane default of all the tooling involved (babel, sass, webpack).
+-   😎 Your CSS/SCSS changes will reflect instantly.
+-   😎 [Typescript](https://www.typescriptlang.org/) and [Flowtype](https://flow.org/) to take your js carrier to the next level. This tooling itself is written in typescript 😉.
+-   😎 All the stuff you need to start developing using [react](https://reactjs.org/). Hello Gutenberg!

site/frontpage/steps/bootstrap.md

@@ -0,0 +1,11 @@
+---
+title: Bootstrap wpackio-scripts
+order: 1
+image: https://raw.githubusercontent.com/swashata/wp-webpack-script/master/assets/bootstrap.gif
+---
+
+```bash
+npx @wpackio/scripts bootstrap
+```
+
+Bootstrap wpack.io into any existing or new project. This command has to be run from within the project.

site/gatsby-config.js

@@ -24,21 +24,23 @@ module.exports = {
 				path: `${__dirname}/src/images/`,
 			},
 		},
-		'gatsby-plugin-sharp',
-		'gatsby-transformer-sharp',
-		'gatsby-plugin-offline',
 		{
-			resolve: `gatsby-plugin-emotion`,
+			resolve: 'gatsby-source-filesystem',
 			options: {
-				hoist: true,
-				sourceMap: true,
-				autoLabel: true,
+				name: 'fp-mission',
+				path: `${__dirname}/frontpage/mission/`,
 			},
 		},
+		'gatsby-transformer-remark',
+		'gatsby-plugin-sharp',
+		'gatsby-transformer-sharp',
+		'gatsby-plugin-offline',
 		{
-			resolve: `gatsby-plugin-typography`,
+			resolve: 'gatsby-plugin-svgr',
 			options: {
-				pathToConfigModule: `src/utils/typography`,
+				icon: true,
+				viewBox: true,
+				// see https://github.com/smooth-code/svgr for a list of all options
 			},
 		},
 	],

site/package.json

@@ -4,22 +4,22 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "bulma": "^0.7.2",
+    "classnames": "^2.2.6",
     "gatsby": "^2.0.19",
     "gatsby-image": "^2.0.15",
     "gatsby-plugin-manifest": "^2.0.5",
     "gatsby-plugin-offline": "^2.0.5",
     "gatsby-plugin-react-helmet": "^3.0.0",
     "gatsby-plugin-sass": "^2.0.1",
-    "gatsby-plugin-typography": "^2.2.0",
+    "gatsby-plugin-svgr": "^2.0.0-alpha",
     "gatsby-source-filesystem": "^2.0.5",
+    "gatsby-transformer-remark": "^2.1.8",
     "node-sass": "^4.9.4",
     "prop-types": "^15.6.2",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
-    "react-helmet": "^5.2.0",
-    "react-typography": "^0.16.13",
-    "typography": "^0.16.17",
-    "typography-theme-lincoln": "^0.15.11"
+    "react-helmet": "^5.2.0"
   },
   "keywords": [
     "gatsby"

site/src/components/bulma.scss

@@ -0,0 +1,10 @@
+// @import '~bulma/bulma';
+@import '~bulma/sass/utilities/all';
+@import '~bulma/sass/base/all';
+@import '~bulma/sass/elements/container';
+@import '~bulma/sass/elements/content';
+@import '~bulma/sass/elements/title';
+@import '~bulma/sass/elements/button';
+@import '~bulma/sass/components/navbar';
+@import '~bulma/sass/layout/all';
+@import '~bulma/sass/grid/columns';

site/src/components/feature/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './index.scss';
+
+const Feature = props => {
+	const { icon, title, children } = props;
+	return (
+		<aside className="wpackio-feature">
+			<div className="wpackio-feature__icon">{icon}</div>
+			<h2 className="wpackio-feature__title title">{title}</h2>
+			<div className="wpackio-feature__desc">{children}</div>
+		</aside>
+	);
+};
+
+export default Feature;

site/src/components/feature/index.scss

@@ -0,0 +1,16 @@
+.wpackio-feature {
+	& &__icon {
+		text-align: center;
+		svg {
+			max-width: 100%;
+			height: auto;
+		}
+		margin-bottom: 1rem;
+	}
+
+	& &__title {
+		font-family: 'Dank Mono';
+		text-align: center;
+		font-style: italic;
+	}
+}

site/src/components/header.js

@@ -1,63 +1,107 @@
 import React from 'react';
 import { Link, StaticQuery, graphql } from 'gatsby';
-import { css } from 'emotion';
-import styled from 'react-emotion';
-import { gradientDark, navbarLight } from '../utils/background';
-
+import classNames from 'classnames';
 import './header.scss';
 
-const Header = ({ siteTitle }) => (
-	<StaticQuery
-		query={graphql`
-			query {
-				logoText: file(relativePath: { eq: "wpackio-text.svg" }) {
-					publicURL
-				}
-				logoSymbol: file(relativePath: { eq: "wpackio-symbol.svg" }) {
-					publicURL
-				}
-			}
-		`}
-		render={data => (
-			<header className="site-header">
-				<h1 className="site-header__logo">
-					<Link to="/">
-						<img
-							className={css`
-								height: 1em;
-								width: auto;
-								margin: 0 0.5rem 0 0;
-							`}
-							src={data.logoSymbol.publicURL}
-							alt={siteTitle}
-						/>
-						<img
-							className={css`
-								height: 1em;
-								width: auto;
-								margin: 0 0.5rem 0 0;
-							`}
-							src={data.logoText.publicURL}
-							alt={siteTitle}
-						/>
-					</Link>
-				</h1>
-				<nav className="site-header__nav">
-					<ul>
-						<li>
-							<Link to="/">Getting Started</Link>
-						</li>
-						<li>
-							<Link to="/">Config</Link>
-						</li>
-						<li>
-							<Link to="/">Concepts</Link>
-						</li>
-					</ul>
-				</nav>
-			</header>
-		)}
-	/>
-);
+import { ReactComponent as LogoSymbol } from './svgs/wpackio-symbol.svg';
+import { ReactComponent as LogoText } from './svgs/wpackio-text.svg';
+
+class Header extends React.Component {
+	state = {
+		isOpen: false,
+	};
+
+	handleToggle = e => {
+		e.preventDefault();
+		this.setState(state => ({ isOpen: !state.isOpen }));
+	};
+
+	render() {
+		const { siteTitle } = this.props;
+
+		return (
+			<StaticQuery
+				query={graphql`
+					query {
+						logoText: file(
+							relativePath: { eq: "wpackio-text.svg" }
+						) {
+							publicURL
+						}
+						logoSymbol: file(
+							relativePath: { eq: "wpackio-symbol.svg" }
+						) {
+							publicURL
+						}
+					}
+				`}
+				render={data => (
+					<nav
+						role="navigation"
+						aria-label="main navigation"
+						className="navbar site-header"
+					>
+						<div className="container">
+							<div className="navbar-brand">
+								<Link to="/" className="navbar-item">
+									<h1 className="site-header__logo">
+										<LogoSymbol
+											height="1.75em"
+											width="1.75em"
+										/>
+										<img
+											src={data.logoText.publicURL}
+											alt={siteTitle}
+										/>
+									</h1>
+								</Link>
+								<a
+									role="button"
+									className={classNames(
+										'burger',
+										'navbar-burger',
+										{
+											'is-active': this.state.isOpen,
+										}
+									)}
+									aria-label="menu"
+									aria-expanded="false"
+									data-target="navbarBasicExample"
+									href="#"
+									onClick={this.handleToggle}
+								>
+									<span aria-hidden="true" />
+									<span aria-hidden="true" />
+									<span aria-hidden="true" />
+								</a>
+							</div>
+							<div
+								className={classNames(
+									'site-header__nav',
+									'navbar-menu',
+									{
+										'is-active': this.state.isOpen,
+									}
+								)}
+							>
+								<div className="navbar-end site-header__main-nav">
+									<Link className="navbar-item" to="/">
+										Getting Started
+									</Link>
+									<Link className="navbar-item" to="/">
+										Config
+									</Link>
+									<Link className="navbar-item" to="/">
+										Concepts
+									</Link>
+								</div>
+							</div>
+						</div>
+					</nav>
+				)}
+			/>
+		);
+	}
+}
 
 export default Header;

site/src/components/header.scss

@@ -1,13 +1,18 @@
 .site-header {
-	display: flex;
-	flex-flow: row nowrap;
-	background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
+	background-image: linear-gradient(120deg, #ecebeb 0%, #ebedee 100%);
 
 	& &__logo {
-		a {
-			text-decoration: none;
-			text-shadow: none;
-			background: transparent none;
+		img,
+		svg {
+			margin-right: 8px;
+		}
+	}
+
+	& &__main-nav {
+		.navbar-item {
+			text-transform: uppercase;
+			font-family: 'Dank Mono';
+			font-weight: bold;
 		}
 	}
 }

site/src/components/hero/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Window from '../window';
+import './index.scss';
+
+const Hero = props => {
+	const { title, children, subtitle, cta, terminalTitle } = props;
+	return (
+		<div className="wpackio-hero hero">
+			<div className="hero-body">
+				<div className="container">
+					<h1 className="wpackio-hero__title title">{title}</h1>
+					<Window
+						className="wpackio-hero__terminal"
+						title={terminalTitle}
+						type="terminal"
+					>
+						{children}
+					</Window>
+					<h2 className="wpackio-hero__subtitle subtitle">
+						{subtitle}
+					</h2>
+					{React.cloneElement(cta, {
+						className: 'wpackio-hero__cta button is-large is-white',
+					})}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Hero;