first commit

.gitignore

@@ -0,0 +1,7 @@
+.bundle
+.cache
+.DS_Store
+.sass-cache
+build/
+.tmp
+node_modules/

.nvmrc

@@ -0,0 +1 @@
+stable

.ruby-version

@@ -0,0 +1 @@
+2.4.3

Gemfile

@@ -0,0 +1,7 @@
+source 'https://rubygems.org'
+
+gem 'middleman', '~> 4.2'
+gem 'middleman-autoprefixer', '~> 2.7'
+gem 'middleman-komponent', path: "../middleman-komponent"
+gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby]
+gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw]

Gemfile.lock

@@ -0,0 +1,117 @@
+PATH
+  remote: ../middleman-komponent
+  specs:
+    middleman-komponent (0.0.1)
+      middleman-core (>= 4.2.1)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (5.0.6)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    autoprefixer-rails (8.0.0)
+      execjs
+    backports (3.11.1)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.12.2)
+    compass-import-once (1.0.5)
+      sass (>= 3.2, < 3.5)
+    concurrent-ruby (1.0.5)
+    contracts (0.13.0)
+    dotenv (2.2.1)
+    erubis (2.7.0)
+    execjs (2.7.0)
+    fast_blank (1.0.0)
+    fastimage (2.1.1)
+    ffi (1.9.23)
+    haml (5.0.4)
+      temple (>= 0.8.0)
+      tilt
+    hamster (3.0.0)
+      concurrent-ruby (~> 1.0)
+    hashie (3.5.7)
+    i18n (0.7.0)
+    kramdown (1.16.2)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    memoist (0.16.0)
+    middleman (4.2.1)
+      coffee-script (~> 2.2)
+      compass-import-once (= 1.0.5)
+      haml (>= 4.0.5)
+      kramdown (~> 1.2)
+      middleman-cli (= 4.2.1)
+      middleman-core (= 4.2.1)
+      sass (>= 3.4.0, < 4.0)
+    middleman-autoprefixer (2.9.0)
+      autoprefixer-rails (~> 8.0)
+      middleman-core (>= 3.3.3)
+    middleman-cli (4.2.1)
+      thor (>= 0.17.0, < 2.0)
+    middleman-core (4.2.1)
+      activesupport (>= 4.2, < 5.1)
+      addressable (~> 2.3)
+      backports (~> 3.6)
+      bundler (~> 1.1)
+      contracts (~> 0.13.0)
+      dotenv
+      erubis
+      execjs (~> 2.0)
+      fast_blank
+      fastimage (~> 2.0)
+      hamster (~> 3.0)
+      hashie (~> 3.4)
+      i18n (~> 0.7.0)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
+      padrino-helpers (~> 0.13.0)
+      parallel
+      rack (>= 1.4.5, < 3)
+      sass (>= 3.4)
+      servolux
+      tilt (~> 2.0)
+      uglifier (~> 3.0)
+    minitest (5.11.3)
+    padrino-helpers (0.13.3.4)
+      i18n (~> 0.6, >= 0.6.7)
+      padrino-support (= 0.13.3.4)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.3.4)
+      activesupport (>= 3.1)
+    parallel (1.12.1)
+    public_suffix (3.0.2)
+    rack (2.0.4)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    sass (3.4.25)
+    servolux (0.13.0)
+    temple (0.8.0)
+    thor (0.20.0)
+    thread_safe (0.3.6)
+    tilt (2.0.8)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    uglifier (3.2.0)
+      execjs (>= 0.3.0, < 3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  middleman (~> 4.2)
+  middleman-autoprefixer (~> 2.7)
+  middleman-komponent!
+  tzinfo-data
+  wdm (~> 0.1)
+
+BUNDLED WITH
+   1.16.1

config.rb

@@ -0,0 +1,54 @@
+# Activate and configure extensions
+# https://middlemanapp.com/advanced/configuration/#configuring-extensions
+
+activate :autoprefixer do |prefix|
+  prefix.browsers = "last 2 versions"
+end
+
+activate :external_pipeline,
+  name: :webpack,
+  command: build? ? './node_modules/webpack/bin/webpack.js --bail' : './node_modules/webpack/bin/webpack.js --watch -d  --progress --color',
+  source: ".tmp/dist",
+  latency: 1
+
+activate :komponent
+
+# Layouts
+# https://middlemanapp.com/basics/layouts/
+
+# Per-page layout changes
+page '/*.xml', layout: false
+page '/*.json', layout: false
+page '/*.txt', layout: false
+
+# With alternative layout
+# page '/path/to/file.html', layout: 'other_layout'
+
+# Proxy pages
+# https://middlemanapp.com/advanced/dynamic-pages/
+
+# proxy(
+#   '/this-page-has-no-template.html',
+#   '/template-file.html',
+#   locals: {
+#     which_fake_page: 'Rendering a fake page with a local variable'
+#   },
+# )
+
+# Helpers
+# Methods defined in the helpers block are available in templates
+# https://middlemanapp.com/basics/helper-methods/
+
+# helpers do
+#   def some_helper
+#     'Helping'
+#   end
+# end
+
+# Build-specific configuration
+# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
+
+# configure :build do
+#   activate :minify_css
+#   activate :minify_javascript
+# end

package.json

@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "babel": "^6.23.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "^0.28.10",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-loader": "^2.1.0",
+    "style-loader": "^0.20.2",
+    "webpack": "^3.11.0",
+    "webpack-cli": "^2.0.9"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "postcss-cssnext": {}
+  }
+};

source/components/button/_button.erb

@@ -0,0 +1 @@
+<a class="button" href=<%= href %>><%= yield %></a>

source/components/button/button.css

@@ -0,0 +1,7 @@
+.button {
+  background-color: red;
+  color: white;
+  border-radius: 4px;
+  padding: 10px;
+  text-decoration: none;
+}

source/components/button/button.js

@@ -0,0 +1 @@
+import "./button.css";

source/index.html.erb

@@ -0,0 +1,11 @@
+---
+title: Welcome to Middleman
+---
+
+<h1>
+  Middleman is Running
+</h1>
+
+<% c "button", href: "#" do %>
+  CLICK HERE
+<% end %>

source/index.js

@@ -0,0 +1 @@
+import "components/button/button";

source/javascripts/site.js

@@ -0,0 +1 @@
+// This is where it all goes :)

source/layouts/layout.erb

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- Use the title from a page's frontmatter if it has one -->
+    <title><%= current_page.data.title || "Middleman" %></title>
+    <%= stylesheet_link_tag "site" %>
+  </head>
+  <body>
+    <%= yield %>
+    <%= javascript_include_tag "site" %>
+  </body>
+</html>

source/stylesheets/site.css.scss

@@ -0,0 +1,24 @@
+body {
+  background-color: #fbc547;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir",
+    "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans",
+    "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu",
+    "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+  padding: 18vh 1rem;
+  text-align: center;
+}
+
+a {
+  color: rgba(#000, 0.7);
+
+  &:focus,
+  &:hover {
+    color: rgba(#000, 0.6);
+  }
+}
+
+.middleman-logo {
+  margin-bottom: 1rem;
+  width: 10rem;
+}

webpack.config.js

@@ -0,0 +1,38 @@
+var webpack = require("webpack");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  entry: {
+    site: "./source/index.js"
+  },
+  resolve: {
+    alias: {
+      components: __dirname + "/source/components"
+    }
+  },
+  output: {
+    path: __dirname + "/.tmp/dist",
+    filename: "javascripts/[name].js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        use: ["babel-loader"]
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [
+            { loader: "css-loader", options: { importLoaders: 1 } },
+            "postcss-loader"
+          ],
+          publicPath: __dirname + "/source/stylesheets/site.scss"
+        })
+      }
+    ]
+  },
+  plugins: [new ExtractTextPlugin("stylesheets/site.css")]
+};