Adding Webpack bundling support

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
               ENV=staging
             fi;
 
-            JEKYLL_ENV=$ENV make build
+            JEKYLL_ENV=$ENV make docker-build
 
       - run:
           name: Publish to Trebuchet

.gitignore

@@ -6,3 +6,7 @@ vendor
 .DS_Store
 .env
 .jekyll-cache
+.idea/
+*.iml
+node_modules/
+assets/docs.bundle.js

.yarnrc

@@ -0,0 +1,6 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lastUpdateCheck 1555453773424
+save-prefix ""

Makefile

@@ -1,109 +1,172 @@
+BIN := ./node_modules/.bin
+
 # Core...
 JEKYLL_ENV ?= development
+DOCKER_TTY := docker run --rm -e "JEKYLL_ENV=$(JEKYLL_ENV)" -e "PLATFORM_API_TOKEN=$(PLATFORM_API_TOKEN)" -p 127.0.0.1:4000:4000/tcp --volume="$(PWD):/srv/jekyll" -it jekyll/jekyll
 
-.PHONY: docs
-docs:
-	make seed && \
-	make build && \
-	docker build . -t segment-docs:latest && \
-	echo "Running segment docs at http://localhost:4000/docsv2/" && \
-	docker run -p 4000:80 segment-docs:latest
+.PHONY: dev
+dev: node_modules vendor/bundle
+	@$(BIN)/concurrently --raw --kill-others -n webpack,jekyll \
+		"$(BIN)/webpack --mode=development --watch" \
+		"bundle exec jekyll serve --trace --incremental -H 0.0.0.0 -V"
 
 .PHONY: build
-build:
-	echo "Building site for ${JEKYLL_ENV}"
-	docker run -it \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-		bundle package && \
-		make deps && \
-		make catalog && \
-	  JEKYLL_ENV=${JEKYLL_ENV} bundle exec jekyll build
+build: node_modules vendor/bundle
+	@bundle exec rake catalog:update
+	@$(BIN)/webpack --mode=production
+	@JEKYLL_ENV=${JEKYLL_ENV} bundle exec jekyll build
 
-# Helper commands...
+.PHONY: package
+package: build
+	@docker build . -t segment-docs:latest
 
-.PHONY: nav
-nav:
-	bundle exec rake nav:update
+.PHONY: serve
+serve: package
+	@docker run -p 4000:80 segment-docs:latest
 
 .PHONY: catalog
-catalog:
+catalog: vendor/bundle
 	bundle exec rake catalog:update
 
-.PHONY: env
-env:
-	gem install bundler && \
-	bundle install && \
-	cp -i .env.example .env | true && \
-	echo "Environment configured"
-
-.PHONY: seed
-seed:
-	cp _templates/destinations.example.yml _data/catalog/destinations.yml && \
-	cp _templates/sources.example.yml _data/catalog/sources.yml
+.PHONY: deps
+deps: node_modules vendor/bundle
 
 .PHONY: clean
 clean:
-	bundle exec jekyll clean
-
-.PHONY: deps
-deps:
-	bundle install
+	@rm -Rf _site
+	@rm -Rf .sass-cache
+	@rm -Rf .jekyll-metadata
+	@rm -Rf .jekyll-cache
+	@rm -f assets/docs.bundle.js
 
-.PHONY: dev
-dev:
-	make clean && \
-	bundle exec jekyll serve --trace --incremental -H 0.0.0.0 -V
-
-.PHONE: trace
-trace:
-	bundle exec jekyll build --trace
-
-# Docker-based commands...
+.PHONY: clean-deps
+clean-deps:
+	@rm -Rf vendor
+	@rm -Rf node_modules
+	@rm -Rf .bundle
 
-.PHONY: docker-serve
-docker-serve:
-	docker run --rm \
-	  -e "JEKYLL_ENV=development" \
-	  -p 127.0.0.1:4000:4000/tcp \
-	  --volume="$(PWD):/srv/jekyll" \
-	  -it jekyll/jekyll \
-	  jekyll serve --trace --incremental -H 0.0.0.0 -V
+node_modules: package.json yarn.lock
+	yarn --frozen-lockfile
 
-.PHONY: docker-clean
-docker-clean:
-	docker run -it \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-	  jekyll clean
-
-.PHONY: docker-deps
-docker-deps:
-	docker run -it \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-		bundle install
+vendor/bundle: Gemfile Gemfile.lock
+	bundle install --path vendor/bundle
 
 .PHONY: docker-dev
 docker-dev:
-	docker run -it \
-	  -p 4000:4000 \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-	  jekyll serve --incremental -H 0.0.0.0
-		.PHONY: docs
-
-.PHONY: docker-nav
-docker-nav:
-	docker run -it \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-		bundle exec rake nav:update
-
-.PHONY: docker-catalog
-docker-catalog:
-	docker run -it \
-	  --volume="$(PWD):/srv/jekyll" \
-	  jekyll/jekyll \
-		bundle install && \
-		bundle exec rake catalog:update
+	$(DOCKER_TTY) make dev
+
+.PHONY: docker-build
+docker-build:
+	@$(DOCKER_TTY) make build
+
+#.PHONY: docs
+#docs: node_modules
+#	$(BIN)/webpack --mode=production
+#	make seed && \
+#	make build && \
+#	docker build . -t segment-docs:latest && \
+#	echo "Running segment docs at http://localhost:4000/docsv2/" && \
+#	docker run -p 4000:80 segment-docs:latest
+#
+#.PHONY: build
+#build: node_modules
+#	echo "Building site for ${JEKYLL_ENV}"
+#	docker run -it \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#		bundle package && \
+#		make deps && \
+#		make catalog && \
+#	  JEKYLL_ENV=${JEKYLL_ENV} bundle exec jekyll build
+#
+## Helper commands...
+#
+#.PHONY: nav
+#nav:
+#	bundle exec rake nav:update
+#
+#.PHONY: catalog
+#catalog:
+#	bundle exec rake catalog:update
+#
+#.PHONY: env
+#env:
+#	gem install bundler
+#	cp -i .env.example .env | true
+#	echo "Environment configured"
+#
+#.PHONY: seed
+#seed:
+#	cp _templates/destinations.example.yml _data/catalog/destinations.yml && \
+#	cp _templates/sources.example.yml _data/catalog/sources.yml
+#
+#.PHONY: clean
+#clean:
+#	bundle exec jekyll clean
+#
+#.PHONY: deps
+#deps:
+#	bundle install
+#
+#.PHONY: dev
+#dev: node_modules
+#	make clean && \
+#	$(BIN)/concurrently --raw --kill-others -n webpack,jekyll \
+#	  "$(BIN)/webpack --mode=development --watch" \
+#	  "bundle exec jekyll serve --trace --incremental -H 0.0.0.0 -V"
+#
+#
+#.PHONE: trace
+#trace:
+#	bundle exec jekyll build --trace
+#
+## Docker-based commands...
+#
+#.PHONY: docker-serve
+#docker-serve: node_modules
+#	$(BIN)/webpack --mode=development
+#	docker run --rm \
+#	  -e "JEKYLL_ENV=development" \
+#	  -p 127.0.0.1:4000:4000/tcp \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  -it jekyll/jekyll \
+#	  jekyll serve --trace --incremental -H 0.0.0.0 -V
+#
+#.PHONY: docker-clean
+#docker-clean:
+#	docker run -it \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#	  jekyll clean
+#
+#.PHONY: docker-deps
+#docker-deps:
+#	docker run -it \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#		bundle install
+#
+#.PHONY: docker-dev
+#docker-dev: node_modules
+#	docker run -it \
+#	  -p 4000:4000 \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#	  $(BIN)/concurrently --raw --kill-others -n webpack,jekyll \
+#	  "$(BIN)/webpack --mode=development --watch" \
+#	  "jekyll serve --incremental -H 0.0.0.0"
+#
+#.PHONY: docker-nav
+#docker-nav:
+#	docker run -it \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#		bundle exec rake nav:update
+#
+#.PHONY: docker-catalog
+#docker-catalog:
+#	docker run -it \
+#	  --volume="$(PWD):/srv/jekyll" \
+#	  jekyll/jekyll \
+#		bundle install && \
+#		bundle exec rake catalog:update

_config.yml

@@ -44,3 +44,14 @@ exclude:
   - README.md
   - conf/
   - _templates
+  - src/
+  - node_modules/
+  - package.json
+  - yarn.lock
+  - .idea/
+  - .sass-cache/
+  - .jekyll-cache/
+  - .github/
+  - .circleci/
+  - .run/
+  - webpack.config.js

_layouts/default.html

@@ -68,6 +68,7 @@
     JS for site
   {% endcomment %}
   <script src="{{ "./assets/main.js" | relative_url}}"></script>
+  <script src="{{ "./assets/docs.bundle.js" | relative_url}}"></script>
 
   {% comment %}
     Swifttype

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "segment-docs",
+  "version": "1.0.0",
+  "repository": "git@github.com:segmentio/segment-docs.git",
+  "author": "Jeff Knight <jeffrey.knight@segment.com>",
+  "license": "UNLICENSED",
+  "private": true,
+  "devDependencies": {
+    "@babel/cli": "7.6.0",
+    "@babel/core": "7.6.0",
+    "@babel/plugin-proposal-class-properties": "7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
+    "@babel/plugin-transform-runtime": "7.6.0",
+    "@babel/preset-env": "7.6.0",
+    "babel-loader": "8.0.6",
+    "concurrently": "4.1.2",
+    "webpack": "4.40.2",
+    "webpack-cli": "3.3.9"
+  }
+}

src/index.js

@@ -0,0 +1 @@
+console.log('hello world');

webpack.config.js

@@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: 'docs.bundle.js',
+        path: path.resolve(__dirname, 'assets'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            ['@babel/preset-env', { targets: '> 0.25%, not dead' }],
+                        ],
+                        plugins: [
+                            '@babel/plugin-proposal-class-properties',
+                            '@babel/plugin-proposal-object-rest-spread',
+                            '@babel/plugin-transform-runtime',
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+};