Streamline web 3rd party dependencies (#367)

- Complete jQuery removal for new default light theme.
- Improve anchors hover area by using absolute positions
- Use ES2015 syntax and newer APIs to improve code readibility
- Sidebar show/hide behaviour improvements
- Update highlightjs to version 9.16.2
- Update highlightjs license
- Get rid of unused files which were being copied unnecessarily
- Replace Bootstrap Font Awesome CDN URL to use Cloudflare standard one
- Make highlighting to happen once the DOM content has been loaded
- Change jQuery val name to avoid confusion now that jQuery is gone
- Update auxiliary languages highlighting through highlightjs to 9.15.10
- Make createResources method to copy only necessary hljs styles, not all
- Adjust docs header anchors to be shown in a more friendly way
- Make main page GitHub links to be external ones
- Make docs page GitHub links to be external ones
- Make rest of the external links really external by opening in new tabs
- Use https everywhere when valid
- Fix insecure deprecated http request on maven
- Fix all docs links, and start using them through the link tag
- Fix bad link with two slashes in the docs
- Small layout fxes for a vertically responsive behaviour on empty content
- Basic background slight improvements
- Browser console notice message 🤓 
- Homogenize page layouts with the rest of them, make them all vertically responsive
- Slight style adjustments, having navbar in all layouts looking the same
- Add more semantic tags, and include a11y attributes
- Improve ScalaTags layout composing by using just TypedTags Lists

docs/docs/docs/build-the-microsite.md

@@ -32,9 +32,9 @@ From version [`0.5.4`](https://github.com/47deg/sbt-microsites/releases/tag/v0.5
 
 Before publishing, a couple of requirements should be satisfied:
 
-1. Initialize the **gh-pages** branch, you can follow the instructions defined in the [sbt-ghpages](https://goo.gl/G0Ffv0) repository.
+1. Initialize the **gh-pages** branch, you can follow the instructions defined in the [sbt-ghpages](https://github.com/sbt/sbt-ghpages/blob/master/README.md#initializing-the-gh-pages-branch) repository.
 2. Define `micrositeGithubOwner` and `micrositeGithubRepo` settings and maybe the `micrositePushSiteWith` and `micrositeGithubRepo` settings.
-You can see more details regarding this in the [Configuring the Microsite](settings.html) section.
+You can see more details regarding this in the [Configuring the Microsite]({% link docs/settings.md %}) section.
 
 Once both requirements are satisfied, you can just run:
 
@@ -48,6 +48,6 @@ By default, the second task uses the [`sbt-ghpages` plugin](https://github.com/s
 
 If you don't have any domain names pointing to your site, you can see your microsite at:
 
-[http://username.github.io/your-microsite](http://username.github.io/your-microsite)
+[https://username.github.io/your-microsite](https://username.github.io/your-microsite)
 
 Enjoy!

docs/docs/docs/customize.md

@@ -10,7 +10,7 @@ The sbt-microsites plugin brings in different resources related to styles, image
 
 ## Images
 
-As you can see in the [Configuring the Microsite](settings.html) section, everything that you put in the directory associated with the `micrositeImgDirectory` setting  (`src/main/resources/microsite/img` by default) will be copied to the generated microsite. Therefore, you can add new images in that directory, which you would reference from your markdown documents, or, you could override the default images.
+As you can see in the [Configuring the Microsite]({% link docs/settings.md %}) section, everything that you put in the directory associated with the `micrositeImgDirectory` setting  (`src/main/resources/microsite/img` by default) will be copied to the generated microsite. Therefore, you can add new images in that directory, which you would reference from your markdown documents, or, you could override the default images.
 
 If you create your own images (which makes sense) and override the default ones, you can do it with these names and properties, placing them in your image directory:
 
@@ -22,7 +22,7 @@ If you create your own images (which makes sense) and override the default ones,
   - Microsite logo for the masthead in the `Features` layout:
     - `features-header.svg` -> **[500x330]**
 
-  - Icons used by the `features` meta tag that we saw in the [Layouts](layouts.html) section. These features and their icons will be shown in features section in the homeFeatures page.
+  - Icons used by the `features` meta tag that we saw in the [Layouts]({% link docs/layouts.md %}) section. These features and their icons will be shown in features section in the homeFeatures page.
     - First feature icon:
         - `first-feature-icon.svg` -> **[56x56]**
     - Second feature icon:
@@ -37,9 +37,9 @@ If you create your own images (which makes sense) and override the default ones,
   - Microsite logos in two different sizes for the documentation page:
       - `sidebar_brand.png` -> **[36x36]**
       - `sidebar_brand2x.png` -> **[72x72]**
-  - Background pattern image for home's Jumbotron. Jumbotron is a [Bootstrap](http://getbootstrap.com/) component. You can read more about it [here](http://getbootstrap.com/components/#jumbotron).
+  - Background pattern image for home's Jumbotron. Jumbotron is a [Bootstrap](https://getbootstrap.com/) component. You can read more about it [here](https://getbootstrap.com/components/#jumbotron).
       - `jumbotron_pattern.png` -> In this case, there isn't a size requirement for this image. The pattern is repeated according to the screen size.
-  - Icons used by the `technologies` meta tag that we saw in the [Layouts](layouts.html) section. These technologies and their icons will be shown in the sub-footer in the home page.
+  - Icons used by the `technologies` meta tag that we saw in the [Layouts]({% link docs/layouts.md %}) section. These technologies and their icons will be shown in the sub-footer in the home page.
       - First icon:
           - `first_icon.png` -> **[40x40]**
           - `first_icon2x.png` -> **[80x80]**
@@ -54,17 +54,17 @@ If you create your own images (which makes sense) and override the default ones,
 
 ## Styles
 
-`sbt-microsites` `pattern` style is completely based on [Bootstrap](http://getbootstrap.com/), adding some extra styles that make the microsites even more beautiful.
+`sbt-microsites` `pattern` style is completely based on [Bootstrap](https://getbootstrap.com/), adding some extra styles that make the microsites even more beautiful.
 
 That being said, you can personalize your microsite even further by using your own css files. In the same manner, as we've just seen for images, all the css files that you place in the directory associated with the `micrositeCssDirectory` setting (`src/main/resources/microsite/css` by default) will be copied to the generated microsite. Therefore, you can add new styles, or even override existing ones.
 
 ## Colors
 
-Colors can be customized through the `micrositePalette` setting (take a look at the [Configuring the Microsite](settings.html) section for a deeper explanation).
+Colors can be customized through the `micrositePalette` setting (take a look at the [Configuring the Microsite]({% link docs/settings.md %}) section for a deeper explanation).
 
 ## Syntax Highlighting
 
-As we mentioned in the [Configuring the Microsite](settings.html) section, `micrositeHighlightTheme` sbt setting allows you to specify the theme you want to use to highlight your code.
+As we mentioned in the [Configuring the Microsite]({% link docs/settings.md %}) section, `micrositeHighlightTheme` sbt setting allows you to specify the theme you want to use to highlight your code.
 
 It's important to mention that the theme name should match with the one located at https://cdnjs.com/libraries/highlight.js/.
 

docs/docs/docs/getting-start.md → docs/docs/docs/getting-started.md

@@ -6,7 +6,7 @@ permalink: docs/getting-started/
 
 # Prerequisites
 
-* [sbt](http://www.scala-sbt.org/) 1.3.3+
+* [sbt](https://www.scala-sbt.org/) 1.3.3+
 * [jekyll](https://jekyllrb.com/) 4.0.0+
 
 Here are a few hints for local and travis environments to satisfy the `jekyll` requirement.

docs/docs/docs/intro.md

@@ -21,7 +21,7 @@ A microsite is an instance of Jekyll that's ready to publish a static web page f
 
 This plugin is based on and utilizes other awesome sbt plugins to make it possible. It integrates everything in a few basic steps to automatically create and publish the microsite to [GitHub Pages](https://pages.github.com/).
 
-The plugin provides basic free styles, css, and image resources by default. Everything is based on the [Bootstrap](http://getbootstrap.com/) framework. If you want to personalize the color palette, styles, and images for your project, you can easily do so by viewing the steps in the [documentation](docs/).
+The plugin provides basic free styles, css, and image resources by default. Everything is based on the [Bootstrap](https://getbootstrap.com/) framework. If you want to personalize the color palette, styles, and images for your project, you can easily do so by viewing the steps in the [documentation]({% link docs/getting-started.md %}).
 
 In order to create microsites, this plugin directly uses the following plugins and libraries:
 

docs/docs/docs/layouts.md

@@ -11,8 +11,8 @@ Currently, the sbt-microsites plugin includes five different layouts:
 - There are two different options for the home section:
     - `home`: The landing page, the public face of your library or project.
     - `homeFeatures`: Another option for the landing page, choosing this option you could highlight some special features you consider your library offers. (This layout is not available for the classic pattern style)
-- `docs` (Optional): The page where the documentation for your library should be included. Most likely, you are seeing the `Documentation` page of this repo right now. It's optional, depending on the `micrositeDocumentationUrl` setting. Take a look at the [Configuring the Microsite](settings.html) section for an in-depth explanation.
-- `page` (Optional): Similar to `home`, but reducing the jumbotron layer and taking into account the submenu (jumbotron and other concepts related to style are explained in the [Customize](customize.html) section).
+- `docs` (Optional): The page where the documentation for your library should be included. Most likely, you are seeing the `Documentation` page of this repo right now. It's optional, depending on the `micrositeDocumentationUrl` setting. Take a look at the [Configuring the Microsite]({% link docs/settings.md %}) section for an in-depth explanation.
+- `page` (Optional): Similar to `home`, but reducing the jumbotron layer and taking into account the submenu (jumbotron and other concepts related to style are explained in the [Customize]({% link docs/customize.md %}) section).
 - Menu Partial: This abstract layout reads all the files in your project that fit a set of requirements, and sets up a menu under the jumbotron image. We'll see more details on this later.
 
 ## Home Layout
@@ -55,7 +55,7 @@ features:
 ```
 
 Basically this is all you´ll need to add to your `index.md` file using the `homeFeatures` layout.
-You can add up to three different features and sbt-microsites will dispose them after the masthead layer, every feature will be accompained by an icon that can be overridden as explained in the [Customize](customize.html) section.
+You can add up to three different features and sbt-microsites will dispose them after the masthead layer, every feature will be accompained by an icon that can be overridden as explained in the [Customize]({% link docs/customize.md %}) section.
 These features are identified for the set of keys (`first`, `second`, `third`).
 
 ## Docs Layout
@@ -88,26 +88,26 @@ title: <Document Title>
 
 ### How to setup the Docs Menu
 
-Looking at the [Configuring the Microsite](settings.html) section, in the directory configured under the `micrositeDataDirectory` setting, you need to create a new file named `menu.yml`. This `YAML` file will be accessed by the `Docs Layout` in order to create the menu. Let's see an example:
+Looking at the [Configuring the Microsite]({% link docs/settings.md %}) section, in the directory configured under the `micrositeDataDirectory` setting, you need to create a new file named `menu.yml`. This `YAML` file will be accessed by the `Docs Layout` in order to create the menu. Let's see an example:
 
 ```
 options:
   - title: Getting Started
-    url: docs/index.html
+    url: docs/index
     section: intro
 
   - title: Configuring the Microsite
-    url: docs/settings.html
+    url: docs/settings
 
   - title: Layouts
-    url: docs/layouts.html
+    url: docs/layouts
     section: resources
 
   - title: Customize
-    url: docs/customize.html
+    url: docs/customize
 
   - title: Build the microsite
-    url: docs/build-the-microsite.html
+    url: docs/build-the-microsite
 ```
 
 * The `options` key is mandatory. It'll be the parent of all the options defined here. Each `option` or menu item will contain:
@@ -120,17 +120,17 @@ options:
 ```
 options:
   - title: Introduction
-    url: index.html
+    url: index
     menu_section: intro
 
     nested_options:
      - title: Submenu 1
-       url: subfolder/submenu1.html
+       url: subfolder/submenu1
      - title: Submenu 2
-       url: subfolder/submenu2.html
+       url: subfolder/submenu2
 
   - title: Configuring the Microsite
-    url: settings.html
+    url: settings
 ```
 
 In this example, `Submenu 1` and `Submenu 2` will be nested under the `Introduction` menu option. At the same time, `submenu1` and `submenu2` would have the same section name as the parent. For instance, `submenu1.md` would have a header like this, where the `section` field matches the one defined in `menu.yml`:

docs/docs/docs/publish-with-travis.md

@@ -8,7 +8,7 @@ permalink: docs/publish-with-travis/
 
 In this section, we’re going to learn how to configure Travis so you can publish your microsite when you merge in master.
 
-There are two options for publishing the site. See [Configuring the Microsite](settings.html) section for more information.
+There are two options for publishing the site. See [Configuring the Microsite]({% link docs/settings.md %}) section for more information.
 
 ## Publish using sbt-ghpages
 

docs/docs/docs/settings.md

@@ -38,7 +38,7 @@ micrositeDescription := "This is the description of my Awesome Library"
 - `micrositeUrl`: The URL prefix of your site. This setting is necessary if you need to show a poster image `{micrositeUrl}{micrositeBaseUrl}/img/poster.png` of your site on Twitter. See also [Twitter Cards](https://cards-dev.twitter.com/validator) for more details.
 
 ```
-micrositeUrl := "http://yourdomain.io"
+micrositeUrl := "https://yourdomain.io"
 ```
 
 - `micrositeBaseUrl`: This setting brings the ability to set up a site base URL for your microsite. It's empty by default. However, you might need something like this:
@@ -47,15 +47,15 @@ micrositeUrl := "http://yourdomain.io"
 micrositeBaseUrl := "/yoursite"
 ```
 
-In this case, your microsite would be placed on: http://yourdomain.io/yoursite.
+In this case, your microsite would be placed on: https://yourdomain.io/yoursite.
 
-- `micrositeDocumentationUrl`: You might need documentation pages in a specific section of your microsite. This setting allows you to personalize this URL to fit your needs. As the **sbt-microsites** plugin provides a specific layout to improve the look of your documentation, we strongly recommend having a look at the [layouts](layouts.html) section. It's empty by default. Hence your `Documentation` link won't appear in the microsite in that case.
+- `micrositeDocumentationUrl`: You might need documentation pages in a specific section of your microsite. This setting allows you to personalize this URL to fit your needs. As the **sbt-microsites** plugin provides a specific layout to improve the look of your documentation, we strongly recommend having a look at the [layouts]({% link docs/layouts.md %}) section. It's empty by default. Hence your `Documentation` link won't appear in the microsite in that case.
 
 ```
 micrositeDocumentationUrl := "/yoursite/docs"
 ```
 
-Therefore, considering the example above, your microsite documentation would be placed on: http://yourdomain.io/yoursite/docs. Moreover, the layouts supplied by the plugin will provide a link in the upper-right area pointing to this URL (if it isn't empty).
+Therefore, considering the example above, your microsite documentation would be placed on: https://yourdomain.io/yoursite/docs. Moreover, the layouts supplied by the plugin will provide a link in the upper-right area pointing to this URL (if it isn't empty).
 
 
 - `micrositeDocumentationLabelDescription`: The default label description for the `micrositeDocumentationUrl` link in the homepage is `Documentation`. You can change it through this setting.
@@ -79,7 +79,7 @@ micrositeHomepage := "https://47deg.github.io/sbt-microsites/"
 - `micrositeOrganizationHomepage`: This particular setting is used for organizing the homepage URL, similar to the way we've seen in other properties. This link is used in the footer-left link in the microsite. By default, the value is taken from the sbt setting `organizationHomepage`. If you don´t provide any value for that setting, it will take it from the sbt setting `homepage`:
 
 ```
-micrositeOrganizationHomepage := "http://www.47deg.com"
+micrositeOrganizationHomepage := "https://www.47deg.com"
 ```
 
 - `micrositeTwitter`: This setting is used for the Twitter integration. This generates a meta that Twitter uses in its [Twitter Cards](https://cards-dev.twitter.com/validator).
@@ -244,7 +244,7 @@ These will be available to your pages by using `Jekyll`'s [include](https://jeky
 micrositeDataDirectory := (resourceDirectory in Compile).value / "site" / "mydatafiles"
 ```
 
-In the Documentation **Menu** case, as you can see in the [layouts](layouts.html) section, you need to create a file named `menu.yml` under the `micrositeDataDirectory` setting.
+In the Documentation **Menu** case, as you can see in the [layouts]({% link docs/layouts.md %}) section, you need to create a file named `menu.yml` under the `micrositeDataDirectory` setting.
 
 - `micrositeStaticDirectory`: You can also provide a static directory to your Jekyll site through the `micrositeStaticDirectory` setting. It's based on the idea of [Jekyll Static Files](https://jekyllrb.com/docs/static-files/). The default value is `(resourceDirectory in Compile).value / "microsite" / "static"`, but you can override it like this:
 
@@ -367,7 +367,7 @@ compiles the site.  **The strings are passed in unsanitized to the templating en
 ```scala
 micrositeCompilingDocsTool := WithMdoc
 ```
-If you are interested in learning where to place the markdown files according to the compilation tool chosen, please take a look at the [Typechecked Snippets](typechecked-snippets.html) section.
+If you are interested in learning where to place the markdown files according to the compilation tool chosen, please take a look at the [Typechecked Snippets]({% link docs/typechecked-snippets.md %}) section.
 
 - `includeFilter in makeSite`: Restrict the type of files that are included during the microsite build. The default value is `"*.html" | "*.css" | "*.png" | "*.jpg" | "*.jpeg" | "*.gif" | "*.js" | "*.swf" | "*.md" | "*.webm" | "*.ico" | "CNAME" | "*.yml" | "*.svg" | "*.json"` but you can override it like this:
 

docs/docs/docs/typechecked-snippets.md

@@ -15,7 +15,7 @@ As has been mentioned a couple of times throughout this tutorial, this plugin su
 - Set this property accordingly: `micrositeCompilingDocsTool := WithTut`.
 - Add your markdown files in this path by default: `src/main/tut/`.
 - If you want to place your documments in a different path, just set the sbt property `tutSourceDirectory := your-path` being _your-path_ a `SettingKey[File]`.
-- Mark the snippets that you want to compile, following this convention: **_```tut_** or any of its [modifiers](http://tpolecat.github.io/tut//modifiers.html)
+- Mark the snippets that you want to compile, following this convention: **_```tut_** or any of its [modifiers](https://tpolecat.github.io/tut/modifiers.html)
 
 
 ## mdoc

project/ProjectPlugin.scala

@@ -32,7 +32,7 @@ object ProjectPlugin extends AutoPlugin {
       sbtPlugin := true,
       resolvers ++= Seq(
         Resolver.sonatypeRepo("snapshots"),
-        "jgit-repo" at "http://download.eclipse.org/jgit/maven"),
+        "jgit-repo" at "https://download.eclipse.org/jgit/maven"),
       addSbtPlugin("org.tpolecat"  % "tut-plugin" % V.tut),
       addSbtPlugin("org.scalameta" % "sbt-mdoc"   % V.mdoc),
       addSbtPlugin(%("sbt-ghpages", isSbtPlugin = true)),

src/main/resources/_sass/light-style/_base.scss

@@ -27,18 +27,59 @@ h1,
 h2,
 h3,
 h4,
-h5 {
+h5,
+h6 {
   font-family: $title-font-family;
+  position: relative;
 }
+
 h1 {
   font-size: 2.2rem;
 }
+
 h2 {
   font-size: 2rem;
 }
+
 h3 {
   font-size: 1.6rem;
 }
+
 h4 {
   font-size: 1.3rem;
 }
+
+h5 {
+  font-size: 1.2rem;
+}
+
+h6 {
+  font-size: 1.1rem;
+}
+
+
+@keyframes bg-gradient {
+  0% {
+    background-position: 50%;
+  }
+
+  36% {
+    background-position: 60%;
+  }
+
+  40% {
+    background-position: 80%;
+  }
+
+  50% {
+    background-position: 40%;
+  }
+
+  66% {
+    background-position: 15%;
+  }
+
+  100% {
+    background-position: 50%;
+  }
+}

src/main/resources/_sass/light-style/_button.scss

@@ -0,0 +1,46 @@
+// Buttons
+// ----------------------------------------------
+// ----------------------------------------------
+.button {
+  display: block;
+  background: none;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > img {
+    vertical-align: bottom;
+  }
+}
+
+.close {
+  height: 28px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+
+  &::after,
+  &::before {
+    background-color: #fff;
+    content: " ";
+    height: 100%;
+    left: 98%;
+    position: absolute;
+    top: 34%;
+    width: 2px;
+  }
+
+  &::before {
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+}