feat: replace travis-ci with github actions (#149)

* feat: replace travis-ci with github actions

* chore: cleanup

Author: Nir Galon

README.md

@@ -34,10 +34,10 @@ yo jekyll-starter-kit
   * Enable ES2015 features using Babel
   * Concatenate and minify JavaScript
   * Built-in preview server with BrowserSync
-  * Automagically create a service worker file
+  * Automagically create a service worker file for offline caching
   * Deploy the project to GitHub pages or Firebase with only one command
-  * Automagically test your project output on Travis-CI
-  * Test your project against [lighthouse](https://github.com/GoogleChrome/lighthouse) and fail Travis-CI with score below 80
+  * Automagically test your project output on GitHub Actions with [html-proofer](https://github.com/gjtorikian/html-proofer)
+  * Test your project against [lighthouse](https://github.com/GoogleChrome/lighthouse) and fail GitHub Action with score below 80/100
   * Awesome README file with all instructions and badges - like the pros :wink:
 
 ## Trouble with running the project?

__tests__/app.js

@@ -3,7 +3,7 @@ const path = require("path");
 const assert = require("yeoman-assert");
 const helpers = require("yeoman-test");
 
-describe("generator-html-css-es2015-sw-travis", () => {
+describe("generator-html-css-es2015-sw-githubactions", () => {
   beforeAll(() => {
     return helpers
       .run(path.join(__dirname, "../generators/app"))
@@ -16,7 +16,7 @@ describe("generator-html-css-es2015-sw-travis", () => {
         css: "stylesheets",
         es: true,
         sw: true,
-        travis: true,
+        githubactions: true,
         deploy: "github",
       })
       .toPromise();
@@ -44,7 +44,7 @@ describe("generator-html-css-es2015-sw-travis", () => {
       "package.json",
       "README.md",
       "robots.txt",
-      ".travis.yml",
+      ".github/workflows/continuous-integration.yml",
     ]);
   });
 
@@ -84,7 +84,7 @@ describe("generator-html-css-es2015-sw-travis", () => {
   });
 });
 
-describe("generator-pug-scss-travis", () => {
+describe("generator-pug-scss-githubactions", () => {
   beforeAll(() => {
     return helpers
       .run(path.join(__dirname, "../generators/app"))
@@ -97,7 +97,7 @@ describe("generator-pug-scss-travis", () => {
         css: "scss",
         es: false,
         sw: false,
-        travis: true,
+        githubactions: true,
         deploy: "firebase",
       })
       .toPromise();
@@ -107,7 +107,7 @@ describe("generator-pug-scss-travis", () => {
     assert.file([
       "_includes-pug",
       "scss",
-      ".travis.yml",
+      ".github",
       ".firebaserc",
       "firebase.json",
     ]);
@@ -123,7 +123,7 @@ describe("generator-pug-scss-travis", () => {
   });
 });
 
-describe("generator-pug-sass-no_travis", () => {
+describe("generator-pug-sass-no_githubactions", () => {
   beforeAll(() => {
     return helpers
       .run(path.join(__dirname, "../generators/app"))
@@ -136,7 +136,7 @@ describe("generator-pug-sass-no_travis", () => {
         css: "sass",
         es: true,
         sw: true,
-        travis: false,
+        githubactions: false,
         deploy: "firebase",
       })
       .toPromise();
@@ -147,7 +147,7 @@ describe("generator-pug-sass-no_travis", () => {
   });
 
   it("not created files", () => {
-    assert.noFile(["css", "scss", ".travis.yml"]);
+    assert.noFile(["css", "scss", ".github"]);
   });
 
   it("humans.txt content", () => {

generators/app/index.js

@@ -101,9 +101,9 @@ module.exports = class extends Generator {
       {
         // Prompts the user to decide if he want to validate his build.
         type: "confirm",
-        name: "travis",
+        name: "githubactions",
         message:
-          "(9/10) Would you like to enable HTMLProofer to validate your Jekyll output on Travis-CI?",
+          "(9/10) Would you like to enable HTMLProofer and lighthouse to validate your Jekyll output on GitHub Actions?",
         default: true,
       },
       {
@@ -144,7 +144,7 @@ module.exports = class extends Generator {
       this.includeSass = hasFeature(props.css, "sass");
       this.includeScss = hasFeature(props.css, "scss");
       this.includeSW = props.sw;
-      this.includeTravis = props.travis;
+      this.includeGitHubActions = props.githubactions;
       this.includeES = props.es;
       this.includeGithub = hasFeature(props.deploy, "github");
       this.includeFirebase = hasFeature(props.deploy, "firebase");
@@ -234,7 +234,7 @@ module.exports = class extends Generator {
         projectName: this.projectName,
         githubUsername: this.githubUsername,
         projectDescription: this.projectDescription,
-        includeTravis: this.includeTravis,
+        includeGitHubActions: this.includeGitHubActions,
         includeFirebase: this.includeFirebase,
       }
     );
@@ -268,7 +268,7 @@ module.exports = class extends Generator {
         includeSW: this.includeSW,
         includeGithub: this.includeGithub,
         includeFirebase: this.includeFirebase,
-        includeTravis: this.includeTravis,
+        includeGitHubActions: this.includeGitHubActions,
       }
     );
 
@@ -381,17 +381,19 @@ module.exports = class extends Generator {
       }
     );
 
-    // Copy travis file according to user choice.
-    if (this.includeTravis) {
+    // Copy github actions file according to user choice.
+    if (this.includeGitHubActions) {
       this.fs.copy(
-        this.templatePath("my-awesome-site/travis"),
-        this.destinationPath(".travis.yml")
+        this.templatePath(
+          "my-awesome-site/github/workflows/continuous-integration.yml"
+        ),
+        this.destinationPath(".github/workflows/continuous-integration.yml")
       );
 
       // Copy validate checklog file for lighthouse.
       this.fs.copy(
-        this.templatePath("my-awesome-site/validate/checklog"),
-        this.destinationPath("validate/checklog.js")
+        this.templatePath("my-awesome-site/lighthouserc.json"),
+        this.destinationPath("lighthouserc.json")
       );
     }
 
@@ -435,13 +437,6 @@ module.exports = class extends Generator {
       );
     }
 
-    console.log(
-      chalk
-        .keyword("red")
-        .bold(
-          "\n\t- Please visit https://travis-ci.org and enable it for this project."
-        )
-    );
     console.log(
       chalk
         .keyword("red")

generators/app/templates/my-awesome-site/README.md

@@ -1,6 +1,6 @@
 # <%= projectName %>
 
-[![license][license-image]][license-url] <% if (includeTravis) { -%>[![Build Status][travis-image]][travis-url] <% } -%>[![Dependency Status][dependencyci-image]][dependencyci-url]
+[![license][license-image]][license-url] <% if (includeGitHubActions) { -%>![Continuous Integration](https://github.com/<%= githubUsername %>/<%= projectName %>/workflows/Continuous%20Integration/badge.svg) <% } -%>[![Dependency Status][dependencyci-image]][dependencyci-url]
 
 > <%= projectDescription %>
 
@@ -37,7 +37,7 @@ You can easily deploy your site build with the command
 $ npm run deploy
 ```
 
-<% if (includeTravis) { -%>
+<% if (includeGitHubActions) { -%>
 ## Tests
 
 If you want to run the tests on your local machine please install `gem install html-proofer`. And then run the tests using
@@ -48,9 +48,5 @@ $ htmlproofer ./_site
 
 [license-image]: https://img.shields.io/badge/license-ISC-blue.svg
 [license-url]: https://github.com/<%= githubUsername %>/<%= projectName %>/blob/master/LICENSE
-<% if (includeTravis) { -%>
-[travis-image]: https://travis-ci.org/<%= githubUsername %>/<%= projectName %>.svg?branch=master
-[travis-url]: https://travis-ci.org/<%= githubUsername %>/<%= projectName %>
-<% } -%>
 [dependencyci-image]: https://dependencyci.com/github/<%= githubUsername %>/<%= projectName %>/badge
 [dependencyci-url]: https://dependencyci.com/github/<%= githubUsername %>/<%= projectName %>

generators/app/templates/my-awesome-site/_includes/footer.html

@@ -19,7 +19,7 @@ <h2 class="footer-heading">{{ site.title }}</h2>
             <a href="https://github.com/{{ site.github_username }}">
               <span class="icon  icon--github">
                 <svg viewBox="0 0 16 16">
-                  <path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
+                  <path fill="#757474" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
                 </svg>
               </span>
 
@@ -33,7 +33,7 @@ <h2 class="footer-heading">{{ site.title }}</h2>
             <a href="https://twitter.com/{{ site.twitter_username }}">
               <span class="icon  icon--twitter">
                 <svg viewBox="0 0 16 16">
-                  <path fill="#828282" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
+                  <path fill="#757474" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
                   c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/>
                 </svg>
               </span>

generators/app/templates/my-awesome-site/_includes/header.html

@@ -6,7 +6,7 @@
     <a class="site-title" href="/{{ site.baseurl }}">{{ site.title }}</a>
 
     <nav class="site-nav">
-      <a href="" class="menu-icon">
+      <a href="./" class="menu-icon">
         <svg viewBox="0 0 18 15">
           <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
           <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>

generators/app/templates/my-awesome-site/css/main.css

@@ -73,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
  * Links
  */
 a {
-  color: #2a7ae2;
+  color: #2873d6;
   text-decoration: none;
 }
 a:visited {
@@ -88,7 +88,7 @@ a:hover {
  * Blockquotes
  */
 blockquote {
-  color: #828282;
+  color: #757474;
   border-left: 4px solid #e8e8e8;
   padding-left: 15px;
   font-size: 18px;
@@ -163,7 +163,7 @@ pre > code {
   vertical-align: middle;
 }
 .icon > svg path {
-  fill: #828282;
+  fill: #757474;
 }
 
 /**
@@ -262,7 +262,7 @@ pre > code {
 
 .footer-col-wrapper {
   font-size: 15px;
-  color: #828282;
+  color: #757474;
   margin-left: -15px;
 }
 
@@ -327,7 +327,7 @@ pre > code {
 
 .post-meta {
   font-size: 14px;
-  color: #828282;
+  color: #757474;
 }
 
 .post-link {

generators/app/templates/my-awesome-site/github/workflows/continuous-integration.yml

@@ -0,0 +1,34 @@
+name: Continuous Integration
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/checkout@v2
+      - name: Set up Ruby 2.6
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+
+      - name: Setup wesite 🚧
+        run: |
+          npm install
+          bundle install
+          npm run build
+
+      - name: Run HTMLProofer 📚
+        run: |
+          gem install html-proofer
+          htmlproofer _site --check-html --allow-hash-href --empty-alt-ignore --disable-external
+
+      - name: Run Lighthouse 💡
+        uses: treosh/lighthouse-ci-action@v3
+        with:
+          configPath: './lighthouserc.json'