Update Jekyll example to upgrade Jekyll version, fix build errors and clean up files

examples/jekyll/.gitignore

@@ -1,8 +1,13 @@
-_site
-.DS_STORE
-.sass-cache
+.sass-cache/
 .jekyll-metadata
-node_modules
+
+vendor/
+.bundle
+
+node_modules/
 yarn.lock
 Gemfile.lock
-_includes/tailwind.js
+
+_site/
+
+.DS_STORE

examples/jekyll/Gemfile

@@ -1,8 +1,11 @@
 source "https://rubygems.org"
 
-gem "jekyll", "~> 3.8.5"
+gem "jekyll", "~> 3.9"
+gem "kramdown-parser-gfm", "~> 1.1.0"
 
 group :jekyll_plugins do
+  gem "jekyll-seo-tag"
+  gem "jekyll-feed"
   gem "jekyll-postcss"
   gem "jekyll-purgecss"
 end
@@ -12,4 +15,3 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.0" if Gem.win_platform?
-

examples/jekyll/Makefile

@@ -0,0 +1,15 @@
+default: install
+
+h help:
+	@egrep '^\S|^$$' Makefile
+
+install:
+	bundle config set --local path vendor/bundle
+	bundle install
+	yarn install
+
+s serve:
+	bundle exec jekyll serve --trace --livereload
+
+build:
+	JEKYLL_ENV=production bundle exec jekyll build --trace

examples/jekyll/README.md

@@ -2,48 +2,59 @@
 
 ## About
 
-This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to manage compiling your Tailwind. You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your `postcss.config.js`.
+This project uses [jekyll-postcss](https://github.com/mhanberg/jekyll-postcss) to compile Tailwind CSS for you.
 
-[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) is used to integrate Purgecss (only in production).
+You can use any [PostCSS](https://postcss.org) plugin by installing it with `yarn` or `npm` and adding it to your [postcss.config.js](postcss.config.js).
 
-## Usage
-
-### Locally
+The [jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) plugin is used to integrate Purgecss (only in production).
 
-`bundle exec jekyll serve`
 
-### Production
+## Installation
 
-`JEKYLL_ENV=production bundle exec jekyll build`
+### Requirements
 
-## Install
+- Ruby
+- Yarn and Node.js
 
-Once you configure the following files, run:
+### Install project dependencies
 
-```shell
+```sh
+$ bundle config set --local path vendor/bundle
 $ bundle install
 $ yarn install
+```
 
-$ yarn run tailwind init _includes/tailwind.config.js
+
+## Usage
+
+### Start dev server
+
+```sh
+$ bundle exec jekyll serve --trace --livereload
+```
+
+### Build for production
+
+```sh
+$ JEKYLL_ENV=production bundle exec jekyll build --trace
 ```
 
+
+## Configuration
+
+In a new project, setup your config files as below.
+
 ### Gemfile
 
+Add these gems to your [Gemfile](Gemfile). By using the plugins group as below, they will be enabled without being added to `plugins` in your config.
+
 ```ruby
 group :jekyll_plugins do
   gem "jekyll-postcss"
   gem "jekyll-purgecss"
 end
 ```
 
-### _config.yml
-
-```yaml
-plugins:
-  - jekyll-postcss
-  - jekyll-purgecss
-```
-
 ### package.json
 
 Update the version numbers to whatever is currently latest.
@@ -82,4 +93,8 @@ module.exports = {
 };
 ```
 
+### tailwind.config.js
 
+```sh
+$ yarn run tailwind init _includes/tailwind.config.js
+```

examples/jekyll/_config.yml

@@ -1,31 +1,23 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+### Site metadata ###
 
-# Build settings
-markdown: kramdown
-plugins:
-  - jekyll-postcss
-  - jekyll-purgecss
+title: Jekyll Tailwind Demo
+description:
+
+### Build settings ###
+
+url: ""
+baseurl: "/jekyll-with-tailwind"
 
-# Exclude from processing.
-# The following items will not be processed, by default. Create a custom list
-# to override the default setting.
 exclude:
+  - bin/
+  - vendor/
   - Gemfile
   - Gemfile.lock
-  - node_modules
+  - node_modules/
+  - package*.json
   - yarn.lock
-  - package-lock.json
-  - README.md
   - postcss.config.js
   - purgecss.config.js
+  - README.md
+  - Makefile
   - netlify.toml
-  - bin
-  - .gitignore

examples/jekyll/_includes/tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  future: {
+    // removeDeprecatedGapUtilities: true,
+    // purgeLayersByDefault: true,
+  },
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}

examples/jekyll/_layouts/default.html

@@ -3,17 +3,18 @@
   <meta charset="utf-8">
   {% feed_meta %}
   {% seo %}
-  <link rel="stylesheet" href="/css/site.css">
+  <link rel="stylesheet" href="{{ site.baseurl }}{% link css/styles.css %}">
 </head>
 <html>
-  <body>
-    <section>
-      {{ content }}
-    </section>
 
-    {% if jekyll.environment == 'production' %}
-      {% include analytics.html %}
-    {% endif %}
-  </body>
-</html>
+<body>
+  <section>
+    {{ content }}
+  </section>
+
+  {% if jekyll.environment == 'production' %}
+  {% include analytics.html %}
+  {% endif %}
+</body>
 
+</html>

examples/jekyll/css/site.css → examples/jekyll/css/styles.css

@@ -9,4 +9,4 @@
 
 /* Write your styles above this line. */
 
-@tailwind utilities;
+@import "tailwindcss/utilities";

examples/jekyll/index.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<h1> Welcome to jekyll-tailwind-starter!</h1>
+<h1>Welcome to jekyll-tailwind-starter!</h1>
 
 {% for post in site.posts %}
   <a href="{{ post.url }}">{{ post.title }}</a>